b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
246 lines
6 KiB
CSS
246 lines
6 KiB
CSS
/*
|
|
Gaia theme variables
|
|
*/
|
|
|
|
|
|
:root {
|
|
|
|
/** Grey Colors
|
|
---------------------------------------------------------*/
|
|
|
|
--color-alpha: #333333;
|
|
--color-beta: #ffffff;
|
|
--color-gamma: #4d4d4d;
|
|
--color-delta: #5f5f5f;
|
|
--color-epsilon: #858585;
|
|
--color-zeta: #a6a6a6;
|
|
--color-eta: #c7c7c7;
|
|
--color-theta: #e7e7e7;
|
|
--color-iota: #f4f4f4;
|
|
|
|
/** Brand Colors
|
|
---------------------------------------------------------*/
|
|
|
|
--color-darkblue: #00539f;
|
|
--color-blue: #00caf2;
|
|
--color-turquoise: #27c8c2;
|
|
--color-darkorange: #e66000;
|
|
--color-orange: #ff9500;
|
|
--color-yellow: #ffcb00;
|
|
--color-violet: #c40c84;
|
|
|
|
--color-warning: #fbbd3c;
|
|
--color-destructive: #e2443a;
|
|
--color-preffered: #00ba91;
|
|
|
|
/** Background
|
|
---------------------------------------------------------*/
|
|
|
|
--background: var(--color-beta);
|
|
--background-plus: var(--color-theta);
|
|
--background-minus: var(--color-zeta);
|
|
|
|
/** Borders
|
|
---------------------------------------------------------*/
|
|
|
|
--border-color: var(--color-theta);
|
|
|
|
/** Text Color
|
|
---------------------------------------------------------*/
|
|
|
|
--text-color: var(--color-gamma);
|
|
--text-color-minus: var(--color-eta);
|
|
--label-color: #000;
|
|
|
|
/** Button
|
|
---------------------------------------------------------*/
|
|
|
|
--button-background: var(--color-iota);
|
|
|
|
/** Links
|
|
---------------------------------------------------------*/
|
|
|
|
--link-color: var(--highlight-color);
|
|
|
|
/** Inputs
|
|
---------------------------------------------------------*/
|
|
|
|
--input-background: var(--color-beta);
|
|
--input-color: var(--color-alpha);
|
|
--input-clear-background: #909ca7;
|
|
|
|
/** Buttons
|
|
---------------------------------------------------------*/
|
|
|
|
--button-box-shadow:
|
|
inset 0 -1px 0 #d8d8d8,
|
|
inset 0 1px 0 #eeeeee;
|
|
--button-box-shadow-active: var(--button-box-shadow);
|
|
|
|
/** Header
|
|
---------------------------------------------------------*/
|
|
|
|
--header-disabled-button-color: rgba(255,255,255,0.3);
|
|
|
|
/** Transitions
|
|
---------------------------------------------------------*/
|
|
|
|
--transition-duration: 0.2s;
|
|
}
|
|
|
|
|
|
.theme-productivity {
|
|
|
|
/** Brand Color
|
|
---------------------------------------------------------*/
|
|
|
|
--highlight-color: var(--color-orange);
|
|
|
|
/** Header
|
|
---------------------------------------------------------*/
|
|
|
|
--header-background: var(--highlight-color);
|
|
--header-color: var(--color-beta);
|
|
}
|
|
|
|
.theme-communications {
|
|
|
|
/** Brand Color
|
|
---------------------------------------------------------*/
|
|
|
|
--highlight-color: var(--color-turquoise);
|
|
|
|
/** Links
|
|
---------------------------------------------------------*/
|
|
|
|
--link-color: #177874;
|
|
|
|
/** Header
|
|
---------------------------------------------------------*/
|
|
|
|
--header-background: var(--highlight-color);
|
|
--header-color: var(--color-beta);
|
|
--header-icon-color: var(--color-beta);
|
|
--header-button-color: var(--link-color);
|
|
}
|
|
|
|
.theme-settings {
|
|
|
|
/** Background
|
|
---------------------------------------------------------*/
|
|
|
|
--background: var(--color-iota);
|
|
--background-plus: var(--color-beta);
|
|
--background-minus: var(--color-epsilon);
|
|
--background-minus-minus: var(--color-zeta);
|
|
|
|
/** Highlight
|
|
---------------------------------------------------------*/
|
|
|
|
--highlight-color: var(--color-blue);
|
|
|
|
/** Borders
|
|
---------------------------------------------------------*/
|
|
|
|
--border-color: var(--color-theta);
|
|
|
|
/** Text Color
|
|
---------------------------------------------------------*/
|
|
|
|
--text-color: var(--color-gamma);
|
|
|
|
/** Titles
|
|
---------------------------------------------------------*/
|
|
|
|
--title-color: var(--background-minus);
|
|
|
|
/** Buttons
|
|
---------------------------------------------------------*/
|
|
|
|
--button-background: var(--background-plus);
|
|
|
|
/** Switch
|
|
---------------------------------------------------------*/
|
|
|
|
--switch-background: var(--background-minus-minus);
|
|
|
|
/** Checkbox
|
|
---------------------------------------------------------*/
|
|
|
|
--checkbox-border-color: var(--background-minus-minus);
|
|
|
|
/** Header
|
|
---------------------------------------------------------*/
|
|
|
|
--header-color: var(--title-color);
|
|
--header-background: var(--background);
|
|
--header-button-color: var(--highlight-color);
|
|
--header-disabled-button-color: var(--color-theta);
|
|
--header-action-button-color: var(--title-color);
|
|
}
|
|
|
|
.theme-media {
|
|
|
|
/** Highlight Color
|
|
---------------------------------------------------------*/
|
|
|
|
--highlight-color: var(--color-blue);
|
|
|
|
/** Background
|
|
---------------------------------------------------------*/
|
|
|
|
--background: var(--color-alpha);
|
|
--background-plus: var(--color-gamma);
|
|
--background-minus: #2B2B2B;
|
|
--background-minus-minus: #1a1a1a;
|
|
|
|
/** Text Color
|
|
---------------------------------------------------------*/
|
|
|
|
--text-color: var(--color-beta);
|
|
--label-color: var(--color-beta);
|
|
|
|
/** Button
|
|
---------------------------------------------------------*/
|
|
|
|
--button-background: var(--background-plus);
|
|
|
|
/** Header
|
|
---------------------------------------------------------*/
|
|
|
|
--header-background: var(--background);
|
|
--header-icon-color: var(--text-color);
|
|
--header-button-color: var(--highlight-color);
|
|
|
|
/** Borders
|
|
---------------------------------------------------------*/
|
|
|
|
--border-color: var(--color-gamma);
|
|
|
|
/** Inputs
|
|
---------------------------------------------------------*/
|
|
|
|
--input-background: var(--background-plus);
|
|
|
|
/** Text Input
|
|
---------------------------------------------------------*/
|
|
|
|
--text-input-background: var(--background-minus);
|
|
|
|
/** Switch
|
|
---------------------------------------------------------*/
|
|
|
|
--switch-head-border-color: var(--background-minus-minus);
|
|
--switch-background: var(--background-minus-minus);
|
|
|
|
/** Checkbox
|
|
---------------------------------------------------------*/
|
|
|
|
--checkbox-border-color: var(--background-minus-minus);
|
|
|
|
/** Buttons
|
|
---------------------------------------------------------*/
|
|
|
|
--button-box-shadow: none;
|
|
--button-box-shadow-active: none;
|
|
}
|