@scidian/osui
Version:
Lightweight JavaScript UI library.
105 lines (83 loc) • 5.16 kB
CSS
/**
* Units
* px Pixels
* % Percentage relative to the parent element
* em Relative to the font-size of the element (2em means 2 times the size of the current font)
* rem Relative to the font-size of the root element
* ch Relative to the width of the character '0' of the current font
* ex Relative to the height of a lowercase letter ('x') of the current font
* cap Relative to the height of a capital letter of the current font
* vw Relative to 1% of the width of the viewport (browser window)
* vh Relative to 1% of the width of the viewport (browser window)
* vmin Relative to 1% of viewport's (browser window's) smaller dimension
* vmax Relative to 1% of viewport's (browser window's) larger dimension
*/
:root {
color-scheme: light dark;
/* Scheme Colors */
--shadow: 0, 0, 0; /* black for dark theme, white for light theme */
--darkness: 0, 0, 0; /* lightens as theme lightens */
--background-dark: 24, 24, 24;
--background-light: 32, 32, 32;
--button-dark: 40, 40, 40;
--button-light: 60, 60, 60;
--text-dark: 100, 100, 100;
--text: 190, 190, 190;
--text-light: 225, 225, 225;
--blacklight: 0, 0, 0;
--darklight: 16, 16, 16;
--midlight: 85, 85, 85;
--highlight: 255, 255, 255;
--icon-dark: 0, 90, 87; /* #005A57 icon darkened dark classic aqua */
--icon: 0, 180, 175; /* #00B4AF icon color classic aqua */
--icon-light: 90, 255, 250; /* #5AFFFA icon brightened light clasic aqua */
--complement: 255, 113, 0; /* #FF7100 icon shifted 180° orange */
--triadic1: 216, 0, 127; /* #D8007F icon shifted 120° pink */
--triadic2: 165, 243, 0; /* #A5F300 complement shifted 120° lime green */
--triadic3: 113, 25, 185; /* #7119B9 icon shifted 90° purple */
--triadic4: 255, 253, 84; /* #FFFD54 complement shifted 90° yellow */
/* Theme Multiplier */
--bright: 1; /* 1: Mid/Dark, 0: Light */
/* Basic Colors */
--white: 255, 255, 255;
--gray: 128, 128, 128;
--black: 0, 0, 0;
/* Input Colors */
--valid: 0, 255, 0;
--invalid: 255, 0, 0;
/* Hue Rotation for Icon Color */
--rotate-hue: 0deg; /* Programatically changes to degree offset icon color is from Aqua */
/* Transparency */
--panel-transparency: 1.0;
/* Font */
font-size: 10px; /* 10px or 62.5% (62% of 16px (browser root default) === 10px)
--base-size: 10px; /* Gui designed to scale from this original font size */
--font-size: 14px; /* Current font size, NOTE: 1em = 14px (i.e. 10px * 1.4) */
--font-family: 'Roboto', Helvetica, Arial, sans-serif;
/* Sizes */
--pixel: 0.07143em; /* 1px @ font size 1.4em (14px) */
--minus: -0.07143em; /* 1px @ font size 1.4em (14px) */
--border-micro: 0.07143em; /* 1px @ font size 1.4em (14px) */
--border-small: 0.14286em; /* 2px @ font size 1.4em (14px) */
--radius-small: 0.28571em; /* 4px @ font size 1.4em (14px) */
--radius-large: 0.42857em; /* 6px @ font size 1.4em (14px) */
--pad-micro: 0.07143em; /* 1px @ font size 1.4em (14px), i.e. 1px = 1 / 14 */
--pad-x-small: 0.14286em; /* 2px; */
--pad-small: 0.21429em; /* 3px; */
--pad-smallish: 0.28571em; /* 4px; */
--pad-medium: 0.35714em; /* 5px; */
--pad-large: 0.71429em; /* 10px; */
--arrow-size: 0.4em; /* Dropdown arrow */
--asset-size: 3.2em; /* AssetBox size */
--button-size: 2.65em; /* Toolbar button size */
--scroll-size: 0.57143em; /* 8px, scrollbar thickness */
--resize-size: 1.0em; /* 14px, panel resizer thickness */
--row-height: 1.7em; /* min row height (Asset Box, Property List, Tree List, etc.) */
--tab-size: 2.5em; /* Tab button diameter */
/* Timing */
--menu-timing: 0.2s; /* Various gui related time delays (in seconds) */
--tooltip-delay: 500ms; /* Time that passes before tooltips are shown */
/* Box Shadows: 'inner-glow', 'pop-out-shadow', 'sunk-in-shadow' */
/* Filters */
--drop-shadow: drop-shadow(0 0 var(--pad-x-small) black);
}