187 lines
8.4 KiB
CSS
187 lines
8.4 KiB
CSS
/*
|
|
Themes file
|
|
Used for define themes of project
|
|
|
|
Every category must follow convention:
|
|
* Category must contain only theme name
|
|
|
|
Every subcategory must follow convention:
|
|
* Subcategory must contain only css property name
|
|
|
|
Every entry must follow convention:
|
|
* Must begins with subcategory name
|
|
* Further should be followed by tag/class/id/etc.
|
|
|
|
By example: --color-body
|
|
*/
|
|
|
|
/* light */
|
|
html[theme = "light"]
|
|
{
|
|
/* color */
|
|
--color-logo: var(--grey-light);
|
|
--color-logo-description: var(--grey-light);
|
|
--color-label-main-settings: var(--grey-light);
|
|
--color-main-settings-input: var(--grey);
|
|
--color-main-settings-input-placeholder: var(--grey-light);
|
|
--color-label-additional-settings: var(--grey-light);
|
|
--color-theme-buttons-input: var(--grey);
|
|
--color-port: var(--grey);
|
|
--color-port-placeholder: var(--grey-light);
|
|
--color-submit: var(--grey);
|
|
--color-hw-type: var(--black);
|
|
--color-hw-name: var(--grey);
|
|
--color-usage-value-span: var(--grey-light);
|
|
--color-usage-postfix: var(--black);
|
|
--color-info-label: var(--grey-light);
|
|
--color-detailed-hw-info-div: var(--grey);
|
|
--color-announcement: var(--white);
|
|
--color-contacts-label: var(--white);
|
|
--color-contacts-description-div: var(--white);
|
|
--color-uptime-dashboard-logo: var(--grey-light);
|
|
--color-uptime-dashboard-logo-description: var(--grey-light);
|
|
--color-values-grid-div: var(--grey);
|
|
--color-labels-grid-div: var(--grey-light);
|
|
--color-chart-label: var(--black);
|
|
--color-project-version: var(--grey);
|
|
--color-code: var(--black);
|
|
--color-title: var(--black);
|
|
--color-explanation-div: var(--grey);
|
|
--color-advice: var(--grey-light);
|
|
|
|
/* background */
|
|
--background-body: var(--purple-light);
|
|
--background-form: var(--linear-gradient-form-light);
|
|
--background-form-squares-grid-first: var(--blue-light);
|
|
--background-form-squares-grid-second: var(--red-light);
|
|
--background-form-squares-grid-third: var(--green-light);
|
|
--background-main-settings: var(--white);
|
|
--background-main-settings-input: var(--white);
|
|
--background-main-settings-select: var(--white);
|
|
--background-main-settings-underline: var(--blue-light);
|
|
--background-button-squares-grid-first: var(--purple-light);
|
|
--background-button-squares-grid-second: var(--grey-light);
|
|
--background-theme-buttons-first: var(--purple-light);
|
|
--background-theme-buttons-second: var(--grey-light);
|
|
--background-background-settings-color-selector: var(--grey-light);
|
|
--background-port: var(--white);
|
|
--background-submit: var(--green-light);
|
|
--background-card: var(--white);
|
|
--background-hw-logo-first: var(--blue-light);
|
|
--background-hw-logo-second: var(--red-light);
|
|
--background-hw-logo-third: var(--green-light);
|
|
--background-card-body-squares-grid-first-div: var(--blue-light);
|
|
--background-card-body-squares-grid-second-div: var(--red-light);
|
|
--background-card-body-squares-grid-third-div: var(--green-light);
|
|
--background-usage-underline-first: var(--blue-light);
|
|
--background-usage-underline-second: var(--red-light);
|
|
--background-usage-underline-third: var(--green-light);
|
|
--background-footer-first: var(--blue-light);
|
|
--background-footer-first-card-footer-dots-grid-div-inner-dot: var(--blue);
|
|
--background-footer-second: var(--red-light);
|
|
--background-footer-second-card-footer-dots-grid-div-inner-dot: var(--red);
|
|
--background-footer-third: var(--green-light);
|
|
--background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green);
|
|
--background-card-footer-dots-grid-div: var(--white);
|
|
--background-dividers-div: var(--white);
|
|
--background-uptime: var(--linear-gradient-uptime-light);
|
|
--background-uptime-squares-grid-first: var(--blue-light);
|
|
--background-uptime-squares-grid-second: var(--red-light);
|
|
--background-uptime-squares-grid-third: var(--green-light);
|
|
--background-values-grid-div: var(--white-opacity-70);
|
|
--background-labels-grid-div: var(--white-opacity-90);
|
|
--background-chart-rectangle-grid-first: var(--blue-light);
|
|
--background-chart-rectangle-grid-second: var(--red-light);
|
|
--background-chart-rectangle-grid-third: var(--green-light);
|
|
--background-error-div: var(--white);
|
|
|
|
/* border-color */
|
|
--border-color-chart-triangle-grid-first: var(--blue);
|
|
--border-color-chart-triangle-grid-second: var(--red);
|
|
--border-color-chart-triangle-grid-third: var(--green);
|
|
}
|
|
|
|
/* dark */
|
|
html[theme = "dark"]
|
|
{
|
|
/* color */
|
|
--color-logo: var(--white);
|
|
--color-logo-description: var(--white);
|
|
--color-label-main-settings: var(--white);
|
|
--color-main-settings-input: var(--white);
|
|
--color-main-settings-input-placeholder: var(--grey-light);
|
|
--color-label-additional-settings: var(--white);
|
|
--color-theme-buttons-input: var(--grey);
|
|
--color-port: var(--white);
|
|
--color-port-placeholder: var(--grey-light);
|
|
--color-submit: var(--white);
|
|
--color-hw-type: var(--white);
|
|
--color-hw-name: var(--white);
|
|
--color-usage-value-span: var(--white);
|
|
--color-usage-postfix: var(--white);
|
|
--color-info-label: var(--white);
|
|
--color-detailed-hw-info-div: var(--white);
|
|
--color-announcement: var(--white);
|
|
--color-contacts-label: var(--white);
|
|
--color-contacts-description-div: var(--white);
|
|
--color-uptime-dashboard-logo: var(--grey-light);
|
|
--color-uptime-dashboard-logo-description: var(--white);
|
|
--color-values-grid-div: var(--white);
|
|
--color-labels-grid-div: var(--white);
|
|
--color-chart-label: var(--white);
|
|
--color-project-version: var(--white);
|
|
--color-code: var(--white);
|
|
--color-title: var(--white);
|
|
--color-explanation-div: var(--grey);
|
|
--color-advice: var(--grey-light);
|
|
|
|
/* background */
|
|
--background-body: var(--grey-light);
|
|
--background-form: var(--linear-gradient-form-dark);
|
|
--background-form-squares-grid-first: var(--grey-light);
|
|
--background-form-squares-grid-second: var(--grey-light);
|
|
--background-form-squares-grid-third: var(--grey-light);
|
|
--background-main-settings: var(--grey);
|
|
--background-main-settings-input: var(--grey);
|
|
--background-main-settings-select: var(--grey);
|
|
--background-main-settings-underline: var(--grey-light);
|
|
--background-button-squares-grid-first: var(--purple-light);
|
|
--background-button-squares-grid-second: var(--grey-light);
|
|
--background-theme-buttons-first: var(--purple-light);
|
|
--background-theme-buttons-second: var(--grey-light);
|
|
--background-background-settings-color-selector: var(--grey-light);
|
|
--background-port: var(--grey);
|
|
--background-submit: var(--grey-light);
|
|
--background-card: var(--grey-dark);
|
|
--background-hw-logo-first: var(--blue-light);
|
|
--background-hw-logo-second: var(--red-light);
|
|
--background-hw-logo-third: var(--green-light);
|
|
--background-card-body-squares-grid-first-div: var(--grey);
|
|
--background-card-body-squares-grid-second-div: var(--grey);
|
|
--background-card-body-squares-grid-third-div: var(--grey);
|
|
--background-usage-underline-first: var(--blue-light);
|
|
--background-usage-underline-second: var(--red-light);
|
|
--background-usage-underline-third: var(--green-light);
|
|
--background-footer-first: var(--blue);
|
|
--background-footer-first-card-footer-dots-grid-div-inner-dot: var(--blue-light);
|
|
--background-footer-second: var(--red);
|
|
--background-footer-second-card-footer-dots-grid-div-inner-dot: var(--red-light);
|
|
--background-footer-third: var(--green);
|
|
--background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green-light);
|
|
--background-dividers-div: var(--grey-dark);
|
|
--background-uptime: var(--grey-dark);
|
|
--background-uptime-squares-grid-first: var(--grey-light);
|
|
--background-uptime-squares-grid-second: var(--grey-light);
|
|
--background-uptime-squares-grid-third: var(--grey-light);
|
|
--background-values-grid-div: var(--grey-opacity-70);
|
|
--background-labels-grid-div: var(--grey-opacity-90);
|
|
--background-chart-rectangle-grid-first: var(--blue-light);
|
|
--background-chart-rectangle-grid-second: var(--red-light);
|
|
--background-chart-rectangle-grid-third: var(--green-light);
|
|
--background-error-div: var(--grey-dark);
|
|
|
|
/* border-color */
|
|
--border-color-chart-triangle-grid-first: var(--blue);
|
|
--border-color-chart-triangle-grid-second: var(--red);
|
|
--border-color-chart-triangle-grid-third: var(--green);
|
|
} |