diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Keep the tabs on one row
A window too narrow for the tabs wrapped the last of them onto a second
row, held apart from the line under the others, as an iPhone showed on
every repository page. The row now scrolls sideways instead, keeping
the active tab in view and fading the side that hides more of them, and
the tabs draw closer as the window narrows so all seven still fit at
360 pixels.
Diffstat (limited to '')
| -rw-r--r-- | assets/cgit.css | 36 |
1 file changed, 34 insertions, 2 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 540480c..8c6f7a4 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -263,16 +263,40 @@ div#cgit .tabs { div#cgit .tabs ul { display: flex; - flex-wrap: wrap; align-items: flex-end; flex: 1 1 auto; - gap: 0.1em 0.15em; + min-width: 0; + gap: 0.15em; list-style: none; margin: 0; padding: 0; + overflow-x: auto; + scrollbar-width: none; +} + +div#cgit .tabs ul::-webkit-scrollbar { + display: none; +} + +div#cgit .tabs ul.fade-start { + -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5em); + mask-image: linear-gradient(to right, transparent, #000 1.5em); +} + +div#cgit .tabs ul.fade-end { + -webkit-mask-image: linear-gradient(to left, transparent, #000 1.5em); + mask-image: linear-gradient(to left, transparent, #000 1.5em); +} + +div#cgit .tabs ul.fade-start.fade-end { + -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5em, + #000 calc(100% - 1.5em), transparent); + mask-image: linear-gradient(to right, transparent, #000 1.5em, + #000 calc(100% - 1.5em), transparent); } div#cgit .tabs li { + flex: none; margin: 0; } @@ -283,6 +307,10 @@ div#cgit .tabs a { border-radius: var(--radius) var(--radius) 0 0; } +div#cgit .tabs a:focus-visible { + outline-offset: -2px; +} + div#cgit .tabs a:hover { color: var(--fg); background-color: var(--surface); @@ -1310,6 +1338,10 @@ div#cgit table.ssdiff td.space { } @media (max-width: 640px) { + div#cgit .tabs a { + padding: 0.3em 0.4em; + } + div#cgit .col-desc, div#cgit .col-owner, div#cgit .col-links { |