Andy Smith
59 lines
1.4 KiB
CSS
59 lines
1.4 KiB
CSS
@layer components {
|
|
.bar {
|
|
--row-gap: 0.2lh;
|
|
|
|
background-color: var(--color-terminal-bg);
|
|
color: var(--color-terminal-text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.9em;
|
|
inset: auto 0 0 0;
|
|
max-block-size: 100%;
|
|
padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom));
|
|
place-content: center;
|
|
position: fixed;
|
|
z-index: var(--z-terminal);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
border-block: 1px solid var(--color-ink-lighter);
|
|
}
|
|
}
|
|
|
|
.bar__input {
|
|
transform: translateX(50%);
|
|
transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1);
|
|
|
|
.bar:has(.bar__placeholder[hidden]) & {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.bar__modal {
|
|
background-color: var(--color-terminal-bg);
|
|
block-size: 75dvh;
|
|
border-block: 1px solid var(--color-ink-lighter);
|
|
inline-size: 100vw;
|
|
inset: auto 0 0 0;
|
|
max-inline-size: 100vw;
|
|
margin-block-end: calc(var(--footer-height) - 0.3rem);
|
|
position: fixed;
|
|
z-index: -1;
|
|
}
|
|
|
|
.bar__placeholder {
|
|
color: var(--color-ink-medium);
|
|
font-weight: 500;
|
|
|
|
.btn--plain {
|
|
color: inherit;
|
|
font-weight: inherit;
|
|
padding-inline: 1ch;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
color: oklch(var(--lch-blue-dark));
|
|
}
|
|
}
|
|
}
|
|
}
|