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.
13 kB · 630 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631.dock { position: relative; display: flex; width: max-content; height: 54px; max-width: calc(100% - 213px); flex-shrink: 0; color: var(--chrome-text); user-select: none;}
.bar { display: flex; width: 100%; min-width: 0; align-items: center; gap: 4px;}
.appStrip { display: flex; min-width: 0; max-width: 560px; align-items: center; gap: 4px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;}
.appStrip::-webkit-scrollbar { display: none;}
.divider { width: 1px; height: 24px; flex-shrink: 0; background: var(--line);}
.appButton { position: relative; display: flex; width: 44px; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; touch-action: manipulation;}
.appIcon { display: grid; width: 24px; height: 24px; place-items: center;}
.appButton[data-running='true'] .appIcon { transform: translateY(-1px);}
.appButton[data-just-favorited='true'] .appIcon { animation: favorite-in 520ms cubic-bezier(0.16, 1, 0.3, 1);}
.runningDots { position: absolute; bottom: 4px; display: flex; gap: 3px;}
.runningDots > span { width: 3px; height: 3px; border-radius: var(--radius-round); background: var(--chrome-muted); transition: background 180ms ease, box-shadow 180ms ease;}
.appButton[data-active='true'] .runningDots > span { background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 65%, transparent);}
.launcher { display: flex; width: 44px; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; touch-action: manipulation;}
.launcher[data-favorite-drop-active='true'] { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--accent);}
.windowPopover { --widget-panel-width: 370px; --chrome-hover: var(--surface-control-hover);
overflow-y: auto; border: 1px solid var(--chrome-border); border-radius: var(--radius-panel); background: var(--material-surface); box-shadow: var(--shadow-panel), var(--glass-edge); backdrop-filter: var(--glass-blur); color: var(--chrome-text); scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin; animation: surface-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1); transition: border-color 180ms ease, box-shadow 180ms ease;}
.windowPopover:is(:hover, :focus-within) { border-color: var(--accent-border); box-shadow: var(--shadow-glow), var(--glass-edge-active);}
.popoverHeading { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 8px 20px;}
.popoverHeading h2 { margin: 0; font-size: 25px; font-weight: 500; letter-spacing: -0.7px; line-height: 1;}
.closeButton { display: grid; width: 44px; height: 44px; flex-shrink: 0; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--chrome-muted);}
.closeButton:hover { background: var(--chrome-hover); color: var(--chrome-text); box-shadow: var(--control-glow), var(--glass-edge-active);}
.windowList { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px;}
.windowRow { position: relative; display: flex; min-height: 76px; align-items: stretch; padding-right: 6px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;}
.windowRow:hover,.windowRow[data-active='true'] { border-color: var(--accent-border); background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
.windowRow[data-dragging='true'] { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active);}
.windowButton { display: flex; min-width: 0; flex: 1; align-items: center; gap: 14px; padding: 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--chrome-text); text-align: left; touch-action: manipulation;}
.reorderHandle { display: grid; width: 44px; min-height: 44px; flex-shrink: 0; align-self: center; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--chrome-muted); cursor: grab; touch-action: none;}
.reorderHandle:hover:not(:disabled) { background: var(--chrome-hover); color: var(--chrome-text); box-shadow: var(--control-glow), var(--glass-edge-active);}
.reorderHandle:active { cursor: grabbing;}
.reorderHandle:disabled { cursor: default; opacity: 0.35;}
.windowPreview { display: grid; grid-template-rows: 8px 1fr; width: 64px; height: 44px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--chrome-border); border-radius: var(--radius-detail); background: var(--material-raised); box-shadow: var(--glass-edge);}
.previewTitlebar { display: block; background: var(--line);}
.windowRow[data-active='true'] .previewTitlebar { background: color-mix(in srgb, var(--accent) 50%, transparent);}
.previewBody { display: grid; place-items: center; color: var(--chrome-muted);}
:global([data-presentation='realistic']) .windowPreview:not( :where([data-app-id='settings'], [data-app-id^='workspace-']) ) { border-color: #88939c66; border-radius: 3px; background: #f1f3f4;}
:global([data-presentation='realistic']) .windowPreview:not( :where([data-app-id='settings'], [data-app-id^='workspace-']) ) .previewTitlebar { border-bottom: 1px solid #aeb8bf99; background: #d4dbe0;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='browser'] { background: white;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='browser'] .previewTitlebar { border-color: #45434e; background: #282730;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='files'] .previewTitlebar { background: #f1f1f1;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='terminal'] { border-radius: 1px; background: #20262d;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='terminal'] .previewTitlebar { border-color: #11181e; background: #424c55;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='notes'] { border-radius: 1px; background: #fffef9;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='notes'] .previewTitlebar { border-color: #b5b5b5; background: #dedede;}
:global([data-presentation='realistic']) .windowPreview:is([data-app-id='music'], [data-app-id='photos']) { background: #22232b;}
:global([data-presentation='realistic']) .windowPreview:is([data-app-id='music'], [data-app-id='photos']) .previewTitlebar { border-color: #383944; background: #17181d;}
:global([data-presentation='realistic']) .windowPreview[data-app-id='calendar'] .previewTitlebar { border-color: #bdcbdc; background: #dce6f2;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview:not( :where( [data-app-id='settings'], [data-app-id^='workspace-'], [data-app-id='terminal'], [data-app-id='music'], [data-app-id='photos'] ) ) { border-color: #555861; background: #25272c;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview:not( :where( [data-app-id='settings'], [data-app-id^='workspace-'], [data-app-id='browser'], [data-app-id='terminal'], [data-app-id='music'], [data-app-id='photos'] ) ) .previewTitlebar { border-color: #484b52; background: #34363c;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview[data-app-id='browser'] { background: #25242b;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview[data-app-id='files'] { background: #242629;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview[data-app-id='files'] .previewTitlebar { background: #303236;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview[data-app-id='notes'] { background: #232420;}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview[data-app-id='notes'] .previewTitlebar { background: linear-gradient(#41444a, #34363b);}
:global([data-presentation='realistic'][data-color-mode='dark']) .windowPreview[data-app-id='calendar'] .previewTitlebar { border-color: #3d5067; background: #27384d;}
.windowCopy { display: flex; min-width: 0; flex: 1; flex-direction: column;}
.windowCopy strong { overflow: hidden; font-size: 14px; font-weight: 500; letter-spacing: -0.2px; text-overflow: ellipsis; white-space: nowrap;}
.popoverFooter { padding: 5px 16px; border-top: 1px solid var(--line);}
.newWindow { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 0 4px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--accent); font-size: 12px; text-align: left; touch-action: manipulation;}
.newWindow:hover { background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
.closeButton,.reorderHandle,.newWindow { transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;}
.closeButton:focus-visible,.reorderHandle:focus-visible,.newWindow:focus-visible,.windowButton:focus-visible { box-shadow: var(--control-glow), var(--glass-edge-active);}
@media (width <= 760px) { .dock { position: static; min-width: 0; height: 44px; max-width: none; flex: 1; }
.dock .bar { height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.dock .bar::before { content: none; }
.appStrip { max-width: none; flex: 0 1 auto; margin-left: auto; touch-action: pan-x; }}
@keyframes surface-in { from { opacity: 0; transform: translateY(8px); }}
@keyframes favorite-in { 0% { opacity: 0; translate: 0 12px; }
65% { opacity: 1; translate: 0 -2px; }
100% { translate: 0; }}
@media (prefers-reduced-motion: reduce) { .windowPopover, .appButton[data-just-favorited='true'] .appIcon { animation: none; }
.windowPopover, .windowRow, .closeButton, .reorderHandle, .newWindow, .runningDots > span { transition: none; }}
:global(:is([data-layout-widget], [data-widget-popover])) .dock { position: relative; inset: auto; max-width: 100%;}
@media (width <= 760px) { :global(:is([data-layout-widget], [data-widget-popover])) .dock { height: 54px; flex: none; }
:global(:is([data-layout-widget], [data-widget-popover])) .dock .bar { height: 54px; padding: var(--shell-padding); border: var(--shell-border-width) solid var(--chrome-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
:global(:is([data-layout-widget], [data-widget-popover])) .dock .bar::before { content: ''; }}
@media (width <= 760px) { :global([data-layout-widget][data-merged]) .dock { width: 100%; height: 44px; }
:global([data-layout-widget][data-merged]) .dock .bar { height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; }
:global([data-layout-widget][data-merged]) .dock .bar::before { content: none; }}
:global( [data-layout-widget]:is([data-frame-edge='left'], [data-frame-edge='right']) ) .dock { width: 54px; height: auto; max-height: 100dvh;}
:global( [data-layout-widget]:is([data-frame-edge='left'], [data-frame-edge='right']) ) .dock .bar { height: auto; max-height: 100dvh; flex-direction: column;}
:global( [data-layout-widget]:is([data-frame-edge='left'], [data-frame-edge='right']) ) .appStrip { width: 44px; min-height: 0; max-height: calc(100dvh - 63px); flex-direction: column; margin-left: 0; overflow: hidden auto; overscroll-behavior: contain; touch-action: pan-y;}
:global( [data-layout-widget]:is([data-frame-edge='left'], [data-frame-edge='right']) ) .divider { width: 24px; height: 1px;}