67 lines
3.0 KiB
CSS
67 lines
3.0 KiB
CSS
@font-face {
|
|
font-family: plexmono;
|
|
src: url('./fonts/IBMPlexMono-Regular.subset.woff2') format('woff2');
|
|
font-display: swap;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: plexmono;
|
|
src: url('./fonts/IBMPlexMono-Bold.subset.woff2') format('woff2');
|
|
font-display: swap;
|
|
font-weight: 700;
|
|
}
|
|
:root {
|
|
color-scheme: dark;
|
|
--background: #202a23;
|
|
--foreground: #c5d5bc;
|
|
--panel: #29372c;
|
|
--border: #849979;
|
|
}
|
|
:root[data-theme='light'] {
|
|
color-scheme: light;
|
|
--background: #eef2e9;
|
|
--foreground: #293d2c;
|
|
--panel: #e1e8da;
|
|
--border: #708769;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root[data-theme='system'] {
|
|
color-scheme: light;
|
|
--background: #eef2e9;
|
|
--foreground: #293d2c;
|
|
--panel: #e1e8da;
|
|
--border: #708769;
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
[hidden] { display: none !important; }
|
|
body { margin: 0; padding: clamp(1rem, 4vw, 3rem); background: var(--background); color: var(--foreground); font-family: plexmono, Consolas, monospace; line-height: 1.6; }
|
|
main { max-width: 1120px; margin: auto; min-width: 0; }
|
|
header { margin-bottom: 2rem; }
|
|
.logo { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
|
|
h1 { margin: 0; font-size: 2.5rem; line-height: 1; }
|
|
label { display: flex; flex-direction: column; gap: 0.4rem; }
|
|
textarea, select, button { font: inherit; color: inherit; background: var(--background); border: 2px solid var(--border); border-radius: 4px; padding: 0.65rem 0.8rem; }
|
|
textarea { display: block; width: 100%; margin-top: 0.5rem; resize: vertical; min-height: 5rem; }
|
|
select { max-width: 100%; }
|
|
button, summary { cursor: pointer; }
|
|
button:hover { border-color: var(--foreground); }
|
|
button:disabled { opacity: 0.5; cursor: default; }
|
|
:focus-visible { outline: 3px solid var(--foreground); outline-offset: 4px; }
|
|
.controls, .font-navigation, .actions, .preferences, .install-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; }
|
|
.controls { margin-top: 1rem; }
|
|
.controls label { flex: 1; min-width: 9rem; }
|
|
.font-navigation { max-width: 100%; }
|
|
.font-navigation button { max-width: 100%; overflow-wrap: anywhere; }
|
|
.output-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 2.5rem; }
|
|
.output-heading p { margin: 0; }
|
|
.actions { font-size: 0.85rem; }
|
|
pre { max-width: 100%; min-height: 10rem; overflow-x: auto; padding: 1.25rem; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; font-family: plexmono, Consolas, monospace; font-size: 12px; line-height: 1.25; tab-size: 4; }
|
|
.note, #status, footer { font-size: 0.8rem; }
|
|
.note { max-width: 65ch; }
|
|
#status { min-height: 1.6em; }
|
|
footer { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
|
|
.install-controls { align-items: center; }
|
|
details { max-width: 30rem; }
|
|
@media (max-width: 390px) { .actions { width: 100%; } .actions button { flex: 1 1 auto; } pre { padding: 0.75rem; } }
|