Skip to content

E
el3ab-Player
Commit 1e652731 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

fix: lobby spacing, bottom nav position, add tab-group + lobby card styles 

Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 6ec2d6af
Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 71 deletions
pages/ludo.php
View file @ 1e652731
<?php $pageTitle = 'EL3AB - لودو'; ?> <?php $pageTitle = 'EL3AB - لودو'; ?>
<?php require __DIR__ . '/../includes/header.php'; ?> <?php require __DIR__ . '/../includes/header.php'; ?>
<div class="space-y-6"> <div class="lobby-page">
<a href="/games" class="breadcrumb"> <a href="/games" class="breadcrumb">
<svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg> <svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
العاب العاب
</a> </a>
<div class="text-center"> <div class="text-center" style="margin-top:16px;">
<h2 style="font-size:22px;font-weight:700;">لودو</h2> <h2 class="lobby-title">لودو</h2>
<p class="text-muted text-sm">اختر نوع اللعب</p> <p class="text-muted text-sm">اختر نوع اللعب</p>
</div> </div>
<div class="space-y-3"> <div class="lobby-cards">
<!-- Local (Pass & Play) --> <!-- Local (Pass & Play) -->
<div class="card card-hover" style="cursor:pointer;" onclick="startLocal()"> <div class="card lobby-card card-hover" style="cursor:pointer;" onclick="startLocal()">
<div class="card-body" style="display:flex;align-items:center;gap:16px;"> <div class="card-body lobby-card-row">
<div class="avatar" style="background:linear-gradient(135deg, var(--ludo-p1), var(--ludo-p3));"> <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--ludo-p1), var(--ludo-p3));">
<svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-users"></use></svg> <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-users"></use></svg>
</div> </div>
<div style="flex:1;"> <div style="flex:1;">
<p style="font-size:16px;font-weight:600;">لعب محلي</p> <p class="lobby-card-title-sm">لعب محلي</p>
<p class="text-muted text-sm">2-4 لاعبين على نفس الجهاز</p> <p class="text-muted text-sm">2-4 لاعبين على نفس الجهاز</p>
</div> </div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg> <svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
...@@ -30,14 +30,14 @@ ...@@ -30,14 +30,14 @@
</div> </div>
<!-- VS Bot --> <!-- VS Bot -->
<div class="card"> <div class="card lobby-card">
<div class="card-body space-y-3"> <div class="card-body space-y-4">
<div style="display:flex;align-items:center;gap:12px;"> <div class="lobby-card-header">
<div class="avatar" style="background:var(--bg-3);"> <div class="avatar avatar-game" style="background:var(--bg-3);">
<svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg> <svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
</div> </div>
<div> <div>
<p style="font-size:16px;font-weight:600;">ضد البوت</p> <p class="lobby-card-title-sm">ضد البوت</p>
<p class="text-muted text-sm">العب ضد 1-3 بوتات</p> <p class="text-muted text-sm">العب ضد 1-3 بوتات</p>
</div> </div>
</div> </div>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</div> </div>
</div> </div>
<button class="btn btn-gold btn-block" onclick="startBot()"> <button class="btn btn-gold btn-block btn-lg" onclick="startBot()">
<svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg> <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
ابدأ اللعب ابدأ اللعب
</button> </button>
...@@ -67,14 +67,14 @@ ...@@ -67,14 +67,14 @@
</div> </div>
<!-- Multiplayer --> <!-- Multiplayer -->
<div class="card" style="border-color:var(--gold);border-width:2px;"> <div class="card lobby-card lobby-card--featured">
<div class="card-body space-y-3"> <div class="card-body space-y-4">
<div style="display:flex;align-items:center;gap:12px;"> <div class="lobby-card-header">
<div class="avatar" style="background:linear-gradient(135deg, var(--gold), var(--cyan));"> <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--gold), var(--cyan));">
<svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg> <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
</div> </div>
<div> <div>
<p style="font-size:18px;font-weight:700;">ضد لاعب حقيقي</p> <p class="lobby-card-title">ضد لاعب حقيقي</p>
<p class="text-muted text-sm">العب اونلاين ضد لاعبين حقيقيين</p> <p class="text-muted text-sm">العب اونلاين ضد لاعبين حقيقيين</p>
</div> </div>
</div> </div>
...@@ -87,25 +87,25 @@ ...@@ -87,25 +87,25 @@
</div> </div>
<!-- Private Room --> <!-- Private Room -->
<div class="card"> <div class="card lobby-card">
<div class="card-body space-y-3"> <div class="card-body space-y-4">
<div style="display:flex;align-items:center;gap:12px;"> <div class="lobby-card-header">
<div class="avatar" style="background:var(--bg-3);"> <div class="avatar avatar-game" style="background:var(--bg-3);">
<svg class="icon-lg" style="color:var(--ludo-p4)"><use href="/public/icons/sprite.svg#icon-lock"></use></svg> <svg class="icon-lg" style="color:var(--ludo-p4)"><use href="/public/icons/sprite.svg#icon-lock"></use></svg>
</div> </div>
<div> <div>
<p style="font-size:16px;font-weight:600;">غرفة خاصة</p> <p class="lobby-card-title-sm">غرفة خاصة</p>
<p class="text-muted text-sm">انشئ غرفة وادعو اصحابك</p> <p class="text-muted text-sm">انشئ غرفة وادعو اصحابك</p>
</div> </div>
</div> </div>
<div style="display:flex;gap:8px;"> <div class="lobby-btn-pair">
<button class="btn btn-gold" style="flex:1;" onclick="createRoom()">انشئ غرفة</button> <button class="btn btn-gold" onclick="createRoom()">انشئ غرفة</button>
<button class="btn btn-ghost" style="flex:1;" onclick="showJoinRoom()">انضم بكود</button> <button class="btn btn-ghost" onclick="showJoinRoom()">انضم بكود</button>
</div> </div>
<div id="join-room-form" style="display:none;"> <div id="join-room-form" style="display:none;">
<div style="display:flex;gap:8px;"> <div class="lobby-code-row">
<input type="text" class="input" id="room-code-input" placeholder="ادخل كود الغرفة" maxlength="6" style="text-transform:uppercase;letter-spacing:4px;text-align:center;"> <input type="text" class="input" id="room-code-input" placeholder="ادخل كود الغرفة" maxlength="6" style="text-transform:uppercase;letter-spacing:4px;text-align:center;">
<button class="btn btn-gold" onclick="joinRoom()">دخول</button> <button class="btn btn-gold" onclick="joinRoom()">دخول</button>
</div> </div>
......
pages/play.php
View file @ 1e652731
<?php $pageTitle = 'EL3AB - العب'; ?> <?php $pageTitle = 'EL3AB - العب'; ?>
<?php require __DIR__ . '/../includes/header.php'; ?> <?php require __DIR__ . '/../includes/header.php'; ?>
<div class="space-y-6"> <div class="lobby-page">
<a href="/games" class="breadcrumb"> <a href="/games" class="breadcrumb">
<svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg> <svg class="icon" style="width:14px;height:14px;"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
العاب العاب
</a> </a>
<div class="text-center"> <div class="text-center" style="margin-top:16px;">
<h2 style="font-size:22px;font-weight:700;">العب شطرنج</h2> <h2 class="lobby-title">العب شطرنج</h2>
<p class="text-muted text-sm">اختر نوع المباراة</p> <p class="text-muted text-sm">اختر نوع المباراة</p>
</div> </div>
<!-- Game Mode Selection --> <div class="lobby-cards">
<div class="space-y-3">
<!-- VS Human - MULTIPLAYER --> <!-- VS Human - MULTIPLAYER -->
<div class="card" style="border-color:var(--gold);border-width:2px;"> <div class="card lobby-card lobby-card--featured">
<div class="card-body space-y-3"> <div class="card-body space-y-4">
<div style="display:flex;align-items:center;gap:12px;"> <div class="lobby-card-header">
<div class="avatar" style="background:linear-gradient(135deg, var(--gold), var(--cyan));"> <div class="avatar avatar-game" style="background:linear-gradient(135deg, var(--gold), var(--cyan));">
<svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg> <svg class="icon-lg" style="color:var(--text-1)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
</div> </div>
<div> <div>
<p style="font-size:18px;font-weight:700;">ضد لاعب حقيقي</p> <p class="lobby-card-title">ضد لاعب حقيقي</p>
<p class="text-muted text-sm">ابحث عن خصم بمستواك</p> <p class="text-muted text-sm">ابحث عن خصم بمستواك</p>
</div> </div>
</div> </div>
...@@ -44,13 +43,13 @@ ...@@ -44,13 +43,13 @@
</div> </div>
<!-- VS Bot --> <!-- VS Bot -->
<a href="/bots" class="card card-hover" style="display:block;text-decoration:none;"> <a href="/bots" class="card lobby-card card-hover" style="display:block;text-decoration:none;">
<div class="card-body" style="display:flex;align-items:center;gap:16px;"> <div class="card-body lobby-card-row">
<div class="avatar" style="background:var(--bg-3);"> <div class="avatar avatar-game" style="background:var(--bg-3);">
<svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg> <svg class="icon-lg" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
</div> </div>
<div style="flex:1;"> <div style="flex:1;">
<p style="font-size:16px;font-weight:600;">ضد البوت</p> <p class="lobby-card-title-sm">ضد البوت</p>
<p class="text-muted text-sm">7 مستويات مختلفة</p> <p class="text-muted text-sm">7 مستويات مختلفة</p>
</div> </div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg> <svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
...@@ -58,13 +57,13 @@ ...@@ -58,13 +57,13 @@
</a> </a>
<!-- Quick Match vs Bot --> <!-- Quick Match vs Bot -->
<div class="card card-hover" style="cursor:pointer;" onclick="startQuickMatch()"> <div class="card lobby-card card-hover" style="cursor:pointer;" onclick="startQuickMatch()">
<div class="card-body" style="display:flex;align-items:center;gap:16px;"> <div class="card-body lobby-card-row">
<div class="avatar" style="background:var(--bg-3);"> <div class="avatar avatar-game" style="background:var(--bg-3);">
<svg class="icon-lg" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg> <svg class="icon-lg" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-bot"></use></svg>
</div> </div>
<div style="flex:1;"> <div style="flex:1;">
<p style="font-size:16px;font-weight:600;">مباراة سريعة ضد بوت</p> <p class="lobby-card-title-sm">مباراة سريعة ضد بوت</p>
<p class="text-muted text-sm">5 دقائق ضد بوت عشوائي</p> <p class="text-muted text-sm">5 دقائق ضد بوت عشوائي</p>
</div> </div>
<svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg> <svg class="icon" style="color:var(--text-3);transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
...@@ -72,9 +71,9 @@ ...@@ -72,9 +71,9 @@
</div> </div>
<!-- Custom Game --> <!-- Custom Game -->
<div class="card"> <div class="card lobby-card">
<div class="card-body space-y-4"> <div class="card-body space-y-5">
<p style="font-size:16px;font-weight:600;text-align:center;">مباراة مخصصة</p> <p class="lobby-card-title-sm" style="text-align:center;">مباراة مخصصة</p>
<!-- Time Control --> <!-- Time Control -->
<div> <div>
...@@ -112,15 +111,15 @@ ...@@ -112,15 +111,15 @@
</div> </div>
<!-- Rated Toggle --> <!-- Rated Toggle -->
<div style="display:flex;align-items:center;justify-content:space-between;"> <div class="lobby-toggle-row">
<span style="font-size:14px;">مباراة مصنفة</span> <span>مباراة مصنفة</span>
<label class="toggle"> <label class="toggle">
<input type="checkbox" id="rated-toggle" checked> <input type="checkbox" id="rated-toggle" checked>
<span class="toggle-slider"></span> <span class="toggle-slider"></span>
</label> </label>
</div> </div>
<button class="btn btn-gold btn-block" onclick="startCustomGame()"> <button class="btn btn-gold btn-block btn-lg" onclick="startCustomGame()">
<svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg> <svg class="icon"><use href="/public/icons/sprite.svg#icon-play"></use></svg>
ابدأ المباراة ابدأ المباراة
</button> </button>
......
public/css/app.css
View file @ 1e652731
...@@ -302,14 +302,22 @@ img { ...@@ -302,14 +302,22 @@ img {
/* Main content */ /* Main content */
.main { .main {
flex: 1; flex: 1;
padding-bottom: calc(var(--nav-bottom-h) + env(safe-area-inset-bottom) + 24px); padding-bottom: calc(var(--nav-bottom-h) + env(safe-area-inset-bottom) + 40px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
.main-inner { .main-inner {
width: 100%; width: 100%;
max-width: var(--content-max); max-width: var(--content-max);
margin: 0 auto; margin: 0 auto;
padding: 28px 20px 32px; padding: 24px 16px 48px;
}
@media (min-width: 400px) {
.main-inner {
padding: 28px 20px 48px;
}
} }
/* Desktop nav */ /* Desktop nav */
...@@ -368,14 +376,15 @@ img { ...@@ -368,14 +376,15 @@ img {
left: 0; left: 0;
right: 0; right: 0;
z-index: 40; z-index: 40;
height: var(--nav-bottom-h); height: calc(var(--nav-bottom-h) + env(safe-area-inset-bottom));
background: rgba(10, 21, 37, 0.8); background: rgba(10, 21, 37, 0.92);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.3);
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-around; justify-content: space-around;
padding-top: 8px;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
...@@ -384,12 +393,13 @@ img { ...@@ -384,12 +393,13 @@ img {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 3px;
min-width: var(--touch-min); min-width: var(--touch-min);
min-height: var(--touch-min); min-height: var(--touch-min);
color: var(--text-3); color: var(--text-3);
transition: color 0.2s var(--ease); transition: color 0.2s var(--ease);
text-decoration: none; text-decoration: none;
padding: 4px 0;
} }
.nav-bottom-item.active { color: var(--cyan); } .nav-bottom-item.active { color: var(--cyan); }
...@@ -397,13 +407,14 @@ img { ...@@ -397,13 +407,14 @@ img {
.nav-bottom-label { .nav-bottom-label {
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
line-height: 1;
} }
/* Tablet responsive */ /* Tablet responsive */
@media (min-width: 768px) and (max-width: 1023px) { @media (min-width: 768px) and (max-width: 1023px) {
.main-inner { .main-inner {
max-width: 720px; max-width: 720px;
padding: 32px 24px; padding: 32px 24px 48px;
} }
.games-grid { .games-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
...@@ -411,6 +422,12 @@ img { ...@@ -411,6 +422,12 @@ img {
.nav-bottom-label { .nav-bottom-label {
font-size: 11px; font-size: 11px;
} }
.lobby-card .card-body {
padding: 24px;
}
.lobby-card-row {
padding: 20px 24px;
}
} }
/* Desktop responsive */ /* Desktop responsive */
...@@ -431,8 +448,8 @@ img { ...@@ -431,8 +448,8 @@ img {
overflow: hidden; overflow: hidden;
} }
.card-body { padding: 16px; } .card-body { padding: 18px; }
.card-body-lg { padding: 20px; } .card-body-lg { padding: 24px; }
/* Buttons */ /* Buttons */
.btn { .btn {
...@@ -563,7 +580,7 @@ img { ...@@ -563,7 +580,7 @@ img {
.tabs::-webkit-scrollbar { display: none; } .tabs::-webkit-scrollbar { display: none; }
.tab { .tab {
padding: 8px 16px; padding: 10px 18px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
border-radius: var(--radius-md); border-radius: var(--radius-md);
...@@ -572,10 +589,28 @@ img { ...@@ -572,10 +589,28 @@ img {
border: 1px solid var(--border); border: 1px solid var(--border);
color: var(--text-2); color: var(--text-2);
transition: all 0.2s var(--ease); transition: all 0.2s var(--ease);
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.tab.active { background: var(--cyan); border-color: var(--cyan); color: var(--text-inverse); } .tab.active { background: var(--cyan); border-color: var(--cyan); color: var(--text-inverse); }
/* Tab group (inline selection - time control, bot difficulty, etc.) */
.tab-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tab-group .tab {
flex: 1;
min-width: 56px;
text-align: center;
padding: 10px 12px;
}
/* List items */ /* List items */
.list-item { .list-item {
display: flex; display: flex;
...@@ -723,8 +758,8 @@ img { ...@@ -723,8 +758,8 @@ img {
margin-top: 2px; margin-top: 2px;
} }
/* Toggle */ /* Toggle (class-based, legacy) */
.toggle { .toggle-legacy {
width: 44px; width: 44px;
height: 24px; height: 24px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
...@@ -734,7 +769,7 @@ img { ...@@ -734,7 +769,7 @@ img {
transition: background 0.2s var(--ease); transition: background 0.2s var(--ease);
} }
.toggle.active { background: var(--cyan); } .toggle-legacy.active { background: var(--cyan); }
.toggle-knob { .toggle-knob {
position: absolute; position: absolute;
...@@ -747,15 +782,25 @@ img { ...@@ -747,15 +782,25 @@ img {
transition: right 0.2s var(--ease); transition: right 0.2s var(--ease);
} }
.toggle.active .toggle-knob { right: 22px; } .toggle-legacy.active .toggle-knob { right: 22px; }
/* Spacing utilities */ /* Spacing utilities */
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; } .space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }
.space-y-6 > * + * { margin-top: 24px; } .space-y-6 > * + * { margin-top: 24px; }
.space-y-8 > * + * { margin-top: 32px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; } .mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; } .mt-4 { margin-top: 16px; }
.pt-2 { padding-top: 8px; }
.pb-4 { padding-bottom: 16px; }
.text-center { text-align: center; } .text-center { text-align: center; }
.text-gold { color: var(--gold); } .text-gold { color: var(--gold); }
.text-cyan { color: var(--cyan); } .text-cyan { color: var(--cyan); }
...@@ -1200,10 +1245,10 @@ img { ...@@ -1200,10 +1245,10 @@ img {
border: 2px solid var(--bg-1); border: 2px solid var(--bg-1);
} }
/* Better card-body padding on mobile */ /* Card-body padding on mobile */
@media (max-width: 767px) { @media (max-width: 767px) {
.card-body { padding: 14px; } .card-body { padding: 16px; }
.card-body-lg { padding: 18px; } .card-body-lg { padding: 20px; }
} }
/* Divider with text */ /* Divider with text */
...@@ -1548,6 +1593,182 @@ img { ...@@ -1548,6 +1593,182 @@ img {
75% { transform: translateX(2px); } 75% { transform: translateX(2px); }
} }
/* ===== Lobby Pages (Play / Ludo) ===== */
.lobby-page {
display: flex;
flex-direction: column;
gap: 16px;
}
.lobby-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
}
.lobby-cards {
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 24px;
}
.lobby-card {
border-radius: var(--radius-lg);
}
.lobby-card--featured {
border: 2px solid var(--gold);
box-shadow: 0 0 20px rgba(231, 168, 50, 0.08);
}
.lobby-card .card-body {
padding: 20px;
}
@media (max-width: 400px) {
.lobby-card .card-body {
padding: 16px;
}
}
.lobby-card-header {
display: flex;
align-items: center;
gap: 14px;
}
.lobby-card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.lobby-card-title-sm {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
.lobby-card-row {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
}
@media (max-width: 400px) {
.lobby-card-row {
padding: 16px;
gap: 12px;
}
}
.lobby-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
}
.lobby-btn-pair {
display: flex;
gap: 10px;
}
.lobby-btn-pair .btn {
flex: 1;
}
.lobby-code-row {
display: flex;
gap: 10px;
}
.lobby-code-row .input {
flex: 1;
}
.avatar-game {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ===== Input Label Spacing ===== */
.input-label {
margin-bottom: 8px;
}
/* ===== Toggle (checkbox-based) ===== */
.toggle {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
flex-shrink: 0;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
inset: 0;
background: var(--bg-3);
border-radius: var(--radius-full);
transition: background 0.2s var(--ease);
cursor: pointer;
}
.toggle-slider::before {
content: '';
position: absolute;
top: 3px;
right: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
transition: transform 0.2s var(--ease);
}
.toggle input:checked + .toggle-slider {
background: var(--cyan);
}
.toggle input:checked + .toggle-slider::before {
transform: translateX(-22px);
}
/* ===== Better select dropdown ===== */
select.input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
padding-left: 36px;
}
/* ===== Scrollable page guarantee ===== */
@media (max-width: 767px) {
.main {
min-height: calc(100dvh - var(--header-h));
}
.lobby-cards {
padding-bottom: 16px;
}
}
/* Reduced motion */ /* Reduced motion */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *::before, *::after { *, *::before, *::after {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment