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;
|
overflow: hidden;
|
||||||
z-index: 1;
|
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 ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
.card-stack {
|
.card-stack {
|
||||||
width: 60px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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 modal ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
.role-select-backdrop {
|
.role-select-backdrop {
|
||||||
@@ -637,23 +643,26 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
|
|||||||
}
|
}
|
||||||
|
|
||||||
#id_role_select {
|
#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;
|
gap: 1rem;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
|
// Narrow portrait: scale cards down so the 3-col grid still fits
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
display: grid;
|
grid-template-columns: repeat(3, 110px);
|
||||||
grid-template-columns: repeat(3, 80px);
|
|
||||||
grid-template-rows: repeat(2, 120px);
|
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 110px;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Card component ────────────────────────────────────────────────────────
|
// ─── Card component ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
$card-w: 80px;
|
|
||||||
$card-h: 120px;
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: $card-w;
|
width: $card-w;
|
||||||
height: $card-h;
|
height: $card-h;
|
||||||
@@ -709,6 +718,14 @@ $card-h: 120px;
|
|||||||
|
|
||||||
// Landscape mobile — aggressively scale down to fit short viewport
|
// Landscape mobile — aggressively scale down to fit short viewport
|
||||||
@media (orientation: landscape) and (max-width: 1440px) {
|
@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,
|
// Reflow position strip into a vertical column along the left edge,
|
||||||
// reversed so 6 is at top, 1 at bottom, below the GAMEROOM title.
|
// reversed so 6 is at top, 1 at bottom, below the GAMEROOM title.
|
||||||
.position-strip {
|
.position-strip {
|
||||||
|
|||||||
Reference in New Issue
Block a user