845 lines
21 KiB
CSS
845 lines
21 KiB
CSS
/*
|
|
Layout css file
|
|
New classes, indexes and overrides must be defined here
|
|
|
|
Every category must follow convention:
|
|
* Category must contain page name (Exception are base classes)
|
|
* Page name must be followed by word "elements"
|
|
|
|
By example: index elements
|
|
*/
|
|
|
|
/* base elements */
|
|
* {
|
|
font-family: var(--font-family-roboto);
|
|
transition: var(--transition-all);
|
|
}
|
|
|
|
body {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: var(--height-body);
|
|
width: var(--width-body);
|
|
background: var(--background-body);
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: var(--top-logo);
|
|
z-index: 1;
|
|
width: var(--width-logo);
|
|
text-align: center;
|
|
letter-spacing: var(--letter-spacing-10px);
|
|
font-size: var(--font-size-42pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-logo);
|
|
}
|
|
|
|
.logo-description {
|
|
position: absolute;
|
|
top: var(--top-logo-description);
|
|
z-index: 1;
|
|
width: var(--width-logo-description);
|
|
text-align: center;
|
|
letter-spacing: var(--letter-spacing-2px);
|
|
font-size: var(--font-size-9pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-logo-description);
|
|
}
|
|
|
|
.clouds {
|
|
height: var(--height-clouds);
|
|
width: var(--width-clouds);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.clouds > img {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: var(--height-clouds-img);
|
|
width: var(--width-clouds-img);
|
|
}
|
|
|
|
.clouds > .first {
|
|
top: var(--top-clouds-first);
|
|
}
|
|
|
|
.clouds > .second {
|
|
top: var(--top-clouds-second);
|
|
left: var(--left-clouds-second);
|
|
}
|
|
|
|
.background {
|
|
position: absolute;
|
|
top: 0;
|
|
height: var(--height-background);
|
|
width: var(--width-background);
|
|
}
|
|
|
|
/* setup elements */
|
|
.dhtmlx_message_area {
|
|
width: var(--width-dhtmlx-message-area);
|
|
}
|
|
|
|
.setup {
|
|
margin-top: calc((100vh / 2) - (var(--height-setup) / 2));
|
|
max-width: var(--max-width-setup);
|
|
min-width: var(--min-width-setup);
|
|
}
|
|
|
|
.setup-div {
|
|
display: block;
|
|
position: relative;
|
|
margin: auto;
|
|
height: var(--height-setup-div);
|
|
width: var(--width-setup-div);
|
|
opacity: 0;
|
|
background: white;
|
|
border-radius: var(--border-radius-setup-div);
|
|
overflow: hidden;
|
|
box-shadow: var(--box-shadow-setup-div) var(--black-opacity-10);
|
|
animation: fade-in-setup-div;
|
|
animation-duration: var(--animation-duration-fade-in-setup-div);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.form {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: var(--height-form);
|
|
width: var(--width-form);
|
|
background: var(--background-form);
|
|
}
|
|
|
|
.form-squares-grid {
|
|
position: relative;
|
|
bottom: var(--bottom-form-squares-grid);
|
|
left: var(--left-form-squares-grid);
|
|
}
|
|
|
|
.form-squares-grid > div {
|
|
display: inline-block;
|
|
margin-right: var(--margin-right-form-squares-grid-div);
|
|
height: var(--height-form-squares-grid-div);
|
|
width: var(--width-form-squares-grid-div);
|
|
box-shadow: var(--box-shadow-form-squares-grid-div) var(--black-opacity-10);
|
|
}
|
|
|
|
.form-squares-grid > .first {
|
|
background: var(--background-form-squares-grid-first);
|
|
}
|
|
|
|
.form-squares-grid > .second {
|
|
background: var(--background-form-squares-grid-second);
|
|
transform: var(--transform-form-squares-grid-second);
|
|
}
|
|
|
|
.form-squares-grid > .third {
|
|
background: var(--background-form-squares-grid-third);
|
|
}
|
|
|
|
.label-main-settings {
|
|
position: relative;
|
|
margin-bottom: var(--margin-bottom-label-main-settings);
|
|
text-align: center;
|
|
letter-spacing: var(--letter-spacing-2px);
|
|
font-size: var(--font-size-9pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-label-main-settings);
|
|
}
|
|
|
|
.main-settings {
|
|
position: relative;
|
|
left: var(--left-main-settings);
|
|
height: var(--height-main-settings);
|
|
width: var(--width-main-settings);
|
|
background: var(--background-main-settings);
|
|
}
|
|
|
|
.main-settings > input {
|
|
position: relative;
|
|
top: var(--top-main-settings-input);
|
|
width: var(--width-main-settings-input);
|
|
text-align: center;
|
|
font-size: var(--font-size-14pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-main-settings-input);
|
|
background: var(--background-main-settings-input);
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.main-settings > input::placeholder {
|
|
color: var(--color-main-settings-input-placeholder);
|
|
}
|
|
|
|
.main-settings > input::-webkit-input-placeholder {
|
|
color: var(--color-main-settings-input-placeholder);
|
|
}
|
|
|
|
.main-settings > input::-moz-placeholder {
|
|
opacity: 1;
|
|
}
|
|
|
|
.main-settings > input::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
.main-settings > select {
|
|
position: relative;
|
|
top: var(--top-main-settings-select);
|
|
height: var(--height-main-settings-select);
|
|
width: var(--width-main-settings-select);
|
|
font-size: var(--font-size-14pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-main-settings-input);
|
|
background: var(--background-main-settings-select);
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.main-settings-underline {
|
|
position: relative;
|
|
top: var(--top-main-settings-underline);
|
|
height: var(--height-main-settings-underline);
|
|
width: var(--width-main-settings-underline);
|
|
background: var(--background-main-settings-underline);
|
|
box-shadow: var(--box-shadow-main-settings-underline) var(--black-opacity-10);
|
|
}
|
|
|
|
.label-additional-settings {
|
|
position: relative;
|
|
top: var(--top-label-additional-settings);
|
|
text-align: center;
|
|
letter-spacing: var(--letter-spacing-2px);
|
|
font-size: var(--font-size-9pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-label-additional-settings);
|
|
}
|
|
|
|
.additional-settings {
|
|
position: relative;
|
|
top: var(--top-additional-settings);
|
|
}
|
|
|
|
.button-squares-grid {
|
|
position: relative;
|
|
top: var(--top-button-squares-grid);
|
|
}
|
|
|
|
.button-squares-grid > div {
|
|
display: inline-block;
|
|
position: absolute;
|
|
height: var(--height-button-squares-grid-div);
|
|
width: var(--width-button-squares-grid-div);
|
|
opacity: 0;
|
|
box-shadow: var(--box-shadow-button-squares-grid-div) var(--black-opacity-10);
|
|
}
|
|
|
|
.button-squares-grid > .first {
|
|
left: var(--left-button-squares-grid-first);
|
|
background: var(--background-button-squares-grid-first);
|
|
animation: fade-in-square;
|
|
animation-duration: var(--animation-duration-fade-in-square);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.button-squares-grid > .second {
|
|
left: var(--left-button-squares-grid-second);
|
|
visibility: hidden;
|
|
background: var(--background-button-squares-grid-second);
|
|
}
|
|
|
|
.theme-buttons > input {
|
|
position: relative;
|
|
top: var(--top-theme-buttons-input);
|
|
height: var(--height-theme-buttons-input);
|
|
width: var(--width-theme-buttons-input);
|
|
letter-spacing: var(--letter-spacing-2px);
|
|
font-size: var(--font-size-14pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-theme-buttons-input);
|
|
border: 0;
|
|
outline: none;
|
|
box-shadow: var(--box-shadow-theme-buttons-input) var(--black-opacity-10);
|
|
}
|
|
|
|
.theme-buttons > input:active {
|
|
transform: var(--transform-theme-buttons-input-active);
|
|
}
|
|
|
|
.theme-buttons > .first {
|
|
left: var(--left-theme-buttons-first);
|
|
margin-right: var(--margin-right-theme-buttons-first);
|
|
background: var(--background-theme-buttons-first);
|
|
}
|
|
|
|
.theme-buttons > .second {
|
|
background: var(--background-theme-buttons-second);
|
|
}
|
|
|
|
.additional-settings > label {
|
|
top: var(--top-background-settings);
|
|
left: var(--left-background-settings);
|
|
height: var(--height-background-settings);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.additional-settings > label > input {
|
|
vertical-align: middle;
|
|
position: relative;
|
|
left: var(--left-background-settings);
|
|
border-style: none;
|
|
}
|
|
|
|
.additional-settings > label > span {
|
|
vertical-align: middle;
|
|
position: relative;
|
|
}
|
|
|
|
.additional-settings > .color-selector {
|
|
display: block;
|
|
position: relative;
|
|
margin-top: var(--height-background-settings);
|
|
left: var(--left-background-settings-color-selector);
|
|
width: var(--width-background-settings-input);
|
|
background: var(--background-background-settings-color-selector);
|
|
box-shadow: var(--box-shadow-background-settings-input) var(--black-opacity-10);
|
|
}
|
|
|
|
.port {
|
|
position: relative;
|
|
top: var(--top-port);
|
|
left: var(--left-port);
|
|
height: var(--height-port);
|
|
width: var(--width-port);
|
|
text-align: center;
|
|
letter-spacing: var(--letter-spacing-5px);
|
|
font-size: var(--font-size-14pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-port);
|
|
background: var(--background-port);
|
|
border-radius: var(--border-radius-port);
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.port::placeholder {
|
|
letter-spacing: 0;
|
|
color: var(--color-port-placeholder);
|
|
}
|
|
|
|
.port::-webkit-input-placeholder {
|
|
letter-spacing: 0;
|
|
color: var(--color-port-placeholder);
|
|
}
|
|
|
|
.port::-moz-placeholder {
|
|
letter-spacing: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.port::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
.submit {
|
|
position: absolute;
|
|
bottom: var(--bottom-submit);
|
|
left: var(--left-submit);
|
|
height: var(--height-submit);
|
|
width: var(--width-submit);
|
|
letter-spacing: var(--letter-spacing-2px);
|
|
font-size: var(--font-size-14pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-submit);
|
|
background: var(--background-submit);
|
|
border: 0;
|
|
border-radius: 0.625rem;
|
|
outline: none;
|
|
box-shadow: var(--box-shadow-submit) var(--black-opacity-10);
|
|
}
|
|
|
|
.submit:active {
|
|
transform: var(--transform-submit-active);
|
|
}
|
|
|
|
/* index elements */
|
|
.index {
|
|
margin-top: calc((100vh / 2) - (var(--height-index-xl) / 2));
|
|
max-width: var(--max-width-index-xl);
|
|
min-width: var(--min-width-index-xl);
|
|
}
|
|
|
|
@media only screen and (max-width: 75rem) {
|
|
.index {
|
|
margin-top: calc((100vh / 2) - (var(--height-index-lg) / 2));
|
|
max-width: var(--max-width-index-lg);
|
|
min-width: var(--min-width-index-lg);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 48rem) {
|
|
.index {
|
|
margin-top: calc((100vh / 2) - (var(--height-index-md) / 2));
|
|
max-width: var(--max-width-index-md);
|
|
min-width: var(--min-width-index-md);
|
|
}
|
|
|
|
.sm-hidden {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.col-sm-12.col-md-6.col-lg-6.col-xl-4 {
|
|
max-width: var(--max-width-col-sm-12-col-md-6-col-lg-6-col-xl-4);
|
|
min-width: var(--min-width-col-sm-12-col-md-6-col-lg-6-col-xl-4);
|
|
}
|
|
|
|
.col-lg-12.col-xl-8 {
|
|
max-width: var(--max-width-col-lg-12-col-xl-8);
|
|
min-width: var(--min-width-col-lg-12-col-xl-8);
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: var(--margin-bottom-card);
|
|
max-height: var(--max-height-card);
|
|
min-height: var(--min-height-card);
|
|
opacity: 0;
|
|
border: none;
|
|
border-radius: var(--border-radius-card);
|
|
overflow: hidden;
|
|
background: var(--background-card);
|
|
box-shadow: var(--box-shadow-card) var(--black-opacity-10);
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
display: flex;
|
|
top: var(--top-header);
|
|
left: var(--left-header);
|
|
}
|
|
|
|
.hw-logo {
|
|
height: var(--height-hw-logo);
|
|
width: var(--width-hw-logo);
|
|
border-radius: var(--border-radius-hw-logo);
|
|
}
|
|
|
|
.hw-logo.first {
|
|
background: var(--background-hw-logo-first);
|
|
}
|
|
|
|
.hw-logo.second {
|
|
background: var(--background-hw-logo-second);
|
|
}
|
|
|
|
.hw-logo.third {
|
|
background: var(--background-hw-logo-third);
|
|
}
|
|
|
|
.label-hw-info {
|
|
position: absolute;
|
|
top: var(--top-label-hw-info);
|
|
left: var(--left-label-hw-info);
|
|
}
|
|
|
|
.hw-type {
|
|
font-size: var(--font-size-18pt);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-hw-type);
|
|
}
|
|
|
|
.hw-name {
|
|
font-size: var(--font-size-12pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-hw-name);
|
|
}
|
|
|
|
.usage {
|
|
position: absolute;
|
|
height: var(--height-usage);
|
|
width: var(--width-usage);
|
|
bottom: var(--bottom-usage);
|
|
left: var(--left-usage);
|
|
}
|
|
|
|
.main-hw-info {
|
|
position: absolute;
|
|
right: 0;
|
|
height: var(--height-main-hw-info);
|
|
}
|
|
|
|
.hw-usage > div {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: var(--bottom-hw-usage-div);
|
|
font-size: var(--font-size-62pt);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.usage-value {
|
|
display: flex;
|
|
margin-right: var(--margin-right-usage-value);
|
|
}
|
|
|
|
.usage-value > span {
|
|
position: relative;
|
|
height: var(--height-usage-value-span);
|
|
width: var(--width-usage-value-span);
|
|
color: var(--color-usage-value-span);
|
|
animation: wiggle-usage-value;
|
|
animation-duration: var(--animation-duration-wiggle-usage-value);
|
|
}
|
|
|
|
.usage-value > .first {
|
|
animation-delay: var(--animation-delay-usage-value-first);
|
|
}
|
|
|
|
.usage-value > .second {
|
|
animation-delay: var(--animation-delay-usage-value-second);
|
|
}
|
|
|
|
.usage-value > .third {
|
|
animation-delay: var(--animation-delay-usage-value-third);
|
|
}
|
|
|
|
.usage-postfix {
|
|
color: var(--color-usage-postfix);
|
|
}
|
|
|
|
.info-label {
|
|
position: relative;
|
|
top: var(--top-info-label);
|
|
width: var(--width-info-label);
|
|
text-align: center;
|
|
font-size: var(--font-size-9pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-info-label);
|
|
background: transparent;
|
|
}
|
|
|
|
.usage-underline {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: var(--height-usage-underline);
|
|
width: var(--width-usage-underline);
|
|
}
|
|
|
|
.usage-underline.first {
|
|
background: var(--background-usage-underline-first);
|
|
}
|
|
|
|
.usage-underline.second {
|
|
background: var(--background-usage-underline-second);
|
|
}
|
|
|
|
.usage-underline.third {
|
|
background: var(--background-usage-underline-third);
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: var(--height-footer);
|
|
width: var(--width-footer);
|
|
}
|
|
|
|
.footer.first {
|
|
background: var(--background-footer-first);
|
|
}
|
|
|
|
.footer.second {
|
|
background: var(--background-footer-second);
|
|
}
|
|
|
|
.footer.third {
|
|
background: var(--background-footer-third);
|
|
}
|
|
|
|
.inner-dot {
|
|
position: absolute;
|
|
top: var(--top-inner-dot);
|
|
left: var(--left-inner-dot);
|
|
height: var(--height-inner-dot);
|
|
width: var(--width-inner-dot);
|
|
border-radius: var(--border-radius-inner-dot);
|
|
}
|
|
|
|
.detailed-hw-info {
|
|
position: absolute;
|
|
}
|
|
|
|
.detailed-hw-info > div {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: var(--top-detailed-hw-info-div);
|
|
height: var(--height-detailed-hw-info-div);
|
|
width: var(--width-detailed-hw-info-div);
|
|
text-align: center;
|
|
font-size: var(--font-size-14pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-detailed-hw-info-div);
|
|
}
|
|
|
|
.detailed-hw-info > .first {
|
|
left: var(--left-detailed-hw-info-first);
|
|
}
|
|
|
|
.detailed-hw-info > .second {
|
|
left: var(--left-detailed-hw-info-second);
|
|
}
|
|
|
|
.detailed-hw-info > .third {
|
|
left: var(--left-detailed-hw-info-third);
|
|
}
|
|
|
|
.dividers {
|
|
position: absolute;
|
|
}
|
|
|
|
.dividers > div {
|
|
display: inline-block;
|
|
position: absolute;
|
|
height: var(--height-dividers-div);
|
|
width: var(--width-dividers-div);
|
|
background: var(--background-dividers-div);
|
|
}
|
|
|
|
.dividers > .first {
|
|
left: var(--left-dividers-first);
|
|
}
|
|
|
|
.dividers > .second {
|
|
left: var(--left-dividers-second);
|
|
}
|
|
|
|
.uptime {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: var(--height-uptime);
|
|
width: var(--width-uptime);
|
|
background: var(--background-uptime);
|
|
}
|
|
|
|
.uptime-rectangle-grid {
|
|
position: absolute;
|
|
top: var(--top-uptime-rectangle-grid);
|
|
left: var(--left-uptime-rectangle-grid);
|
|
}
|
|
|
|
.values-grid > div {
|
|
display: inline-block;
|
|
margin-right: var(--margin-right-values-grid-div);
|
|
height: var(--height-values-grid-div);
|
|
width: var(--width-values-grid-div);
|
|
text-align: center;
|
|
font-size: var(--font-size-42pt);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-values-grid-div);
|
|
background: var(--background-values-grid-div);
|
|
border-radius: 2px
|
|
}
|
|
|
|
.values-grid > div:first-child {
|
|
width: var(--day-width-values-grid-div);
|
|
}
|
|
|
|
.values-grid > div > p {
|
|
position: relative;
|
|
bottom: var(--bottom-values-grid-div-p);
|
|
}
|
|
|
|
.labels-grid > div {
|
|
display: inline-block;
|
|
margin-right: var(--margin-right-labels-grid-div);
|
|
margin-bottom: var(--margin-bottom-labels-grid-div);
|
|
height: var(--height-labels-grid-div);
|
|
width: var(--width-labels-grid-div);
|
|
text-align: center;
|
|
font-size: var(--font-size-9pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-labels-grid-div);
|
|
background: var(--background-labels-grid-div);
|
|
border-radius: 2px
|
|
}
|
|
|
|
.labels-grid > div:first-child {
|
|
width: var(--day-width-labels-grid-div);
|
|
}
|
|
|
|
.chart-label {
|
|
position: absolute;
|
|
top: var(--top-chart-label);
|
|
left: var(--left-chart-label);
|
|
font-size: var(--font-size-18pt);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-chart-label);
|
|
}
|
|
|
|
.chart-triangle-grid {
|
|
position: absolute;
|
|
top: var(--top-chart-triangle-grid);
|
|
}
|
|
|
|
.chart-triangle-grid > div {
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-width: var(--border-width-chart-triangle-grid-div);
|
|
opacity: 0;
|
|
animation: fade-in-triangle;
|
|
animation-duration: var(--animation-duration-fade-in-triangle);
|
|
animation-delay: var(--animation-delay-chart-triangle-grid-div);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.chart-triangle-grid > .first {
|
|
left: var(--left-chart-triangle-grid-first);
|
|
border-color: var(--border-color-chart-triangle-grid-first) transparent;
|
|
}
|
|
|
|
.chart-triangle-grid > .second {
|
|
left: var(--left-chart-triangle-grid-second);
|
|
border-color: var(--border-color-chart-triangle-grid-second) transparent;
|
|
}
|
|
|
|
.chart-triangle-grid > .third {
|
|
left: var(--left-chart-triangle-grid-third);
|
|
border-color: var(--border-color-chart-triangle-grid-third) transparent;
|
|
}
|
|
|
|
.chart-rectangle-grid {
|
|
position: absolute;
|
|
top: var(--top-chart-rectangle-grid);
|
|
}
|
|
|
|
.chart-rectangle-grid > div {
|
|
display: inline-block;
|
|
position: absolute;
|
|
height: var(--height-chart-rectangle-grid-div);
|
|
width: var(--width-chart-rectangle-grid-div);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chart-rectangle-grid > div:active {
|
|
transform: var(--transform-chart-rectangle-grid-div-active);
|
|
}
|
|
|
|
.chart-rectangle-grid > .first {
|
|
left: var(--left-chart-rectangle-grid-first);
|
|
background: var(--background-chart-rectangle-grid-first);
|
|
}
|
|
|
|
.chart-rectangle-grid > .second {
|
|
left: var(--left-chart-rectangle-grid-second);
|
|
background: var(--background-chart-rectangle-grid-second);
|
|
}
|
|
|
|
.chart-rectangle-grid > .third {
|
|
left: var(--left-chart-rectangle-grid-third);
|
|
background: var(--background-chart-rectangle-grid-third);
|
|
}
|
|
|
|
.chart-container {
|
|
position: absolute;
|
|
top: var(--top-chart-container);
|
|
left: var(--left-chart-container);
|
|
height: var(--height-chart-container);
|
|
width: var(--width-chart-container);
|
|
overflow: hidden;
|
|
border: var(--border-chart-container) solid var(--grey-light);
|
|
}
|
|
|
|
#project-version {
|
|
position: relative;
|
|
bottom: var(--bottom-project-version);
|
|
opacity: 0;
|
|
font-size: var(--font-size-12pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-project-version);
|
|
}
|
|
|
|
/* error classes */
|
|
.error {
|
|
margin-top: calc((100vh / 2) - (var(--height-error) / 2));
|
|
max-width: var(--min-width-error);
|
|
min-width: var(--min-width-error);
|
|
}
|
|
|
|
.error-img {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: auto;
|
|
height: var(--height-error-img);
|
|
width: var(--width-error-img);
|
|
object-fit: cover;
|
|
border-radius: var(--border-radius-error-img);
|
|
box-shadow: var(--box-shadow-error-img) var(--black-opacity-10);
|
|
}
|
|
|
|
.error-div {
|
|
position: relative;
|
|
left: var(--left-error-div);
|
|
z-index: 1;
|
|
height: var(--height-error-div);
|
|
width: var(--width-error-div);
|
|
opacity: 0;
|
|
border-radius: var(--border-radius-error-div);
|
|
background: var(--background-error-div);
|
|
box-shadow: var(--box-shadow-error-div) var(--black-opacity-10);
|
|
animation: fade-in-error-div;
|
|
animation-duration: var(--animation-duration-fade-in-error-div);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.error-div > div {
|
|
position: absolute;
|
|
}
|
|
|
|
.code {
|
|
top: var(--top-code);
|
|
left: var(--left-code);
|
|
font-size: var(--font-size-21pt);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-code);
|
|
}
|
|
|
|
.title {
|
|
top: var(--top-title);
|
|
left: var(--left-title);
|
|
font-size: var(--font-size-31pt);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-title);
|
|
}
|
|
|
|
.explanation {
|
|
top: var(--top-explanation);
|
|
left: var(--left-explanation);
|
|
}
|
|
|
|
.explanation > div {
|
|
font-size: var(--font-size-13pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-explanation-div);
|
|
}
|
|
|
|
.advice {
|
|
width: var(--width-advice);
|
|
bottom: var(--bottom-advice);
|
|
text-align: center;
|
|
font-size: var(--font-size-11pt);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-advice);
|
|
}
|
|
|
|
.hardware-icon {
|
|
width: var(--width-hardware-icon);
|
|
height: var(--height-hardware-icon);
|
|
margin: var(--margin-hardware-icon);
|
|
} |