mirror of
https://github.com/basecamp/once-campfire.git
synced 2026-05-04 18:01:02 +09:00
62 lines
1.3 KiB
CSS
62 lines
1.3 KiB
CSS
#nav {
|
|
align-items: center;
|
|
column-gap: var(--inline-space-half);
|
|
display: flex;
|
|
inset: 0 0 auto 0;
|
|
inset-inline-end: var(--sidebar-width);
|
|
padding-block: var(--block-space);
|
|
padding-inline: calc(var(--inline-space) * 1.5) var(--inline-space-double);
|
|
pointer-events: none;
|
|
position: fixed;
|
|
row-gap: var(--block-space);
|
|
z-index: 2;
|
|
|
|
&:has(.room--current) {
|
|
padding-inline: var(--inline-space);
|
|
|
|
@media (min-width: 100ch) {
|
|
margin-inline-start: 5vw;
|
|
|
|
.room--current {
|
|
margin-inline-start: -3vw;
|
|
|
|
.account-logo + & {
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.account-logo {
|
|
margin-inline-start: calc((var(--btn-size) / 2 + var(--inline-space)) * -1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar & {
|
|
@media (max-width: 100ch) {
|
|
padding-block: var(--block-space-half);
|
|
|
|
&::before {
|
|
background: linear-gradient(180deg, oklch(var(--lch-white)) 20%, oklch(var(--lch-white) / 0) 100%);
|
|
content: "";
|
|
inset: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.skip-navigation {
|
|
--left-offset: -999em;
|
|
|
|
inset-block-start: 4rem;
|
|
inset-inline-start: var(--left-offset);
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
z-index: 11;
|
|
|
|
&:focus {
|
|
--left-offset: var(--inline-space);
|
|
}
|
|
}
|