Ward/src/main/resources/static/css/layout.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);
}