/*
# Contents
- Font Families
- Resets
- Global Variables
- Theme Styles
- Utility Classes
- Component Styles
- Transitions & Animations
*/
@font-face { font-family: 'Graphik'; src: local('☺'), url('fonts/GraphikLight.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Graphik'; src: local('☺'), url('fonts/GraphikRegular.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Graphik'; src: local('☺'), url('fonts/GraphikMedium.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Graphik'; src: local('☺'), url('fonts/GraphikSemibold.woff') format('woff'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Graphik'; src: local('☺'), url('fonts/GraphikBold.woff') format('woff'); font-weight: 700; font-style: normal; }
/* CSS Reset because CSS is broken by design and was never meant to be used to create applications. */
button {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
}
/* Page Defaults */
body {
margin: 0px;
padding: 0px;
min-height: 100vh;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
font-size: var(--text-size);
}
*::placeholder {
opacity: 0.5;
}
/* Scaling factors */
:root {
/* Global scale factor for everything */
--global-scale: 1;
/* Text Size Scale */
--text-size-scale: calc(1 * var(--global-scale));
/* Spacing Scale */
--spacing-scale: calc(1 * var(--global-scale));
/* Breakpoints */
--breakpoint-xs:576;
--breakpoint-sm:768;
--breakpoint-md:992;
--breakpoint-lg:1200;
--breakpoint-xl:1400;
}
/* Colours */
:root {
/* Backgrounds */
--light: #FFFFFF; --light-faint: #f7f7f7; --light-disabled: #EAEAEA;
--dark: #49494b; --dark-faint: #434344; --dark-disabled: #343435;
--light-opaque: rgba(255, 255, 255, 1); --light-transparent: rgba(255, 255, 255, 0);
--dark-opaque: rgba(73, 73, 75, 1); --dark-transparent: rgba(73, 73, 75, 0);
--light-primary-nav: var(--light); --light-primary-nav-faint: var(--light-faint); --light-primary-nav-disabled: var(--light-disabled);
--light-secondary-nav: var(--light); --light-secondary-nav-faint: var(--light-faint); --light-secondary-nav-disabled: var(--light-disabled);
/*--light-editor-background: #F3F3F3;*/
--light-editor-background: #dfdfdf;
--dark-primary-nav: #333435; --dark-primary-nav-faint: #212121; --dark-primary-nav-disabled: #4f4f4f;
--dark-secondary-nav: #565658; --dark-secondary-nav-faint: #515152; --dark-secondary-nav-disabled: #3f4040;
--dark-editor-background: #2d2e2f;
--selected-background: #2d71ac;
--selected-background-hover: #3881bf;
--selected-background-active: #236198;
--unselected-background-light: #e2e2e2;
--unselected-background-hover-light: #f5f5f5;
--unselected-background-active-light: #dadada;
--unselected-background-dark: #585859;
--unselected-background-hover-dark: #666666;
--unselected-background-active-dark: #454545;
/* Foregrounds */
--light-foreground: #49494b; --light-foreground-hover: #0f0f0f; --light-foreground-active: #626368; --light-foreground-inactive: #9F9FA3;
--dark-foreground: #F2F2F2; --dark-foreground-hover: #FFFFFF; --dark-foreground-active: #E2E2E2; --dark-foreground-inactive: #9D9DA0;
/* Semi Transparent Colours */
--black-5pc: rgba(0,0,0,.05); --white-5pc: rgba(255,255,255,.05);
--black-10pc: rgba(0,0,0,.1); --white-10pc: rgba(255,255,255,.1);
--black-20pc: rgba(0,0,0,.2); --white-20pc: rgba(255,255,255,.2);
--black-30pc: rgba(0,0,0,.3); --white-30pc: rgba(255,255,255,.3);
/* Dividers */
--light-primary-divider: var(--black-20pc); --light-secondary-divider: var(--black-10pc);
--dark-primary-divider: var(--white-20pc); --dark-secondary-divider: var(--white-10pc);;
--light-primary-nav-primary-divider: #3C3B3F; --light-primary-nav-secondary-divider: #414146;
--light-secondary-nav-primary-divider: #424247; --light-secondary-nav-secondary-divider: #414247;
--dark-primary-nav-primary-divider: #4d4d51; --dark-primary-nav-secondary-divider: #4e5054;
--dark-secondary-nav-primary-divider: #424247; --dark-secondary-nav-secondary-divider: #414247;
--secondary-action-primary-divider: #D0D0DA; --secondary-action-secondary-divider: #E6E6ED;
--primary-action-primary-divider: #CEBBAB; --primary-action-secondary-divider: #E0CCBA;
--call-to-action-primary-divider: #3A473A; --call-to-action-secondary-divider: #4C5E4C#9CA29C;
--dangerous-action-primary-divider: #B24444; --dangerous-action-secondary-divider: #C44B4B;
/* Company Colours */
--sky: #D6DCDC; --sky-hover: #DCE1E1; --sky-active: #b8c2c2; --sky-inactive: #CECECE;
--eucalpyt: #677F67; --eucalpyt-hover: #7A907A; --eucalpyt-active: #516650; --eucalpyt-inactive: #6C746C;
--blush: #EFDAC5; --blush-hover: #F2E0CE; --blush-active: #E7CAAF; --blush-inactive: #E4DDD5;
--eggshell: #E3DBC7; --eggshell-hover: #E7E1D0; --eggshell-active: #D7CBB1; --eggshell-inactive: #DEDBD4;
--rust: #8B351D; --rust-hover: #9B4A2F; --rust-active: #6B2010; --rust-inactive: #61443C;
/* Actions */
/* States */
--valid-input: #76b43a;
--invalid-input: #cf576e;
--bad: #cb2f2f;
--good: #37a954;
--neutral: #3795aa;
--warning: #ebc447;
/* Selected */
--selected-foreground: var(--dark-foreground);
--selected-foreground-active: var(--dark-foreground-active);
--selected-foreground-hover: var(--dark-foreground-hover);
--selected-foreground-inactive: var(--dark-foreground-inactive);
/* General actions: Sky */
--secondary-action: var(--sky); --secondary-action-hover: var(--sky-hover);
--secondary-action-active: var(--sky-active); --secondary-action-inactive: var(--sky-inactive);
--secondary-action-foreground: var(--light-foreground); --secondary-action-foreground-hover: var(--light-foreground-hover);
--secondary-action-foreground-active: var(--light-foreground-active); --secondary-action-foreground-inactive: var(--light-foreground-inactive);
/* Primary actions: Blush */
--primary-action: var(--blush); --primary-action-hover: var(--blush-hover);
--primary-action-active: var(--blush-active); --primary-action-inactive: var(--blush-inactive);
--primary-action-foreground: var(--light-foreground); --primary-action-foreground-hover: var(--light-foreground-hover);
--primary-action-foreground-active: var(--light-foreground-active); --primary-action-foreground-inactive: var(--light-foreground-inactive);
/* Call to actions: eucalpyt */
--call-to-action: var(--eucalpyt); --call-to-action-hover: var(--eucalpyt-hover);
--call-to-action-active: var(--eucalpyt-active); --call-to-action-inactive: var(--eucalpyt-inactive);
--call-to-action-foreground: var(--dark-foreground); --call-to-action-foreground-hover: var(--dark-foreground-hover);
--call-to-action-foreground-active: var(--dark-foreground-active); --call-to-action-foreground-inactive: var(--dark-foreground-inactive);
/* Dangerous actions: Rust */
--dangerous-action: #D14E4E; --dangerous-action-hover: #E85D5D;
--dangerous-action-active: #CE4949; --dangerous-action-inactive: #B25F5F;
--dangerous-action-foreground: var(--dark-foreground); --dangerous-action-foreground-hover: var(--dark-foreground-hover);
--dangerous-action-foreground-active: var(--dark-foreground-active); --dangerous-action-foreground-inactive: var(--dark-foreground-inactive);
/* Special colours */
--weak-password: #bd6d46;
--medium-password: #e3ca3a;
--strong-password: #58b84f;
}
/* Themes */
/* Common Theme */
.b-theme-light, .b-theme-dark, .b-theme-system,
.b-theme-light *:before, .b-theme-dark *:before, .b-theme-system *:before,
.b-theme-light *:after, .b-theme-dark *:after, .b-theme-system *:after {
/* Text Size */
--text-size-sm: calc(11.5px * var(--text-size-scale));
--text-size-md: calc(13px * var(--text-size-scale));
--text-size-lg: calc(15px * var(--text-size-scale));
--text-size-hg: calc(18px * var(--text-size-scale));
--text-size: var(--text-size-md);
/* Icon Sizes */
--ui-icon-size-sm: 16px;
--ui-icon-size-md: 24px;
--ui-icon-size-lg: 32px;
--ui-icon-size-hg: 64px;
--ui-icon-size: var(--ui-icon-size-md);
/* Actions */
--action: initial; --action-hover: initial;
--action-active: initial; --action-inactive: initial;
/* Text Weights */
--text-weight-light: 300;
--text-weight-regular: 400;
--text-weight-bold: 500;
--text-weight-bolder: 600;
--text-weight-heavy: 700;
/* Roundness */
--dropdown-roundness: calc(10px * var(--global-scale));
--floating-control-roundness: calc(8px * var(--global-scale));
--panel-roundness: calc(15px * var(--global-scale));
--modal-roundness: calc(30px * var(--global-scale));
--border-roundness: calc(15px * var(--global-scale));
--button-roundness: calc(4px * var(--global-scale));
/* Floating Box Shadows */
--floating-box-shadow: 0px 0px calc(10px * var(--global-scale)) rgba(0,0,0,0.5);
--floating-box-shadow-large: 0px 0px calc(10px * var(--global-scale)) rgba(0,0,0,0.5);
--floating-box-shadow-regular: 0px calc(3px * var(--global-scale)) calc(8px * var(--global-scale)) rgba(0,0,0,0.4);
--floating-box-shadow-small: 0px calc(2px * var(--global-scale)) calc(1px * var(--global-scale)) rgba(0,0,0,0.15);
/* Modal Backdrops */
--modal-backdrop: rgba(0,0,0,0.20);
--dropdown-backdrop: rgba(0,0,0,0.1);
/* Hiding/Showing UI elements that should only show on light or dark backgrounds */
--display-dark-only: initial;
--display-light-only: initial;
}
/* Light Theme */
.b-theme-light, .b-theme-system {
/* Backgrounds */
--background: var(--light); --background-faint: var(--light-faint);
--background-disabled: var(--light-disabled);
--background-opaque: var(--light-opaque); --background-transparent: var(--light-transparent);
--main-content-background: var(--light); --main-content-background-faint: var(--light-faint);
--main-content-background-disabled: var(--light-disabled);
--primary-nav: var(--light-primary-nav); --primary-nav-faint: var(--light-primary-nav-faint);
--primary-nav-disabled: var(--light-primary-nav-disabled);
--secondary-nav: var(--light-secondary-nav); --secondary-nav-faint: var(--light-secondary-nav-faint);
--secondary-nav-disabled: var(--light-primary-nav-disabled);
--editor-background: var(--light-editor-background);
--unselected-background: var(--unselected-background-light);
--unselected-background-hover: var(--unselected-background-hover-light);
--unselected-background-active: var(--unselected-background-active-light);
/* Foregrounds */
--foreground: var(--light-foreground); --foreground-hover: var(--light-foreground-hover);
--foreground-active: var(--light-foreground-active); --foreground-inactive: var(--light-foreground-inactive);
--main-content-foreground: var(--light-foreground); --main-content-foreground-hover: var(--light-foreground-hover);
--main-content-foreground-active: var(--light-foreground-active); --main-content-foreground-inactive: var(--light-foreground-inactive);
--primary-nav-foreground: var(--light-foreground); --primary-nav-foreground-hover: var(--light-foreground-hover);
--primary-nav-foreground-active: var(--light-foreground-active); --primary-nav-foreground-inactive: var(--light-foreground-inactive);
--secondary-nav-foreground: var(--light-foreground); --secondary-nav-foreground-hover: var(--light-foreground-hover);
--secondary-nav-foreground-active: var(--light-foreground-active); --secondary-nav-foreground-inactive: var(--light-foreground-inactive);
--unselected-foreground: var(--foreground);
--unselected-foreground-active: var(--foreground-active);
--unselected-foreground-hover: var(--foreground-hover);
--unselected-foreground-inactive: var(--foreground-inactive);
/* Dividers */
--primary-divider: var(--light-primary-divider); --secondary-divider: var(--light-secondary-divider);
--main-content-primary-divider: var(--light-primary-divider); --main-content-secondary-divider: var(--light-secondary-divider);
--primary-nav-primary-divider: var(--light-primary-nav-primary-divider); --primary-nav-secondary-divider: var(--light-primary-nav-secondary-divider);
--secondary-nav-primary-divider: var(--light-secondary-nav-primary-divider); --secondary-nav-secondary-divider: var(--light-secondary-nav-secondary-divider);
/* Hide Dark Mode only content */
--display-light-only: initial;
--display-dark-only: none;
--main-content-display-dark-only: none; --main-content-display-light-only: initial;
--primary-nav-display-dark-only: none; --primary-nav-display-light-only: initial;
--secondary-nav-display-dark-only: none; --secondary-nav-display-light-only: initial;
/* Toggles */
--toggle-button: url("data:image/svg+xml,");
--toggle-button-hover: url("data:image/svg+xml,");
--toggle-button-checked: url("data:image/svg+xml,");
--toggle-button-disabled: url("data:image/svg+xml,");
--toggle-slider: url("data:image/svg+xml,");
--toggle-slider-disabled: url("data:image/svg+xml,");
}
/* Dark Theme */
.b-theme-dark {
/* Backgrounds */
--background: var(--dark); --background-faint: var(--dark-faint);
--background-disabled: var(--dark-disabled);
--background-opaque: var(--dark-opaque); --background-transparent: var(--dark-transparent);
--main-content-background: var(--dark); --main-content-background-faint: var(--dark-faint);
--main-content-background-disabled: var(--dark-disabled);
--primary-nav: var(--dark-primary-nav); --primary-nav-faint: var(--dark-primary-nav-faint);
--primary-nav-disabled: var(--dark-primary-nav-disabled);
--secondary-nav: var(--dark-secondary-nav); --secondary-nav-faint: var(--dark-secondary-nav-faint);
--secondary-nav-disabled: var(--dark-primary-nav-disabled);
--editor-background: var(--dark-editor-background);
--unselected-background: var(--unselected-background-dark);
--unselected-background-hover: var(--unselected-background-hover-dark);
--unselected-background-active: var(--unselected-background-active-dark);
/* Foregrounds */
--foreground: var(--dark-foreground); --foreground-hover: var(--dark-foreground-hover);
--foreground-active: var(--dark-foreground-active); --foreground-inactive: var(--dark-foreground-inactive);
--main-content-foreground: var(--dark-foreground); --main-content-foreground-hover: var(--dark-foreground-hover);
--main-content-foreground-active: var(--dark-foreground-active); --main-content-foreground-inactive: var(--dark-foreground-inactive);
--primary-nav-foreground: var(--dark-foreground); --primary-nav-foreground-hover: var(--dark-foreground-hover);
--primary-nav-foreground-active: var(--dark-foreground-active); --primary-nav-foreground-inactive: var(--dark-foreground-inactive);
--secondary-nav-foreground: var(--dark-foreground); --secondary-nav-foreground-hover: var(--dark-foreground-hover);
--secondary-nav-foreground-active: var(--dark-foreground-active); --secondary-nav-foreground-inactive: var(--dark-foreground-inactive);
--unselected-foreground: var(--foreground);
--unselected-foreground-active: var(--foreground-active);
--unselected-foreground-hover: var(--foreground-hover);
--unselected-foreground-inactive: var(--foreground-inactive);
/* Dividers */
--primary-divider: var(--dark-primary-divider); --secondary-divider: var(--dark-secondary-divider);
--main-content-primary-divider: var(--dark-primary-divider); --main-content-secondary-divider: var(--dark-secondary-divider);
--primary-nav-primary-divider: var(--dark-primary-nav-primary-divider); --primary-nav-secondary-divider: var(--dark-primary-nav-secondary-divider);
--secondary-nav-primary-divider: var(--dark-secondary-nav-primary-divider); --secondary-nav-secondary-divider: var(--dark-secondary-nav-secondary-divider);
/* Hide Dark Mode only content */
--display-dark-only: initial;
--display-light-only: none;
--primary-nav-display-dark-only: initial; --primary-nav-display-light-only: none;
--main-content-display-dark-only: initial; --main-content-display-light-only: none;
--secondary-nav-display-dark-only: initial; --secondary-nav-display-light-only: none;
/* Image filters */
--colour-scheme-image-filter: invert(1);
/* Toggles */
--toggle-button: url("data:image/svg+xml,");
--toggle-button-hover: url("data:image/svg+xml,");
--toggle-button-checked: url("data:image/svg+xml,");
--toggle-button-disabled: url("data:image/svg+xml,");
--toggle-slider: url("data:image/svg+xml,");
--toggle-slider-disabled: url("data:image/svg+xml,");
}
/* An exact duplicate of the above, due to CSS selector limitations. */
@media (prefers-color-scheme: dark) {
.b-theme-system {
/* Backgrounds */
--background: var(--dark); --background-faint: var(--dark-faint);
--background-disabled: var(--dark-disabled);
--background-opaque: var(--dark-opaque); --background-transparent: var(--dark-transparent);
--main-content-background: var(--dark); --main-content-background-faint: var(--dark-faint);
--main-content-background-disabled: var(--dark-disabled);
--primary-nav: var(--dark-primary-nav); --primary-nav-faint: var(--dark-primary-nav-faint);
--primary-nav-disabled: var(--dark-primary-nav-disabled);
--secondary-nav: var(--dark-secondary-nav); --secondary-nav-faint: var(--dark-secondary-nav-faint);
--secondary-nav-disabled: var(--dark-primary-nav-disabled);
--editor-background: var(--dark-editor-background);
--unselected-background: var(--unselected-background-dark);
--unselected-background-hover: var(--unselected-background-hover-dark);
--unselected-background-active: var(--unselected-background-active-dark);
/* Foregrounds */
--foreground: var(--dark-foreground); --foreground-hover: var(--dark-foreground-hover);
--foreground-active: var(--dark-foreground-active); --foreground-inactive: var(--dark-foreground-inactive);
--main-content-foreground: var(--dark-foreground); --main-content-foreground-hover: var(--dark-foreground-hover);
--main-content-foreground-active: var(--dark-foreground-active); --main-content-foreground-inactive: var(--dark-foreground-inactive);
--primary-nav-foreground: var(--dark-foreground); --primary-nav-foreground-hover: var(--dark-foreground-hover);
--primary-nav-foreground-active: var(--dark-foreground-active); --primary-nav-foreground-inactive: var(--dark-foreground-inactive);
--secondary-nav-foreground: var(--dark-foreground); --secondary-nav-foreground-hover: var(--dark-foreground-hover);
--secondary-nav-foreground-active: var(--dark-foreground-active); --secondary-nav-foreground-inactive: var(--dark-foreground-inactive);
--unselected-foreground: var(--foreground);
--unselected-foreground-active: var(--foreground-active);
--unselected-foreground-hover: var(--foreground-hover);
--unselected-foreground-inactive: var(--foreground-inactive);
/* Dividers */
--primary-divider: var(--dark-primary-divider); --secondary-divider: var(--dark-secondary-divider);
--main-content-primary-divider: var(--dark-primary-divider); --main-content-secondary-divider: var(--dark-secondary-divider);
--primary-nav-primary-divider: var(--dark-primary-nav-primary-divider); --primary-nav-secondary-divider: var(--dark-primary-nav-secondary-divider);
--secondary-nav-primary-divider: var(--dark-secondary-nav-primary-divider); --secondary-nav-secondary-divider: var(--dark-secondary-nav-secondary-divider);
/* Hide Dark Mode only content */
--display-dark-only: initial;
--display-light-only: none;
--primary-nav-display-dark-only: initial; --primary-nav-display-light-only: none;
--main-content-display-dark-only: initial; --main-content-display-light-only: none;
--secondary-nav-display-dark-only: initial; --secondary-nav-display-light-only: none;
/* Image filters */
--colour-scheme-image-filter: invert(1);
/* Toggles */
--toggle-button: url("data:image/svg+xml,");
--toggle-button-hover: url("data:image/svg+xml,");
--toggle-button-checked: url("data:image/svg+xml,");
--toggle-button-disabled: url("data:image/svg+xml,");
--toggle-slider: url("data:image/svg+xml,");
--toggle-slider-disabled: url("data:image/svg+xml,");
}
}
.background {
background-color: var(--background);
}
.faint-background {
--background: var(--background-faint);
}
.light-foreground {
--foreground: var(--light-foreground); --foreground-hover: var(--light-foreground-hover);
--foreground-active: var(--light-foreground-hover); --foreground-inactive: var(--light-foreground-inactive);
--primary-divider: var(--light-primary-divider); --secondary-divider: var(--light-secondary-divider);
--display-light-only: initial;
--display-dark-only: none;
}
.dark-foreground {
--foreground: var(--dark-foreground); --foreground-hover: var(--dark-foreground-hover);
--foreground-active: var(--dark-foreground-hover); --foreground-inactive: var(--dark-foreground-inactive);
--primary-divider: var(--dark-primary-divider); --secondary-divider: var(--dark-secondary-divider);
--display-light-only: none;
--display-light-only: initial;
}
.main-content {
--background: var(--main-content-background);
--background-faint: var(--main-content-background-faint);
--background-disabled: var(--main-content-background-disabled);
--foreground: var(--main-content-foreground); --foreground-hover: var(--main-content-foreground-hover);
--foreground-active: var(--main-content-foreground-active); --foreground-inactive: var(--main-content-foreground-inactive);
--primary-divider: var(--main-content-primary-divider); --secondary-divider: var(--main-content-secondary-divider);
--display-dark-only: var(--main-content-display-dark-only);
--display-light-only: var(--main-content-display-light-only);
}
/* App Frame */
.primary-nav {
--background: var(--primary-nav);
--background-faint: var(--primary-nav-faint);
--background-disabled: var(--primary-nav-disabled);
--foreground: var(--primary-nav-foreground); --foreground-hover: var(--primary-nav-foreground-hover);
--foreground-active: var(--primary-nav-foreground-active); --foreground-inactive: var(--primary-nav-foreground-inactive);
--primary-divider: var(--primary-nav-primary-divider); --secondary-divider: var(--primary-nav-secondary-divider);
--display-dark-only: var(--primary-nav-display-dark-only);
--display-light-only: var(--primary-nav-display-light-only);
}
.secondary-nav {
--background: var(--secondary-nav);
--background-faint: var(--secondary-nav-faint);
--background-disabled: var(--secondary-nav-disabled);
--foreground: var(--secondary-nav-foreground); --foreground-hover: var(--secondary-nav-foreground-hover);
--foreground-active: var(--secondary-nav-foreground-active); --foreground-inactive: var(--secondary-nav-foreground-inactive);
--primary-divider: var(--secondary-nav-primary-divider); --secondary-divider: var(--secondary-nav-secondary-divider);
--display-dark-only: var(--secondary-nav-display-dark-only);
--display-light-only: var(--secondary-nav-display-light-only);
}
.secondary-action {
--action: var(--secondary-action); --action-hover: var(--secondary-action-hover);
--action-active: var(--secondary-action-active); --action-inactive: var(--secondary-action-inactive);
--foreground: var(--light-foreground); --foreground-hover: var(--light-foreground-hover);
--foreground-active: var(--light-foreground-active); --foreground-inactive: var(--light-foreground-inactive);
--primary-divider: var(--secondary-action-primary-divider); --secondary-divider: var(--secondary-action-secondary-divider);
}
.primary-action {
--action: var(--primary-action); --action-hover: var(--primary-action-hover);
--action-active: var(--primary-action-active); --action-inactive: var(--primary-action-inactive);
--foreground: var(--light-foreground); --foreground-hover: var(--light-foreground-hover);
--foreground-active: var(--light-foreground-active); --foreground-inactive: var(--light-foreground-inactive);
--primary-divider: var(--primary-action-primary-divider); --secondary-divider: var(--primary-action-secondary-divider);
}
.call-to-action {
--action: var(--call-to-action); --action-hover: var(--call-to-action-hover);
--action-active: var(--call-to-action-active); --action-inactive: var(--call-to-action-inactive);
--foreground: var(--call-to-action-foreground); --foreground-hover: var(--call-to-action-foreground-hover);
--foreground-active: var(--call-to-action-foreground-active); --foreground-inactive: var(--call-to-action-foreground-inactive);
--primary-divider: var(--call-to-action-primary-divider); --secondary-divider: var(--call-to-action-secondary-divider);
}
.dangerous-action {
--action: var(--dangerous-action); --action-hover: var(--dangerous-action-hover);
--action-active: var(--dangerous-action-active); --action-inactive: var(--dangerous-action-inactive);
--foreground: var(--dark-foreground); --foreground-hover: var(--dark-foreground-hover);
--foreground-active: var(--dark-foreground-active); --foreground-inactive: var(--dark-foreground-inactive);
--primary-divider: var(--dangerous-action-primary-divider); --secondary-divider: var(--dangerous-action-secondary-divider);
}
.selected {
--action: var(--selected-background); --action-hover: var(--selected-hover);
--action-active: var(--selected-active);
--foreground: var(--selected-foreground); --foreground-hover: var(--selected-foreground-hover);
--foreground-active: var(--selected-foreground-active); --foreground-inactive: var(--selected-foreground-inactive);
}
.unselected {
--action: var(--unselected-background); --action-hover: var(--unselected-hover);
--action-active: var(--unselected-active);
--foreground: var(--unselected-foreground); --foreground-hover: var(--unselected-foreground-hover);
--foreground-active: var(--unselected-foreground-active); --foreground-inactive: var(--unselected-foreground-inactive);
}
:root, html, body {
background-color: var(--background);
font-size: var(--text-size);
}
:root, html, body, textarea::placeholder, input[type=text]::placeholder, input[type=number]::placeholder, *:after, *:before {
font-family: "Graphik";
letter-spacing: 0.2px;
font-size: var(--text-size);
font-weight: var(--text-weight-light);
color: var(--foreground);
}
input[type=date], input[type=datetime-local], input[type=text], input[type=number], textarea {
font-family: "Graphik";
letter-spacing: 0.2px;
font-size: var(--text-size);
color: var(--foreground);
}
.text {
color: var(--foreground);
font-size: var(--text-size);
}
/* Utilities */
/* Show or hide something based on theme */
.dark-theme-only { display: var(--display-dark-only); } /* Only display this if the background of the UI area is mainly dark */
.light-theme-only { display: var(--display-light-only); } /* Only display this if the background of the UI area is mainly light */
/* Font sizes */
.text-size-sm, .text-size-sm *::before, .text-size-sm *::after, .text-size-sm::before, .text-size-sm::after { --text-size: var(--text-size-sm); }
.text-size-md, .text-size-md *::before, .text-size-md *::after, .text-size-md::before, .text-size-md::after { --text-size: var(--text-size-md); }
.text-size-lg, .text-size-lg *::before, .text-size-lg *::after, .text-size-lg::before, .text-size-lg::after { --text-size: var(--text-size-lg); }
.text-size-hg, .text-size-hg *::before, .text-size-hg *::after, .text-size-hg::before, .text-size-hg::after { --text-size: var(--text-size-hg); }
/* Font appearances */
.text-weight-light { font-weight: var(--text-weight-light); }
.text-weight-regular { font-weight: var(--text-weight-regular); }
.text-weight-bold { font-weight: var(--text-weight-bold); }
.text-weight-bolder { font-weight: var(--text-weight-bolder); }
.text-weight-heavy { font-weight: var(--text-weight-heavy); }
b { font-weight: var(--text-weight-bold); }
/* Faint text */
.text-colour { color: var(--foreground); }
.text-faint { color: var(--foreground-inactive); }
/* Icon sizes */
.ui-icon-sm { --ui-icon-size: var(--ui-icon-size-sm); }
.ui-icon-md { --ui-icon-size: var(--ui-icon-size-md); }
.ui-icon-lg { --ui-icon-size: var(--ui-icon-size-lg); }
.ui-icon-hg { --ui-icon-size: var(--ui-icon-size-hg); }
/* Layouts */
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right }
.align-left::before { text-align: left; } .align-center::before { text-align: center; } .align-right::before { text-align: right }
.align-left::after { text-align: left; } .align-center::after { text-align: center; } .align-right::after { text-align: right }
/* Displays */
.block {display: block; } .inlineblock { display: inline-block; }
.aspect-ratio-square { aspect-ratio: 1; }
.aspect-ratio-16-9 { aspect-ratio: 16 / 9; }
.aspect-ratio-4-3 { aspect-ratio: 4 / 3; }
.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }
/* Widths PC */
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-33 { width: 33.333%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66.666%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }
/* Max Widths PC */
.mw-20 { width: 20%; }
.mw-25 { width: 25%; }
.mw-33 { width: 33.333%; }
.mw-40 { width: 40%; }
.mw-50 { width: 50%; }
.mw-60 { width: 60%; }
.mw-66 { width: 66.666%; }
.mw-75 { width: 75%; }
.mw-80 { width: 80%; }
.mw-100 { width: 100%; }
/* Widths */
.w-50px { width: calc(50px * var(--global-scale)); }
.w-64px { width: calc(64px * var(--global-scale)); }
.w-75px { width: calc(75px * var(--global-scale)); }
.w-100px { width: calc(100px * var(--global-scale)); }
.w-128px { width: calc(128px * var(--global-scale)); }
.w-150px { width: calc(150px * var(--global-scale)); }
.w-200px { width: calc(200px * var(--global-scale)); }
.w-250px { width: calc(250px * var(--global-scale)); }
.w-256px { width: calc(256px * var(--global-scale)); }
.w-300px { width: calc(300px * var(--global-scale)); }
.w-400px { width: calc(400px * var(--global-scale)); }
.w-500px { width: calc(500px * var(--global-scale)); }
/* Heights */
.h-50px { height: calc(50px * var(--global-scale)); }
.h-64px { height: calc(64px * var(--global-scale)); }
.h-75px { height: calc(75px * var(--global-scale)); }
.h-100px { height: calc(100px * var(--global-scale)); }
.h-128px { height: calc(128px * var(--global-scale)); }
.h-150px { height: calc(150px * var(--global-scale)); }
.h-200px { height: calc(200px * var(--global-scale)); }
.h-256px { height: calc(256px * var(--global-scale)); }
.h-300px { height: calc(400px * var(--global-scale)); }
.h-400px { height: calc(400px * var(--global-scale)); }
.h-500px { height: calc(500px * var(--global-scale)); }
.h-600px { height: calc(600px * var(--global-scale)); }
/* Max-widths PX */
.mw-100px { max-width: 100px; }
.mw-200px { max-width: 200px; }
.mw-250px { max-width: 250px; }
.mw-300px { max-width: 300px; }
.mw-350px { max-width: 350px; }
.mw-400px { max-width: 400px; }
.mw-500px { max-width: 500px; }
.mw-600px { max-width: 600px; }
.mw-800px { max-width: 800px; }
/* Max-heights PX */
.mh-100px { max-height: 100px; }
.mh-200px { max-height: 200px; }
.mh-300px { max-height: 300px; }
.mh-400px { max-height: 400px; }
.mh-500px { max-height: 500px; }
.mh-600px { max-height: 600px; }
.mh-800px { max-height: 800px; }
/* Min-widths PX */
.mnw-100px { min-width: 100px; }
.mnw-150px { min-width: 150px; }
.mnw-200px { min-width: 200px; }
.mnw-300px { min-width: 300px; }
.mnw-400px { min-width: 400px; }
.mnw-500px { min-width: 500px; }
.mnw-600px { min-width: 600px; }
.mnw-800px { min-width: 800px; }
/* Min-heights PX */
.mnh-100px { min-height: 100px; }
.mnh-200px { min-height: 200px; }
.mnh-300px { min-height: 300px; }
.mnh-400px { min-height: 400px; }
.mnh-500px { min-height: 500px; }
.mnh-600px { min-height: 600px; }
.mnh-800px { min-height: 800px; }
/* Adjust width to fit different breakpoints and snap to 100% when below the minimum size. */
.border-box { box-sizing: border-box; }
.container { container: content / inline-size; }
.w-responsive { width: 100%; }
@media screen and (min-width: 576px) { .w-responsive { width: 540px; } }
@media screen and (min-width: 768px) { .w-responsive { width: 720px; } }
@media screen and (min-width: 992px) { .w-responsive { width: 960px; } }
@media screen and (min-width: 1200px) { .w-responsive { width: 1140px; } }
@media screen and (min-width: 1400px) { .w-responsive { width: 1320px; } }
.w-responsive-container { width: 100%; }
@container content (min-width: 576px) { .w-responsive-container { width: 540px; } }
@container content (min-width: 768px) { .w-responsive-container { width: 720px; } }
@container content (min-width: 992px) { .w-responsive-container { width: 960px; } }
@container content (min-width: 1200px) { .w-responsive-container { width: 1140px; } }
@container content (min-width: 1400px) { .w-responsive-container { width: 1320px; } }
/* Responsiveness Media Queries to Show/Hide Content */
/* Only {size} */
.xs-only { display: inherit !important; }
.sm-only, .md-only, .lg-only, .xl-only, .xxl-only { display: none !important; }
/* Show on {size} and up. */
.xs-up { display: inherit !important; }
.sm-up, .md-up , .lg-up, .xl-up { display: none !important; }
/* Show on {size} and down. */
.sm-down, .md-down, .lg-down, .xl-down, .xxl-down { display: inherit; }
/* Small */
@media screen and (min-width: 576px) {
.sm-only { display: inherit !important; } .xs-only, .md-only, .lg-only, .xl-only, .xxl-only { display: none !important; }
.xs-up, .sm-up { display: inherit !important; } .md-up , .lg-up, .xl-up { display: none !important; }
.sm-down, .md-down, .lg-down, .xl-down, .xxl-down { display: inherit; }
}
/* Medium */
@media screen and (min-width: 768px) {
.md-only { display: inherit !important; } .xs-only, .sm-only, .lg-only, .xl-only, .xxl-only { display: none !important; }
.xs-up, .sm-up, .md-up { display: inherit !important; } .lg-up, .xl-up { display: none !important; }
.sm-down { display: none !important; } .md-down, .lg-down, .xl-down, .xxl-down { display: inherit; }
}
/* Large */
@media screen and (min-width: 992px) {
.lg-only { display: inherit !important; } .xs-only, .sm-only, .md-only, .xl-only, .xxl-only { display: none !important; }
.xs-up, .sm-up, .md-up, .lg-up { display: inherit !important; } .xl-up { display: none !important; }
.sm-down, .md-down { display: none !important; } .lg-down, .xl-down, .xxl-down { display: inherit; }
}
/* X Large */
@media screen and (min-width: 1200px) {
.xl-only { display: inherit !important; } .xs-only, .sm-only, .md-only, .lg-only, .xxl-only { display: none !important; }
.xs-up, .sm-up, .md-up, .lg-up, .xl-up { display: inherit !important; }
.sm-down, .md-down, .lg-down { display: none !important; } .xl-down, .xxl-down { display: inherit; }
}
/* XX Large */
@media screen and (min-width: 1400px) {
.xxl-only { display: inherit !important; } .xs-only, .sm-only, .md-only, .lg-only, .xl-only { display: none !important; }
.xs-up, .sm-up, .md-up, .lg-up, .xl-up { display: inherit !important; }
.sm-down, .md-down, .lg-down, .xl-down { display: none !important; } .xxl-down { display: inherit; }
}
/* Fullscreen Layout */
.pos-relative { position: relative; }
.pos-absolute-top { position: absolute; left: 0; right: 0; top: 0; }
.pos-absolute-bottom { position: absolute; left: 0; right: 0; bottom: 0; }
.pos-absolute-top-left { position: absolute; left: 0; top: 0; }
.pos-absolute-top-right { position: absolute; right: 0; top: 0; }
.pos-absolute-right { position: absolute; right: 0; }
.pos-absolute-left { position: absolute; left: 0; }
.pos-absolute-bottom-left { position: absolute; left: 0; bottom: 0; }
.pos-absolute-bottom-right { position: absolute; right: 0; bottom: 0; }
/* Flex Layouts */
.flex-column { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-inline-row { display: inline-flex; flex-direction: row; }
.flex-inline-column { display: inline-flex; flex-direction: column; }
.flex-align-center { align-items: center; }
.flex-align-baseline { align-items: baseline; }
.flex-align-stretch { align-items: stretch; }
.flex-align-start { align-items: start; }
.flex-align-end { align-items: end; }
.flex-align-baseline { align-items: baseline; }
.flex-justify-center { justify-content: center; }
.flex-justify-start { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-space-around { justify-content: space-around; }
.flex-justify-space-between { justify-content: space-between; }
.flex-align-item-start { align-self: flex-start; }
.flex-align-item-center { align-self: center; }
.flex-align-item-end { align-self: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.align-items-start { align-items: start; }
.align-items-end { align-items: end; }
.align-items-baseline { align-items: baseline; }
.justify-content-center { justify-content: center; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-space-around { justify-content: space-around; }
.justify-content-space-between { justify-content: space-between; }
.align-self-item-start { align-self: flex-start; }
.align-self-item-center { align-self: center; }
.align-self-item-end { align-self: flex-end; }
.flex-no-shrink { flex-shrink: 0; }
.flex-no-grow { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-grow { flex-grow: 1; }
.flex-grow-max { flex-grow: 100; }
.flex-basis-1 { flex-basis: 1; }
.flex-basis-0 { flex-basis: 0; }
.flex-gap { gap: 0.5em; }
.flex-gap-1 { gap: 1em; }
.flex-gap-2 { gap: 2em; }
.flex-gap-3 { gap: 3em; }
.gap { gap: 0.5em; }
.gap-1 { gap: 1em; }
.gap-2 { gap: 2em; }
.gap-3 { gap: 3em; }
.flex-wrap { flex-wrap: wrap; }
/* Grid Layout */
.grid { display: grid; box-sizing: border-box; }
.grid-inline { display: inline-grid; }
.grid-2-columns-auto { grid-template-columns: auto auto; }
.grid-3-columns-auto { grid-template-columns: auto auto auto; }
.grid-4-columns-auto { grid-template-columns: auto auto auto auto; }
.grid-5-columns-auto { grid-template-columns: auto auto auto auto; }
.grid-2-columns { grid-template-columns: 50% 50% }
.grid-3-columns { grid-template-columns: 33.333% 33.333% 33.333% }
.grid-4-columns { grid-template-columns: 25% 25% 25% 25% }
.grid-5-columns { grid-template-columns: 20% 20% 20% 20% 20% }
.grid-fluid-100px { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.grid-fluid-150px { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid-fluid-175px { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.grid-fluid-200px { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-fluid-300px { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-fluid-400px { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-fluid-500px { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-cell-1-1 { grid-column-start: 1; grid-column-end: 1; grid-row-start: 1; grid-row-end: 1; }
/* Bootstrap style column layout tools */
.row {
display: flex;
flex-wrap: wrap;
}
.row > * {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.col { flex: 1 0 0%; width: 100%; max-width: 100%; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex: 0 0 auto; }
.col-1 { width: 8.333%; }
.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-5 { width: 41.666%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333%; }
.col-8 { width: 66.666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333%; }
.col-11 { width: 91.666%; }
.col-12 { width: 100%; }
@media screen and (min-width: 576px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { flex: 0 0 auto; }
.col-sm-1 { width: 8.333%; }
.col-sm-2 { width: 16.666%; }
.col-sm-3 { width: 25%; }
.col-sm-4 { width: 33.333%; }
.col-sm-5 { width: 41.666%; }
.col-sm-6 { width: 50%; }
.col-sm-7 { width: 58.333%; }
.col-sm-8 { width: 66.666%; }
.col-sm-9 { width: 75%; }
.col-sm-10 { width: 83.333%; }
.col-sm-11 { width: 91.666%; }
.col-sm-12 { width: 100%; }
}
@media screen and (min-width: 768px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { flex: 0 0 auto; }
.col-md-1 { width: 8.333%; }
.col-md-2 { width: 16.666%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333%; }
.col-md-5 { width: 41.666%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333%; }
.col-md-8 { width: 66.666%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.333%; }
.col-md-11 { width: 91.666%; }
.col-md-12 { width: 100%; }
}
@media screen and (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { flex: 0 0 auto; }
.col-lg-1 { width: 8.333%; }
.col-lg-2 { width: 16.666%; }
.col-lg-3 { width: 25%; }
.col-lg-4 { width: 33.333%; }
.col-lg-5 { width: 41.666%; }
.col-lg-6 { width: 50%; }
.col-lg-7 { width: 58.333%; }
.col-lg-8 { width: 66.666%; }
.col-lg-9 { width: 75%; }
.col-lg-10 { width: 83.333%; }
.col-lg-11 { width: 91.666%; }
.col-lg-12 { width: 100%; }
}
@media screen and (min-width: 450px) {
.grid-fluid-400px { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.grid-fluid-500px { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}
@media screen and (min-width: 550px) {
.grid-fluid-500px { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); }
}
.grid-gap { column-gap: 0.5em; row-gap: 0.5em; }
.grid-gap-1 { column-gap: 1em; row-gap: 1em; }
.grid-gap-2 { column-gap: 2em; row-gap: 2em; }
.grid-gap-3 { column-gap: 3em; row-gap: 3em; }
/* Margins */
.m-a { margin: auto; }
.m { margin: 0.5em; }
.m-0 { margin: 0em; }
.m-1 { margin: 1em; }
.m-2 { margin: 2em; }
.m-3 { margin: 3em; }
.m-4 { margin: 4em; }
.m-5 { margin: 5em; }
.ml-a { margin-left: auto; }
.ml { margin-left: 0.5em; }
.ml-0 { margin-left: 0em; }
.ml-1 { margin-left: 1em; }
.ml-2 { margin-left: 2em; }
.ml-3 { margin-left: 3em; }
.ml-4 { margin-left: 4em; }
.ml-5 { margin-left: 5em; }
.mr-a { margin-right: auto; }
.mr { margin-right: 0.5em; }
.mr-0 { margin-right: 0em; }
.mr-1 { margin-right: 1em; }
.mr-2 { margin-right: 2em; }
.mr-3 { margin-right: 3em; }
.mr-4 { margin-right: 4em; }
.mr-5 { margin-right: 5em; }
.mt-a { margin-top: auto; }
.mt { margin-top: 0.5em; }
.mt-0 { margin-top: 0em; }
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.mt-3 { margin-top: 3em; }
.mt-4 { margin-top: 4em; }
.mt-5 { margin-top: 5em; }
.mb-a { margin-bottom: auto; }
.mb { margin-bottom: 0.5em; }
.mb-0 { margin-bottom: 0em; }
.mb-1 { margin-bottom: 1em; }
.mb-2 { margin-bottom: 2em; }
.mb-3 { margin-bottom: 3em; }
.mb-4 { margin-bottom: 4em; }
.mb-5 { margin-bottom: 5em; }
.mx-a { margin-left: auto; margin-right: auto; }
.mx { margin-left: 0.5em; margin-right: 0.5em; }
.mx-0 { margin-left: 0em; margin-right: 0em; }
.mx-1 { margin-left: 1em; margin-right: 1em; }
.mx-2 { margin-left: 2em; margin-right: 2em; }
.mx-3 { margin-left: 3em; margin-right: 3em; }
.mx-4 { margin-left: 4em; margin-right: 4em; }
.mx-5 { margin-left: 5em; margin-right: 5em; }
.my-a { margin-top: auto; margin-bottom: auto; }
.my { margin-top: 0.5em; margin-bottom: 0.5em; }
.my-0 { margin-top: 0em; margin-bottom: 0em; }
.my-1 { margin-top: 1em; margin-bottom: 1em; }
.my-2 { margin-top: 2em; margin-bottom: 2em; }
.my-3 { margin-top: 3em; margin-bottom: 3em; }
.my-4 { margin-top: 4em; margin-bottom: 4em; }
.my-5 { margin-top: 5em; margin-bottom: 5em; }
/* Small screen or larger only margins */
@media screen and (min-width: 576px) {
/* Margins */
.m-a-sm { margin: auto; }
.m-sm { margin: 0.5em; }
.m-0-sm { margin: 0em; }
.m-1-sm { margin: 1em; }
.m-2-sm { margin: 2em; }
.m-3-sm { margin: 3em; }
.m-4-sm { margin: 4em; }
.m-5-sm { margin: 5em; }
.ml-a-sm { margin-left: auto; }
.ml-sm { margin-left: 0.5em; }
.ml-0-sm { margin-left: 0em; }
.ml-1-sm { margin-left: 1em; }
.ml-2-sm { margin-left: 2em; }
.ml-3-sm { margin-left: 3em; }
.ml-4-sm { margin-left: 4em; }
.ml-5-sm { margin-left: 5em; }
.mr-a-sm { margin-right: auto; }
.mr-sm { margin-right: 0.5em; }
.mr-0-sm { margin-right: 0em; }
.mr-1-sm { margin-right: 1em; }
.mr-2-sm { margin-right: 2em; }
.mr-3-sm { margin-right: 3em; }
.mr-4-sm { margin-right: 4em; }
.mr-5-sm { margin-right: 5em; }
.mt-a-sm { margin-top: auto; }
.mt-sm { margin-top: 0.5em; }
.mt-0-sm { margin-top: 0em; }
.mt-1-sm { margin-top: 1em; }
.mt-2-sm { margin-top: 2em; }
.mt-3-sm { margin-top: 3em; }
.mt-4-sm { margin-top: 4em; }
.mt-5-sm { margin-top: 5em; }
.mb-a-sm { margin-bottom: auto; }
.mb-sm { margin-bottom: 0.5em; }
.mb-0-sm { margin-bottom: 0em; }
.mb-1-sm { margin-bottom: 1em; }
.mb-2-sm { margin-bottom: 2em; }
.mb-3-sm { margin-bottom: 3em; }
.mb-4-sm { margin-bottom: 4em; }
.mb-5-sm { margin-bottom: 5em; }
.mx-a-sm { margin-left: auto; margin-right: auto; }
.mx-sm { margin-left: 0.5em; margin-right: 0.5em; }
.mx-0-sm { margin-left: 0em; margin-right: 0em; }
.mx-1-sm { margin-left: 1em; margin-right: 1em; }
.mx-2-sm { margin-left: 2em; margin-right: 2em; }
.mx-3-sm { margin-left: 3em; margin-right: 3em; }
.mx-4-sm { margin-left: 4em; margin-right: 4em; }
.mx-5-sm { margin-left: 5em; margin-right: 5em; }
.my-a-sm { margin-top: auto; margin-bottom: auto; }
.my-sm { margin-top: 0.5em; margin-bottom: 0.5em; }
.my-0-sm { margin-top: 0em; margin-bottom: 0em; }
.my-1-sm { margin-top: 1em; margin-bottom: 1em; }
.my-2-sm { margin-top: 2em; margin-bottom: 2em; }
.my-3-sm { margin-top: 3em; margin-bottom: 3em; }
.my-4-sm { margin-top: 4em; margin-bottom: 4em; }
.my-5-sm { margin-top: 5em; margin-bottom: 5em; }
}
/* Medium screen or larger only margins */
@media screen and (min-width: 768px) {
/* Margins */
.m-a-md { margin: auto; }
.m-md { margin: 0.5em; }
.m-0-md { margin: 0em; }
.m-1-md { margin: 1em; }
.m-2-md { margin: 2em; }
.m-3-md { margin: 3em; }
.m-4-md { margin: 4em; }
.m-5-md { margin: 5em; }
.ml-a-md { margin-left: auto; }
.ml-md { margin-left: 0.5em; }
.ml-0-md { margin-left: 0em; }
.ml-1-md { margin-left: 1em; }
.ml-2-md { margin-left: 2em; }
.ml-3-md { margin-left: 3em; }
.ml-4-md { margin-left: 4em; }
.ml-5-md { margin-left: 5em; }
.mr-a-md { margin-right: auto; }
.mr-md { margin-right: 0.5em; }
.mr-0-md { margin-right: 0em; }
.mr-1-md { margin-right: 1em; }
.mr-2-md { margin-right: 2em; }
.mr-3-md { margin-right: 3em; }
.mr-4-md { margin-right: 4em; }
.mr-5-md { margin-right: 5em; }
.mt-a-md { margin-top: auto; }
.mt-md { margin-top: 0.5em; }
.mt-0-md { margin-top: 0em; }
.mt-1-md { margin-top: 1em; }
.mt-2-md { margin-top: 2em; }
.mt-3-md { margin-top: 3em; }
.mt-4-md { margin-top: 4em; }
.mt-5-md { margin-top: 5em; }
.mb-a-md { margin-bottom: auto; }
.mb-md { margin-bottom: 0.5em; }
.mb-0-md { margin-bottom: 0em; }
.mb-1-md { margin-bottom: 1em; }
.mb-2-md { margin-bottom: 2em; }
.mb-3-md { margin-bottom: 3em; }
.mb-4-md { margin-bottom: 4em; }
.mb-5-md { margin-bottom: 5em; }
.mx-a-md { margin-left: auto; margin-right: auto; }
.mx-md { margin-left: 0.5em; margin-right: 0.5em; }
.mx-0-md { margin-left: 0em; margin-right: 0em; }
.mx-1-md { margin-left: 1em; margin-right: 1em; }
.mx-2-md { margin-left: 2em; margin-right: 2em; }
.mx-3-md { margin-left: 3em; margin-right: 3em; }
.mx-4-md { margin-left: 4em; margin-right: 4em; }
.mx-5-md { margin-left: 5em; margin-right: 5em; }
.my-a-md { margin-top: auto; margin-bottom: auto; }
.my-md { margin-top: 0.5em; margin-bottom: 0.5em; }
.my-0-md { margin-top: 0em; margin-bottom: 0em; }
.my-1-md { margin-top: 1em; margin-bottom: 1em; }
.my-2-md { margin-top: 2em; margin-bottom: 2em; }
.my-3-md { margin-top: 3em; margin-bottom: 3em; }
.my-4-md { margin-top: 4em; margin-bottom: 4em; }
.my-5-md { margin-top: 5em; margin-bottom: 5em; }
}
/* Large screen or larger only margins */
@media screen and (min-width: 992px) {
/* Margins */
.m-a-lg { margin: auto; }
.m-lg { margin: 0.5em; }
.m-0-lg { margin: 0em; }
.m-1-lg { margin: 1em; }
.m-2-lg { margin: 2em; }
.m-3-lg { margin: 3em; }
.m-4-lg { margin: 4em; }
.m-5-lg { margin: 5em; }
.ml-a-lg { margin-left: auto; }
.ml-lg { margin-left: 0.5em; }
.ml-0-lg { margin-left: 0em; }
.ml-1-lg { margin-left: 1em; }
.ml-2-lg { margin-left: 2em; }
.ml-3-lg { margin-left: 3em; }
.ml-4-lg { margin-left: 4em; }
.ml-5-lg { margin-left: 5em; }
.mr-a-lg { margin-right: auto; }
.mr-lg { margin-right: 0.5em; }
.mr-0-lg { margin-right: 0em; }
.mr-1-lg { margin-right: 1em; }
.mr-2-lg { margin-right: 2em; }
.mr-3-lg { margin-right: 3em; }
.mr-4-lg { margin-right: 4em; }
.mr-5-lg { margin-right: 5em; }
.mt-a-lg { margin-top: auto; }
.mt-lg { margin-top: 0.5em; }
.mt-0-lg { margin-top: 0em; }
.mt-1-lg { margin-top: 1em; }
.mt-2-lg { margin-top: 2em; }
.mt-3-lg { margin-top: 3em; }
.mt-4-lg { margin-top: 4em; }
.mt-5-lg { margin-top: 5em; }
.mb-a-lg { margin-bottom: auto; }
.mb-lg { margin-bottom: 0.5em; }
.mb-0-lg { margin-bottom: 0em; }
.mb-1-lg { margin-bottom: 1em; }
.mb-2-lg { margin-bottom: 2em; }
.mb-3-lg { margin-bottom: 3em; }
.mb-4-lg { margin-bottom: 4em; }
.mb-5-lg { margin-bottom: 5em; }
.mx-a-lg { margin-left: auto; margin-right: auto; }
.mx-lg { margin-left: 0.5em; margin-right: 0.5em; }
.mx-0-lg { margin-left: 0em; margin-right: 0em; }
.mx-1-lg { margin-left: 1em; margin-right: 1em; }
.mx-2-lg { margin-left: 2em; margin-right: 2em; }
.mx-3-lg { margin-left: 3em; margin-right: 3em; }
.mx-4-lg { margin-left: 4em; margin-right: 4em; }
.mx-5-lg { margin-left: 5em; margin-right: 5em; }
.my-a-lg { margin-top: auto; margin-bottom: auto; }
.my-lg { margin-top: 0.5em; margin-bottom: 0.5em; }
.my-0-lg { margin-top: 0em; margin-bottom: 0em; }
.my-1-lg { margin-top: 1em; margin-bottom: 1em; }
.my-2-lg { margin-top: 2em; margin-bottom: 2em; }
.my-3-lg { margin-top: 3em; margin-bottom: 3em; }
.my-4-lg { margin-top: 4em; margin-bottom: 4em; }
.my-5-lg { margin-top: 5em; margin-bottom: 5em; }
}
/* Padding */
.p { padding: 0.5em; }
.p-0 { padding: 0em; }
.p-1 { padding: 1em; }
.p-2 { padding: 2em; }
.p-3 { padding: 3em; }
.p-4 { padding: 4em; }
.p-5 { padding: 5em; }
.pl { padding-left: 0.5em; }
.pl-0 { padding-left: 0em; }
.pl-1 { padding-left: 1em; }
.pl-2 { padding-left: 2em; }
.pl-3 { padding-left: 3em; }
.pl-4 { padding-left: 4em; }
.pl-5 { padding-left: 5em; }
.pr { padding-right: 0.5em; }
.pr-0 { padding-right: 0em; }
.pr-1 { padding-right: 1em; }
.pr-2 { padding-right: 2em; }
.pr-3 { padding-right: 3em; }
.pr-4 { padding-right: 4em; }
.pr-5 { padding-right: 5em; }
.pt { padding-top: 0.5em; }
.pt-0 { padding-top: 0em; }
.pt-1 { padding-top: 1em; }
.pt-2 { padding-top: 2em; }
.pt-3 { padding-top: 3em; }
.pt-4 { padding-top: 4em; }
.pt-5 { padding-top: 5em; }
.pb { padding-bottom: 0.5em; }
.pb-0 { padding-bottom: 0em; }
.pb-1 { padding-bottom: 1em; }
.pb-2 { padding-bottom: 2em; }
.pb-3 { padding-bottom: 3em; }
.pb-4 { padding-bottom: 4em; }
.pb-5 { padding-bottom: 5em; }
.px { padding-left: 0.5em; padding-right: 0.5em; }
.px-0 { padding-left: 0em; padding-right: 0em; }
.px-1 { padding-left: 1em; padding-right: 1em; }
.px-2 { padding-left: 2em; padding-right: 2em; }
.px-3 { padding-left: 3em; padding-right: 3em; }
.px-4 { padding-left: 4em; padding-right: 4em; }
.px-5 { padding-left: 5em; padding-right: 5em; }
.py { padding-top: 0.5em; padding-bottom: 0.5em; }
.py-0 { padding-top: 0em; padding-bottom: 0em; }
.py-1 { padding-top: 1em; padding-bottom: 1em; }
.py-2 { padding-top: 2em; padding-bottom: 2em; }
.py-3 { padding-top: 3em; padding-bottom: 3em; }
.py-4 { padding-top: 4em; padding-bottom: 4em; }
.py-5 { padding-top: 5em; padding-bottom: 5em; }
/* Small screen or larger only paddings */
@media screen and (min-width: 576px) {
.p-sm { padding: 0.5em; }
.p-0-sm { padding: 0em; }
.p-1-sm { padding: 1em; }
.p-2-sm { padding: 2em; }
.p-3-sm { padding: 3em; }
.p-4-sm { padding: 4em; }
.p-5-sm { padding: 5em; }
.pl-sm { padding-left: 0.5em; }
.pl-0-sm { padding-left: 0em; }
.pl-1-sm { padding-left: 1em; }
.pl-2-sm { padding-left: 2em; }
.pl-3-sm { padding-left: 3em; }
.pl-4-sm { padding-left: 4em; }
.pl-5-sm { padding-left: 5em; }
.pr-sm { padding-right: 0.5em; }
.pr-0-sm { padding-right: 0em; }
.pr-1-sm { padding-right: 1em; }
.pr-2-sm { padding-right: 2em; }
.pr-3-sm { padding-right: 3em; }
.pr-4-sm { padding-right: 4em; }
.pr-5-sm { padding-right: 5em; }
.pt-sm { padding-top: 0.5em; }
.pt-0-sm { padding-top: 0em; }
.pt-1-sm { padding-top: 1em; }
.pt-2-sm { padding-top: 2em; }
.pt-3-sm { padding-top: 3em; }
.pt-4-sm { padding-top: 4em; }
.pt-5-sm { padding-top: 5em; }
.pb-sm { padding-bottom: 0.5em; }
.pb-0-sm { padding-bottom: 0em; }
.pb-1-sm { padding-bottom: 1em; }
.pb-2-sm { padding-bottom: 2em; }
.pb-3-sm { padding-bottom: 3em; }
.pb-4-sm { padding-bottom: 4em; }
.pb-5-sm { padding-bottom: 5em; }
.px-sm { padding-left: 0.5em; padding-right: 0.5em; }
.px-0-sm { padding-left: 0em; padding-right: 0em; }
.px-1-sm { padding-left: 1em; padding-right: 1em; }
.px-2-sm { padding-left: 2em; padding-right: 2em; }
.px-3-sm { padding-left: 3em; padding-right: 3em; }
.px-4-sm { padding-left: 4em; padding-right: 4em; }
.px-5-sm { padding-left: 5em; padding-right: 5em; }
.py-sm { padding-top: 0.5em; padding-bottom: 0.5em; }
.py-0-sm { padding-top: 0em; padding-bottom: 0em; }
.py-1-sm { padding-top: 1em; padding-bottom: 1em; }
.py-2-sm { padding-top: 2em; padding-bottom: 2em; }
.py-3-sm { padding-top: 3em; padding-bottom: 3em; }
.py-4-sm { padding-top: 4em; padding-bottom: 4em; }
.py-5-sm { padding-top: 5em; padding-bottom: 5em; }
}
/* Medium screen or larger only paddings */
@media screen and (min-width: 768px) {
.p-md { padding: 0.5em; }
.p-0-md { padding: 0em; }
.p-1-md { padding: 1em; }
.p-2-md { padding: 2em; }
.p-3-md { padding: 3em; }
.p-4-md { padding: 4em; }
.p-5-md { padding: 5em; }
.pl-md { padding-left: 0.5em; }
.pl-0-md { padding-left: 0em; }
.pl-1-md { padding-left: 1em; }
.pl-2-md { padding-left: 2em; }
.pl-3-md { padding-left: 3em; }
.pl-4-md { padding-left: 4em; }
.pl-5-md { padding-left: 5em; }
.pr-md { padding-right: 0.5em; }
.pr-0-md { padding-right: 0em; }
.pr-1-md { padding-right: 1em; }
.pr-2-md { padding-right: 2em; }
.pr-3-md { padding-right: 3em; }
.pr-4-md { padding-right: 4em; }
.pr-5-md { padding-right: 5em; }
.pt-md { padding-top: 0.5em; }
.pt-0-md { padding-top: 0em; }
.pt-1-md { padding-top: 1em; }
.pt-2-md { padding-top: 2em; }
.pt-3-md { padding-top: 3em; }
.pt-4-md { padding-top: 4em; }
.pt-5-md { padding-top: 5em; }
.pb-md { padding-bottom: 0.5em; }
.pb-0-md { padding-bottom: 0em; }
.pb-1-md { padding-bottom: 1em; }
.pb-2-md { padding-bottom: 2em; }
.pb-3-md { padding-bottom: 3em; }
.pb-4-md { padding-bottom: 4em; }
.pb-5-md { padding-bottom: 5em; }
.px-md { padding-left: 0.5em; padding-right: 0.5em; }
.px-0-md { padding-left: 0em; padding-right: 0em; }
.px-1-md { padding-left: 1em; padding-right: 1em; }
.px-2-md { padding-left: 2em; padding-right: 2em; }
.px-3-md { padding-left: 3em; padding-right: 3em; }
.px-4-md { padding-left: 4em; padding-right: 4em; }
.px-5-md { padding-left: 5em; padding-right: 5em; }
.py-md { padding-top: 0.5em; padding-bottom: 0.5em; }
.py-0-md { padding-top: 0em; padding-bottom: 0em; }
.py-1-md { padding-top: 1em; padding-bottom: 1em; }
.py-2-md { padding-top: 2em; padding-bottom: 2em; }
.py-3-md { padding-top: 3em; padding-bottom: 3em; }
.py-4-md { padding-top: 4em; padding-bottom: 4em; }
.py-5-md { padding-top: 5em; padding-bottom: 5em; }
}
/* Large screen or larger only paddings */
@media screen and (min-width: 992px) {
.p-lg { padding: 0.5em; }
.p-0-lg { padding: 0em; }
.p-1-lg { padding: 1em; }
.p-2-lg { padding: 2em; }
.p-3-lg { padding: 3em; }
.p-4-lg { padding: 4em; }
.p-5-lg { padding: 5em; }
.pl-lg { padding-left: 0.5em; }
.pl-0-lg { padding-left: 0em; }
.pl-1-lg { padding-left: 1em; }
.pl-2-lg { padding-left: 2em; }
.pl-3-lg { padding-left: 3em; }
.pl-4-lg { padding-left: 4em; }
.pl-5-lg { padding-left: 5em; }
.pr-lg { padding-right: 0.5em; }
.pr-0-lg { padding-right: 0em; }
.pr-1-lg { padding-right: 1em; }
.pr-2-lg { padding-right: 2em; }
.pr-3-lg { padding-right: 3em; }
.pr-4-lg { padding-right: 4em; }
.pr-5-lg { padding-right: 5em; }
.pt-lg { padding-top: 0.5em; }
.pt-0-lg { padding-top: 0em; }
.pt-1-lg { padding-top: 1em; }
.pt-2-lg { padding-top: 2em; }
.pt-3-lg { padding-top: 3em; }
.pt-4-lg { padding-top: 4em; }
.pt-5-lg { padding-top: 5em; }
.pb-lg { padding-bottom: 0.5em; }
.pb-0-lg { padding-bottom: 0em; }
.pb-1-lg { padding-bottom: 1em; }
.pb-2-lg { padding-bottom: 2em; }
.pb-3-lg { padding-bottom: 3em; }
.pb-4-lg { padding-bottom: 4em; }
.pb-5-lg { padding-bottom: 5em; }
.px-lg { padding-left: 0.5em; padding-right: 0.5em; }
.px-0-lg { padding-left: 0em; padding-right: 0em; }
.px-1-lg { padding-left: 1em; padding-right: 1em; }
.px-2-lg { padding-left: 2em; padding-right: 2em; }
.px-3-lg { padding-left: 3em; padding-right: 3em; }
.px-4-lg { padding-left: 4em; padding-right: 4em; }
.px-5-lg { padding-left: 5em; padding-right: 5em; }
.py-lg { padding-top: 0.5em; padding-bottom: 0.5em; }
.py-0-lg { padding-top: 0em; padding-bottom: 0em; }
.py-1-lg { padding-top: 1em; padding-bottom: 1em; }
.py-2-lg { padding-top: 2em; padding-bottom: 2em; }
.py-3-lg { padding-top: 3em; padding-bottom: 3em; }
.py-4-lg { padding-top: 4em; padding-bottom: 4em; }
.py-5-lg { padding-top: 5em; padding-bottom: 5em; }
}
/* Misc */
.autoscroll { overflow: auto; }
.autoscroll-x { overflow-x: auto; }
.autoscroll-y { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.preserve-whitespace { white-space: pre; }
.trailing-text, .trailing-text::before, .trailing-text::after { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
* > .parent-hover-only { opacity: 0.0; transform: scale(0,0); transition: all 0.3s; transition-timing-function: cubic-bezier(.23,1.49,.59,1); }
*:hover > .parent-hover-only { opacity: 1.0; transform: scale(1,1); }
.fullscreen { position: fixed; left: 0; right: 0; top: 0; height: calc(100 * var(--vh, 1vh)); z-index: 1000; }
.z-index-5 { z-index: 5; }
.z-index-10 { z-index: 10; }
.z-index-20 { z-index: 20; }
.z-index-30 { z-index: 30; }
.textarea-resize-both { resize: both; } .textarea-resize-horz { resize: horizontal; } .textarea-resize-vert { resize: vertical; }
.pointer-events { pointer-events: all; }
.no-pointer-events { pointer-events: none; }
.resize-vertical { resize: vertical; }
.resize-horizontal { resize: horizontal; }
.strikethrough { text-decoration: line-through; }
.strikethrough::after { text-decoration: line-through; }
.strikethrough::before { text-decoration: line-through; }
.hr-divider { border: none; border-top: 1px solid var(--primary-divider); }
.sticky-top { position: sticky; top: 0px; }
.sticky-bottom { position: sticky; bottom: 0px; }
.sticky-left { position: sticky; left: 0px; }
.sticky-right { position: sticky; left: 0px; }
.vertical-dividers > *:not(:last-child) { border-right: 1px solid var(--primary-divider); }
.horizontal-dividers > *:not(:last-child) { border-bottom: 1px solid var(--primary-divider); }
.undraggable { user-select: none; -moz-user-drag: none; -webkit-user-drag: none; user-drag: none; }
/* Transitions */
.transition-all-fast { transition: all 0.2s; }
.transition-all-norm { transition: all 0.5s; }
.transition-all-slow { transition: all 1s; }
/* UI Elements */
/* Floating box */
.floating-box {
border-radius: var(--floating-control-roundness);
box-shadow: var(--floating-box-shadow-regular);
}
/* Spinner */
.spinner {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.5em;
height: 4.5em;
max-width: 4.5em;
max-height: 4.5em;
overflow: hidden;
}
.spinner::after {
content: " ";
display: inline-block;
animation: spinner 2s infinite;
border-radius: 100%;
background-color: var(--foreground);
}
/* Fancy lists */
.fancy-list {
list-style: none;
}
.fancy-list li:before {
content: '—';
font-size: 1.2em;
margin-right: 1em;
}
/* Avatar Icons */
.user-avatar {
--user-avatar-outline: white;
--outline-width: 2px;
display: inline-block;
position: relative;
width: var(--user-avatar-size, 48px);
height: var(--user-avatar-size, 48px);
box-sizing: border-box;
border-radius: 100%;
background-color: transparent;
opacity: 1.0;
transition: all 0.2s;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
}
.user-avatar-selected {
--user-avatar-outline: var(--selected-background);
--outline-width: 4px;
}
.user-avatar img {
width: calc(var(--user-avatar-size, 48px) - 4px);
height: calc(var(--user-avatar-size, 48px) - 4px);
position: absolute;
outline: var(--outline-width) solid var(--user-avatar-outline);
left: 2px;
top: 2px;
box-sizing: border-box;
border-radius: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.2s;
}
.user-avatar .online-status {
width: calc(var(--user-avatar-size, 48px) / 4);
height: calc(var(--user-avatar-size, 48px) / 4);
position: absolute;
right: 0px;
bottom: 0px;
box-sizing: border-box;
border-radius: 100%;
transition: all 0.2s;
}
/* Projects lists and icons */
.projects-icons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--projects-list-column-width, 200px), 1fr));
column-gap: 2em;
row-gap: 2em;
box-sizing: border-box;
/*position: relative;*/
}
.section_label {
margin-top: 2em;
grid-column-start: 1;
grid-column-end: -1;
}
/* Nav bars */
.nav-bar {
}
.nav-bar-row {
box-sizing: content-box;
height: 30px;
}
/* Styles */
/* Faint Line Separated Lists */
.secondary-divider-separated-vertical > *:not(:last-child) {
border-bottom: 1px solid var(--secondary-divider)
}
.secondary-divider-separated-horizontal > *:not(:last-child) {
border-right: 1px solid var(--secondary-divider)
}
.primary-divider-separated-vertical > *:not(:last-child) {
border-bottom: 1px solid var(--primary-divider)
}
.primary-divider-separated-horizontal > *:not(:last-child) {
border-right: 1px solid var(--primary-divider)
}
/* Fancy scrollbar */
.fancy-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--foreground) var(--background-faint);
}
.fancy-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.fancy-scrollbar::-webkit-scrollbar-track {
background: var(--background-faint);
border-radius: 1em;
}
.fancy-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--foreground);
border-radius: 1em;
}
/* Floating box styles styles */
.subtle-lift {
border-radius: var(--button-roundness);
box-shadow: var(--floating-box-shadow-small);
background: var(--background);
border: 1px solid var(--primary-divider);
overflow: hidden;
}
.dropdown {
border-radius: var(--dropdown-roundness);
box-shadow: var(--floating-box-shadow-regular);
background: var(--background);
overflow: hidden;
overflow-y: auto;
min-width: var(--dropdown-min-width, 250px);
}
/* UI Icons */
.ui-icon {
width: var(--ui-icon-size);
height: var(--ui-icon-size);
display: inline-block;
user-select: none;
background-color: rgba(0,0,0,0);
border: none;
outline: none;
transition: all 0.2s;
}
.rotate180.ui-icon {
transform: rotate(180deg);
transition: all 0.2s;
}
.ui-icon .stroke {
stroke: var(--foreground-inactive);
fill: none;
stroke-width: 5.5px;
}
.ui-icon .fill {
fill: var(--foreground-inactive);
stroke: none;
}
/* Clickable Elements */
.clickable {
text-decoration: none;
display: inline-flex;
cursor: pointer;
user-select: none;
transition: all 0.2s;
color: var(--foreground);
background: var(--action);
pointer-events: painted;
--text-weight: var(--text-weight-regular);
}
.active-outline.clickable {
outline: 5px solid #a7eaff;
}
.clickable-link {
text-decoration: underline;
--text-weight: var(--text-weight-regular);
}
.clickable:hover {
transform: translateY(-1px);
color: var(--foreground-hover);
background: var(--action-hover);
}
.clickable-label-only {
--text-weight: var(--text-weight-regular);
}
.clickable-label-only:hover label {
color: var(--foreground-hover);
}
.clickable:active, .active.clickable {
transform: translateY(1px);
color: var(--foreground-active);
background: var(--action-active);
}
.clickable-label-only:active label,
.active.clickable-label-only label {
color: var(--foreground-active);
}
.clickable:disabled {
pointer-events: none;
color: var(--foreground-inactive);
background: var(--action-inactive);
}
.clickable-label-only:active label,
.active.clickable-label-only label {
color: var(--foreground-active);
--text-weight: var(--text-weight-regular);
}
.clickable label,
.clickable label::before,
.clickable label::after,
.clickable a,
.clickable a::before,
.clickable a::after {
text-decoration: none;
pointer-events: none;
appearance: none;
}
.clickable-link label,
.clickable-link label::before,
.clickable-link label::after,
.clickable-link a,
.clickable-link a::before,
.clickable-link a::after {
text-decoration: underline;
}
.clickable-label-only label,
.clickable-label-only label::before,
.clickable-label-only label::after {
text-decoration: none;
pointer-events: none;
appearance: none;
}
.clickable label, .clickable a {
display: inline-grid;
content: ' ';
}
.clickable-label-only label {
display: inline-grid;
content: ' ';
}
.clickable label::before,
.clickable label::after,
.clickable a::before,
.clickable a::after {
content: attr(data-label);
grid-column-start: 1;
grid-row-start: 1;
transition: all 0.1s;
}
.clickable-label-only label::before,
.clickable-label-only label::after {
content: attr(data-label);
grid-column-start: 1;
grid-row-start: 1;
transition: all 0.1s;
}
.clickable label::before,
.clickable a::before {
color: var(--foreground);
font-weight: var(--text-weight-regular);
opacity: initial;
}
.clickable-label-only label::before {
color: var(--foreground);
font-weight: var(--text-weight-regular);
opacity: initial;
}
.clickable label::after,
.clickable a::after {
color: var(--foreground-hover);
font-weight: var(--text-weight-bold);
opacity: 0.0;
}
.clickable-label-only label::after {
color: var(--foreground-hover);
font-weight: var(--text-weight-bold);
opacity: 0.0;
}
.clickable:disabled label,
.clickable:disabled a,
.clickable:disabled label::before,
.clickable:disabled label::after,
.clickable:disabled a::before,
.clickable:disabled a::after {
color: var(--foreground-inactive);
}
.clickable-label-only:disabled label,
.clickable-label-only:disabled label::before,
.clickable-label-only:disabled label::after {
color: var(--foreground-inactive);
}
.clickable:hover label::before,
.clickable:hover a::before {
font-weight: var(--text-weight-regular);
opacity: 0.0;
}
.clickable-label-only:hover label::before {
opacity: 0.0;
}
.clickable:hover label::after,
.clickable:hover a::after {
opacity: 1.0;
}
.clickable-label-only:hover label::after {
opacity: 1.0;
}
.clickable:active label::before,
.clickable:active a::before,
.active.clickable label::before,
.active.clickable a::before {
opacity: 0.0;
}
.clickable:active label::after,
.clickable:active a::after,
.active.clickable label::after,
.active.clickable a::after {
color: var(--foreground-active);
font-weight: var(--text-weight-bold);
opacity: 1.0;
}
.active.clickable label::after,
.active.clickable a::after {
/* text-decoration: underline;*/
}
.active.clickable-no-underline label::after,
.active.clickable-no-underline a::after {
text-decoration: none;
}
.clickable-label-only:active label::after,
.active.clickable-label-only label::after {
color: var(--foreground-active);
font-weight: var(--text-weight-bold);
opacity: 1.0;
}
.active.clickable-label-only label::after {
text-decoration: underline;
}
.clickable-3d:hover {
box-shadow: 0px 1px 2px rgba(0,0,0,0.6), inset 0px 1px 1px rgba(255,255,255,0.2);
transform: translateY(-1px);
}
.clickable-3d:active,
.active.clickable-3d {
box-shadow: 0px -1px 0px rgba(0,0,0,0.6);
transform: translateY(1px);
backdrop-filter: brightness(97%);
}
.clickable-3d-big:hover {
box-shadow: 0px 3px 3px rgba(0,0,0,0.60), inset 0px 1px 1px rgba(255,255,255,0.2);
transform: translateY(-2px);
}
.clickable-3d-big:active,
.active.clickable-3d-big {
box-shadow: 0px -2px 0px rgba(0,0,0,0.6);
transform: translateY(1px);
backdrop-filter: brightness(97%);
}
.clickable-faint:hover {
background-color: var(--background-faint);
}
.clickable-faint:active,
.active.clickable-faint {
background-color: var(--background-disabled);
}
.clickable-icon-only > .ui-icon .stroke,
.clickable > .ui-icon .stroke {
stroke: var(--foreground);
}
.clickable-icon-only > .ui-icon .fill,
.clickable > .ui-icon .fill {
fill: var(--foreground);
}
.ui-icon .project_colour_fill {
fill: var(--project-colour);
}
.ui-icon .project_colour_fill_darker {
fill: var(--project-colour-darker);
}
.clickable-icon-only:hover > .ui-icon,
.clickable:hover > .ui-icon {
transform: scale(1.2, 1.2);
}
.clickable-icon-only:hover > .rotate180.ui-icon,
.clickable:hover > .rotate180.ui-icon {
transform: scale(1.2, 1.2) rotate(180deg);
}
.clickable-icon-only:active > .ui-icon,
.active.clickable-icon-only > .ui-icon,
.clickable:active > .ui-icon,
.active.clickable > .ui-icon {
transform: scale(1.1, 1.1);
}
.clickable-icon-only:active > .rotate180.ui-icon,
.active.clickable-icon-only > .rotate180.ui-icon,
.clickable:active > .rotate180.ui-icon,
.active.clickable > .rotate180.ui-icon {
transform: scale(1.1, 1.1) rotate(180deg);
}
.clickable-icon-only.hover-spin:hover > .ui-icon,
.clickable.hover-spin:hover > .ui-icon {
transform: scale(1.2, 1.2) rotate(90deg);
}
.clickable-icon-only.hover-spin:active > .ui-icon,
.active.clickable-icon-only.hover-spin > .ui-icon,
.clickable.hover-spin:active > .ui-icon,
.active.clickable.hover-spin > .ui-icon {
transform: scale(1.1, 1.1) rotate(90deg);
}
.clickable-icon-only:hover > .ui-icon .stroke,
.clickable:hover > .ui-icon .stroke {
stroke: var(--foreground-hover);
stroke-width: 7px;
}
.clickable-icon-only:hover > .ui-icon .fill,
.clickable:hover > .ui-icon .fill {
stroke: var(--foreground-hover);
}
.clickable-icon-only:active > .ui-icon .stroke,
.active.clickable-icon-only > .ui-icon .stroke,
.clickable:active > .ui-icon .stroke,
.active.clickable > .ui-icon .stroke {
stroke: var(--foreground-active);
stroke-width: 7px;
}
.clickable-icon-only:active > .ui-icon .fill,
.active.clickable-icon-only > .ui-icon .fill,
.clickable:active > .ui-icon .fill,
.active.clickable > .ui-icon .fill {
fill: var(--foreground-active);
}
.clickable-icon-only:disabled > .ui-icon .stroke,
.clickable:disabled > .ui-icon .stroke {
stroke: var(--foreground-inactive);
}
.clickable-icon-only:disabled > .ui-icon .fill,
.clickable:disabled > .ui-icon .fill {
fill: var(--foreground-inactive);
}
/* Buttons */
.button {
border: none;
text-decoration: none;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: var(--button-roundness);
user-select: none;
transition: all 0.2s;
}
.button:disabled {
pointer-events: none;
}
.button :not(:last-child) {
margin-right: 0.5em;
}
.button-sm {
padding: 0.25em 0.5em;
}
.button-md {
padding: 0.5em 1em;
}
.button-lg {
padding: 1em 2em;
}
.button-hg {
padding: 1em 2em;
}
/* Pill */
.status-pill {
font-weight: var(--text-weight-regular);
color: white;
display: inline-block;
padding: 0.5em;
padding-left: 1em;
padding-right: 1em;
border-radius: 1em;
}
.status-pill-bad {
background-color: var(--bad);
}
.status-pill-good {
background-color: var(--good);
}
.status-pill-neutral {
background-color: var(--neutral);
}
.status-pill-warning {
background-color: var(--warning);
}
/* Modals */
dialog.modal::backdrop {
background-color: var(--modal-backdrop);
backdrop-filter: saturate(0.5) blur(3px);
}
dialog.modal {
border: none;
color: var(--foreground);
}
dialog.modal {
outline: unset;
}
dialog.modal[open] {
opacity: 1;
transform: scale(1, 1);
}
dialog.modal {
opacity: 0;
transform: scale(1, 0);
transition:
opacity 0.3s ease-out,
transform 0.3s ease-out,
overlay 0.3s ease-out allow-discrete,
display 0.3s ease-out allow-discrete;
transition-timing-function: cubic-bezier(.23,1.49,.59,1);
}
@starting-style {
dialog.modal[open] {
opacity: 0;
transform: scale(0.8, 0.8);
}
}
dialog.modal::backdrop {
background-color: rgb(0 0 0 / 0%);
transition:
display 0.3s allow-discrete,
overlay 0.3s allow-discrete,
background-color 0.3s;
}
dialog.modal[open]::backdrop {
background-color: var(--modal-backdrop);
}
@starting-style {
dialog.modal[open]::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
/* Dropdowns */
dialog.dropdown::backdrop {
background-color: var(--dropdown-backdrop);
}
dialog.dropdown {
border: none;
color: var(--foreground);
padding: 0px;
}
dialog.dropdown[open] {
opacity: 1;
transform: scale(1, 1) translate(0%, 0%);
}
dialog.dropdown {
opacity: 0;
transform: scale(0.8, 0.8);
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out,
overlay 0.2s ease-out allow-discrete,
display 0.2s ease-out allow-discrete;
transition-timing-function: cubic-bezier(.23,1.49,.59,1);
}
@starting-style {
dialog.dropdown[open] {
opacity: 0;
transform: scale(0.8, 0.8);
}
}
dialog.dropdown::backdrop {
background-color: rgb(0 0 0 / 0%);
transition:
display 0.2s allow-discrete,
overlay 0.2s allow-discrete,
background-color 0.2s;
}
dialog.dropdown[open]::backdrop {
background-color: var(--dropdown-backdrop);
}
@starting-style {
dialog.dropdown[open]::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
/* Side Menus */
.app-menu-background {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: var(--modal-backdrop);
z-index: 999;
}
.side-menu-background {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: var(--modal-backdrop);
z-index: 999;
}
.side-menu {
position: fixed;
width: 100%;
max-width: 500px;
transition: max-width 0.2s;
z-index: 1000;
box-shadow: var(--floating-box-shadow);
background-color: var(--background);
}
.side-menu-left {
left: 0;
top: 0;
bottom: 0;
}
.side-menu-right {
right: 0;
top: 0;
bottom: 0;
}
.side-menu-close-button {
position: absolute;
right: 20px;
top: 20px;
}
.side-menu-footer {
position: absolute;
width: 100%;
bottom: 0;
padding: 2em;
text-align: center;
}
/* Menus - A list, menu-items are selectable. */
.menu {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.dropdown > .menu {
overflow: hidden;
}
.menu > .menu-item {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.menu > * {
padding: 0.8em;
}
.menu.menu-small > * {
padding: 0.6em;
}
.menu.menu-medium > * {
padding: 0.8em;
}
.menu.menu-large > * {
padding: 1em;
}
.menu > *:not(:last-child) {
border-bottom: 1px solid var(--secondary-divider);
}
/* Panels */
.panel {
border-radius: var(--panel-roundness);
box-shadow: var(--floating-box-shadow-regular);
background: var(--background);
}
/* Modals */
.modal-backdrop {
backdrop-filter: blur(3px);
background: var(--modal-backdrop);
}
.modal-dialog {
border-radius: var(--border-roundness);
box-shadow: var(--floating-box-shadow);
background: var(--background);
overflow: hidden;
}
/* Tables */
table {
width: 100%;
text-align: left;
}
table thead tr td {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
table tbody tr td {
border-top: 1px solid #dee2e6;
}
table td, table th {
padding: .3rem;
}
table th {
font-weight: 600;
}
/* Tabs */
.tabs {
width: 100%;
display: flex;
}
.tabs .tab {
flex: 1 1 0;
width: 0;
text-align: center;
display: flex;
justify-content: center;
border-bottom: 1px solid transparent;
}
.tabs .active.tab {
border-bottom: 1px solid var(--foreground);
}
/* Text Input */
.multipane {
max-width: 100%;
display: flex;
flex-direction: row;
min-height: 200px;
scroll-behavior: smooth;
overflow: hidden;
}
.pane {
scroll-snap-align: center;
width: 100%;
flex-shrink: 0;
}
.pane-1 {
flex-grow: 1;
}
.pane-2 {
flex-grow: 2;
}
.pane-3 {
flex-grow: 3;
}
.pane-4 {
flex-grow: 4;
}
.pane-5 {
flex-grow: 5;
}
@media screen and (min-width: 576px ) { .multipane-expand-after-xs { overflow: initial; } .multipane-expand-after-xs > .pane { flex-shrink: 1; flex-basis: 0; } .multipane-expand-after-xs > .pane { width: initial; } }
@media screen and (min-width: 768px ) { .multipane-expand-after-sm { overflow: initial; } .multipane-expand-after-sm > .pane { flex-shrink: 1; flex-basis: 0; } .multipane-expand-after-sm > .pane { width: initial; } }
@media screen and (min-width: 992px ) { .multipane-expand-after-md { overflow: initial; } .multipane-expand-after-md > .pane { flex-shrink: 1; flex-basis: 0; } .multipane-expand-after-md > .pane { width: initial; } }
@media screen and (min-width: 1200px) { .multipane-expand-after-lg { overflow: initial; } .multipane-expand-after-md > .pane { flex-shrink: 1; flex-basis: 0; } .multipane-expand-after-lg > .pane { width: initial; } }
@media screen and (min-width: 1400px) { .multipane-expand-after-xl { overflow: initial; } .multipane-expand-after-xl > .pane { flex-shrink: 1; flex-basis: 0; } .multipane-expand-after-xl > .pane { width: initial; } }
/* Input Text */
.input-colour {
appearance: none;
border: none;
background: none;
padding: 0px;
height: 43px;
margin: 0px;
}
input.input-plain {
background: none;
appearance: none;
border: none;
color: var(--foreground);
}
input.input-plain::placeholder,
textarea.input-plain::placeholder {
color: var(--foreground-inactive);
}
input.input-plain:focus {
outline: none;
appearance: none;
border: none;
}
label.input-label {
font-weight: 500;
opacity: 1;
}
:not(.input-group) > label.input-label {
display: block;
}
label.input-label.checkbox {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: start;
cursor: pointer;
}
label.input-label.checkbox > input[type=checkbox] {
margin: 10px;
}
input.input-focusable[type=text],
input.input-focusable[type=number],
input.input-focusable[type=date],
input.input-focusable[type=datetime-local],
input.input-focusable[type=password],
input.input-focusable[type=email],
textarea.input-focusable {
box-sizing: border-box;
display: block;
background: none;
appearance: none;
border: none;
padding: 1em;
animation: none;
cursor: text;
color: var(--foreground);
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-inactive));
margin-bottom: var(--input-margin-bottom, 3px);
}
select.input-focusable {
box-sizing: border-box;
display: block;
background: none;
border: none;
padding: 1em;
animation: none;
cursor: pointer;
color: var(--foreground);
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-inactive));
margin-bottom: var(--input-margin-bottom, 3px);
}
.password-weak::after, .password-medium::after, .password-strong::after {
content: 'WEAK';
letter-spacing: 2px;
position: absolute;
right: 1em;
bottom: 1em;
font-size: var(--text-size-sm);
font-weight: var(--text-weight-bold);
background-color: var(--weak-password);
color: white;
padding: 4px;
border-radius: 5px;
}
.password-weak::after {
content: 'WEAK';
background-color: var(--weak-password);
}
.password-medium::after {
content: 'MEDIUM';
background-color: var(--medium-password);
}
.password-strong::after {
content: 'STRONG';
background-color: var(--strong-password);
}
.input-valid {
--input-underline-color: var(--valid-input);
--input-underline-thickness: 3px;
--input-margin-bottom: 1px;
}
.valid-text {
color: var(--valid-input);
}
.invalid-text {
color: var(--invalid-input);
}
.input-invalid {
--input-underline-color: var(--invalid-input);
--input-underline-thickness: 3px;
--input-margin-bottom: 1px;
}
.input-required {
--input-underline-color: var(--invalid-input);
}
input.input-focusable[type=text]:hover,
input.input-focusable[type=number]:hover,
input.input-focusable[type=password]:hover,
input.input-focusable[type=date]:hover,
input.input-focusable[type=datetime-local]:hover,
input.input-focusable[type=email]:hover,
textarea.input-focusable:hover,
select.input-focusable:hover {
padding: 1em;
animation-name: drawunderlinebigger;
animation-duration: 0.3s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
background: var(--background-faint);
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-hover));
}
input.input-focusable[type=text]:focus,
input.input-focusable[type=password]:focus,
input.input-focusable[type=date]:focus,
input.input-focusable[type=datetime-local]:focus,
input.input-focusable[type=email]:focus,
textarea.input-focusable:focus,
select.input-focusable:focus {
outline: none;
padding: 1em;
background: var(--background-faint);
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-active));
}
input.input-focusable[type=text]:disabled,
input.input-focusable[type=password]:disabled,
input.input-focusable[type=date]:disabled,
input.input-focusable[type=datetime-local]:disabled,
input.input-focusable[type=email]:disabled,
textarea.input-focusable:disabled,
select.input-focusable:disabled {
color: var(--foreground-inactive);
background: var(--background-disabled);
}
.input-group {
position: relative;
}
.has-placeholder {
padding-top: 25px;
}
.input-group .ui-icon {
right: 12px;
bottom: 12px;
position: absolute;
}
input.input-focusable[type=text] + label,
input.input-focusable[type=number] + label,
input.input-focusable[type=password] + label,
input.input-focusable[type=email] + label,
textarea.input-focusable + label,
select.input-focusable + label {
font-weight: 400;
position: absolute;
top: 40px;
left: 15px;
user-select: none;
pointer-events: none;
transition: all 0.1s;
transition-timing-function: ease-in-out;
opacity: 0.5;
}
.input-group:focus + label,
input.input-focusable[type=text]:not(:placeholder-shown) + label,
input.input-focusable[type=number]:not(:placeholder-shown) + label,
input.input-focusable[type=password]:not(:placeholder-shown) + label,
input.input-focusable[type=email]:not(:placeholder-shown) + label,
textarea.input-focusable:not(:placeholder-shown) + label,
select.input-focusable[required]:valid + label {
top: 10px;
left: 0px;
font-weight: 500;
opacity: 1;
}
.focusable {
cursor: pointer;
background: none;
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-inactive));
}
.focusable:hover {
animation-name: drawunderlinebigger;
animation-duration: 0.3s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
background: var(--background-faint);
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-hover));
}
.focusable-huge:hover {
animation-name: drawunderline;
}
.focusable:focus-within {
border-bottom: var(--input-underline-thickness, 1px) solid var(--input-underline-color, var(--foreground-active));
}
select.input-focusable:has(option[value=""]:checked) {
color: var(--foreground-inactive);
font-weight: var(--text-weight-light);
}
select.input-focusable option:not([value=""]) {
color: var(--foreground);
font-weight: var(--text-weight-light);
}
/* Toggles */
.toggle {
transition: all 0.2s;
display: inline-block;
width: 64px;
height: 40px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image: var(--toggle-button), var(--toggle-slider);
background-repeat: no-repeat, no-repeat;
background-position: 12px 10px, 0px 0px;
background-size: 16px, auto;
}
.toggle:hover {
background-image: var(--toggle-button-hover), var(--toggle-slider);
background-position: 7px 4.5px, 0px 0px;
background-size: 26px, auto;
}
.toggle:checked {
background-image: var(--toggle-button-checked), var(--toggle-slider);
background-position: 36px 10px, 0px 0px;
background-size: 16px, auto;
}
.toggle:checked:hover {
background-image: var(--toggle-button-hover), var(--toggle-slider);
background-position: 31px 4.5px, 0px 0px;
background-size: 26px, auto;
}
.toggle:disabled {
background-image: var(--toggle-button-disabled), var(--toggle-slider-disabled);
background-position: 12px 10px, 0px 0px;
background-size: 16px, auto;
}
.toggle:checked:disabled {
background-image: var(--toggle-button-disabled), var(--toggle-slider-disabled);
background-position: 36px 10px, 0px 0px;
background-size: 16px, auto;
}
/* Dropdown Menus */
.dropdown-menu {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
z-index: 1000;
padding: 2em;
}
.dropdown-menu-backdrop {
pointer-events: all;
position: fixed;
z-index: 999;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: var(--modal-backdrop);
opacity: 0.5;
}
.dropdown-menu-container {
z-index: 1000;
display: flex;
max-width: 600px;
max-height: 100%;
}
/* @media screen and (min-width: 900px) and (min-height: 700px) {
.dropdown-menu {
position: initial;
display: block;
padding: 0em;
height: initial;
width: initial;
}
.dropdown-menu-backdrop {
background-color: transparent;
}
.dropdown-menu-container {
position: absolute;
}
} */
/* Share options list */
.share-icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.2s;
cursor: pointer;
}
.share-icon div {
background-color: rgba(208, 208, 208, 0.4);
border: 1px solid rgba(108, 108, 108, 0.3);
border-radius: 1000px;
width: 4em;
height: 4em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0.8em;
}
.share-icon div img {
width: 2em;
height: 2em;
transition: all 0.2s;
opacity: 0.5;
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
}
.share-icon:hover div img {
transform: scale(1.2, 1.2);
opacity: 0.8;
}
.share-icon:hover span {
text-decoration: underline;
}
.share-list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-flow: row wrap;
gap: 2em;
}
/* Focusable element - Element that reacts to having cursor positioned over it, like text boxes. */
/* Special */
.symbolic-icon {
filter: var(--colour-scheme-image-filter, "");
}
/* Animations */
.updown-anim {
display: inline-block;
animation: updown 1s infinite;
animation-direction: normal;
animation-delay: var(--b-updown-delay);
}
.dance {
display: inline-block;
animation: dancing 0.3s infinite;
animation-direction: alternate;
}
.spinning {
animation: spinning 1.0s infinite linear;
}
/* Animation Keyframes */
@keyframes spinning {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
@keyframes spinner {
from { width: 0em; height: 0em; opacity: 1; }
50% { width: 4em; height: 4em; opacity: 0; }
to { width: 4em; height: 4em; opacity: 0; }
}
@keyframes drawunderline {
from { clip-path: polygon(100% 0, 100% 98%, 0% 98%, 0% 100%, 0 100%, 0 0); }
to { clip-path: polygon(100% 0, 100% 98%, 100% 98%, 100% 100%, 0 100%, 0 0); }
}
@keyframes drawunderlinebigger {
from { clip-path: polygon(100% 0, 100% 95%, 0% 95%, 0% 100%, 0 100%, 0 0); }
to { clip-path: polygon(100% 0, 100% 95%, 100% 95%, 100% 100%, 0 100%, 0 0); }
}
@keyframes updown {
from { transform: translate(0px, 0px); }
20% { transform: translate(0px, -3px); }
to { transform: translate(0px, 0px); }
}
@keyframes dancing {
from { transform: translate(0px, 0px); }
to { transform: translate(0px, -5px); }
}
@keyframes anim-fadeup {
from {
transform: translate(0, -40px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
/* Transitions */
/* Slide In Right / Slide in Left*/
.slide-in-right-enter-active,
.slide-in-right-leave-active,
.slide-in-left-enter-active,
.slide-in-left-leave-active {
transition: transform .2s ease;
transform: translate(0%);
}
.slide-in-right-enter,
.slide-in-right-leave-to {
transform: translate(-100%);
}
.slide-in-left-enter,
.slide-in-left-leave-to {
transform: translate(100%);
}
/* Slide transitions for editor */
.slideup-enter-active, .slideup-leave-active {
transition: transform 0.1s, opacity 0.1s;
transform: translate(0, 0%);
}
.slideup-enter, .slideup-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translate(0, 10%);
opacity: 0;
}
.selector-enter-active, .selector-leave-active {
transition: opacity 0.1s;
}
.selector-enter, .selector-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.selector-enter-active > div, .selector-leave-active > div {
transition: transform 0.1s;
transform: translate(0, 0px);
}
.selector-enter > div, .selector-leave-to > div /* .fade-leave-active below version 2.1.8 */ {
transform: translate(0, 40px);
}
/* List */
.list-item {
transition: all 0.3s;
display: inline-block;
opacity: 1;
}
.list-enter-active, .list-leave-active {
transition: all 0.3s;
}
.list-move {
transition: transform 0.3s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
.list-leave-active {
position: absolute;
}
/* Modal Popup */
.modalpopup-enter-active,
.modalpopup-leave-active {
transition: all 0.2s;
backdrop-filter: blur(3px);
opacity: 1;
}
.modalpopup-enter,
.modalpopup-leave-to {
backdrop-filter: blur(0px);
opacity: 0;
}
.modalpopup-enter-active .modal-dialog,
.modalpopup-leave-active .modal-dialog {
transition: all 0.2s;
transition-timing-function: cubic-bezier(.23,1.49,.59,1);
transform: scale(1, 1);
}
.modalpopup-enter .modal-dialog,
.modalpopup-leave-to .modal-dialog {
transform: scale(0.8, 0.8);
}
/* Modal Popup for Settings */
.modalpopup-settings-enter-active,
.modalpopup-settings-leave-active {
transition: all 0.2s;
}
.modalpopup-settings-enter,
.modalpopup-settings-leave-to {
}
.modalpopup-settings-enter-active .modal-backdrop,
.modalpopup-settings-leave-active .modal-backdrop {
transition: all 0.2s;
backdrop-filter: blur(3px);
opacity: 1;
}
.modalpopup-settings-enter .modal-backdrop,
.modalpopup-settings-leave-to .modal-backdrop {
backdrop-filter: blur(0px);
opacity: 0;
}
.modalpopup-settings-enter-active .modal-dialog,
.modalpopup-settings-leave-active .modal-dialog {
transition: all 0.2s;
transition-timing-function: cubic-bezier(.23,1.49,.59,1);
transform: scale(1, 1);
}
.modalpopup-settings-enter .modal-dialog,
.modalpopup-settings-leave-to .modal-dialog {
transform: scale(0.8, 0.8);
}
/* Dropdown */
.dropdownpop-enter-active,
.dropdownpop-leave-active {
animation: doesnotexist 0.3s;
}
.dropdownpop-enter,
.dropdownpop-leave-to {
animation: doesnotexist 0.3s reverse;
}
.dropdownpop-enter-active .dropdown-menu-container,
.dropdownpop-leave-active .dropdown-menu-container {
transition: all 0.3s;
transition-timing-function: cubic-bezier(.23,1.49,.59,1);
transform: scale(1, 1);
opacity: 1;
}
.dropdownpop-enter .dropdown-menu-container,
.dropdownpop-leave-to .dropdown-menu-container {
transform: scale(0.9, 0.9);
opacity: 0;
}
/* Fade */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.15s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/* Fade Shrink */
.fadeshrink-enter-active, .fadeshrink-leave-active { transition: all 0.2s; }
.fadeshrink-enter, .fadeshrink-leave-to { opacity: 0.0; height: 0px; }
.action-list {
display: inline-flex;
flex-direction: column;
}
.action-list > .action-list-item {
}
.action-list > .action-list-item:not(:last-child) {
border-bottom: 1px solid var(--secondary-divider);
}
.checkered-bg {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background-repeat: repeat, repeat;
background-position: 0px 0, 5px 5px;
transform-origin: 0 0 0;
background-origin: padding-box, padding-box;
background-clip: border-box, border-box;
background-size: 10px 10px, 10px 10px;
}