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.
4.1 kB · 177 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178.surface { --shell-padding: 4px; --shell-border-width: 1px; --toolbar-material: var(--material-raised); --chrome-hover: var(--raised-control-hover);
position: relative; isolation: isolate; 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); color: var(--chrome-text); transition: border-color 180ms ease, box-shadow 180ms ease;}
/* A sibling material lets popup descendants blur beyond the toolbar bounds. */.surface::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--toolbar-material); box-shadow: var(--glass-edge); backdrop-filter: var(--glass-blur); pointer-events: none; content: ''; transition: background-color 180ms ease, box-shadow 180ms ease;}
.surface:is(:hover, :focus-within) { --toolbar-material: var(--material-raised-hover);
border-color: var(--accent-border); box-shadow: var(--shadow-glow);}
.surface:is(:hover, :focus-within)::before { box-shadow: var(--glass-edge-active);}
.control { appearance: none; min-width: 44px; height: 44px; border: 0; border-radius: calc( var(--radius-panel) - var(--shell-padding) - var(--shell-border-width) ); background: transparent; color: var(--chrome-text); touch-action: manipulation; transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;}
.control:hover:where(:not(:disabled)) { background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
.control:is( [aria-pressed='true'], [aria-expanded='true'], [data-active='true']),.control:active:not(:disabled) { background: var(--accent-soft); box-shadow: var(--control-glow), var(--glass-edge-active); color: var(--accent);}
.control:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: var(--control-glow), var(--glass-edge-active);}
.control:disabled { opacity: 0.35;}
:global([data-canvas-control-id]) .control { touch-action: none;}
@media (width <= 760px) { .mobileSurface { --shell-padding: 4px; --shell-border-width: 1px; --toolbar-material: var(--material-raised); --chrome-hover: var(--raised-control-hover);
height: 54px; isolation: isolate; padding: var(--shell-padding); border: var(--shell-border-width) solid var(--chrome-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); color: var(--chrome-text); }
.mobileSurface::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--toolbar-material); box-shadow: var(--glass-edge); backdrop-filter: var(--glass-blur); pointer-events: none; content: ''; transition: background-color 180ms ease, box-shadow 180ms ease; }
.mobileSurface:is(:hover, :focus-within) { --toolbar-material: var(--material-raised-hover);
border-color: var(--accent-border); box-shadow: var(--shadow-glow); }
.mobileSurface:is(:hover, :focus-within)::before { box-shadow: var(--glass-edge-active); }}
@media (prefers-reduced-motion: reduce) { .surface, .surface::before, .mobileSurface::before, .control { transition: none; }}
:global([data-frame-group]) :global([data-group-member]) .surface.surface { width: max-content; height: auto; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none;}
:global([data-frame-group]) :global([data-group-member]) .surface.surface::before { content: none;}
@media (width <= 760px) { :global(:is([data-layout-widget], [data-layout-group])[data-merged]) .surface.surface { height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; }
:global(:is([data-layout-widget], [data-layout-group])[data-merged]) .surface.surface::before { content: none; }}