mirror of
https://forge.murkfall.net/bluesaxman/librePECS.git
synced 2026-03-13 02:04:20 -06:00
Added some additional css variables
This commit is contained in:
24
main.css
24
main.css
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user