pulled colors into css variables for easy theming

This commit is contained in:
2025-08-18 15:20:51 -06:00
parent ae650db3f9
commit 056d6fd282
2 changed files with 37 additions and 8 deletions

View File

@@ -1,3 +1,13 @@
:root {
--foreground-high: rgba(10,10,10,1);
--foreground-low: rgba(40,40,40,1);
--background-high: rgba(200,200,200,0.5);
--background-low: rgba(250,250,250,0.5);
--middle-accent: rgba(128,128,128,0.1);
--middle-shade: rgba(128,128,128,0.5);
--shadows-color: rgba(138,138,138,1);
}
body {
margin:0;
}
@@ -13,8 +23,9 @@ body {
}
#navigation {
height: 50px;
box-shadow: inset 0 -2px 3px 0 #888;
padding-top:25px;
height: 25px;
box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
}
#view {
@@ -27,8 +38,25 @@ body {
padding: 5%;
}
.board_tab {
display: inline-block;
height: 24px;
width: 100px;
border: solid 1px var(--foreground-low);
color: var(--foreground-high);
border-bottom: unset;
border-radius: 15px 15px 0 0;
background: var(--background-low);
text-align: center;
}
.active_board {
color: var(--foreground-low);
background: var(--background-high);
}
.libSlot, .pecSlot {
border: solid 3px #666;
border: solid 3px var(--foreground-low);
border-radius: 6px;
user-select: none;
position: relative;
@@ -41,7 +69,7 @@ body {
}
.empty {
color: #666;
color: var(--forground-low);
font-size: 100%;
text-align: center;
}
@@ -59,7 +87,7 @@ body {
.title_bar {
height: 50px;
box-shadow: inset 0 -2px 3px 0 #888;
box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
display: flex;
justify-content: stretch;
font-size: 32pt;
@@ -114,5 +142,6 @@ body {
bottom: 0;
left: 0;
text-align: center;
background: rgba(255,255,255,0.3);
color: var(--foreground-high);
background: var(--background-high);
}