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.
3.6 kB · 181 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182.displays { min-width: 0; margin-top: 22px;}
.layout { position: relative; width: 100%; max-width: 400px; aspect-ratio: 800 / 450; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-tile); background-color: var(--surface-subtle); background-image: radial-gradient(var(--field-dot) 0.7px, transparent 1px); background-size: 16px 16px; box-shadow: var(--glass-edge);}
.monitor { position: absolute; display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid var(--chrome-border); border-radius: var(--radius-control); background: var(--material-raised); box-shadow: var(--window-shadow), var(--glass-edge); backdrop-filter: var(--glass-blur); color: var(--ink); font: inherit; cursor: grab; touch-action: none; user-select: none; transition: left 160ms ease-out, top 160ms ease-out, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;}
.layout:has(.monitor[data-dragging='true']) .monitor { transition: none;}
.monitor:hover { border-color: var(--accent-border); background: var(--material-raised-hover); box-shadow: var(--shadow-glow), var(--glass-edge-active);}
.monitor[aria-pressed='true'] { z-index: 1; border-color: var(--accent); color: var(--accent-strong); box-shadow: var(--shadow-glow), var(--glass-edge-active);}
.monitor[data-dragging='true'] { z-index: 2; cursor: grabbing; box-shadow: var(--shadow-glow), var(--glass-edge-active);}
.monitor:focus-visible,.setting select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;}
.monitorNumber { font-size: clamp(18px, 5cqw, 28px); font-weight: 400; line-height: 1;}
.keyboardHint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.selectedDisplay { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px;}
.displayIdentity { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-control); box-shadow: var(--glass-edge); color: var(--muted);}
.selectedDisplay h3 { margin: 0; font-size: 13px; font-weight: 500;}
.selectedDisplay p { margin: 4px 0 0; color: var(--muted); font-size: 10px;}
.controls { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface-subtle); box-shadow: var(--glass-edge);}
.setting { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 11px;}
.setting + .setting { border-top: 1px solid var(--line);}
.setting select { min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-control); box-shadow: var(--glass-edge); color: var(--ink); font: inherit; cursor: pointer;}
.setting select:hover { border-color: var(--accent-border); background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
@container (width < 280px) { .setting { align-items: stretch; flex-direction: column; gap: 6px; }}
@media (prefers-reduced-motion: reduce) { .monitor { transition: none; }}
@media (prefers-reduced-motion: no-preference) { .setting select { transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease; }}