Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/hearthspace-ui-experiments. crutchcorn.github.io/hearthspace-ui-experiments
Something went wrong. Try again.
9.8 kB · 526 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527.settings { container: settings / inline-size; height: 100%; min-height: 0; user-select: none;}
.layout { position: relative; display: grid; height: 100%; min-height: 0; grid-template-columns: 160px minmax(0, 1fr);}
.compactHeader { display: none;}
.sidebar { display: flex; min-height: 0; flex-direction: column; gap: 5px; overflow: auto; padding: 22px 12px; border-right: 1px solid var(--line); background: var(--surface-subtle); box-shadow: inset -1px 0 0 var(--chrome-border);}
.category,.navigationToggle { display: flex; min-height: 40px; flex-shrink: 0; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer;}
.category:hover,.navigationToggle:hover { border-color: var(--chrome-border); background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--ink);}
.category[aria-current='page'] { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge); color: var(--ink);}
.category[aria-current='page'] svg { color: var(--accent-strong);}
.category:focus-visible,.navigationToggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px;}
.content { container: settings-content / inline-size; min-width: 0; min-height: 0; overflow: auto; background: var(--surface-subtle); overscroll-behavior: contain; scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin;}
.page { container-type: inline-size; padding: 23px 24px 25px;}
.heading h2 { margin: 0 0 8px; font-size: 26px; font-weight: 400; letter-spacing: -0.7px; line-height: 1.1;}
.heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5;}
.palette { min-width: 0; margin: 25px 0 0; padding: 0; border: 0;}
.palette legend { margin-bottom: 12px; padding: 0; font-size: 11px; font-weight: 500;}
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.presentationOptions { display: grid; max-width: 480px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.option { position: relative; min-width: 0; cursor: pointer;}
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;}
.card { display: flex; min-height: 68px; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--chrome-border); border-radius: var(--radius-tile); background: var(--surface-control); box-shadow: var(--glass-edge);}
.option:hover .card { border-color: var(--accent-border); background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
.option input:checked + .card { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active);}
:global([data-input-modality='keyboard']) .option input:focus-visible + .card { outline: 2px solid var(--accent); outline-offset: 3px;}
.modeCard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px;}
.modePreview { --preview-dot: #586f6826;
position: relative; pointer-events: none; height: 74px; grid-column: 1 / -1; overflow: hidden; border: 1px solid #ffffff40; border-radius: 7px; background-color: #e5e9e3; background-image: radial-gradient( var(--preview-dot) 0.6px, transparent 0.8px ); background-size: 9px 9px;}
.previewWindow,.previewPanel { position: absolute; border: 1px solid #ffffffa6; border-radius: 6px; background: #fff9; box-shadow: 0 5px 16px #40585a1a, inset 0 1px 0 #ffffffa6; backdrop-filter: blur(12px);}
.previewWindow { inset: 12px 31% 12px 13%;}
.previewWindow::before,.previewWindow::after { content: ''; position: absolute; left: 9px; height: 3px; border-radius: 2px; background: #59666842;}
.previewWindow::before { top: 11px; width: 42%;}
.previewWindow::after { top: 20px; width: 63%; opacity: 0.45;}
.previewPanel { inset: 30px 12% 5px 57%;}
.modeCard[data-mode='dark'] .modePreview { --preview-dot: #d5f1e51c;
border-color: #ffffff12; background-color: #142225;}
.modeCard[data-mode='dark'] .previewWindow,.modeCard[data-mode='dark'] .previewPanel { border-color: #ffffff29; background: #20282d91; box-shadow: 0 5px 16px #111b2726, inset 0 1px 0 #ffffff1f;}
.modeCard[data-mode='dark'] .previewWindow::before,.modeCard[data-mode='dark'] .previewWindow::after { background: #d9e7e975;}
.modeLabel { display: flex; align-items: center; gap: 9px;}
.modeLabel svg { color: var(--muted);}
.option input:checked + .card .modeLabel svg { color: var(--accent-strong);}
.modeLabel strong { font-size: 12px; font-weight: 500;}
.selectionMark { display: grid; width: 16px; height: 16px; flex-shrink: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%;}
.option input:checked + .card .selectionMark { border-color: var(--accent); background: var(--accent); color: var(--accent-ink);}
.swatch { display: grid; width: 29px; height: 29px; flex-shrink: 0; place-items: center; border-radius: 50%; background: var(--swatch); box-shadow: 0 3px 12px color-mix(in srgb, var(--swatch) 24%, transparent), inset 0 1px 0 #ffffff59; color: #fff;}
.name strong { display: block; font-size: 11px; font-weight: 500;}
.name small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px;}
.toggleRow { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface-control); box-shadow: var(--glass-edge); cursor: pointer;}
.toggleRow:hover { border-color: var(--accent-border); background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
.toggleCopy { display: flex; flex-direction: column; gap: 6px;}
.toggleCopy strong { font-size: 11px; font-weight: 500;}
.toggleCopy > span { color: var(--muted); font-size: 10px; line-height: 1.5;}
.toggle { --toggle-highlight: #ffffff40; --toggle-on-fill: linear-gradient( 135deg, var(--accent-bright), var(--accent) );
appearance: none; position: relative; width: 40px; height: 24px; flex-shrink: 0; margin: 0; border: 1px solid var(--chrome-border); border-radius: var(--radius-round); background: var(--control-track); box-shadow: inset 0 1px 2px var(--line); cursor: pointer;}
.toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-round); background: var(--control-thumb); box-shadow: 0 1px 3px var(--line);}
.toggle:checked { border-color: var(--accent-border); background: var(--toggle-on-fill); box-shadow: inset 0 1px 0 var(--toggle-highlight), 0 4px 14px -5px color-mix(in srgb, var(--accent) 10%, transparent);}
:global([data-color-mode='dark']) .toggle { --toggle-highlight: #ffffff14; --toggle-on-fill: color-mix( in srgb, var(--accent-base) 72%, var(--surface-tint) );}
.toggle:checked::before { transform: translateX(16px);}
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;}
.restoreTools { display: flex; min-height: 36px; align-items: center; gap: 7px; margin-top: 8px; padding: 8px 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); font-size: 10px; cursor: pointer;}
.restoreTools:hover { background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--ink);}
.restoreTools:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;}
@container settings-content (width < 380px) { .page { padding: 21px 18px 23px; }
.options { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@container settings (width < 560px) { .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.compactHeader { display: flex; min-height: 49px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
.navigationToggle { color: var(--ink); }
.navigationToggle[aria-expanded='true'] { border-color: var(--accent-border); background: var(--accent-soft); }
.sidebar { --chrome-hover: var(--raised-control-hover);
position: absolute; z-index: 2; top: 49px; right: 0; left: 0; display: none; max-height: calc(100% - 49px); padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--material-raised); box-shadow: var(--shadow-panel), var(--glass-edge); backdrop-filter: var(--glass-blur); }
.sidebar[data-open='true'] { display: flex; }}
.layoutDescription { margin: 0 0 8px; color: var(--chrome-muted); font-size: 12px; line-height: 1.6;}
@media (prefers-reduced-motion: no-preference) { .category, .navigationToggle, .card, .toggleRow, .toggle, .restoreTools { transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, color 180ms ease; }}