helper.scss
:root {
--themecolor: #940;
--font: sans-serif;
--black: #000;
--black2: #151515;
--black3: #444;
--black4: #555;
--black5: #666;
--hovercolor: #ffaa0077;
--hovercolornontransparent: #ffaa00;
--beige: #ddb;
--beige2: #cca;
--beige3: #bb7;
--beige4: #fdfdfa;
--altbarheight: 30px;
--altbarcolor: var(--themecolor);
--border-radius: 2px;
--font-size-base: 1em;
--taskbarheight: 45px; // maybe deprecated in this file
--glassyElementSpacing: 15px; // deprecated in this file
--glassyElementBlur: 25px;
--glassyElementBackground: rgba(30,30,30,.5);
--bg-1: var(--black);
--bg-2: var(--black2);
--bg-3: var(--black3);
--bg-4: var(--black4);
--bg-5: var(--black5);
}
html, body {
background-color: transparent;
}
html {
font-size: var(--font-size-base);
overflow: clip;
}
body {
background: var(--beige4);
color: #000;
margin: 0;
padding: 0;
font-family: var(--font);
accent-color: var(--themecolor);
font-size: 1rem;
color-scheme: light;
}
* {
color: #000;
font-family: var(--font);
&::selection {
background-color: var(--hovercolor);
}
}
body {
button,
input,
select,
.has_hover,
.contextMenu a {
&:not([disabled]) {
transition: background-color .1s, filter .1s;
&:hover, &:focus-visible {
&:not(input) {
cursor: pointer;
}
background-color: var(--hovercolor);
filter: brightness(1.2);
}
}
}
.has_hover {
&:not([disabled]) {
transition: background-color .1s, filter .1s !important;
&:hover, &:focus-visible {
outline: 1px solid var(--themecolor);
outline-offset: -1px;
background-color: #555555cc !important;
// background-color: var(--hovercolor) !important;
filter: brightness(1.2) !important;
}
}
}
}
input,
select,
button,
textarea {
background: var(--beige4);
color: #000;
font-size: 1em;
border-radius: var(--border-radius);
}
button {
line-height: 2;
}
meter {
box-sizing: border-box;
display: inline-block;
position: relative;
width: 100%;
height: 8px;
border:0;
&::-webkit-meter-optimum-value {
background: var(--themecolor);
}
&::-moz-meter-bar {
background: var(--themecolor);
}
}
.altbar {
height:var(--altbarheight);
width:100%;
border-bottom:1px solid #555;
background:var(--beige);
position:sticky;
display:flex;
flex-direction:row;
top:0;
box-sizing:border-box;
padding: 1px;
button {
line-height: revert;
background: transparent;
border: 0;
padding: 0 .4em;
height: 100%;
border-radius: 1px;
}
}
.toolbar {
border-bottom:1px solid #555;
background:var(--bg-3);
}
.toolbar2 {
border-bottom:1px solid #555;
background:var(--bg-4);
}
.contextMenu {
width:auto;
background:#ffffff77;
backdrop-filter:blur(12px);
height:auto;
position:absolute;
display:inline-block;
z-index:1000;
padding:0;
border-radius:var(--border-radius);
border:1px solid var(--themecolor);
box-sizing:border-box;
min-width: 130px;
min-height: 1rem;
hr {
margin:0;
padding:0;
border:none;
border-bottom:1px solid var(--themecolor);
}
a {
display:block;
padding:3px 8px;
text-decoration:none;
cursor:pointer;
&:last-of-type {
border-bottom:none;
}
}
}
*[disabled],
*[disabled="disabled"] {
filter:contrast(.4) brightness(.6) grayscale(.1);
cursor: default;
user-select: none;
touch-action: none;
pointer-events: none;
}
.hidden {
display: none !important;
}
@media (prefers-color-scheme: dark) {
body {
background: transparent;
color: #fff;
background-color: var(--bg-1);
color-scheme: dark;
}
* {
color: #fff;
}
.altbar {
background:var(--altbarcolor);
border-bottom:none;
transition:.1s;
}
input,
select,
button,
textarea {
color: #fff;
background: var(--black2);
border: 1px solid #444;
}
.contextMenu {
background:#000000aa;
a {
color:#fff;
&:last-of-type {
border-bottom:none;
}
}
}
::-webkit-scrollbar {
background:var(--black);
width:initial;
}
::-webkit-scrollbar-thumb {
background:var(--black3);
border:1px solid var(--themecolor)
}
::-webkit-scrollbar-corner {
background:var(--black);
}
}
@media (prefers-color-scheme: light) {
:root {
--bg-1: var(--beige4);
--bg-2: var(--beige);
--bg-3: var(--beige2);
--bg-4: var(--beige3);
--bg-5: var(--beige4);
}
}