/* Font */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); *, ::after, ::before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root { /* Variables */ /* ========================== */ /* Color - Accent */ --wtl-variable-color-accent-h: var(--wtl-color-blue-h); --wtl-variable-color-accent-s: var(--wtl-color-blue-s); --wtl-variable-color-accent-l: var(--wtl-color-blue-l); /* Color - BG */ --wtl-variable-color-bg-h: var(--wtl-color-dark-h); --wtl-variable-color-bg-s: var(--wtl-color-dark-s); --wtl-variable-color-bg-l: var(--wtl-color-dark-l); /* Color - Dark */ --wtl-variable-color-dark-h: var(--wtl-color-dark-h); --wtl-variable-color-dark-s: var(--wtl-color-dark-s); --wtl-variable-color-dark-l: var(--wtl-color-dark-l); /* Style - Font */ --wtl-variable-style-font: "Inter", sans-serif; /* Color Control */ /* ========================== */ --wtl-variable-color-accent: var(--wtl-variable-color-accent-h), var(--wtl-variable-color-accent-s), var(--wtl-variable-color-accent-l); --wtl-variable-color-bg: var(--wtl-variable-color-bg-h), var(--wtl-variable-color-bg-s), var(--wtl-variable-color-bg-l); --wtl-variable-color-dark: var(--wtl-variable-color-dark-h), var(--wtl-variable-color-dark-s), var(--wtl-variable-color-dark-l); --wtl-variable-color-white: var(--wtl-color-white-h), var(--wtl-color-white-s), var(--wtl-color-white-l); --wtl-variable-color-black: var(--wtl-color-black-h), var(--wtl-color-black-s), var(--wtl-color-black-l); --wtl-panel-color-bg-white: var(--wtl-color-white); --wtl-panel-color-bg-accent: hsla(var(--wtl-variable-color-bg-h), var(--wtl-variable-color-bg-s), 97%, 1); --wtl-panel-color-bg-border: hsla(var(--wtl-variable-color-dark), .1); --wtl-panel-color-bg-border-active: hsla(var(--wtl-variable-color-dark), .5); --wtl-panel-color-bg-overlay: hsla(var(--wtl-variable-color-black), .85); --wtl-panel-color-bg-transparent: hsla(var(--wtl-variable-color-accent), .0); --wtl-panel-color-bg-dark: hsla(var(--wtl-variable-color-dark), 1); --wtl-panel-color-bg-dark-hover: hsla(var(--wtl-variable-color-dark-h), var(--wtl-variable-color-dark-s), calc(var(--wtl-variable-color-dark-l) + 10%), 1); --wtl-panel-color-accent: hsla(var(--wtl-variable-color-accent), 1); --wtl-panel-color-accent-hover: hsla(var(--wtl-variable-color-accent-h), var(--wtl-variable-color-accent-s), calc(var(--wtl-variable-color-accent-l) * 1.15), 1); --wtl-panel-color-accent-light: hsla(var(--wtl-variable-color-accent-h), var(--wtl-variable-color-accent-s), 95%, 1); --wtl-panel-color-accent-light-hover: hsla(var(--wtl-variable-color-accent-h), var(--wtl-variable-color-accent-s), 90%, 1); --wtl-panel-color-dark: hsla(var(--wtl-variable-color-dark), 1); --wtl-panel-color-dark-light: hsla(var(--wtl-variable-color-dark), .05); --wtl-panel-color-dark-light-hover: hsla(var(--wtl-variable-color-dark), .1); --wtl-panel-color-white: hsla(var(--wtl-variable-color-white), 1); --wtl-panel-color-white-light: hsla(var(--wtl-variable-color-white), .05); --wtl-panel-color-white-light-hover: hsla(var(--wtl-variable-color-white), .1); --wtl-panel-color-font-dark-100: hsla(var(--wtl-variable-color-dark), 1); --wtl-panel-color-font-dark-75: hsla(var(--wtl-variable-color-dark), .75); --wtl-panel-color-font-dark-50: hsla(var(--wtl-variable-color-dark), .5); --wtl-panel-color-font-dark-25: hsla(var(--wtl-variable-color-dark), .25); --wtl-panel-color-font-dark-10: hsla(var(--wtl-variable-color-dark), .1); --wtl-panel-color-font-white-100: hsla(var(--wtl-variable-color-white), 1); --wtl-panel-color-font-white-50: hsla(var(--wtl-variable-color-white), .5); --wtl-panel-color-font-white: var(--wtl-color-white); --wtl-panel-font-family: var(--wtl-variable-style-font); /* Outside Forms */ /* ========================== */ --wtl-panel-gray-input-bg: hsla(var(--wtl-variable-color-dark), .03); --wtl-panel-gray-input-border: hsla(var(--wtl-variable-color-dark), .1); --wtl-panel-gray-input-border-hover: hsla(var(--wtl-variable-color-dark), .2); /* WTL Colors */ /* ========================== */ --wtl-color-red: hsla(var(--wtl-color-red-h), var(--wtl-color-red-s), calc(var(--wtl-color-red-l) + 0%), 1); --wtl-color-red-h: 344; --wtl-color-red-s: 94%; --wtl-color-red-l: 57%; --wtl-color-orange: hsla(var(--wtl-color-orange-h), var(--wtl-color-orange-s), calc(var(--wtl-color-orange-l) + 0%), 1); --wtl-color-orange-h: 15; --wtl-color-orange-s: 97%; --wtl-color-orange-l: 54%; --wtl-color-yellow: hsla(var(--wtl-color-yellow-h), var(--wtl-color-yellow-s), calc(var(--wtl-color-yellow-l) + 0%), 1); --wtl-color-yellow-h: 43; --wtl-color-yellow-s: 98%; --wtl-color-yellow-l: 62%; --wtl-color-green: hsla(var(--wtl-color-green-h), var(--wtl-color-green-s), calc(var(--wtl-color-green-l) + 0%), 1); --wtl-color-green-h: 143; --wtl-color-green-s: 66%; --wtl-color-green-l: 46%; --wtl-color-blue: hsla(var(--wtl-color-blue-h), var(--wtl-color-blue-s), calc(var(--wtl-color-blue-l) + 0%), 1); --wtl-color-blue-h: 214; --wtl-color-blue-s: 90%; --wtl-color-blue-l: 51%; --wtl-color-purple: hsla(var(--wtl-color-purple-h), var(--wtl-color-purple-s), calc(var(--wtl-color-purple-l) + 0%), 1); --wtl-color-purple-h: 259; --wtl-color-purple-s: 90%; --wtl-color-purple-l: 55%; --wtl-color-dark: hsla(var(--wtl-color-dark-h), var(--wtl-color-dark-s), calc(var(--wtl-color-dark-l) + 0%), 1); --wtl-color-dark-h: 200; --wtl-color-dark-s: 6%; --wtl-color-dark-l: 19%; --wtl-color-white: hsla(var(--wtl-color-white-h), var(--wtl-color-white-s), calc(var(--wtl-color-white-l) + 0%), 1); --wtl-color-white-h: 0; --wtl-color-white-s: 0%; --wtl-color-white-l: 100%; --wtl-color-black: hsla(var(--wtl-color-black-h), var(--wtl-color-black-s), calc(var(--wtl-color-black-l) + 0%), 1); --wtl-color-black-h: 0; --wtl-color-black-s: 0%; --wtl-color-black-l: 0%; }