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.3 kB · 170 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171.shell,.mobileBar { display: contents;}
.mobileBar[hidden] { display: none;}
.group { position: relative; width: max-content; max-width: inherit; height: auto;}
.members { display: flex; width: max-content; max-width: inherit; align-items: center; gap: 4px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x;}
.members::-webkit-scrollbar { display: none;}
.members:has(:global([aria-expanded='true']), :global([role='tooltip'])) { overflow: visible;}
.itemMember { flex: none; min-width: 0; min-height: 0; border-radius: var(--radius-control);}
.itemMember[data-member-kind='item'] { min-width: 44px; min-height: 44px;}
.itemMember[data-group-drop-target='true'] { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft);}
.grip { position: absolute; z-index: 1; top: calc(100% + 6px); left: 50%; display: grid; width: 28px; height: 24px; padding: 0; place-items: center; border: 1px solid var(--chrome-border); border-radius: var(--radius-control); background: var(--material-raised); box-shadow: var(--shadow-panel), var(--glass-edge); backdrop-filter: var(--glass-blur); color: var(--chrome-muted); cursor: move; transform: translateX(-50%); touch-action: none; transition: border-color 180ms ease, box-shadow 180ms ease;}
.grip:is(:hover, :focus-visible) { border-color: var(--accent-border); box-shadow: var(--shadow-glow), var(--glass-edge-active); color: var(--chrome-text);}
.grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;}
.group[data-frame-edge='bottom'] .grip { top: auto; bottom: calc(100% + 6px);}
.group:is([data-frame-edge='left'], [data-frame-edge='right']) .members { max-height: calc(100dvh - 58px); flex-direction: column; touch-action: pan-y;}
.group:is([data-frame-edge='left'], [data-frame-edge='right']) .grip { inset: 50% auto auto calc(100% + 6px); width: 24px; height: 28px; transform: translateY(-50%);}
.group[data-frame-edge='right'] .grip { right: calc(100% + 6px); left: auto;}
.group :global([data-group-member] [data-launcher-trigger]) { height: auto;}
@media (width <= 760px) { .mobileBar { position: fixed; z-index: 1100; right: 12px; left: 12px; display: flex; align-items: center; gap: 4px; pointer-events: auto; }
.mobileBar[data-mobile-bar='top'] { top: 12px; }
.mobileBar[data-mobile-bar='bottom'] { bottom: 12px; }
.group[data-merged='top'] { width: 100%; height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.group[data-merged='top'] .members { width: 100%; }
.group[data-merged='top'] .members > :first-child { margin-left: auto; }
.group:is([data-frame-edge='left'], [data-frame-edge='right']) .members { max-height: calc(100dvh - 34px); }}
:global([data-focus-mode='true'][data-shell-peek='false']) .group,:global([data-focus-mode='true'][data-shell-peek='false']) .mobileBar { opacity: 0; pointer-events: none;}
@media (prefers-reduced-motion: reduce) { .grip { transition: none; }}