-
Notifications
You must be signed in to change notification settings - Fork 1
/
variables.css
45 lines (44 loc) · 2.62 KB
/
variables.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* CSS VARIABLES =============================================================================================================== */
:root {
/* Grayscale Range */ --gs-lightest: #fff; --gs-mid: gray; --gs-dark: #333; --gs-darkest: #111;
/* Color Pallette */ --color-dominant: #050009; --color-two: #BB2112; --color-bright: #FAA720;
/* Transparents */ --transparent-w: #ffffff8c; --transparent-b: #0000008c;
/* Conventional Colors */ --link: #FAA720; --warn: red;
/* Shoe Lace Theming: paste --color-bright color into theme generator at https://codepen.io/claviska/full/QWveRgL */
--sl-color-primary-50: 242 251 248;
--sl-color-primary-100: 211 243 233;
--sl-color-primary-200: 177 234 216;
--sl-color-primary-300: 137 223 196;
--sl-color-primary-400: 78 207 166;
--sl-color-primary-500: 43 180 137;
--sl-color-primary-600: 36 149 113;
--sl-color-primary-700: 29 122 93;
--sl-color-primary-800: 24 101 77;
--sl-color-primary-900: 17 72 54;
--sl-color-primary-950: 11 44 34;
/* Gradients */
--gradient-l2r: linear-gradient(to right, var(--gs-darkest) , var(--color-two)); /* header, footer */
--gradient-u2d: linear-gradient( var(--color-two), var(--gs-darkest)); /* panels */
/* Borders */
--borders-bright: 1px solid var(--color-bright);
--borders-dominant: 1px solid var(--color-dominant);
--borders-space: 1px solid transparent; /* For spacing nav items regardless of active item */
/* Glows */
--glow: #BB211239; --glowier: #FAA72087; --dominant-glow: #05000950;
--box-glow: -8px 4px 16px var(--glow), 8px -4px 16px var(--glow); /* active navs & all buttons */
--box-glowier: -8px 4px 16px var(--glowier), 8px -4px 16px var(--glowier); /* hovered buttons */
--box-glow-dominant: -8px 4px 16px var(--dominant-glow), 8px -4px 16px var(--dominant-glow); /* card, mobile menu */
/* Shape */ --box-corners: 25px;
/* Instead of making icons/logos in different colors to match a theme, they can instead be changed
here with CSS using the filter function, this will work with the coreCSS class ".icon" */
/* Icon Adjustments */
--set-adjustments: hue-rotate(190deg) brightness(70%) contrast(220%) saturate(87%) drop-shadow(0px 0px 5px var(--color-bright));
}
html { /* Document */
/* default background, placed on html so filters can be placed over */
background: url('https://github.com/Bijikyu/staticAssetsSmall/blob/main/backgrounds/firemarbleblur_min-min.png?raw=true') no-repeat center center fixed; /* Decoration */
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}