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.
21 kB · 1059 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060.desktop { --shell-popup-z: 1110;
position: relative; isolation: isolate; width: 100%; height: 100%; color: var(--ink); background: var(--field);}
.viewport { position: absolute; inset: 0; overflow: auto; overscroll-behavior: none; scrollbar-width: none; touch-action: none; cursor: grab;}
.photoBackground { position: absolute; inset: 0; pointer-events: none; background-position: center; background-repeat: no-repeat;}
.viewport::-webkit-scrollbar { display: none;}
.cursorReady { cursor: default;}
.panReady,.panReady * { cursor: grab !important;}
.dragging,.dragging * { cursor: grabbing !important; user-select: none !important;}
.world { position: relative; isolation: isolate; background-color: var(--field); background-image: radial-gradient(var(--field-dot) 1px, transparent 1.2px); background-size: var(--canvas-grid-size) var(--canvas-grid-size);}
.customBackground { background-color: transparent; background-image: none; background-size: auto;}
.window { position: absolute; display: flex; flex-direction: column; min-width: 0; min-height: 0; cursor: default; border: 1px solid var(--chrome-border); border-radius: var(--window-radius, var(--radius-panel)); background: var(--material-surface); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--window-shadow); transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 360ms cubic-bezier(0.2, 0.7, 0.1, 1), opacity 220ms ease; transform-origin: top left;}
.window[data-preview-match='false'] { opacity: 0; pointer-events: none;}
.desktop[data-layout-editing='true'] .window { /* Layout motion owns the full path, including the recessed frame offset. */ transition-property: box-shadow, border-color, background-color, opacity;}
.window[data-preview-selected='true'] { outline: 2px solid var(--accent); outline-offset: 5px;}
.previewWindowTarget { position: absolute; z-index: 5; inset: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer;}
.previewWindowTarget:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px;}
.desktop[data-canvas-preview='true'] .viewport { overflow: hidden; outline: none;}
.desktop[data-preview-exiting='true'] .viewport { overflow: hidden; cursor: default;}
.desktop[data-preview-exiting='true'] .window { transition: none;}
.desktop[data-preview-exiting='true'] [data-desktop-item-id] { transition: opacity 180ms ease;}
.window:focus { outline: none;}
.titlebar { position: relative; display: flex; flex: 0 0 44px; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 0 6px; border-bottom: 1px solid var(--line); border-radius: calc(var(--window-radius, var(--radius-panel)) - 1px) calc(var(--window-radius, var(--radius-panel)) - 1px) 0 0; background: var(--surface-control); color: var(--muted); cursor: grab; user-select: none; touch-action: none;}
.titlebar::after { position: absolute; top: calc(50% - 2px); left: 50%; width: 28px; height: 4px; border-radius: var(--radius-round); background: color-mix(in srgb, var(--muted) 26%, transparent); transform: translateX(-50%); content: ''; pointer-events: none;}
.window[data-active='true'] .titlebar { color: var(--ink);}
.windowTitle { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 0; max-width: calc(50% - 24px); padding-right: 10px; font-size: 12px; font-weight: 550; letter-spacing: -0.15px;}
.windowAppIcon { display: grid; flex-shrink: 0; place-items: center; padding: 7px; border: 0; border-radius: var(--radius-control);}
.window[data-active='true'] .windowAppIcon { color: var(--accent-strong);}
.windowName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.windowActions { display: flex; flex-shrink: 0; align-items: center; gap: 4px;}
.windowActions button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: inherit; opacity: 0.8; transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease, opacity 180ms ease;}
.windowActions button:is(:hover, :focus-visible) { box-shadow: var(--control-glow); background: var(--chrome-hover); opacity: 1;}
.windowActions button:last-child:hover { background: #b84726; color: white;}
.windowBody { flex: 1; user-select: text; min-width: 0; min-height: 0; overflow: auto; background: var(--paper); border-radius: 0 0 calc(var(--window-radius, var(--radius-panel)) - 1px) calc(var(--window-radius, var(--radius-panel)) - 1px); scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin;}
.window[data-app-id='settings'] .windowBody,.desktop[data-presentation='realistic'] .window[data-external='true'] .windowBody { background: transparent;}
.window:hover { box-shadow: var(--glass-edge-active), var(--shadow-panel);}
.window[data-active='true'],.window:focus-within { border-color: var(--accent-border); box-shadow: var(--glass-edge-active), inset 0 0 36px -14px var(--light-tint), var(--shadow-glow);}
.resizeHandle { position: absolute; z-index: 2; touch-action: none;}
.resizen,.resizes { right: 12px; left: 12px; height: 8px; cursor: ns-resize;}
.resizen { top: -4px;}
.resizes { bottom: -4px;}
.resizee,.resizew { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize;}
.resizee { right: -4px;}
.resizew { left: -4px;}
.resizene,.resizese,.resizesw,.resizenw { width: 16px; height: 16px;}
.resizene { top: -4px; right: -4px; cursor: nesw-resize;}
.resizese { right: -4px; bottom: -4px; cursor: nwse-resize;}
.resizesw { bottom: -4px; left: -4px; cursor: nesw-resize;}
.resizenw { top: -4px; left: -4px; cursor: nwse-resize;}
.resizeHint { position: absolute; right: 8px; bottom: 8px; color: color-mix(in srgb, var(--muted) 38%, transparent); pointer-events: none;}
.desktop[data-focus-mode='true'] .viewport { overflow: hidden; touch-action: auto; cursor: default;}
.desktop .window[data-focus-mode='true'] { --window-radius: 0px;
min-width: 0; min-height: 0; border-radius: 0;}
.desktop .window[data-focus-mode='true'] .titlebar { cursor: default;}
.desktop .window[data-focus-mode='true'] .windowBody { overscroll-behavior: contain;}
.selecting:not(.dragging),.selecting:not(.dragging) :not([data-grouped='true'], [data-grouped='true'] *) { cursor: crosshair !important;}
.selection { position: absolute; border: 1px solid var(--accent); border-radius: var(--radius-detail); background: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none;}
.freeformSelection { position: absolute; overflow: visible; color: var(--accent); pointer-events: none;}
.freeformSelection polygon { fill: color-mix(in srgb, var(--accent) 7%, transparent); fill-rule: evenodd;}
.freeformSelection polyline,.freeformSelection path { fill: none; stroke: currentcolor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;}
.window[data-selected='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent), 0 16px 40px color-mix(in srgb, var(--accent-strong) 13%, transparent);}
.nativeNavigation { display: flex; flex-shrink: 0; gap: 14px; padding-left: 8px; color: var(--muted);}
.nativeMenu { display: flex; user-select: none; gap: 20px; padding: 7px 13px; border-bottom: 1px solid #c9c9c9; background: #f1f1ef; color: #323232; font: 12px Arial, sans-serif;}
.desktop[data-presentation='realistic'] .window[data-external='true'] { --window-radius: 7px; --ink: #292b30; --muted: #72767e; --line: #00000018; --chrome-border: #ffffffbc; --surface-control: #ffffff40; --surface-subtle: #ffffff2b; --scrollbar: #ad8c734d;
border-color: #9b9da3; background: #fff; color: var(--ink); backdrop-filter: none; box-shadow: 0 10px 25px #1b1e2730; font-family: Arial, sans-serif; color-scheme: light;}
.desktop[data-presentation='realistic'] .window[data-external='true'][data-selected='true'] { outline: 2px solid var(--accent); outline-offset: 2px;}
.desktop[data-presentation='realistic'] .window[data-external='true'] .titlebar { background: #e7e7e9; color: #33353a;}
.desktop[data-presentation='realistic'] .window[data-external='true'] .titlebar::after { display: none;}
.desktop[data-presentation='realistic'] .window[data-external='true'] .windowTitle { max-width: calc(100% - 80px); gap: 7px;}
.desktop[data-presentation='realistic'] .window[data-external='true'] .windowAppIcon { padding: 3px; background: none; box-shadow: none;}
.desktop[data-presentation='realistic'] .window[data-app-id='browser'] { --window-radius: 9px;}
.desktop[data-presentation='realistic'] .window[data-app-id='browser'] .titlebar { align-items: flex-end; gap: 8px; border-color: #45434e; background: #282730; color: #ecebf2;}
.desktop[data-presentation='realistic'] .window[data-app-id='browser'] .windowTitle { width: 220px; height: 34px; padding: 4px 10px; border-radius: 8px 8px 0 0; background: #45434e; font-weight: 400;}
.desktop[data-presentation='realistic'] .window[data-app-id='browser'] .windowActions { align-self: center;}
.desktop[data-presentation='realistic'] .window[data-app-id='files'] { --window-radius: 12px;}
.desktop[data-presentation='realistic'] .window[data-app-id='files'] .titlebar { flex-basis: 52px; gap: 8px; background: #f1f1f1;}
.desktop[data-presentation='realistic'] .window[data-app-id='files'] .windowTitle { justify-content: center; flex: 1; padding: 0; font-size: 13px; font-weight: 600;}
.desktop[data-presentation='realistic'] .window[data-app-id='files'] .windowAppIcon { display: none;}
.desktop[data-presentation='realistic'] .window[data-app-id='files'] .windowActions button { border-radius: 50%; background: #dedede;}
.desktop[data-presentation='realistic'] .window[data-app-id='notes'] { --window-radius: 2px;
border-color: #8b8b8b;}
.desktop[data-presentation='realistic'] .window[data-app-id='notes'] .titlebar { flex-basis: 32px; background: linear-gradient(#eee, #d6d6d6); font-size: 12px;}
.desktop[data-presentation='realistic'] .window[data-app-id='notes'] .windowActions button { width: 25px; height: 25px; border: 1px solid #b5b5b5; border-radius: 2px; background: #f0f0f0;}
.desktop[data-presentation='realistic'] .window[data-app-id='terminal'] { --window-radius: 3px;
border-color: #383b40; background: #17191d;}
.desktop[data-presentation='realistic'] .window[data-app-id='terminal'] .titlebar { flex-basis: 36px; border-color: #111; background: #303338; color: #dddfe3; font-family: var(--mono);}
.desktop[data-presentation='realistic'] .window[data-app-id='terminal'] .windowActions button { border-radius: 2px;}
.desktop[data-presentation='realistic'] .window:is([data-app-id='music'], [data-app-id='photos']) { --ink: #f0f1f5; --muted: #a4a8b5; --window-radius: 10px;
border-color: #383944; background: #22232b;}
.desktop[data-presentation='realistic'] .window:is([data-app-id='music'], [data-app-id='photos']) .titlebar { background: #17181d; color: #e9e9ed;}
.desktop[data-presentation='realistic'] .window[data-app-id='music'] .windowActions { order: -1;}
.desktop[data-presentation='realistic'] .window[data-app-id='calendar'] .titlebar { background: #dce6f2; color: #294a73;}
.desktop[data-presentation='realistic'] .window[data-external='true'] .windowActions button:hover { background: #8b8d944d;}
.desktop[data-presentation='realistic'] .window[data-external='true'] .windowActions button:last-child:hover { background: #c54646; color: #fff;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-external='true'] { --ink: #e5e7eb; --muted: #a6aab2; --line: #ffffff1c; --chrome-border: #ffffff24; --surface-control: #ffffff08; --surface-subtle: #ffffff03; --scrollbar: #a6aab257;
border-color: #555860; background: #25272c; color-scheme: dark;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-external='true'] .titlebar { background: #34363c; color: #e5e7eb;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='browser'] .titlebar { background: #282730;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='files'] .titlebar { background: #303236;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='files'] .windowActions button { background: #45474c;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='notes'] .titlebar { background: linear-gradient(#41444a, #34363b);}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='notes'] .windowActions button { border-color: #60636b; background: #45474c;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .nativeMenu { border-color: #45463f; background: #30322d; color: #e0e2d8;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='terminal'] { border-color: #383b40; background: #17191d;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='terminal'] .titlebar { background: #303338;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window:is([data-app-id='music'], [data-app-id='photos']) { border-color: #383944; background: #22232b;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window:is([data-app-id='music'], [data-app-id='photos']) .titlebar { background: #17181d;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-app-id='calendar'] .titlebar { background: #27384d; color: #c7dcf3;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-external='true'] .windowActions button:hover { background: #8b8d944d;}
.desktop[data-presentation='realistic'][data-color-mode='dark'] .window[data-external='true'] .windowActions button:last-child:hover { background: #c54646; color: #fff;}
/* Hearthspace owns the active rim, after each app's resting border styles. */.desktop[data-presentation='realistic'] .window[data-external='true']:is([data-active='true'], :focus-within) { border-color: var(--accent-border); box-shadow: var(--glass-edge-active), var(--shadow-glow);}
.mapPanel { position: fixed; z-index: var(--shell-popup-z); bottom: 90px; left: 24px; width: 352px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 186px); overflow: auto; padding: 20px; border: 1px solid var(--chrome-border); border-radius: var(--radius-panel); background: var(--material-surface); color: var(--chrome-text); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-panel); transform-origin: bottom left; animation: panel-in 180ms cubic-bezier(0.2, 0.7, 0.1, 1);}
.panelHeading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px;}
.panelHeading h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 24px; font-weight: 450; letter-spacing: -0.7px;}
.zoomPercentage { color: var(--chrome-muted); font-size: 14px; font-variant-numeric: tabular-nums;}
.zoomControls { display: flex; justify-content: flex-end; gap: 2px; margin-top: 12px;}
.zoomControls .zoomButton { display: grid; width: 44px; place-items: center; border-radius: var(--radius-control);}
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }}
@media (width <= 760px) { .mapPanel { bottom: 78px; left: 12px; max-height: calc(100dvh - 156px); }}
@media (pointer: coarse) { .titlebar { flex-basis: 50px; }
.windowActions button { width: 44px; height: 44px; }
.titlebar::after { display: none; }
.desktop[data-presentation='realistic'] .window[data-external='true'] .titlebar { min-height: 50px; }
.desktop[data-presentation='realistic'] .window[data-external='true'] .windowActions button { width: 44px; height: 44px; }}
@media (prefers-reduced-motion: reduce) { .window, .windowActions button { transition: none; }
.mapPanel { animation: none; }}
.drawingLayer { position: absolute; inset: 0; pointer-events: none;}
.window[data-drawing-launch='true'] { animation: drawing-window-reveal 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;}
@keyframes drawing-window-reveal { from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }}
@media (prefers-reduced-motion: reduce) { .window[data-drawing-launch='true'] { animation: none; }}
.frameHost,.popoverHost { position: fixed; inset: 0; overflow: hidden; pointer-events: none;}
.frameHost { z-index: 1101;}
.popoverHost { z-index: var(--shell-popup-z);}
.frameHost > * { pointer-events: auto;}
/* Editing overlays sit above windows without changing the canvas stack. */.layoutDragOverlay { position: fixed; z-index: 1150; inset: 0; overflow: hidden; pointer-events: none;}
.layoutDragWorld { position: absolute; pointer-events: none;}
.layoutDragWorld > * { pointer-events: auto;}
.pinnedDrawingHost { position: fixed; z-index: 1090; inset: 0; overflow: hidden; pointer-events: none;}
.desktop[data-layout-editing='true'] :is([data-window-id], [data-desktop-item-id], [data-drawing-id]) { cursor: move; outline: 1px dashed var(--accent-border); outline-offset: 3px;}
.desktop[data-layout-editing='true'] [data-layout-selected='true'] { outline: 2px solid var(--accent);}
.pinnedReveal { position: absolute; inset: 0; overflow: hidden; border: 0; border-radius: inherit; background: var(--material-surface); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); color: var(--chrome-text); cursor: pointer;}
.pinnedReveal > span { position: absolute; display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; font-size: 12px; white-space: nowrap;}
.window[data-frame-edge='left'] .pinnedReveal > span { right: 0; top: 0; width: 40px; height: 100%; writing-mode: vertical-rl;}
.window[data-frame-edge='right'] .pinnedReveal > span { left: 0; top: 0; width: 40px; height: 100%; writing-mode: vertical-rl;}
.window[data-frame-edge='top'] .pinnedReveal > span { bottom: 0; left: 0; width: 100%;}
.window[data-frame-edge='bottom'] .pinnedReveal > span { top: 0; left: 0; width: 100%;}
.widgetResult { position: absolute; z-index: 600; display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--chrome-border); border-radius: var(--radius-panel); background: var(--material-surface); color: var(--chrome-text); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-panel); transform-origin: top left; cursor: pointer;}
.widgetResult[data-preview-selected='true'] { outline: 2px solid var(--accent);}
.pinnedReveal:is(:hover, :focus-visible),.widgetResult:is(:hover, :focus-visible, [data-preview-selected='true']) { background: var(--material-raised); box-shadow: var(--glass-edge-active), var(--shadow-glow);}
@media (prefers-reduced-motion: no-preference) { .pinnedReveal, .widgetResult { transition: background 180ms ease, box-shadow 220ms ease; }}
.desktop[data-focus-mode='true'][data-shell-peek='false'] :is(.frameHost, .popoverHost, [data-layout-widget], [data-layout-group]) { opacity: 0; pointer-events: none;}
.desktop[data-focus-mode='true'][data-shell-peek='false'] .frameHost > * { pointer-events: none;}