Lucas-Kalil/world-2026-hub
1
0
Fork 0
mirror of https://github.com/LucasKalil-Programador/world-2026-hub.git synced 2026-07-04 17:41:28 -03:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(header): two-row layout with scrollable tabs below 1100px

Browse source
This commit is contained in:
Lucas Kalil 2026-06-15 15:27:10 -03:00
parent 6e33142c96
commit ad6d7ea616
4 changed files with 95 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

43
assets/css/style.css
View file

@ -129,6 +129,7 @@ button {
display: flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
color: var(--text-primary);
text-decoration: none;
font-size: 1.05rem;
@ -159,6 +160,22 @@ button {
display: none;
}
/* edge fades — applied by JS only on a side that has more tabs to scroll to */
.tabs.fade-right {
-webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px);
mask-image: linear-gradient(to left, transparent 0, #000 28px);
}
.tabs.fade-left {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
mask-image: linear-gradient(to right, transparent 0, #000 28px);
}
.tabs.fade-left.fade-right {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.tab-btn {
padding: 0.5rem 0.95rem;
border-radius: 999px;
@ -183,9 +200,13 @@ button {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.control-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.8rem;
font-size: 0.8rem;
white-space: nowrap;
@ -195,6 +216,10 @@ button {
transition: color 0.2s, border-color 0.2s;
}
.time-icon {
line-height: 1;
}
.control-btn:hover {
color: var(--text-primary);
border-color: var(--accent-gold);
@ -1048,8 +1073,22 @@ dialog.match-modal::backdrop {
}
}
/* tablet 768–1439px: single-row header with centered (reduced) menu */
@media (min-width: 768px) {
/* very narrow: collapse the time toggle to its icon so logo + controls stay on
one row and the tab strip gets its own full-width scrollable row below */
@media (max-width: 420px) {
.time-label {
display: none;
}
.control-btn {
padding: 0.35rem 0.55rem;
}
}
/* single-row header only once logo + 6 tabs + controls genuinely fit (~950px of
content + container padding); below this the tabs keep their own scroll row,
so the controls never wrap into a broken second line. */
@media (min-width: 1100px) {
.tabs {
flex: 0 1 auto;
order: 0;