mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-19 12:11:44 +02:00
Code Issues Releases Wiki Activity

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 {