|
|
|
@@ -255,7 +255,6 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
|
|
|
|
|
/* Hidden here (shown from 900px below): on the phone bar the team switcher
|
|
|
|
|
lives in the topbar instead, as #team-selector-mobile. */
|
|
|
|
|
.nav-team-selector { display: none; }
|
|
|
|
|
.nav-link-secondary { display: none; }
|
|
|
|
|
.nav-link {
|
|
|
|
|
position: relative;
|
|
|
|
|
/* flex: 1 spreads the tabs evenly across the bar's width; the desktop
|
|
|
|
@@ -267,6 +266,10 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
|
|
|
|
|
what stops six tabs widening the bar past the screen. */
|
|
|
|
|
min-width: 0; padding: 0 2px;
|
|
|
|
|
}
|
|
|
|
|
/* Must come after .nav-link above: same specificity (one class each), so
|
|
|
|
|
whichever is later in the file wins for an element wearing both classes,
|
|
|
|
|
and this needs to beat .nav-link's display:flex here on the phone bar. */
|
|
|
|
|
.nav-link-secondary { display: none; }
|
|
|
|
|
.nav-label {
|
|
|
|
|
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
@@ -323,6 +326,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
|
|
|
|
|
/* ---------- chips ---------- */
|
|
|
|
|
|
|
|
|
|
.chips {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex; gap: 6px;
|
|
|
|
|
padding: 12px 16px 8px;
|
|
|
|
|
overflow-x: auto; scrollbar-width: none;
|
|
|
|
@@ -338,11 +342,14 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
|
|
|
|
|
}
|
|
|
|
|
.chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
|
|
|
|
|
.chip .count { margin-left: 4px; opacity: 0.7; }
|
|
|
|
|
/* Pinned to the visible right edge of the scrolling row (sticky, not
|
|
|
|
|
absolute, so it tracks the scroll position rather than the content). */
|
|
|
|
|
/* An overlay, not a flex item: absolute against .chips' own (non-scrolling)
|
|
|
|
|
box stays flush with its real right edge regardless of scroll position,
|
|
|
|
|
which turned out not to be true of position:sticky here — as a flex
|
|
|
|
|
item, its sticky offset interacted with the row's gap and its own
|
|
|
|
|
negative margin, landing short of the edge by about one gap's width. */
|
|
|
|
|
.chips-fade {
|
|
|
|
|
position: sticky; right: -1px; flex: none;
|
|
|
|
|
width: 24px; margin-left: -24px;
|
|
|
|
|
position: absolute; top: 0; right: 0; bottom: 0;
|
|
|
|
|
width: 24px;
|
|
|
|
|
background: linear-gradient(to right, transparent, var(--bg));
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|