341 lines
9.0 KiB
Plaintext
341 lines
9.0 KiB
Plaintext
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Font Declarations */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
// Modesto
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Modesto Condensed';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url('../fonts/modesto-condensed/modesto-condensed.woff2') format('woff2');
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Modesto Condensed';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 700;
|
||
|
|
src: url('../fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Amiri
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Amiri';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url("../fonts/amiri/amiri-regular.woff2") format('woff2');
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Amiri';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 700;
|
||
|
|
src: url("../fonts/amiri/amiri-bold.woff2") format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Signika
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Signika';
|
||
|
|
src: url('../fonts/signika/signika-regular.woff2') format('woff2');
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Signika';
|
||
|
|
src: url('../fonts/signika/signika-bold.woff2') format('woff2');
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Bruno Ace
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Bruno Ace';
|
||
|
|
src: url('../fonts/bruno-ace/bruno-ace.woff2') format('woff2');
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Bruno Ace SC
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Bruno Ace SC';
|
||
|
|
src: url('../fonts/bruno-ace/bruno-ace-sc.woff2') format('woff2');
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Colors */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
body {
|
||
|
|
|
||
|
|
// Warm Color Spectrum
|
||
|
|
--color-warm-1: #ee9b3a;
|
||
|
|
--color-warm-2: #c9593f;
|
||
|
|
--color-warm-3: #5d142b;
|
||
|
|
|
||
|
|
// Cool Color Spectrum
|
||
|
|
--color-cool-3: #584a75;
|
||
|
|
--color-cool-4: #302831;
|
||
|
|
--color-cool-5: #0b0a13;
|
||
|
|
--color-cool-5-25: rgb(11 10 19 / 25%);
|
||
|
|
--color-cool-5-50: rgb(11 10 19 / 50%);
|
||
|
|
--color-cool-5-75: rgb(11 10 19 / 75%);
|
||
|
|
--color-cool-5-90: rgb(11 10 19 / 90%);
|
||
|
|
|
||
|
|
// Light Color Spectrum
|
||
|
|
--color-light-1: #f7f3e8;
|
||
|
|
--color-light-2: #efe6d8;
|
||
|
|
--color-light-3: #e7d1b1;
|
||
|
|
--color-light-4: #d0b8a3;
|
||
|
|
--color-light-5: #9f8475;
|
||
|
|
--color-light-6: #816b66;
|
||
|
|
|
||
|
|
// Dark Color Spectrum
|
||
|
|
--color-dark-1: #111;
|
||
|
|
--color-dark-2: #222;
|
||
|
|
--color-dark-3: #444;
|
||
|
|
--color-dark-4: #555;
|
||
|
|
--color-dark-5: #666;
|
||
|
|
--color-dark-6: #777;
|
||
|
|
|
||
|
|
// Notification Levels
|
||
|
|
--color-level-error: #ce0707;
|
||
|
|
--color-level-error-bg: rgb(105 0 8 / 80%);
|
||
|
|
--color-level-error-border: #750003;
|
||
|
|
|
||
|
|
--color-level-info: #59a1f6;
|
||
|
|
--color-level-info-bg: rgb(47 80 132 / 80%);
|
||
|
|
--color-level-info-border: #5c87b9;
|
||
|
|
|
||
|
|
--color-level-success: #26b231;
|
||
|
|
--color-level-success-bg: rgba(26, 107, 34, 0.8);
|
||
|
|
--color-level-success-border: #1b8f23;
|
||
|
|
|
||
|
|
--color-level-warning: #ee9b3a;
|
||
|
|
--color-level-warning-bg: rgb(214 150 0 / 80%);
|
||
|
|
--color-level-warning-border: #b18404;
|
||
|
|
|
||
|
|
--color-scrollbar: #5d142b;
|
||
|
|
--color-scrollbar-track: transparent;
|
||
|
|
--color-scrollbar-border: #8d151b;
|
||
|
|
|
||
|
|
--color-text-selection: #f7f3e8;
|
||
|
|
--color-text-selection-bg: #584a75;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Typography */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
body {
|
||
|
|
|
||
|
|
// Font Families
|
||
|
|
--font-body: "Signika", "Palatino Linotype", sans-serif;
|
||
|
|
--font-awesome: "Font Awesome 6 Pro";
|
||
|
|
--font-awesome-duotone: "Font Awesome 6 Duotone";
|
||
|
|
--font-monospace: monospace;
|
||
|
|
--font-blockquote: "Signika", "Palatino Linotype", sans-serif;
|
||
|
|
|
||
|
|
// Font Sizing
|
||
|
|
--font-size-10: .625rem; // 10px
|
||
|
|
--font-size-11: .6875rem; // 11px
|
||
|
|
--font-size-12: .75rem; // 12px
|
||
|
|
--font-size-13: .8125rem; // 13px
|
||
|
|
--font-size-14: .875rem; // 14px
|
||
|
|
--font-size-15: .9375rem; // 15px
|
||
|
|
--font-size-16: 1rem; // 16px
|
||
|
|
--font-size-18: 1.125rem; // 18px
|
||
|
|
--font-size-20: 1.25rem; // 20px
|
||
|
|
--font-size-24: 1.5rem; // 24px
|
||
|
|
--font-size-28: 1.75rem; // 28px
|
||
|
|
--font-size-32: 2rem; // 32px
|
||
|
|
--font-size-36: 2.25rem; // 36px
|
||
|
|
--font-size-48: 3rem; // 48px
|
||
|
|
--font-size-64: 4rem; // 64px
|
||
|
|
--font-size-80: 5rem; // 80px
|
||
|
|
|
||
|
|
// Header Fonts
|
||
|
|
--font-h1: "Modesto Condensed", serif;
|
||
|
|
--font-h2: "Amiri", serif;
|
||
|
|
--font-h3: "Signika", "Palatino Linotype", sans-serif;
|
||
|
|
--font-h4: "Amiri", serif;
|
||
|
|
--font-h5: "Signika", "Palatino Linotype", sans-serif;
|
||
|
|
--font-h6: "Modesto Condensed", serif;
|
||
|
|
|
||
|
|
// Header Sizing
|
||
|
|
--font-h1-size: var(--font-size-48);
|
||
|
|
--font-h2-size: var(--font-size-32);
|
||
|
|
--font-h3-size: var(--font-size-24);
|
||
|
|
--font-h4-size: var(--font-size-24);
|
||
|
|
--font-h5-size: var(--font-size-20);
|
||
|
|
--font-h6-size: var(--font-size-24);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Layout */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
body {
|
||
|
|
--input-height: 2rem;
|
||
|
|
|
||
|
|
// Z-indices
|
||
|
|
--z-index-background: -1;
|
||
|
|
--z-index-main: 0;
|
||
|
|
--z-index-canvas: 0;
|
||
|
|
--z-index-app: 30;
|
||
|
|
--z-index-ui: 60;
|
||
|
|
--z-index-window: 100;
|
||
|
|
--z-index-tooltip: 9999;
|
||
|
|
--z-index-notification: 99999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Aesthetics */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
body {
|
||
|
|
--background-url: url("../ui/backgrounds/setup.webp");
|
||
|
|
--main-logo: url("../icons/vtt-512.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Applications */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
// Application V1 and V2
|
||
|
|
.window-app,
|
||
|
|
.application {
|
||
|
|
--header-height: 36px;
|
||
|
|
--minimized-width: 200px;
|
||
|
|
--background: var(--color-cool-5-90);
|
||
|
|
|
||
|
|
--color-text-primary: var(--color-light-2);
|
||
|
|
--color-header-background: rgb(0 0 0 / 50%);
|
||
|
|
--color-border: var(--color-cool-4);
|
||
|
|
--color-fieldset-border: var(--color-light-6);
|
||
|
|
--color-form-hint: var(--color-light-5);
|
||
|
|
--color-form-hint-hover: var(--color-light-4);
|
||
|
|
--color-form-label: var(--color-light-4);
|
||
|
|
--color-form-label-hover: var(--color-light-2);
|
||
|
|
--color-select-option-bg: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Forms and Form Elements */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
input,
|
||
|
|
select {
|
||
|
|
--input-background-color: var(--color-cool-4);
|
||
|
|
--input-border-color: transparent;
|
||
|
|
--input-text-color: var(--color-light-3);
|
||
|
|
--input-placeholder-color: var(--color-light-4);
|
||
|
|
--input-focus-outline-color: var(--color-cool-3);
|
||
|
|
|
||
|
|
// Focused
|
||
|
|
&:focus {
|
||
|
|
--input-text-color: var(--color-light-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Disabled
|
||
|
|
&:disabled {
|
||
|
|
--input-background-color: var(--color-cool-5);
|
||
|
|
--input-border-color: var(--color-cool-4);
|
||
|
|
--input-text-color: var(--color-light-4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.standard-form label.icon {
|
||
|
|
--input-background-color: var(--color-cool-4);
|
||
|
|
--input-border-color: transparent;
|
||
|
|
--input-text-color: var(--color-light-3);
|
||
|
|
--input-focus-outline-color: var(--color-cool-3);
|
||
|
|
|
||
|
|
&:focus-within {
|
||
|
|
--input-text-color: var(--color-light-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:has(> input:disabled) {
|
||
|
|
--input-background-color: var(--color-cool-5);
|
||
|
|
--input-border-color: var(--color-cool-4);
|
||
|
|
--input-text-color: var(--color-light-4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Readonly Text Input
|
||
|
|
input[readonly] {
|
||
|
|
--input-background-color: var(--color-cool-5);
|
||
|
|
--input-border-color: var(--color-cool-4);
|
||
|
|
--input-text-color: var(--color-light-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Checkboxes Specifically
|
||
|
|
input[type="checkbox"] {
|
||
|
|
--checkbox-checked-color: var(--color-warm-1);
|
||
|
|
--checkbox-disabled-color: var(--color-cool-4);
|
||
|
|
--checkbox-background-color: var(--color-cool-4);
|
||
|
|
--checkbox-checkmark-color: transparent;
|
||
|
|
--checkbox-font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Range Inputs
|
||
|
|
input[type=range] {
|
||
|
|
--range-track-color: var(--input-background-color);
|
||
|
|
--range-thumb-background-color: rgb(11 10 19 / 90%);
|
||
|
|
--range-thumb-border-color: var(--color-warm-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Buttons
|
||
|
|
a.button,
|
||
|
|
button {
|
||
|
|
--button-background-color: var(--color-cool-5-50);
|
||
|
|
--button-border-color: var(--color-light-5);
|
||
|
|
--button-text-color: var(--color-light-3);
|
||
|
|
--button-focus-outline-color: var(--color-warm-2);
|
||
|
|
--button-hover-background-color: var(--color-warm-2);
|
||
|
|
--button-hover-border-color: var(--color-light-3);
|
||
|
|
--button-hover-text-color: var(--color-light-1);
|
||
|
|
|
||
|
|
// Disabled
|
||
|
|
&:disabled {
|
||
|
|
--button-background-color: var(--color-cool-5);
|
||
|
|
--button-border-color: transparent;
|
||
|
|
--button-text-color: var(--color-light-5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Bright buttons
|
||
|
|
a.button.bright,
|
||
|
|
button.bright {
|
||
|
|
--button-background-color: var(--color-warm-1);
|
||
|
|
--button-border-color: var(--color-cool-5);
|
||
|
|
--button-text-color: var(--color-cool-5);
|
||
|
|
--button-hover-background-color: #fda948;
|
||
|
|
--button-hover-border-color: var(--color-warm-3);;
|
||
|
|
--button-hover-text-color: #000000;
|
||
|
|
|
||
|
|
// Disabled Bright Buttons
|
||
|
|
&:disabled {
|
||
|
|
--button-background-color: var(--color-cool-4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Setup Views Specifically */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
body.auth {
|
||
|
|
--header-size: 160px;
|
||
|
|
--header-font-size: var(--font-size-80);
|
||
|
|
--form-padding: 1.5rem;
|
||
|
|
--max-width: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Tables */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
|
||
|
|
table {
|
||
|
|
--table-background-color: var(--color-cool-5-50);
|
||
|
|
}
|