Current Directory: /home/astoriaah/www/media/com_sh404sef/assets/css/dev
Viewing File: /home/astoriaah/www/media/com_sh404sef/assets/css/dev/analytics_fe.css
/**
* @build_title_build@
*
* @author @build_author_build@
* @copyright @build_copyright_build@
* @package @build_package_build@
* @license @build_license_build@
* @version @build_version_full_build@
*
* @build_current_date_build@
*/
/************************************************************************************************************
Import base definitions and variables
************************************************************************************************************/
/**
* @build_title_build@
*
* @author @build_author_build@
* @copyright @build_copyright_build@
* @package @build_package_build@
* @license @build_license_build@
* @version @build_version_full_build@
*
* @build_current_date_build@
*/
/* Responsive definitions **********************************************************************************************/
/************************************************************************************************************
Variables shared backend/frontend
************************************************************************************************************/
/* Utilities ***********************************************************************************************************/
/************************************************************************************************************
Variables shared backend/frontend
************************************************************************************************************/
/************************************************************************************************************
Variables specific to frontend
************************************************************************************************************/
/************************************************************************************************************
Code specific to frontend
************************************************************************************************************/
/**
Layout
*/
.sh404sef-fe-ga-header-container {
position: fixed;
top: 0;
z-index: 1000;
height: 5em;
width: 100%;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
background: #4B3145;
color: #FFFFFF;
}
.sh404sef-fe-ga-main-container {
width: 100%;
padding-top: 5em;
padding-bottom: 3em;
overflow: auto;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
}
@media only screen and (max-width: 1023px) {
.sh404sef-fe-ga-main-container {
grid-template-columns: 1em 8fr 1em;
}
}
.sh404sef-fe-ga-footer-container {
position: fixed;
bottom: 0;
z-index: 1000;
height: 3em;
width: 100%;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
background: #4B3145;
color: #FFFFFF;
}
.sh404sef-fe-ga-header {
grid-column: 2 / 3;
display: flex;
justify-content: space-between;
align-items: center;
}
.sh404sef-analytics-rendering-area {
grid-column: 2 / 3;
}
.sh404sef-fe-ga-footer {
grid-column: 2 / 3;
display: flex;
justify-content: center;
align-items: center;
}
/**
Joomla fixes
*/
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #FFFFFF;
}
body *:before,
body *:after {
display: none;
}
label {
display: block;
margin-bottom: 5px;
}
/** Calendar **/
[class^="icon-"],
[class*=" icon-"],
[class^="fa-calendar"],
[class*=" fa-calendar"] {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 0.25em;
line-height: 14px;
}
body span.icon-calendar:before,
body span.fa-calendar:before {
content: "+";
display: block;
}
/************************************************************************************************************
Import all other CSS, shared with backend
************************************************************************************************************/
/**
* @build_title_build@
*
* @author @build_author_build@
* @copyright @build_copyright_build@
* @package @build_package_build@
* @license @build_license_build@
* @version @build_version_full_build@
*
* @build_current_date_build@
*/
/************************************************************************************************************
General layout
************************************************************************************************************/
/**
Graphs
*/
.sh404sef-analytics-graphs {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "global visits" "perf perf" "traffic traffic" "topurls topreferrers";
grid-column-gap: 2em;
grid-row-gap: 3em;
padding: 1em 0;
background: #FFFFFF;
border: 1px solid #FFFFFF;
}
.sh404sef-analytics-graphs .analyticscontent_container {
grid-column: 1 / 3;
padding: 1em;
background: #F5F5F5;
border-radius: 0.5em;
}
.sh404sef-analytics-graphs .analyticscontent_sub_containers {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.sh404sef-analytics-graphs .analyticscontent {
max-height: 99999px;
transition: max-height 1.2s ease-in-out;
}
.sh404sef-analytics-graphs .analyticscontent.sh404sef-loading {
max-height: 0;
}
.sh404sef-analytics-graphs .analyticscontent_global_container {
grid-area: global;
}
.sh404sef-analytics-graphs .analyticscontent_visits_container {
grid-area: visits;
}
.sh404sef-analytics-graphs .analyticscontent_traffic_container {
grid-area: traffic;
}
.sh404sef-analytics-graphs .analyticscontent_perf_container {
grid-area: perf;
}
.sh404sef-analytics-graphs .analyticscontent_topurls_container {
grid-area: topurls;
}
.sh404sef-analytics-graphs .analyticscontent_topreferrers_container {
grid-area: topreferrers;
}
.sh404sef-analytics-graphs .analyticscontent_title {
padding-bottom: 0.5em;
margin-bottom: 2em;
font-size: 1.5em;
color: #333333;
border-bottom: 2px solid #BBBBBB;
}
.sh404sef-analytics-graphs .analyticscontent_title.analyticscontent_title_topurls,
.sh404sef-analytics-graphs .analyticscontent_title.analyticscontent_title_topreferrers {
margin-bottom: 1em;
}
.sh404sef-analytics-graphs .sh404sef-analytics-content_global_data {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1em 0;
}
.sh404sef-analytics-graphs .analyticscontent_global_container {
padding: 1em 5em;
}
@media only screen and (max-width: 1023px) {
.sh404sef-analytics-graphs .analyticscontent_global_container {
padding: 1em 2em;
}
}
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-daterange-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
font-size: 0.85em;
color: #777777;
}
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-daterange-wrapper .sh404sef-analytics-range,
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-daterange-wrapper .sh404sef-analytics-details {
padding: 0.5em 1em;
}
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-daterange-wrapper .sh404sef-analytics-range {
color: #333333;
}
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-column {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 1.5em 1em;
margin: 0.5em 0;
background: #FFFFFF;
}
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-title {
display: block;
padding: 0;
text-align: center;
color: #777777;
}
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-value {
display: block;
padding: 0.5em 0.5em 0 0.5em;
font-size: 2em;
text-align: center;
color: #333333;
}
@media only screen and (max-width: 1279px) {
.sh404sef-analytics-graphs {
grid-template-areas: "global global" "perf perf" "visits visits" "traffic traffic" "topurls topurls" "topreferrers topreferrers";
}
.sh404sef-analytics-graphs .analyticscontent_title {
padding: 0 1em 0.5em;
}
}
@media only screen and (max-width: 1023px) {
.sh404sef-analytics-graphs .analyticscontent_global .sh404sef-analytics-daterange-wrapper {
justify-content: center;
text-align: center;
}
}
.sh404sef-analytics-rendering-area-admin-home .sh404sef-analytics-graphs {
grid-template-areas: "global global" "visits visits";
}
/**
Tables
*/
.sh404sef-analytics-table {
padding: 0;
margin: 0;
}
.sh404sef-analytics-table .sh404sef-analytics-row {
display: grid;
padding: 0.5em 0;
text-align: right;
}
.sh404sef-analytics-table .sh404sef-analytics-row-empty {
padding: 0.5em 0;
min-height: 4em;
}
.sh404sef-analytics-table .sh404sef-analytics-cell {
padding: 0 1em;
line-height: 2;
min-height: 4em;
}
.sh404sef-analytics-table .sh404sef-analytics-index {
color: #777777;
}
.sh404sef-analytics-table .sh404sef-analytics-percent {
font-weight: 700;
}
.sh404sef-analytics-table .sh404sef-analytics-head {
padding: 0 0 0.5em;
}
.sh404sef-analytics-table .sh404sef-analytics-head.sh404sef-analytics-row {
border-bottom: 1px solid #BBBBBB;
}
.sh404sef-analytics-table .sh404sef-analytics-head .sh404sef-analytics-cell {
display: flex;
justify-content: flex-end;
align-items: flex-end;
min-height: 0;
color: #777777;
font-weight: 700;
}
.sh404sef-analytics-table .sh404sef-analytics-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.sh404sef-analytics-table .sh404sef-analytics-footer.sh404sef-analytics-row {
border-top: 1px solid #BBBBBB;
}
.sh404sef-analytics-table .sh404sef-analytics-footer .sh404sef-analytics-page-item {
display: inline-block;
margin: 0.5em 1em;
}
.sh404sef-analytics-table .sh404sef-analytics-footer .sh404sef-analytics-counter {
min-width: 5em;
text-align: right;
font-size: 1.1em;
font-weight: 700;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-row {
grid-template-columns: 3em 5fr 1fr 1fr 7em;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-index {
grid-column: 1 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-url {
grid-column: 2 / 3;
overflow-wrap: break-word;
word-break: break-word;
font-weight: 700;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-head .sh404sef-analytics-url {
justify-content: start;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-url {
text-align: left;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-pageviews {
grid-column: 3 / 4;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-percent {
grid-column: 4 / 5;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-time-on-page {
grid-column: 5 / 6;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-row {
grid-template-columns: 3em 3fr 5fr 1fr 1fr 7em;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-index {
grid-column: 1 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-source,
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-referral-path {
overflow-wrap: break-word;
word-break: break-word;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-source {
font-weight: 700;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-source {
grid-column: 2 / 3;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-referral-path {
grid-column: 3 / 4;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-head .sh404sef-analytics-source,
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-head .sh404sef-analytics-referral-path {
justify-content: start;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-source,
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-referral-path {
text-align: left;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-pageviews {
grid-column: 4 / 5;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-percent {
grid-column: 5 / 6;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-time-on-site {
grid-column: 6 / 7;
}
@media only screen and (max-width: 1023px) {
.sh404sef-analytics-table .sh404sef-analytics-row {
border-bottom: 1px solid #BBBBBB;
}
.sh404sef-analytics-table .sh404sef-analytics-row-empty {
border-bottom: 1px solid transparent;
}
.sh404sef-analytics-table .sh404sef-analytics-footer.sh404sef-analytics-row {
border-top: 1px solid #BBBBBB;
border-bottom: 1px solid transparent;
}
.sh404sef-analytics-table .sh404sef-analytics-rows .sh404sef-analytics-row:last-child {
border-bottom: 1px solid transparent;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls {
font-size: 0.9em;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-row {
grid-template-columns: 3em 1fr 1fr 7em;
grid-template-rows: 1fr 1fr;
min-height: 8em;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-row.sh404sef-analytics-head {
grid-area: head;
min-height: 0;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-row-empty {
min-height: 8em;
border-bottom: 1px solid transparent;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-index {
grid-column: 1 / 2;
grid-row: 1 / 1;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-url {
grid-column: 2 / 5;
grid-row: 1 / 1;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-pageviews {
grid-column: 2 / 3;
grid-row: 2 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-percent {
grid-column: 3 / 4;
grid-row: 2 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topurls .sh404sef-analytics-time-on-page {
grid-column: 4 / 5;
grid-row: 2 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers {
font-size: 0.9em;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-row {
grid-template-columns: 3em 1fr 1fr 7em;
grid-template-rows: 1fr 1fr 1fr;
min-height: 8em;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-row.sh404sef-analytics-head {
min-height: 0;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-row-empty {
min-height: 8em;
border-bottom: 1px solid transparent;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-index {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-source {
grid-column: 2 / 5;
grid-row: 1 / 2;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-referral-path {
grid-column: 2 / 5;
grid-row: 2 / 3;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-pageviews {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-percent {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.sh404sef-analytics-table.sh404sef-analytics-topreferrers .sh404sef-analytics-time-on-site {
grid-column: 4 / 5;
grid-row: 3 / 4;
}
}
/**
Errors
*/
.sh404sef-analytics-errors_container {
display: flex;
align-items: center;
transition: height 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s;
height: 0;
word-wrap: break-word;
overflow: hidden;
z-index: 100;
background: #FF5259;
color: #000000;
}
.sh404sef-analytics-errors_container.sh404sef-visible {
height: 3em;
margin: 0 0 1em;
padding: 1em;
}
.sh404sef-analytics-api-error {
overflow-wrap: break-word;
word-wrap: break-word;
color: #FF5259;
}
@media only screen and (max-width: 1023px) {
.sh404sef-analytics-api-error {
width: 20em;
margin: 0 auto;
}
}
/**
Charts
*/
.analyticscontent_sub_container {
width: 350px;
}
.analyticscontent_sub_containers .analyticscontent_sub_container {
margin-bottom: 2em;
}
@media only screen and (min-width: 480px) {
.analyticscontent_sub_container.analyticscontent_social_container,
.analyticscontent_sub_container.analyticscontent_geo_container {
width: 450px;
}
}
.analyticscontent_sub_container:last-child {
margin-bottom: 0;
}
/**
Filters
*/
.sh404sef-analytics-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
.sh404sef-analytics-filters .sh404sef-analytics-filters-element {
margin: 0.5em 1em;
}
.sh404sef-analytics-filters .input-append,
.sh404sef-analytics-filters .input-prepend {
margin-bottom: 0;
}
.sh404sef-analytics-filters-top {
padding: 1em 0 2em;
margin-bottom: 1em;
}
.sh404sef-analytics-filters-bottom {
padding: 2em 0;
margin: 0 0 2em;
}
/************************************************************************************************************
Override some of those rules shared with backend
************************************************************************************************************/