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.
5.0 kB · 217 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218.layer { position: absolute; inset: 0; pointer-events: none;}
.item { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); cursor: default; pointer-events: auto; touch-action: none; user-select: none; transform-origin: top left; transition: transform 360ms cubic-bezier(0.2, 0.7, 0.1, 1), opacity 220ms ease, background 180ms ease, border-color 180ms ease, box-shadow 220ms ease;}
.item[data-preview-match='false'] { opacity: 0; pointer-events: none;}
.item[data-preview-selected='true'] { border-color: var(--accent-border); background: var(--accent-soft);}
@media (prefers-reduced-motion: reduce) { .item { transition: none; }}
.item:hover { border-color: var(--chrome-border); background: var(--surface-control); box-shadow: var(--control-glow), var(--glass-edge-active);}
.item[aria-pressed='true'] { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active);}
.item:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px;}
.icon { display: grid; width: 56px; height: 56px; flex-shrink: 0; place-items: center; color: var(--accent-strong);}
.item[data-item-kind='folder'] .icon > svg[data-icon-variant='outline'] { fill: var(--accent-soft);}
.icon:has([data-app-artwork='simulated']) { filter: drop-shadow( 0 2px 1px color-mix(in srgb, var(--chrome-text) 8%, transparent) );}
.item[data-item-kind='file'] .icon > svg[data-icon-variant='outline'] { fill: var(--chrome-raised); color: var(--muted);}
.title { display: block; max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center; text-wrap: pretty; overflow-wrap: anywhere; text-shadow: 0 1px 2px var(--field);}
.titleText { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.item[data-frame-attached='true'] { gap: 0; padding: 10px; border-color: 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); transform-origin: center;}
:global([data-background='photo']) .item[data-frame-attached='false']:not([data-group-member]) { --desktop-icon-ink: color-mix(in srgb, var(--accent-base) 18%, white);}
:global([data-background='photo']) .item[data-frame-attached='false']:not([data-group-member]) .title { color: #fff; text-shadow: none; filter: drop-shadow(0 1px 2px #000d) drop-shadow(0 0 3px #0009);}
:global([data-background='photo']) .item[data-frame-attached='false']:not([data-group-member]) .icon:not(:has([data-app-artwork='simulated'])) { color: var(--desktop-icon-ink); filter: drop-shadow(0 0 1px #142225) drop-shadow(0 2px 3px #0008);}
:global([data-background='photo']) .item[data-frame-attached='false']:not([data-group-member]):is( [aria-pressed='true'], [data-preview-selected='true'] ) { border-color: color-mix(in srgb, var(--desktop-icon-ink) 72%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--desktop-icon-ink) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--desktop-icon-ink) 24%, transparent), 0 6px 22px -5px color-mix(in srgb, var(--accent) 14%, transparent);}
:global([data-background='photo']) .item[data-frame-attached='false']:not([data-group-member]):focus-visible { outline-color: var(--desktop-icon-ink);}
.item[data-frame-attached='true']:hover { background: var(--material-raised); box-shadow: var(--shadow-glow), var(--glass-edge-active);}
.item[data-frame-attached='true'][aria-pressed='true'] { border-color: var(--accent-border); background: var(--panel-wash), var(--chrome);}
.item[data-frame-attached='true'] .icon { width: 32px; height: 32px;}
.item[data-frame-attached='true'] .title { display: none;}
.inlineLayer { display: contents;}
.item[data-group-member] { flex: 0 0 44px; padding: 5px; border-color: transparent; border-radius: calc(var(--radius-panel) - 5px); background: transparent; box-shadow: none; backdrop-filter: none; animation: none;}
.item[data-group-member]:hover,.item[data-group-member][aria-pressed='true'] { background: var(--surface-control); box-shadow: var(--control-glow), var(--glass-edge-active);}
.item[data-favorite-returning='true'] { animation: favorite-source-return 320ms ease-out;}
@keyframes favorite-source-return { from { opacity: 0; translate: 0 12px; }
to { opacity: 1; translate: 0 0; }}
@media (prefers-reduced-motion: reduce) { .item[data-favorite-returning='true'] { animation: none; }}