134 lines
5.1 KiB
CSS
134 lines
5.1 KiB
CSS
/* variables */
|
|
:root {
|
|
/* fonts */
|
|
--pixel-font: Commodore64;
|
|
/* --page-font: "PT Sans",
|
|
Arial,
|
|
Helvetica,
|
|
sans-serif; */
|
|
--standard-font: -apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Roboto,
|
|
Oxygen-Sans,
|
|
Ubuntu,
|
|
Cantarell,
|
|
"Helvetica Neue",
|
|
sans-serif;
|
|
--mono-font: 'Courier New',
|
|
Courier,
|
|
monospace;
|
|
|
|
/* colour palette */
|
|
/* ------------------------------------------- */
|
|
|
|
/* page */
|
|
--page-font-colour: rgb(255, 255, 255);
|
|
--selected-item: rgba(0, 0, 170, 0.5);
|
|
--selected-item-hover: rgb(0, 0, 255);
|
|
--hover-selectable: rgb(255, 255, 0);
|
|
--standard-radius: 7px;
|
|
|
|
/* scroll bar */
|
|
--scrollbar-track: rgb(56, 56, 56);
|
|
--scrollbar-thumb: rgb(136, 136, 136);
|
|
--scrollbar-thumb-hover: rgb(0, 0, 0);
|
|
|
|
/* input */
|
|
--input-background: rgba(43, 43, 43, 0.5);
|
|
--input-background-disabled: rgb(89, 89, 89);
|
|
--input-border: rgb(43, 43, 43);
|
|
--input-border-hover: rgb(147, 147, 147);
|
|
--input-font-colour: var(--page-font-colour);
|
|
|
|
/* button */
|
|
--button-background: rgb(85, 85, 85);
|
|
--button-background-hover: rgb(136, 136, 136);
|
|
--button-background-disabled: var(--button-background-hover);
|
|
--button-border: rgb(85, 85, 85);
|
|
--button-border-hover: rgb(136, 136, 136);
|
|
--button-border-disabled: var(--button-border-hover);
|
|
--button-font-colour: rgb(255, 255, 255);
|
|
--button-font-colour-hover: var(--button-font-colour);
|
|
--button-font-colour-disabled: var(--button-border-hover);
|
|
--button-red-background: darkred;
|
|
--button-red-background-hover: red;
|
|
--button-red-background-disabled: rgb(85, 85, 85);
|
|
--button-red-border: darkred;
|
|
--button-red-border-hover: red;
|
|
--button-red-border-disabled: rgb(85, 85, 85);
|
|
--button-red-font-colour: rgb(255, 255, 255);
|
|
--button-red-font-colour-hover: var(--button-red-font-colour);
|
|
--button-red-font-colour-disabled: var(--button-red-font-colour);
|
|
--button-blue-background: rgb(0, 0, 170);
|
|
--button-blue-background-hover: rgb(0, 0, 255);
|
|
--button-blue-background-disabled: rgb(85, 85, 85);
|
|
--button-blue-border: rgb(0, 0, 170);
|
|
--button-blue-border-hover: rgb(0, 0, 255);
|
|
--button-blue-border-disabled: rgb(85, 85, 85);
|
|
--button-blue-font-colour: rgb(255, 255, 255);
|
|
--button-blue-font-colour-hover: var(--button-blue-font-colour);
|
|
--button-blue-font-colour-disabled: var(--button-blue-font-colour);
|
|
|
|
/* select2 */
|
|
--select2-background: rgb(43, 43, 43);
|
|
--select2-background-disabled: var(--input-background-disabled);
|
|
--select2-border: var(--input-border);
|
|
--select2-border-hover: var(--input-border-hover);
|
|
--select2-font-colour: var(--input-font-colour);
|
|
--select2-dropdown-selection-background: var(--selected-item);
|
|
--select2-dropdown-selection-font-colour: var(--page-font-colour);
|
|
--select2-dropdown-selected-background: rgb(91, 91, 91);
|
|
--select2-dropdown-selected-font-colour: var(--page-font-colour);
|
|
--select2-tag-delete-button: rgb(255, 255, 255);
|
|
--select2-tag-delete-background: rgb(147, 147, 147);
|
|
--select2-tag-background: rgb(78, 78, 78);
|
|
|
|
/* arrows */
|
|
--arrow-background: var(--button-background);
|
|
--arrow-background-hover: var(--button-background-hover);
|
|
|
|
/* section */
|
|
/* ------------------------------------------- */
|
|
/* secion header */
|
|
--section-header-background: rgba(43, 43, 43, 0.5);
|
|
--section-header-background-hover: rgba(0, 0, 0, 0.5);
|
|
/* section body */
|
|
--section-body-background: rgba(56, 56, 56, 0.3);
|
|
--section-body-background-solid: rgb(56, 56, 56);
|
|
--section-heading-underline: rgba(56, 56, 56, 1);
|
|
|
|
/* fancy button */
|
|
--fancybutton-background: rgba(56, 56, 56, 0.3);
|
|
--fancybutton-background-hover: rgba(56, 56, 56, 0.9);
|
|
|
|
/* modal */
|
|
/* ------------------------------------------- */
|
|
--modal-background-color: rgba(0, 0, 0, 0.4);
|
|
--modal-border-color: rgba(255, 255, 255, 0.414);
|
|
--modal-tabs-background-color: rgb(100, 100, 100);
|
|
--modal-window-background-color: rgb(79, 79, 79);
|
|
--modal-window-header-text-color: rgb(255, 255, 255);
|
|
--modal-window-header-background-color: rgb(56, 56, 56);
|
|
|
|
/* dropdown */
|
|
/* ------------------------------------------- */
|
|
--dropdown-background: rgb(0, 0, 0);
|
|
--dropdown-border: var(--modal-border-color);
|
|
--dropdown-menu-text-color: rgb(255, 255, 255);
|
|
|
|
/* profile card */
|
|
/* ------------------------------------------- */
|
|
--profile-card-border: rgba(173, 216, 230, 0.3);
|
|
--profile-card-background-image: rgb(0, 0, 130);
|
|
--profile-card-body-background: rgb(133, 156, 163);
|
|
--profile-card-display-name-text-color: rgb(255, 255, 255);
|
|
--profile-card-quip-text-color: var(--profile-card-display-name-text-color);
|
|
--profile-card-now-playing-background-color: rgba(0, 0, 0, 0.7);
|
|
|
|
/* login */
|
|
/* ------------------------------------------- */
|
|
--login-logospace-background: rgba(100, 100, 100, 0.7);
|
|
--login-loginspace-background: rgba(79, 79, 79, 0.7);
|
|
--login-logospace-label: rgb(255, 255, 255);
|
|
} |