diff --git a/main.css b/main.css index c60dbf4..36739db 100644 --- a/main.css +++ b/main.css @@ -65,15 +65,16 @@ body { .dm-indicator { display: inline-block; height: 30px; - width: 30px; + width: 70px; background: yellow; border-radius: 15px; - box-shadow: inset 0 0 5px 5px rgba(240,140,0,0.8); + box-shadow: inset -40px 0px 2px -2px var(--foreground-high), inset 0 0 5px 5px rgba(240,140,0,0.8), inset -40px 0 5px 5px rgba(240,140,0,0.8), 0 0 2px 2px var(--foreground-high); appearance: unset; + transition: box-shadow 300ms; } .dm-indicator:checked { - background: lightgrey; - box-shadow: inset 10px 10px 5px -5px black; + background: black; + box-shadow: inset 40px 0px 2px -2px var(--foreground-high), inset -10px 10px 20px -15px lightgrey, inset -10px 0px 15px -10px white, 0 0 2px 2px var(--foreground-high); } .toggle-switch { @@ -83,12 +84,12 @@ body { width: 70px; border-radius: 15px; background: var(--background-low); - box-shadow: inset -40px 0px 2px -2px var(--foreground-high); + box-shadow: inset -40px 0px 2px -2px var(--foreground-high), 0 0 2px 2px var(--foreground-high); transition: box-shadow 300ms; } .toggle-switch:checked { - box-shadow: inset 40px 0px 2px -2px var(--foreground-high); + box-shadow: inset 40px 0px 2px -2px green, 0 0 2px 2px var(--foreground-high); } .board_tab { @@ -109,6 +110,7 @@ body { } .libSlot, .pecSlot { + background-color: var(--background-low); border: solid 3px var(--foreground-low); border-radius: 6px; user-select: none; @@ -212,3 +214,32 @@ body { color: var(--foreground-high); background: var(--background-high); } + +.button { + display: inline-block; + border-radius: 5px; + background-color: var(--middle-accent); + box-shadow: inset 0 0 2px 0 var(--middle-shade); + text-align: center; + padding: 5px; + cursor: pointer; +} + +.holding { + animation-name: countdown; + animation-duration: 3s; + animation-timing-function: linear; + animation-play-state: running; + animation-iteration-count: infinite; + background-image: linear-gradient(to left, red 50%, transparent 50%); + background-size: 200% 200%; +} + +@keyframes countdown { + from { + background-position: 0% 0% + } + to { + background-position: -100% 0%; + } +}