minor styling fixes
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
@@ -179,7 +179,15 @@
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
a { color: rgba(var(--terUser), 1); text-decoration: none; }
|
||||
a {
|
||||
color: rgba(var(--terUser), 1);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--ninUser), 1);
|
||||
text-shadow: 0 0 0.5rem rgba(var(--terUser), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -597,8 +597,8 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
|
||||
// ─── Card stack ────────────────────────────────────────────────────────────
|
||||
|
||||
.card-stack {
|
||||
width: 60px;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -622,6 +622,12 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Card dimensions ───────────────────────────────────────────────────────
|
||||
// Role cards are landscape format — wider than tall — and the largest card type.
|
||||
// Sig cards (half this size) will be layered on top during SIG_SELECT.
|
||||
$card-w: 160px;
|
||||
$card-h: 110px;
|
||||
|
||||
// ─── Role select modal ─────────────────────────────────────────────────────
|
||||
|
||||
.role-select-backdrop {
|
||||
@@ -637,23 +643,26 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
|
||||
}
|
||||
|
||||
#id_role_select {
|
||||
display: flex;
|
||||
// Always a 3×2 grid — 6 landscape cards in a row would overflow any viewport.
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, $card-w);
|
||||
gap: 1rem;
|
||||
pointer-events: none;
|
||||
|
||||
// Narrow portrait: scale cards down so the 3-col grid still fits
|
||||
@media (max-width: 600px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 80px);
|
||||
grid-template-rows: repeat(2, 120px);
|
||||
grid-template-columns: repeat(3, 110px);
|
||||
gap: 0.75rem;
|
||||
|
||||
.card {
|
||||
width: 110px;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Card component ────────────────────────────────────────────────────────
|
||||
|
||||
$card-w: 80px;
|
||||
$card-h: 120px;
|
||||
|
||||
.card {
|
||||
width: $card-w;
|
||||
height: $card-h;
|
||||
@@ -709,6 +718,14 @@ $card-h: 120px;
|
||||
|
||||
// Landscape mobile — aggressively scale down to fit short viewport
|
||||
@media (orientation: landscape) and (max-width: 1440px) {
|
||||
// Sink navbar below gate/role-select overlays when a modal is open.
|
||||
// Landscape navbar z-index is 300 (_base.scss); gate-backdrop/overlay are
|
||||
// 100/120, so the sidebar bleeds over the modal without this override.
|
||||
html:has(.gate-backdrop) body .container .navbar,
|
||||
html:has(.role-select-backdrop) body .container .navbar {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
// Reflow position strip into a vertical column along the left edge,
|
||||
// reversed so 6 is at top, 1 at bottom, below the GAMEROOM title.
|
||||
.position-strip {
|
||||
|
||||
Reference in New Issue
Block a user