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.
1.7 kB · 101 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102.anchor { position: fixed; z-index: 1200; top: 90px; left: 50%; width: min(260px, calc(100vw - 24px)); transform: translateX(-50%);}
.anchor .editor { height: auto; max-height: calc(100dvh - 180px); overflow: auto;}
.header { display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.title { min-width: 0; overflow: hidden; padding-left: 10px; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap;}
.placements { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding-top: 4px; border-top: 1px solid var(--chrome-border);}
.button { display: grid; flex-shrink: 0; padding: 0; place-items: center;}
.actions { display: flex; flex-shrink: 0; align-items: center; gap: 4px;}
.tooltip { position: absolute; z-index: 1; top: 100%; left: 50%; width: max-content; max-width: calc(100vw - 24px); margin-top: 8px; padding: 8px 12px; 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-text); font-size: 11px; pointer-events: none; transform: translateX(-50%);}
@media (width <= 760px) { .anchor { top: 78px; }
.anchor .editor { max-height: calc(100dvh - 156px); }}
.options { display: flex; gap: 4px; padding-block: 4px; border-top: 1px solid var(--chrome-border);}
.option { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; padding-inline: 10px; font-size: 12px;}