liquidex
5e6b84bed5
for faster load times, and seamless updates. because for some reason ServeDir can't do it correctly, and it tells the client "yeah hey nothing changed" even if something changed
172 lines
4 KiB
CSS
172 lines
4 KiB
CSS
/* Variables */
|
|
|
|
:root {
|
|
--color-text: #111;
|
|
--color-error: #db344b;
|
|
|
|
--color-brand-blue: #40b1f4;
|
|
|
|
--color-panel-border: rgba(0, 0, 0, 20%);
|
|
--color-panel-background: #fff;
|
|
--color-shaded-background: rgba(0, 0, 0, 5%);
|
|
|
|
--dialog-backdrop: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Reset */
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Fonts */
|
|
|
|
:root {
|
|
font-family: "Atkinson Hyperlegible", sans-serif;
|
|
}
|
|
|
|
button, textarea, input {
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
pre, code, textarea {
|
|
font-family: "Iosevka Hyperlegible", monospace;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Buttons */
|
|
|
|
button {
|
|
border: 1px solid var(--color-panel-border);
|
|
border-radius: 9999px;
|
|
padding: 0.5rem 1.5rem;
|
|
background-color: var(--color-panel-background);
|
|
}
|
|
|
|
/* Text areas */
|
|
|
|
input {
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-panel-border);
|
|
}
|
|
|
|
*:focus {
|
|
outline: 1px solid var(--color-brand-blue);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
/* Modal dialogs */
|
|
|
|
dialog:not([open]) {
|
|
/* Weird this doesn't seem to work by default. */
|
|
display: none;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: var(--dialog-backdrop);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* Details */
|
|
|
|
details>summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Throbbers */
|
|
|
|
@keyframes rkgk-throbber-loading {
|
|
0% {
|
|
clip-path: inset(0% 100% 0% 0%);
|
|
animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
|
|
}
|
|
|
|
50% {
|
|
clip-path: inset(0% 0% 0% 0%);
|
|
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
|
|
}
|
|
|
|
100% {
|
|
clip-path: inset(0% 0% 0% 100%);
|
|
}
|
|
}
|
|
|
|
rkgk-throbber {
|
|
display: inline;
|
|
|
|
&.loading {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: var(--color-brand-blue);
|
|
animation: infinite alternate rkgk-throbber-loading;
|
|
/* I wonder how many people will get _that_ reference. */
|
|
animation-duration: calc(60s / 141.98);
|
|
}
|
|
|
|
&.error {
|
|
/* This could use an icon. */
|
|
color: var(--color-error);
|
|
}
|
|
}
|
|
|
|
/* Panels */
|
|
|
|
.rkgk-panel {
|
|
--panel-border-radius: 8px;
|
|
|
|
display: block;
|
|
background: var(--color-panel-background);
|
|
border: none;
|
|
border-radius: var(--panel-border-radius);
|
|
box-shadow:
|
|
0 0 0 1px var(--color-panel-border);
|
|
/* 4px 4px 0 0 var(--color-panel-border); */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Horizontal separators */
|
|
|
|
hr {
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-panel-border);
|
|
}
|
|
|
|
/* Lists */
|
|
|
|
ul, ol {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Code examples */
|
|
|
|
pre:has(code) {
|
|
background-color: var(--color-shaded-background);
|
|
border-radius: 8px;
|
|
padding: 1em 1em;
|
|
}
|
|
|
|
/* Icons */
|
|
|
|
:root {
|
|
--icon-rkgk-grayscale: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=');
|
|
--icon-external-link: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+');
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
|
|
&.icon-rkgk-grayscale { background-image: var(--icon-rkgk-grayscale); }
|
|
&.icon-external-link { background-image: var(--icon-external-link); }
|
|
}
|
|
|