157 lines
3.6 KiB
CSS
157 lines
3.6 KiB
CSS
/* THEME VARIABLES */
|
|
:root {
|
|
--theme-background: #EBEEF0;
|
|
--theme-surface: #fff;
|
|
--theme-surface-rgb: 255, 255, 255;
|
|
--theme-surface-1: #fcfcfc;
|
|
--theme-surface-2: #e0e0e0;
|
|
--theme-primary: #FF9966;
|
|
--theme-secondary: #9e9e9e;
|
|
--theme-accent: #3399FF;
|
|
--theme-color-font: #2c2f3a;
|
|
--theme-color-font-muted: rgba(44, 47, 58, 0.85);
|
|
--theme-color-font-muted2: rgba(44, 47, 58, 0.65);
|
|
--theme-failure: #f44336;
|
|
--theme-warning: #ffae42;
|
|
--theme-success: #4BB543;
|
|
--theme-on-primary: #fff;
|
|
}
|
|
[data-theme="dark"] {
|
|
--theme-background: #1c1c1c;
|
|
--theme-surface: #2f2f2f;
|
|
--theme-surface-rgb: 47, 47, 47;
|
|
--theme-surface-1: #434343;
|
|
--theme-surface-2: #575757;
|
|
--theme-color-font: #fff;
|
|
--theme-color-font-muted: #f9f9f9;
|
|
--theme-warning: #dc584e;
|
|
}
|
|
[data-accent="red"] {
|
|
--theme-primary: #f44336;
|
|
}
|
|
[data-accent="pink"] {
|
|
--theme-primary: #e91e63;
|
|
}
|
|
[data-accent="purple"] {
|
|
--theme-primary: #9c27b0;
|
|
}
|
|
[data-accent="deepPurple"] {
|
|
--theme-primary: #673ab7;
|
|
}
|
|
[data-accent="indigo"] {
|
|
--theme-primary: #3f51b5;
|
|
}
|
|
[data-accent="blue"] {
|
|
--theme-primary: #2196f3;
|
|
}
|
|
[data-accent="lightBlue"] {
|
|
--theme-primary: #03a9f4;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="cyan"] {
|
|
--theme-primary: #00bcd4;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="teal"] {
|
|
--theme-primary: #009688;
|
|
}
|
|
[data-accent="green"] {
|
|
--theme-primary: #4caf50;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="lightGreen"] {
|
|
--theme-primary: #8bc34a;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="lime"] {
|
|
--theme-primary: #cddc39;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="yellow"] {
|
|
--theme-primary: #ffeb3b;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="amber"] {
|
|
--theme-primary: #ffc107;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="deepOrange"] {
|
|
--theme-primary: #ff5722;
|
|
}
|
|
[data-accent="brown"] {
|
|
--theme-primary: #795548;
|
|
}
|
|
[data-accent="grey"] {
|
|
--theme-primary: #9e9e9e;
|
|
--theme-on-primary: #2c2f3a;
|
|
}
|
|
[data-accent="blueGrey"] {
|
|
--theme-primary: #607d8b;
|
|
}
|
|
/* THEME CLASSES */
|
|
.theme-surface {
|
|
background-color: var(--theme-surface) !important;
|
|
}
|
|
.theme-surface-1 {
|
|
background-color: var(--theme-surface-1) !important;
|
|
}
|
|
.theme-background {
|
|
background-color: var(--theme-background) !important;
|
|
}
|
|
.theme-primary {
|
|
background-color: var(--theme-primary) !important;
|
|
}
|
|
.theme-primary-text {
|
|
color: var(--theme-primary) !important;
|
|
}
|
|
.theme-secondary {
|
|
background-color: var(--theme-secondary) !important;
|
|
}
|
|
.theme-secondary-text {
|
|
color: var(--theme-secondary) !important;
|
|
}
|
|
.theme-accent {
|
|
background-color: var(--theme-accent) !important;
|
|
}
|
|
.theme-accent-text {
|
|
color: var(--theme-accent) !important;
|
|
}
|
|
.theme-text {
|
|
color: var(--theme-color-font) !important;
|
|
}
|
|
.theme-failure {
|
|
background-color: var(--theme-failure) !important;
|
|
}
|
|
.theme-failure-text {
|
|
color: var(--theme-failure) !important;
|
|
}
|
|
.theme-warning {
|
|
background-color: var(--theme-warning) !important;
|
|
}
|
|
.theme-warning-text {
|
|
color: var(--theme-warning) !important;
|
|
}
|
|
.theme-success {
|
|
background-color: var(--theme-success) !important;
|
|
}
|
|
.theme-success-text {
|
|
color: var(--theme-success) !important;
|
|
}
|
|
.theme-muted-text {
|
|
color: var(--theme-color-font-muted) !important;
|
|
}
|
|
.theme-muted2-text {
|
|
color: var(--theme-color-font-muted2) !important;
|
|
}
|
|
.theme-surface-transparent {
|
|
background: rgba(var(--theme-surface-rgb), 0.8) !important;
|
|
}
|
|
.theme-surface-transparent1 {
|
|
background: rgba(var(--theme-surface-rgb), 0.9) !important;
|
|
}
|
|
.theme-on-primary {
|
|
background-color: var(--theme-on-primary) !important;
|
|
}
|
|
.theme-on-primary-text {
|
|
color: var(--theme-on-primary) !important;
|
|
} |