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.
8.1 kB · 462 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463.launcher { --chrome-hover: var(--surface-control-hover);
position: fixed; z-index: 1200; right: 24px; bottom: 90px; width: 650px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 186px); overflow: 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;}
.launcher:is(:hover, :focus-within) { border-color: var(--accent-border); box-shadow: var(--shadow-glow), var(--glass-edge-active);}
.launcher button { transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;}
.launcher button:focus-visible { box-shadow: var(--control-glow), var(--glass-edge-active);}
.commandBar { display: flex; min-height: 86px; align-items: center; gap: 10px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface-control);}
.searchField { display: flex; min-width: 0; min-height: 54px; flex: 1; align-items: center; gap: 12px; color: var(--chrome-muted);}
.searchField:focus-within { color: var(--accent);}
.searchField input { width: 100%; min-width: 0; min-height: 44px; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: var(--chrome-text); font-size: 17px; letter-spacing: -0.3px;}
.searchField input::placeholder { color: var(--chrome-muted);}
.searchField input::-webkit-search-cancel-button { appearance: none;}
.searchField button,.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);}
.searchField button:hover,.closeButton:hover { background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--chrome-text);}
.gestureHeading { display: flex; min-width: 0; min-height: 54px; flex: 1; align-items: center; gap: 12px; color: var(--accent);}
.gestureHeading strong { color: var(--chrome-text); font-size: 18px; font-weight: 500; letter-spacing: -0.4px;}
.modeSwitch { display: flex; flex-shrink: 0; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--chrome-border); border-radius: var(--radius-tile); background: var(--surface-subtle); box-shadow: var(--glass-edge);}
.modeSwitch button { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--chrome-muted); font-size: 12px;}
.modeSwitch button:hover { background: var(--surface-control); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--chrome-text);}
.modeSwitch .activeTab { background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--accent);}
.appsPanel { min-width: 0; padding: 12px 24px 0;}
.collectionHeading { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px;}
.collectionHeading > div:first-child { display: flex; align-items: baseline; gap: 12px;}
.collectionHeading h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.2px;}
.collectionHeading span { color: var(--chrome-muted); font-size: 10px;}
.viewToggle { display: flex; align-items: center;}
.viewToggle button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--chrome-muted);}
.viewToggle button:hover,.viewToggle button[aria-pressed='true'] { background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--accent);}
.appGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; padding: 2px 0 14px;}
.appList { display: flex; flex-direction: column; padding-bottom: 12px;}
.appButton { display: flex; min-width: 0; min-height: 96px; align-items: center; justify-content: center; gap: 7px; padding: 7px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--chrome-text); text-align: left;}
.appGrid .appButton { flex-direction: column;}
.appButton:is(:hover, :focus-visible, [data-selected='true']) { background: var(--surface-subtle);}
.appIcon { display: grid; width: 54px; height: 49px; flex-shrink: 0; place-items: center; border: 1px solid var(--chrome-border); border-radius: var(--radius-control); background: var(--surface-control); box-shadow: var(--glass-edge); transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;}
.appButton:hover .appIcon,.appButton:focus-visible .appIcon,.appButton[data-selected='true'] .appIcon { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--accent);}
.appCopy { display: flex; min-width: 0; flex-direction: column; gap: 5px;}
.appCopy strong { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap;}
.appCopy > span { color: var(--chrome-muted); font-size: 11px; line-height: 1.4;}
.appList .appButton { min-height: 64px; justify-content: flex-start; gap: 14px; padding: 5px 8px; border-bottom: 1px solid var(--line); border-radius: 0;}
.appList .appIcon { width: 44px; height: 44px;}
.appList .appCopy strong { font-size: 14px;}
.openIcon { flex-shrink: 0; margin-left: auto; color: var(--chrome-muted);}
.emptyResults { display: flex; min-height: 204px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--chrome-muted);}
.emptyResults p { margin: 0; color: var(--chrome-text); font-size: 20px; letter-spacing: -0.4px;}
.emptyResults > span { font-size: 12px;}
.footer { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: var(--chrome-muted); font-size: 10px;}
.footer > span { display: flex; align-items: center; gap: 6px;}
.gesturePanel { min-width: 0; padding: 14px 20px 16px;}
@media (width <= 760px) { .launcher { right: 12px; bottom: 78px; max-height: calc(100dvh - 156px); }}
@media (width <= 480px) { .commandBar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; padding: 12px; }
.searchField, .gestureHeading { grid-column: 1; grid-row: 1; }
.searchField input { font-size: 16px; }
.closeButton { grid-column: 2; grid-row: 1; }
.modeSwitch { width: 100%; grid-column: 1 / -1; }
.modeSwitch button { flex: 1; }
.appsPanel { padding: 8px 14px 0; }
.collectionHeading > div:first-child { flex-direction: column; gap: 3px; }
.collectionHeading h2 { font-size: 14px; }
.appGrid { gap: 2px; }
.appButton { min-height: 85px; padding-inline: 2px; }
.appIcon { width: 47px; height: 44px; }
.appCopy strong { font-size: 11px; }
.gesturePanel { padding: 14px 12px; }}
@keyframes surface-in { from { opacity: 0; transform: translateY(var(--launcher-enter-y, 8px)); }}
@media (prefers-reduced-motion: reduce) { .launcher { animation: none; }
.launcher, .launcher button, .appIcon { transition: none; }}