:root {
--main-bg-color: #FFFFFF;
--main-font-color: #73879C;
--main-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
--aux-bg-color: #EEEEEE;
--aux-font-color: #888888;
--pop-box-border: 1px solid rgba(90, 115, 142, 0.2);
--pop-box-separator: 1px solid rgba(90, 115, 142, 0.12);
--pop-box-hover: rgba(90, 115, 142, 0.2);
--table-bg-color: #F9F9FB;
--title-font-size: 22px;
--title-font-weight: 500;
--font-strong: 700;
--title-letter-spacing: 1.2px;
--subtitle-font-size: 14px;
--subtitle-font-weight: 400;
--subtitle-border: 1px solid #DDDDDD;
--header-action-font-color: #5A738E;
--header-action-font-size: 12px;
--header-action-font-weight: 300;
--webvital-good: #61C87A;
--webvital-impr: #F1A344;
--webvital-poor: #EB5A4E;
--webvital-none: #73879C66;
--webvital-kpi-bg-color: #73879C33;
}
.vibes-about-logo {
width: 128px;
float: right;
margin: -20px 8px 8px 20px;
transition: opacity 1.4s ease-in;
}
.markdown ul{
list-style: disc;
margin-left: 20px;
}
.markdown h3 {
margin: 40px 0 0 0;
}
.markdown blockquote {
border-left: 4px solid rgba(0,0,0,.07);
padding-left: 10px;
margin-left: 20px;
}
.markdown blockquote p,
.markdown blockquote code {
font-size: smaller !important;
}
.markdown pre code {
display: block;
padding: 14px;
border-radius: 4px;
padding-left: 36px;
}
.markdown code.language-console {
background-color: #23282d;
color:#AAAAAA;
}
.markdown code.language-bash {
background-color: #23282d;
color:#AAAAAA;
padding-left: 36px;
}
.vibes-row {
margin-bottom: 10px;
width: 100%;
}
.first-full-row {
margin-top: -8px;
}
.last-full-row {
/*margin-top: -8px;*/
}
.vibes-box-full-line {
display: inline-block;
padding: 8px;
background-color: var(--main-bg-color);
border-radius: 2px;
box-shadow: var(--main-box-shadow);
}
.vibes-box-60-40-line {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
padding: 8px;
margin-bottom: -8px;
}
.vibes-40-module {
flex-grow: 2;
flex-shrink: 2;
background-color: var(--main-bg-color);
border-radius: 2px;
box-shadow: var(--main-box-shadow);
margin-right: -8px;
margin-top: -8px;
padding: 8px;
width: 38%;
}
.vibes-box-50-50-line {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
padding: 8px;
margin-bottom: -8px;
}
.vibes-50-module-left {
flex-grow: 1;
flex-shrink: 1;
background-color: var(--main-bg-color);
border-radius: 2px;
box-shadow: var(--main-box-shadow);
margin-left: -8px;
margin-top: -8px;
margin-right: 10px;
padding: 8px;
height:310px;
width: 47.5%;
}
.vibes-50-module-right {
flex-grow: 1;
flex-shrink: 1;
background-color: var(--main-bg-color);
border-radius: 2px;
box-shadow: var(--main-box-shadow);
margin-left: 0px;
margin-top: -8px;
margin-right: -8px;
padding: 8px;
height:310px;
width: 47.5%;
}
.vibes-50-module-small {
height: 180px !important;
}
.vibes-60-module {
flex-grow: 3;
flex-shrink: 3;
background-color: var(--main-bg-color);
border-radius: 2px;
box-shadow: var(--main-box-shadow);
margin-left: -8px;
margin-top: -8px;
margin-right: 10px;
padding: 8px;
height:310px;
width: 58%;
}
.vibes-box-33-33-33-line {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
padding: 8px;
}
.vibes-33-module {
background-color: var(--main-bg-color);
border-radius: 2px;
box-shadow: var(--main-box-shadow);
margin-top: -8px;
padding: 8px;
width: 31%;
}
.vibes-33-left-module {
flex-grow: 1;
margin-left: -8px;
margin-right: 10px;
}
.vibes-33-center-module {
flex-grow: 1;
margin-left: 0px;
margin-right: 0px;
}
.vibes-multichart-handler {
display: block;
height: 300px;
}
.vibes-multichart-item {
position: absolute;
height: 200px;
visibility:hidden;
opacity:0;
width: 94%;
left: 2.4%;
}
.vibes-multichart-item svg {
overflow: visible;
}
.vibes-multichart-item.active {
visibility:visible;
opacity:1;
transition:visibility 0.6s linear,opacity 0.6s linear;
}
.vibes-33-right-module {
flex-grow: 1;
margin-left: 10px;
margin-right: -8px;
}
.vibes-module-title-bar {
border-bottom: var(--subtitle-border);
margin-left: 6px;
margin-right: 6px;
padding-bottom: 6px;
}
.vibes-module-title {
margin-left: 2px;
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
color: var(--main-font-color);
}
.vibes-module-more {
margin-right: 2px;
float: right;
}
.vibes-module-more a:focus{
color: transparent;
box-shadow: none;
outline: none;
}
.vibes-chart-button {
cursor: pointer;
}
.vibes-chart-button.not-ready {
filter: opacity(30%);
pointer-events: none;
}
.vibes-chart-button span {
padding: 3px;
background-color: transparent;
top: -2px;
border-radius: 2px;
}
.vibes-chart-button.active {
cursor: default;
}
.vibes-multichart-bars-container {
margin-top: -304px;
}
.vibes-multichart-bars-container .ct-grids,
.vibes-multichart-bars-container .ct-labels {
display: none;
}
.avibes-multichart-line-container .ct-grids line.ct-horizontal {
display: none;
}
.vibes-multichart-bars-container .ct-series-a .ct-bar {
stroke: var(--webvital-good);
}
.vibes-multichart-bars-container .ct-series-b .ct-bar {
stroke: var(--webvital-impr);
}
.vibes-multichart-bars-container .ct-series-c .ct-bar {
stroke: var(--webvital-poor);
}
#vibes-chart-time .ct-series-b .ct-line {
stroke: #9B59B6;
}
#vibes-chart-time .ct-series-b .ct-area {
fill: #9B59B6;
}
#vibes-chart-time .ct-series-c .ct-line {
stroke: #b2c326;
}
#vibes-chart-time .ct-series-c .ct-area {
fill: #b2c326;
}
#vibes-chart-net .ct-series-a .ct-line,
#vibes-chart-net .ct-series-b .ct-line,
#vibes-chart-net .ct-series-c .ct-line {
stroke: #3398DB;
}
#vibes-chart-nettime .ct-series-a .ct-area,
#vibes-chart-net .ct-series-b .ct-area,
#vibes-chart-net .ct-series-c .ct-area {
fill: #3398DB;
}
.vibes-chart-button.active span{
background-color: #CCCCCC;
filter: opacity(50%) grayscale(100%);
transition: all 0.6s linear ;
}
.vibes-module-content {
padding: 8px;
}
.vibes-home {
vertical-align: text-bottom;
}
.vibes-title {
font-size: var(--title-font-size);
font-weight: var(--title-font-weight);
letter-spacing: var(--title-letter-spacing);
color: var(--main-font-color);
padding: 2px 8px;
vertical-align: text-bottom;
}
.vibes-subtitle {
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
color: var(--aux-font-color);
vertical-align: text-bottom;
}
.vibes-site {
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
vertical-align: baseline;
}
.vibes-site-text {
background-color: var(--main-font-color);
color: var(--main-bg-color);
border-radius: 2px;
padding: 3px 14px;
}
.vibes-site-button {
background-color: var(--main-font-color);
color: var(--main-bg-color);
border-radius: 2px;
padding: 3px 4px 3px 14px;
}
.vibes-site-button img {
display: inline-block;
width: 12px;
vertical-align: text-top;
margin-left: 6px;
}
.vibes-picker {
margin-right: 8px;
float: right;
cursor: pointer;
vertical-align: text-bottom;
color: var(--header-action-font-color);
font-size: var(--header-action-font-size);
}
.vibes-picker-value {
vertical-align: text-top;
}
.vibes-switch {
margin-right: 16px;
float: right;
cursor: pointer;
vertical-align: text-bottom;
color: var(--header-action-font-color);
font-size: var(--header-action-font-size);
}
.vibes-switch span {
vertical-align: middle;
}
.vibes-text-inbound-switch,
.vibes-text-outbound-switch {
cursor: default;
}
.vibes-top-line {
margin-bottom: -8px;
}
.vibes-top-line-title {
color: var(--aux-font-color);
}
.vibes-top-line-content {
margin-bottom: 16px;
margin-top: -2px;
}
.vibes-top-line-title-text {
vertical-align: baseline;
}
.vibes-top-line-title-text a {
text-decoration: none;
color: var(--aux-font-color);
}
.vibes-bar-graph {
display: inline-block;
width: 87%;
height: 6px;
border-radius: 2px;
background-color: var(--aux-bg-color);
}
.vibes-bar-graph-value {
height: 6px;
border-radius: 2px;
background-color: var(--main-font-color);
}
.vibes-bar-detail {
float: right;
display: inline-block;
color: var(--main-font-color);
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
margin-top: -8px;
}
.ct-labels foreignObject:first-child {
display: none;
}
.ct-labels .ct-horizontal {
transform: translateX(-7px);
}
.ct-labels .ct-vertical {
transform: translateX(-6px) translateY(6px);
}
.vibes-minor-data {
opacity: 0.4;
}
.vibes-table {
width:100%;
border-spacing: 0px;
}
.vibes-table th {
display: none;
font-size: var(--header-action-font-size);
color: var(--aux-font-color);
font-weight: var(--header-action-font-weight);
text-align: left;
}
.vibes-table td {
color: var(--main-font-color);
}
.vibes-table tr:nth-child(even) {
background: var(--table-bg-color);
}
.vibes-table-text a {
text-decoration: none;
color: var(--aux-font-color);
}
.vibes-table small {
font-size: xx-small;
}
.vibes-pie-box {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
}
.vibes-pie-graph {
flex-grow: 1;
margin-right: 10%;
}
.vibes-pie-legend {
flex-grow: 1;
float: left;
margin-left: 10%;
}
.vibes-pie-graph-handler-120 {
width: 120px;
height: 120px;
float:right;
}
.vibes-pie-graph-handler-200 {
width: 200px;
height: 200px;
float:right;
padding-top: 30px;
}
.vibes-pie-graph-handler-100 {
width: 100px;
height: 100px;
float:right;
}
.vibes-pie-graph-nodata-handler-120 {
width: 100%;
height: 120px;
text-align:center;
color: #73879C;
font-style: italic;
}
.vibes-pie-graph-nodata-handler-200 {
width: 100%;
height: 200px;
text-align:center;
color: #73879C;
font-style: italic;
}
.vibes-multichart-nodata-handler {
width: 100%;
/*height: 200px;*/
text-align:center;
color: #73879C;
font-style: italic;
}
.vibes-pie-graph-nodata-handler-100 {
width: 100%;
height: 100px;
text-align:center;
color: #73879C;
font-style: italic;
}
.vibes-pie-legend-item {
display: flex;
color: var(--aux-font-color);
}
.vibes-webvital-box {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: baseline;
justify-content: space-around;
align-items: flex-start;
width: 100%;
}
.vibes-kpiwebvital-box {
flex-grow: 1;
flex-shrink: 1;
text-align: center;
margin-left: 10px;
flex-basis: min-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-content: center;
align-items: center;
height: 270px;
}
.vibes-corewebvital-box {
flex-grow: 3;
flex-shrink: 3;
}
.vibes-kpiwebvital-item {
padding: 10px;
border-radius: 4px;
background: var(--webvital-kpi-bg-color);
width: 90%;
}
.vibes-webvital-separator {
border-bottom: var(--pop-box-separator);
line-height: 0;
margin: 8px 2px;
}
.vibes-webvital-widget-container {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
align-items: center;
}
.vibes-webvital-widget-text{
margin: 6px;
background-color: #F6F7F7;
padding: 8px;
flex: 1 1 0;
min-width: fit-content;
border-radius: 3px;
}
.vibes-webvital-definition {
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
color: var(--main-font-color);
padding-left: 6px;
}
.vibes-webvital-widget-definition {
padding-left: 6px;
}
.vibes-webvital-definition a{
font-size: var(--subtitle-font-size);
font-weight: var(--font-strong);
color: var(--main-font-color);
text-decoration: none;
}
.vibes-webvital-widget-definition a{
text-decoration: none;
}
.vibes-webvital-definition:before {
margin-right: 6px;
}
.vibes-webvital-definition-good:before {
content: '●';
color: var(--webvital-good);
}
.vibes-webvital-definition-impr:before {
content: '▲';
color: var(--webvital-impr);
}
.vibes-webvital-definition-poor:before {
content: '■';
color: var(--webvital-poor);
}
.vibes-webvital-definition-none:before {
content: '×';
color: var(--webvital-none);
}
.vibes-webvital-definition-hit:before {
content: '\00A0';
color: var(--webvital-none);
}
.vibes-webvital-index {
float: right;
margin-right: 20px;
font-size: 18px;
font-weight: 700;
}
.vibes-webvital-widget-index {
font-size: large;
font-weight: 600;
padding-left: 26px;
}
.vibes-webvital-index-good {
color: var(--webvital-good);
}
.vibes-webvital-index-impr {
color: var(--webvital-impr);
}
.vibes-webvital-index-poor {
color: var(--webvital-poor);
}
.vibes-webvital-index-none{
color: var(--webvital-none);
font-size: 18px;
font-weight: 700;
}
.vibes-kpiwebvital-unit{
color: var(--webvital-none);
font-size: 14px;
font-weight: 600;
}
.vibes-kpiwebvital-number {
color: var(--main-font-color);
font-size: 18px;
font-weight: 700;
margin-top: 8px;
}
.vibes-kpiwebvital-title {
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
color: var(--main-font-color);
}
.vibes-kpiwebvital-title a {
font-size: var(--subtitle-font-size);
font-weight: var(--font-strong);
color: var(--main-font-color);
text-decoration: none;
}
.vibes-webvital-bar {
padding: 8px 8px 8px 2px;
height: 20px;
}
.vibes-webvital-bar-none {
color: var(--webvital-none);
text-align: center;
vertical-align: middle;
background-color: #EEEEEE;
border-radius: 20px;
height: 20px;
width: 100%;
text-transform: uppercase;
font-size: x-small;
line-height: 2.1em;
}
.vibes-webvital-bar-good {
color: #FFFFFF;
text-align: left;
vertical-align: middle;
background-color: var(--webvital-good);
border-radius: 20px;
height: 20px;
position: relative;
}
.vibes-webvital-bar-impr {
color: #FFFFFF;
text-align: left;
vertical-align: middle;
background-color: var(--webvital-impr);
border-radius: 20px;
height: 20px;
position: relative;
}
.vibes-webvital-bar-poor {
color: #FFFFFF;
text-align: left;
vertical-align: middle;
background-color: var(--webvital-poor);
border-radius: 20px;
height: 20px;
position: relative;
}
.vibes-webvital-percent {
font-size: xx-small;
font-weight: 700;
vertical-align: middle;
display: inline-block;
text-align: center;
}
.vibes-list-item-good {
color: var(--webvital-good);
font-weight: 600;
}
.vibes-list-item-impr {
color: var(--webvital-impr);
font-weight: 600;
}
.vibes-list-item-poor {
color: var(--webvital-poor);
font-weight: 600;
}
.vibes-list-item-hint {
font-weight: 600;
}
.vibes-map-handler {
vertical-align: middle;
text-align: center;
height: 244px;
width: 100%;
display: inline-block;
}
button.btn {
color: var(--main-bg-color);
background-color: var(--header-action-font-color);
border: none;
border-radius: 2px;
}
@media only screen and (max-width: 300px) {
.vibes-bar-graph {
width: 75%;
}
}
@media only screen and (min-width: 501px) {
.vibes-table th {
display: table-cell;
padding: .25em 1em;
}
.vibes-table td {
display: table-cell;
padding: .25em .5em;
}
}
@media only screen and (max-width: 500px) {
.vibes-table td {
display: block;
padding: .25em .5em;
}
.vibes-about-logo {
width: 92px;
margin: -16px 6px 6px 16px;
}
.vibes-title,
.vibes-subtitle,
.vibes-switch {
float: unset;
display: block;
padding: 2px 8px;
}
.vibes-switch,
.vibes-picker {
padding: 2px 8px;
}
.vibes-site {
float: right;
margin-top: 3px;
}
}
@media only screen and (min-width: 1101px) {
.vibes-span-container {
width: 70%;
}
}
@media only screen and (min-width: 501px) and (max-width: 1100px) {
.vibes-span-container {
width: 80%;
}
}
@media only screen and (max-width: 500px) {
.vibes-bar-graph {
width: 80%;
}
.vibes-span-container {
width: 80%;
}
}
@media only screen and (max-width: 300px) {
.vibes-bar-graph {
width: 70%;
}
.vibes-span-container {
width: 90%;
}
}
@media only screen and (max-width: 1100px) {
.vibes-40-module {
margin-left: -8px;
margin-top: 0px;
width: 100%;
height: auto;
}
.vibes-60-module {
margin-right: -8px;
margin-bottom: 10px;
width: 100%;
height: auto;
}
.vibes-50-module-left {
margin-right: -8px;
margin-bottom: 10px;
width: 100%;
height: auto;
}
.vibes-50-module-right {
margin-left: -8px;
margin-top: 0px;
height: auto;
}
.vibes-33-module {
margin-right: -8px;
margin-bottom: 18px;
margin-top: -8px;
width: 100%;
}
.vibes-33-right-module {
margin-left: -8px;
margin-bottom: 0;
}
.vibes-33-center-module {
margin-left: -8px;
}
.vibes-pie-graph-handler-200 {
padding-top: unset;
}
}
@media only screen and (min-width: 1801px) {
.vibes-box {
width: 99.5%;
}
}
@media only screen and (max-width: 1800px) {
.vibes-box {
width: 99%;
}
}
@media only screen and (max-width: 1400px) {
.vibes-box {
width: 98.5%;
}
}
@media only screen and (max-width: 1000px) {
.vibes-box {
width: 98%;
}
}
@media only screen and (max-width: 600px) {
.vibes-box {
width: 97.5%;
}
}
@media only screen and (max-width: 450px) {
.vibes-box {
width: 97%;
}
}
@media only screen and (max-width: 375px) {
.vibes-box {
width: 96%;
}
}
@media only screen and (max-width: 300px) {
.vibes-box {
width: 95.5%;
}
}
.vibes-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.vibes-select-wrapper select {
display: none;
}
.vibes-select {
position: relative;
display: inline-block;
}
.vibes-select-trigger {
position: relative;
display: block;
cursor: pointer;
}
.vibes-options {
z-index: 3001;
position: absolute;
display: block;
width: max-content;
margin-top: 7px;
border: var(--pop-box-border);
border-radius: 4px;
box-sizing: border-box;
background: var(--main-bg-color);
font-size: var(--header-action-font-size);
font-weight: var(--subtitle-font-weight);
letter-spacing: 0px;
color: #5A738E;
box-shadow: var(--main-box-shadow);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.vibes-select.opened .vibes-options {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.vibes-select.countries.opened .vibes-options-container {
height: 100px;
overflow-y: scroll;
}
.vibes-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%;
left: 10px;
width: 7px;
height: 7px;
margin-bottom: -3px;
border-top: var(--pop-box-border);
border-left: var(--pop-box-border);
background: var(--main-bg-color);
transform: rotate(45deg);
}
.option-hover:before {
background: #f9f9f9;
}
.vibes-option {
position: relative;
display: block;
padding: 8px 12px;
cursor: pointer;
margin: 8px 0px;
}
.vibes-option-subtext {
color: var(--aux-font-color);
margin-top: -2px;
}
.vibes-option:hover {
background-color: var(--pop-box-hover);
}
.vibes-option.selection {
background-color: var(--header-action-font-color);
color: var(--main-bg-color);
}
.vibes-span-details {
}
.vibes-span-summary {
display: block !important;
cursor: context-menu;
}
.vibes-span-container {
position: absolute !important;
background-color: #ffffff;
padding: 10px;
z-index: 99;
box-shadow: var(--main-box-shadow);;
border: 1px solid #DDDDDD;
border-radius: 4px;
}
.vibes-span-widget {
padding-top: 8px;
}
.vibes-span-wrap {
display: flex;
line-height: 0.9em;
padding-left: 9px;
padding-right: 9px;
}
.vibes-span-wrap:hover {
background-color: rgba(0, 0, 0, 0.03);
}
.vibes-span-text {
width: 25%;
border-right: 1px solid #F0F0F0;
padding-top: 5px;
font-size: x-small;
display: inline-flex;
justify-content: space-between;
}
.vibes-span-text-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vibes-span-text-time {
float: right;
padding: 0 4px;
font-weight: 600;
}
.vibes-span-timeline {
width: 75%;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: text-bottom;
background-image: linear-gradient(to right,transparent 0%, transparent 50%, #F8F8F8 50%);
}
.vibes-span-timeline-blank {
height: 20px;
display: inline-block;
}
.vibes-span-timeline-line {
height: 5px;
display: inline-block;
text-align: center;
border-radius: 2px;
vertical-align: text-top;
margin-top: 1px;
}
.vibes-span-timeline-text {
font-size: xx-small;
background: rgba(255, 255, 255, 0.4);
padding: 0 3px;
border-radius: 3px;
margin:0;
vertical-align: text-top;
}
.vibes-datepicker-value,
.vibes-exergue {
vertical-align: middle;
}
.vibes-picker .vibes-select-wrapper,
.vibes-datepicker {
margin-left:24px;
}
.users .vibes-option,
.channel .vibes-option,
.countries .vibes-option{
margin: 0 !important;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}