bluesaxman/librePECS
1
0
Fork 0
mirror of https://forge.murkfall.net/bluesaxman/librePECS.git synced 2026-03-13 02:04:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

cleaned up toggle switch and added button css

Browse Source
This commit is contained in:
bluesaxman
2025-09-19 13:38:50 -06:00
parent d34793c7dc
commit b7de8fa966
1 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
main.css
View File

@@ -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%;
}
}