64 lines
2.7 KiB
CSS
64 lines
2.7 KiB
CSS
/*
|
|
The sub-navigation bar. An underline and not a filled pill, and the difference is
|
|
the same one `SectionIndex` makes: `Segmented` fills with amber because there you
|
|
have chosen a value and the others have stopped applying. Here the others are
|
|
still there (they are other screens of the same section), so the active one is
|
|
marked with an edge and the rest read as ordinary links.
|
|
*/
|
|
.bar {
|
|
display: flex;
|
|
gap: var(--s-8);
|
|
align-items: stretch;
|
|
/* The rule under the tabs is an inset shadow and not a border, so the active
|
|
tab's edge can sit on it without leaving the box. With a border, each tab had
|
|
to reach 1 px past the content box (`margin-bottom: -1px`) to cover it, and
|
|
inside `overflow-x: auto` (which makes `overflow-y` auto too) that pixel was
|
|
overflow: Chromium on Linux drew a 15 px vertical scrollbar beside the tabs of
|
|
every section. The children paint over their parent's shadow, so the active
|
|
edge still covers the rule. */
|
|
/* ReUI's tabs: the line sits under the active tab only, none under the whole row. */
|
|
margin-bottom: var(--gap-block);
|
|
/* The strip scrolls rather than wrapping: nine panes on two lines turn a bar
|
|
into a block, and the second line reads as a different thing. */
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.tab {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 0 var(--s-5);
|
|
color: var(--mute);
|
|
text-decoration: none;
|
|
font-size: var(--t-4);
|
|
/* The edge is ALWAYS there, transparent when it does not apply: painting it
|
|
only on the active one moves every tab 2 px each time it changes. */
|
|
border-bottom: 2px solid transparent;
|
|
white-space: nowrap;
|
|
/* The containing block of a mark's hidden words (`text.sr`, absolutely placed).
|
|
Without it they were placed against the page and not inside the strip, and a
|
|
marked tab beyond the strip's scroll widened the whole page: measured at 390 in
|
|
Settings with Cache marked, 461 px of document in a 390 px window. */
|
|
position: relative;
|
|
}
|
|
|
|
.tab:hover { color: var(--ink); }
|
|
.tab:focus-visible { outline: none; box-shadow: var(--halo-focus); border-radius: var(--r-2); }
|
|
.tab[aria-current='page'] { color: var(--acc-ink); border-bottom-color: var(--acc-ink); font-weight: 600; }
|
|
|
|
/* A tab's mark (`marks`): a dot in the active ink after the name, up where a
|
|
superscript would sit, so the tab keeps its height and its baseline. */
|
|
.mark {
|
|
display: inline-block;
|
|
width: var(--s-3);
|
|
height: var(--s-3);
|
|
margin-left: var(--s-2);
|
|
vertical-align: super;
|
|
border-radius: var(--r-full);
|
|
background: var(--acc-ink);
|
|
}
|
|
|
|
.count { margin-left: var(--s-3); font: 400 var(--t-1)/1 var(--font-mono); font-style: normal; opacity: .6; }
|