Added some additional css variables

This commit is contained in:
2025-10-06 08:56:39 -06:00
parent 76b355dca0
commit 9ee2e0956f

View File

@@ -6,6 +6,9 @@
--middle-accent: rgba(128,128,128,0.1); --middle-accent: rgba(128,128,128,0.1);
--middle-shade: rgba(128,128,128,0.5); --middle-shade: rgba(128,128,128,0.5);
--shadows-color: rgba(138,138,138,1); --shadows-color: rgba(138,138,138,1);
--ui-height: 5vh;
--ui-half-height: calc(var(--ui-height) / 2);
--ui-quarter-height: calc(var(--ui-half-height) / 2);
&.darkmode { &.darkmode {
--foreground-high: rgba(250,250,250,0.5); --foreground-high: rgba(250,250,250,0.5);
--foreground-low: rgba(200,200,200,1); --foreground-low: rgba(200,200,200,1);
@@ -32,8 +35,8 @@ body {
} }
#navigation { #navigation {
padding-top:25px; padding-top: var(--ui-half-height);
height: 25px; height: var(--ui-half-height);
box-shadow: inset 0 -2px 3px 0 var(--shadows-color); box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
} }
@@ -94,14 +97,16 @@ body {
.board_tab { .board_tab {
display: inline-block; display: inline-block;
height: 24px; height: var(--ui-half-height);
width: 100px; min-width: 100px;
border: solid 1px var(--foreground-low); border: solid 1px var(--foreground-low);
color: var(--foreground-high); color: var(--foreground-high);
border-bottom: unset; border-bottom: unset;
border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;
background: var(--background-low); background: var(--background-low);
text-align: center; text-align: center;
line-height: var(--ui-half-height);
font-size: var(--ui-quarter-height);
} }
.active_board { .active_board {
@@ -141,11 +146,11 @@ body {
} }
.title_bar { .title_bar {
height: 50px; height: var(--ui-height);
box-shadow: inset 0 -2px 3px 0 var(--shadows-color); box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
display: flex; display: flex;
justify-content: stretch; justify-content: stretch;
font-size: 32pt; font-size: var(--ui-half-height);
user-select: none; user-select: none;
} }
@@ -158,17 +163,18 @@ body {
display: inline-block; display: inline-block;
background: var(--middle-accent); background: var(--middle-accent);
box-shadow: inset 2px 2px 2px 0 var(--middle-shade); box-shadow: inset 2px 2px 2px 0 var(--middle-shade);
width: 50px; width: var(--ui-height);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
line-height: var(--ui-height);
} }
.options_button { .options_button {
position: absolute; position: absolute;
height: 50px; height: var(--ui-height);
top: 0; top: 0;
right: 0; right: 0;
font-size: 32pt; font-size: var(--ui-half-height);
} }
.focused { .focused {