leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a slight 3D effect to buttons

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2021-05-17 19:15:54 -06:00
parent ae8b42e0c9
commit 8b03d09c78
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
style.css
View File

@ -19,6 +19,7 @@ body {
--panel-bg-color: hsl(220, 10%, 15%); --panel-bg-color: hsl(220, 10%, 15%);
--button-bg-color: hsl(220, 10%, 25%); --button-bg-color: hsl(220, 10%, 25%);
--button-bg-shadow-color: #fff1;
--button-bg-hover-color: hsl(220, 15%, 30%); --button-bg-hover-color: hsl(220, 15%, 30%);
--generic-bg-hover-on-white: hsl(220, 60%, 90%); --generic-bg-hover-on-white: hsl(220, 60%, 90%);
--generic-bg-selected-on-white: hsl(220, 60%, 85%); --generic-bg-selected-on-white: hsl(220, 60%, 85%);
@ -47,7 +48,8 @@ button,
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
font-family: inherit; font-family: inherit;
color: white; color: white;
background: var(--button-bg-color); background-color: var(--button-bg-color);
background-image: linear-gradient(to bottom, var(--button-bg-shadow-color), transparent 75%);
border: 1px solid hsl(220, 10%, 10%); border: 1px solid hsl(220, 10%, 10%);
box-shadow: box-shadow:
inset 0 0 0 1px hsl(220, 10%, 33%), inset 0 0 0 1px hsl(220, 10%, 33%),
@ -58,7 +60,7 @@ button,
} }
button:hover, button:hover,
.radio-faux-button-set > label:hover > input + span { .radio-faux-button-set > label:hover > input + span {
background: var(--button-bg-hover-color); background-color: var(--button-bg-hover-color);
} }
button:active, button:active,
.radio-faux-button-set > label:active > input + span { .radio-faux-button-set > label:active > input + span {
@ -68,7 +70,7 @@ button:active,
} }
button:disabled { button:disabled {
color: #606060; color: #606060;
background: #202020; background-color: #202020;
box-shadow: box-shadow:
inset 0 0 2px 1px hsl(220, 0%, 10%), inset 0 0 2px 1px hsl(220, 0%, 10%),
0 1px 0 hsl(220, 10%, 10%); 0 1px 0 hsl(220, 10%, 10%);
@ -812,13 +814,13 @@ pre.stack-trace {
white-space: pre-wrap; white-space: pre-wrap;
} }
.played-pack-list > li > button:enabled { .played-pack-list > li > button:enabled {
background: hsl(220, 30%, 25%); background-color: hsl(220, 30%, 25%);
box-shadow: box-shadow:
inset 0 0 0 1px hsl(220, 30%, 33%), inset 0 0 0 1px hsl(220, 30%, 33%),
0 1px 1px hsl(220, 10%, 10%); 0 1px 1px hsl(220, 10%, 10%);
} }
.played-pack-list > li > button:enabled:hover { .played-pack-list > li > button:enabled:hover {
background: hsl(220, 40%, 30%); background-color: hsl(220, 40%, 30%);
} }
.played-pack-list p { .played-pack-list p {
color: #c0c0c0; color: #c0c0c0;