errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css variables are cool

Browse source
This commit is contained in:
Jordan Scales 2020-04-16 12:43:03 -04:00
parent c588dee988
commit bcbb44b6db
1 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
style.css
View file

@ -3,6 +3,15 @@
--button-face: #c0c0c0; --button-face: #c0c0c0;
--button-shadow: #808080; --button-shadow: #808080;
--window-frame: #0a0a0a; --window-frame: #0a0a0a;
--border-raised-outer: -0.5px -0.5px 0 0.5px var(--button-highlight),
0 0 0 1px var(--window-frame);
--border-raised-inner: inset -1px -1px var(--button-shadow),
inset 1px 1px var(--button-face);
--border-sunken-outer: -0.5px -0.5px 0 0.5px var(--window-frame),
0 0 0 1px var(--button-highlight);
--border-sunken-inner: inset -1px -1px var(--button-face),
inset 1px 1px var(--button-shadow);
} }
* { * {
@ -22,16 +31,11 @@ button {
border: none; border: none;
background: var(--button-face); background: var(--button-face);
padding: 6px 8px; padding: 6px 8px;
/* Make these shadows into a mixin */ box-shadow: var(--border-raised-outer), var(--border-raised-inner);
box-shadow: -0.5px -0.5px 0 0.5px var(--button-highlight),
0 0 0 1px var(--window-frame), inset -1px -1px var(--button-shadow),
inset 1px 1px var(--button-face);
} }
button:active { button:active {
box-shadow: -0.5px -0.5px 0 0.5px var(--window-frame), box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
0 0 0 1px var(--button-highlight), inset -1px -1px var(--button-face),
inset 1px 1px var(--button-shadow);
} }
button:focus { button:focus {