GGThedandClaude Opus 5
a92600c305
Le site s'affiche desormais en francais par defaut, avec un selecteur de langue permettant de basculer vers l'anglais. Choix de conception : les chaines sources restent en anglais Elles servent d'identifiants gettext, et le francais est fourni par catalogue avec BABEL_DEFAULT_LOCALE = 'fr'. Le code reste ainsi dans une seule langue -- la meme que ses commentaires et docstrings -- tandis que ce qu'un membre voit est du francais. Consequence qui rend la migration praticable : une chaine non encore traduite retombe en anglais, pas sur un identifiant brut. Les gabarits peuvent donc etre migres un par un sans jamais laisser le site a moitie casse. Selection de la langue (app/i18n.py) 1. choix explicite via le selecteur, garde en session 2. sinon en-tete Accept-Language du navigateur, restreint a fr et en 3. sinon francais Un choix explicite prime toujours, y compris sur un navigateur anglophone. Selecteur Extrait en partiel et inclus dans les deux branches de la mise en page : barre laterale une fois connecte, ET page d'authentification. Quelqu'un qui ne lit pas la langue courante doit pouvoir en changer AVANT de se connecter -- le laisser derriere l'authentification aurait ete un defaut d'accessibilite. Chaque langue est ecrite dans sa propre langue. La route /lang/<locale> valide le Referer avant de rediriger : sans ce controle, elle constituait une redirection ouverte. Migre dans cette passe navigation complete, page de connexion, les cinq pages d'erreur, et l'integralite des messages flash de routes/auth.py. 64 chaines, dont aucune non traduite. Verification 25 tests, dont deux garde-fous d'integrite : un catalogue .mo manquant ou une entree non traduite font echouer la suite. Sans cela, une compilation oubliee servirait de l'anglais partout, en silence et sans rien dans les journaux. Un test existant a du etre corrige, et c'est instructif test_login_failure_message_does_not_reveal_account_existence cherchait la sous-chaine anglaise 'attempt(s) remaining'. La page etant desormais en francais, elle etait absente des deux cotes, l'assertion passait, et le mode strict a signale le faux succes. Le test comparait donc l'anglais, pas le comportement. Il compare desormais les messages flash rendus, quelle que soit la langue. La faille SEC-AUTH-006 reste ouverte, et le test la documente toujours. Les catalogues .po ET .mo sont versionnes : le deploiement est un simple miroir de fichiers, sans etape de compilation. messages.pot, regenerable, ne l'est pas. docs/translations.md documente le processus, les deux pieges (concatenation de phrases, traduction a l'import), et l'etat de la migration. A noter pour la suite : les chaines dans les blocs <script> ne peuvent pas etre balisees telles quelles, il faudra les passer par des attributs data- -- ce qui rejoint le chantier de sortie de unsafe-inline (OPS-010). Co-Authored-By: Claude Opus 5 <[email protected]>
2010 lines
42 KiB
CSS
2010 lines
42 KiB
CSS
:root {
|
|
/* New Color Palette */
|
|
--primary: #00984C;
|
|
--primary-dark: #003E21;
|
|
--primary-light: #E5A939;
|
|
--success: #00984C;
|
|
--success-light: #F0F2F2;
|
|
--warning: #E5A939;
|
|
--warning-light: #FEF9F0;
|
|
--danger: #ef4444;
|
|
--danger-light: #fef2f2;
|
|
--info: #3b82f6;
|
|
--info-light: #eff6ff;
|
|
--secondary: #6b7280;
|
|
--secondary-light: #F0F2F2;
|
|
--dark: #12130F;
|
|
--gray-50: #F0F2F2;
|
|
--gray-100: #E8EAEB;
|
|
--gray-200: #D1D5DB;
|
|
--gray-300: #9CA3AF;
|
|
--gray-400: #6B7280;
|
|
--gray-500: #4B5563;
|
|
--gray-600: #374151;
|
|
--gray-700: #1F2937;
|
|
--gray-800: #12130F;
|
|
--gray-900: #0A0B0A;
|
|
--sidebar-width: 260px;
|
|
--sidebar-collapsed: 0px;
|
|
--radius: 12px;
|
|
--radius-sm: 8px;
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
|
|
--shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
|
|
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
|
|
--transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Dark Mode Variables */
|
|
[data-theme="dark"] {
|
|
--bg-primary: #12130F;
|
|
--bg-secondary: #1A1D17;
|
|
--bg-tertiary: #232820;
|
|
--text-primary: #F0F2F2;
|
|
--text-secondary: #D1D5DB;
|
|
--text-muted: #9CA3AF;
|
|
--border-color: #2D342A;
|
|
--card-bg: #1A1D17;
|
|
--sidebar-bg: #0A0B0A;
|
|
--sidebar-text: #F0F2F2;
|
|
--sidebar-hover: rgba(240, 242, 242, 0.08);
|
|
--input-bg: #232820;
|
|
--input-border: #2D342A;
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
|
|
--shadow-md: 0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2);
|
|
--shadow-lg: 0 10px 15px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: var(--gray-50);
|
|
color: var(--gray-800);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: var(--primary); text-decoration: none; }
|
|
a:hover { color: var(--primary-dark); }
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: var(--sidebar-width);
|
|
height: 100vh;
|
|
background: var(--dark);
|
|
color: white;
|
|
z-index: 1000;
|
|
transition: var(--transition);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo i { color: var(--primary); font-size: 1.6rem; }
|
|
|
|
.user-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
|
|
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
|
|
.avatar-xl { width: 64px; height: 64px; font-size: 1.3rem; }
|
|
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.user-role { font-size: 0.75rem; padding: 2px 8px; border-radius: 20px; display: inline-block; width: fit-content; }
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.nav-links li a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 20px;
|
|
color: var(--gray-400);
|
|
transition: var(--transition);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.nav-links li a:hover, .nav-links li a.active {
|
|
background: rgba(255,255,255,0.08);
|
|
color: white;
|
|
}
|
|
|
|
.nav-links li a.active {
|
|
border-left: 3px solid var(--primary);
|
|
padding-left: 17px;
|
|
}
|
|
|
|
.nav-links li a i { width: 20px; text-align: center; font-size: 1.1rem; }
|
|
|
|
.nav-divider {
|
|
height: 1px;
|
|
background: rgba(255,255,255,0.1);
|
|
margin: 10px 20px;
|
|
}
|
|
|
|
.logout-link { color: var(--danger) !important; }
|
|
.logout-link:hover { background: rgba(239,68,68,0.1) !important; }
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
margin-left: var(--sidebar-width);
|
|
transition: var(--transition);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 30px;
|
|
background: white;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.3rem;
|
|
color: var(--gray-500);
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: var(--radius-sm);
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-toggle:hover { background: var(--gray-100); }
|
|
|
|
.page-header h1 {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.breadcrumb { font-size: 0.8rem; color: var(--gray-500); }
|
|
.breadcrumb a { color: var(--primary); }
|
|
|
|
.content { padding: 24px 30px; }
|
|
|
|
/* Flash Messages */
|
|
.flash-messages {
|
|
padding: 0 30px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.alert {
|
|
padding: 12px 16px;
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
font-size: 0.9rem;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { transform: translateY(-10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.alert-success { background: var(--success-light); color: #065f46; border: 1px solid #a7f3d0; }
|
|
.alert-danger { background: var(--danger-light); color: #991b1b; border: 1px solid #fecaca; }
|
|
.alert-warning { background: var(--warning-light); color: #92400e; border: 1px solid #fde68a; }
|
|
.alert-info { background: var(--info-light); color: #1e40af; border: 1px solid #bfdbfe; }
|
|
|
|
.alert-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.3rem;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
opacity: 0.6;
|
|
padding: 0 4px;
|
|
}
|
|
.alert-close:hover { opacity: 1; }
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.card-header h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-body { padding: 20px; }
|
|
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
box-shadow: var(--shadow);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
|
|
|
|
.stat-card-sm { padding: 14px; }
|
|
.stat-card-sm .stat-info h3 { font-size: 0.9rem; }
|
|
.stat-card-sm .stat-info p { font-size: 0.75rem; }
|
|
|
|
.stat-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.3rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stat-info h3 { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); }
|
|
.stat-info p { font-size: 0.85rem; color: var(--gray-500); margin-top: 2px; }
|
|
|
|
.bg-primary { background: var(--primary-light); color: var(--primary); }
|
|
.bg-success { background: var(--success-light); color: var(--success); }
|
|
.bg-warning { background: var(--warning-light); color: var(--warning); }
|
|
.bg-info { background: var(--info-light); color: var(--info); }
|
|
.bg-danger { background: var(--danger-light); color: var(--danger); }
|
|
.bg-secondary { background: var(--secondary-light); color: var(--secondary); }
|
|
|
|
/* Dashboard Grid */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Allow cards to span full width or be placed flexibly */
|
|
.dashboard-grid .card {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Card position control - can be set via data-position attribute */
|
|
.dashboard-grid .card[data-position="right"] {
|
|
grid-column: 2 / -1;
|
|
}
|
|
|
|
.dashboard-grid .card[data-position="left"] {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.dashboard-grid { grid-template-columns: 1fr; }
|
|
.dashboard-grid .card[data-position="right"],
|
|
.dashboard-grid .card[data-position="left"] {
|
|
grid-column: auto;
|
|
}
|
|
}
|
|
|
|
/* Tables */
|
|
.table-container { overflow-x: auto; }
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.table th {
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
font-weight: 600;
|
|
color: var(--gray-500);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border-bottom: 2px solid var(--gray-200);
|
|
}
|
|
|
|
.table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--gray-100);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table tbody tr:hover { background: var(--gray-50); }
|
|
|
|
.cell-title { font-weight: 600; }
|
|
|
|
/* Badges */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.badge-lg { padding: 5px 14px; font-size: 0.85rem; }
|
|
|
|
.badge-upcoming { background: var(--info-light); color: var(--info); }
|
|
.badge-in_progress { background: var(--warning-light); color: var(--warning); }
|
|
.badge-completed { background: var(--success-light); color: var(--success); }
|
|
.badge-scheduled { background: var(--info-light); color: var(--info); }
|
|
.badge-cancelled { background: var(--danger-light); color: var(--danger); }
|
|
.badge-president { background: #eef2ff; color: #4338ca; }
|
|
.badge-manager { background: #ecfdf5; color: #059669; }
|
|
.badge-coach { background: #fffbeb; color: #d97706; }
|
|
.badge-player { background: #f3f4f6; color: #4b5563; }
|
|
.badge-scout { background: #fef2f2; color: #dc2626; }
|
|
.badge-success { background: var(--success-light); color: var(--success); }
|
|
.badge-warning { background: var(--warning-light); color: var(--warning); }
|
|
.badge-danger { background: var(--danger-light); color: var(--danger); }
|
|
.badge-info { background: var(--info-light); color: var(--info); }
|
|
.badge-registered { background: var(--info-light); color: var(--info); }
|
|
.badge-attended { background: var(--success-light); color: var(--success); }
|
|
.badge-no_show { background: var(--danger-light); color: var(--danger); }
|
|
|
|
.score {
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary { background: var(--primary); color: white; }
|
|
.btn-primary:hover { background: var(--primary-dark); color: white; }
|
|
|
|
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
|
|
.btn-secondary:hover { background: var(--gray-200); }
|
|
|
|
.btn-success { background: var(--success); color: white; }
|
|
.btn-success:hover { background: #059669; color: white; }
|
|
|
|
.btn-danger { background: var(--danger); color: white; }
|
|
.btn-danger:hover { background: #dc2626; color: white; }
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--gray-300);
|
|
color: var(--gray-700);
|
|
}
|
|
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); }
|
|
|
|
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
|
|
.btn-lg { padding: 12px 24px; font-size: 1rem; }
|
|
.btn-block { width: 100%; justify-content: center; }
|
|
|
|
/* Forms */
|
|
.form { max-width: 800px; }
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
flex: 1;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group input[type="email"],
|
|
.form-group input[type="password"],
|
|
.form-group input[type="tel"],
|
|
.form-group input[type="number"],
|
|
.form-group input[type="date"],
|
|
.form-group select,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9rem;
|
|
transition: var(--transition);
|
|
background: white;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(0, 152, 76, 0.1);
|
|
}
|
|
|
|
.form-group textarea { resize: vertical; min-height: 80px; }
|
|
|
|
.form-select { padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.9rem; }
|
|
.form-select-sm { padding: 4px 8px; font-size: 0.8rem; }
|
|
.form-input { padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.9rem; }
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.form-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.inline-form { display: inline; }
|
|
|
|
.col-12 { flex: 0 0 100%; }
|
|
.col-6 { flex: 0 0 calc(50% - 8px); }
|
|
.col-4 { flex: 0 0 calc(33.333% - 11px); }
|
|
.col-3 { flex: 0 0 calc(25% - 12px); }
|
|
|
|
/* Score Input */
|
|
.score-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.score-input input[type="range"] {
|
|
flex: 1;
|
|
height: 6px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: var(--gray-200);
|
|
border-radius: 3px;
|
|
outline: none;
|
|
}
|
|
|
|
.score-input input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.range-value {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
min-width: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Auth */
|
|
.auth-wrapper {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #00984C 0%, #003E21 100%);
|
|
padding: 20px;
|
|
}
|
|
|
|
[data-theme="dark"] .auth-wrapper {
|
|
background: linear-gradient(135deg, #003E21 0%, #12130F 100%);
|
|
}
|
|
|
|
.auth-wrapper .flash-messages {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
padding: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.auth-container {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: 40px;
|
|
width: 100%;
|
|
max-width: 520px;
|
|
}
|
|
|
|
.auth-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.auth-header i {
|
|
font-size: 3rem;
|
|
color: var(--primary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.auth-header h2 {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.auth-header p {
|
|
color: var(--gray-500);
|
|
font-size: 0.9rem;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.auth-form .form-group {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.auth-form .form-group label {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.auth-form .form-group label i {
|
|
color: var(--gray-400);
|
|
width: 16px;
|
|
}
|
|
|
|
.auth-form .form-group input {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.95rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.auth-form .form-group input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(0, 152, 76, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.auth-link {
|
|
text-align: center;
|
|
margin-top: 16px;
|
|
font-size: 0.9rem;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
/* Detail Grid */
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.detail-item { display: flex; flex-direction: column; gap: 4px; }
|
|
.detail-item.full-width { grid-column: 1 / -1; }
|
|
.detail-label { font-size: 0.8rem; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
|
|
.detail-value { font-size: 0.95rem; color: var(--gray-800); }
|
|
|
|
/* User Mini */
|
|
.user-mini {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Profile */
|
|
.profile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.profile-info h2 { font-size: 1.3rem; margin-bottom: 4px; }
|
|
.profile-info p { font-size: 0.85rem; }
|
|
|
|
.profile-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 16px;
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.stat-item h4 { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
|
|
.stat-item p { font-size: 0.8rem; color: var(--gray-500); }
|
|
|
|
/* Team */
|
|
.team-card {
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-sm);
|
|
padding: 16px;
|
|
}
|
|
|
|
.team-name {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: var(--gray-800);
|
|
}
|
|
|
|
.team-members {
|
|
list-style: none;
|
|
}
|
|
|
|
.team-members li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.position-tag {
|
|
background: var(--primary-light);
|
|
color: var(--primary);
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Eval Player Info */
|
|
.eval-player-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 3rem;
|
|
color: var(--gray-300);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.empty-state h3 { font-size: 1.1rem; color: var(--gray-600); margin-bottom: 8px; }
|
|
.empty-state p { color: var(--gray-400); font-size: 0.9rem; margin-bottom: 16px; }
|
|
|
|
/* Modal */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 2001;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-lg);
|
|
width: 100%;
|
|
max-width: 500px;
|
|
z-index: 2002;
|
|
position: relative;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.modal-header h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
color: var(--gray-400);
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.modal-close:hover { color: var(--gray-700); }
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* E-Sports Styles */
|
|
.checkbox-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.checkbox-label:hover {
|
|
border-color: var(--primary);
|
|
background: var(--primary-light);
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] {
|
|
accent-color: var(--primary);
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.section-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--gray-200);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.section-title i {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.badge-esport {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin: 2px 3px;
|
|
}
|
|
|
|
.trn-link {
|
|
color: var(--primary);
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.trn-link:hover {
|
|
color: var(--primary-dark);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.form-text {
|
|
font-size: 0.8rem;
|
|
color: var(--gray-500);
|
|
margin-top: 4px;
|
|
display: block;
|
|
}
|
|
|
|
.gamertag-input-row {
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.gamertag-input-row h5 {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
/* Dark mode styles for gamertag input rows */
|
|
[data-theme="dark"] .gamertag-input-row {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
[data-theme="dark"] .gamertag-input-row h5 {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Disponibility Time Blocks (for player profile edit) */
|
|
.disponibility-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.disponibility-day-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.disponibility-day-label {
|
|
width: 100px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.disponibility-time-blocks {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.disponibility-time-block {
|
|
width: 80px;
|
|
height: 32px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--gray-300);
|
|
background: var(--gray-100);
|
|
text-align: center;
|
|
line-height: 32px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.disponibility-time-block:hover {
|
|
background: var(--gray-200);
|
|
}
|
|
|
|
.disponibility-time-block.selected {
|
|
background: var(--success);
|
|
color: white;
|
|
border-color: #059669;
|
|
}
|
|
|
|
[data-theme="dark"] .disponibility-time-block {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .disponibility-time-block:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Keep .selected time blocks green in dark mode - must come after the generic rule */
|
|
[data-theme="dark"] .disponibility-time-block.selected {
|
|
background: var(--success) !important;
|
|
color: white !important;
|
|
border-color: #059669 !important;
|
|
}
|
|
|
|
/* Utilities */
|
|
.hidden { display: none !important; }
|
|
.text-center { text-align: center; }
|
|
.text-muted { color: var(--gray-500); }
|
|
.mt-2 { margin-top: 8px; }
|
|
.mt-4 { margin-top: 16px; }
|
|
.mb-3 { margin-bottom: 12px; }
|
|
.mb-4 { margin-bottom: 16px; }
|
|
.mr-2 { margin-right: 8px; }
|
|
.mx-2 { margin-left: 8px; margin-right: 8px; }
|
|
|
|
/* Calendar Styles */
|
|
#calendar {
|
|
min-height: 600px;
|
|
}
|
|
|
|
.fc {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
.fc-toolbar {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.fc-toolbar-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.fc-button {
|
|
background: var(--primary) !important;
|
|
border: none !important;
|
|
border-radius: var(--radius-sm) !important;
|
|
padding: 6px 12px !important;
|
|
font-size: 0.85rem !important;
|
|
}
|
|
|
|
.fc-button:hover {
|
|
background: var(--primary-dark) !important;
|
|
}
|
|
|
|
.fc-button-primary:not(:disabled).fc-button-active,
|
|
.fc-button-primary:not(:disabled):active {
|
|
background: var(--primary-dark) !important;
|
|
}
|
|
|
|
.fc-daygrid-day {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.fc-daygrid-day:hover {
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.fc-event {
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px 4px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.fc-event-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Team Roster Display */
|
|
.team-roster-display {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.team-roster-display small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.team-rosters {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.team-roster {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.team-roster h5 {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 8px;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.team-members-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.team-members-list li {
|
|
padding: 4px 0;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
/* Match Teams Display */
|
|
.match-teams {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.match-team {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.match-team .team-name {
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 4px;
|
|
display: block;
|
|
}
|
|
|
|
.match-vs {
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
font-size: 0.85rem;
|
|
padding: 0 4px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.team-players-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.team-players-list li {
|
|
padding: 2px 0;
|
|
color: var(--gray-600);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: var(--sidebar-collapsed);
|
|
transform: translateX(-100%);
|
|
}
|
|
.sidebar.open {
|
|
width: var(--sidebar-width);
|
|
transform: translateX(0);
|
|
}
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
.sidebar-toggle { display: block; }
|
|
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.form-row { flex-direction: column; }
|
|
.col-6, .col-4, .col-3 { flex: 0 0 100%; }
|
|
.profile-stats { grid-template-columns: 1fr; }
|
|
.detail-grid { grid-template-columns: 1fr; }
|
|
.content { padding: 16px; }
|
|
.top-bar { padding: 12px 16px; }
|
|
.flash-messages { padding: 0 16px; }
|
|
.team-rosters { flex-direction: column; }
|
|
}
|
|
|
|
/* Merged Availability Grid for Match Scheduling */
|
|
.merged-disponibility-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.merged-disponibility-day-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.merged-disponibility-day-label {
|
|
width: 100px;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.merged-disponibility-time-blocks {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
|
|
.merged-disponibility-time-block {
|
|
width: 90px;
|
|
height: 36px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--gray-300);
|
|
background: var(--gray-100);
|
|
text-align: center;
|
|
line-height: 36px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.merged-disponibility-time-block:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.merged-disponibility-time-block.selected {
|
|
background: #6366f1 !important;
|
|
color: white !important;
|
|
border-color: #4f46e5 !important;
|
|
}
|
|
|
|
.merged-disponibility-time-block.high-availability {
|
|
background: var(--success);
|
|
color: white;
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.merged-disponibility-time-block.medium-availability {
|
|
background: var(--warning);
|
|
color: white;
|
|
border-color: var(--warning);
|
|
}
|
|
|
|
.merged-disponibility-time-block.low-availability {
|
|
background: var(--gray-200);
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
/* Dark mode styles for time blocks - generic rule first */
|
|
[data-theme="dark"] .merged-disponibility-time-block {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .merged-disponibility-time-block:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Then specific states override the generic rule */
|
|
[data-theme="dark"] .merged-disponibility-time-block.selected {
|
|
background: #6366f1 !important;
|
|
color: white !important;
|
|
border-color: #818cf8 !important;
|
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
|
|
}
|
|
|
|
[data-theme="dark"] .merged-disponibility-time-block.high-availability {
|
|
background: var(--success);
|
|
color: white;
|
|
border-color: var(--success);
|
|
}
|
|
|
|
[data-theme="dark"] .merged-disponibility-time-block.medium-availability {
|
|
background: var(--warning);
|
|
color: white;
|
|
border-color: var(--warning);
|
|
}
|
|
|
|
[data-theme="dark"] .merged-disponibility-time-block.low-availability {
|
|
background: var(--gray-600);
|
|
color: var(--gray-300);
|
|
border-color: var(--gray-500);
|
|
}
|
|
|
|
.merged-disponibility-count {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 4px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Player pool styles for match creation */
|
|
[data-theme="dark"] .available-players-pool .player-item {
|
|
background: #065f46;
|
|
border-color: #10b981;
|
|
}
|
|
|
|
[data-theme="dark"] .available-players-pool .player-item.available {
|
|
background: #065f46;
|
|
border-color: #10b981;
|
|
}
|
|
|
|
[data-theme="dark"] .available-players-pool .player-item.unavailable {
|
|
background: #374151;
|
|
border-color: #4b5563;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
[data-theme="dark"] .available-players-pool .player-item:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
[data-theme="dark"] .team-selection .player-item {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .team-selection .player-item:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.merged-disponibility-selected-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
background: var(--success-light);
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.merged-disponibility-selected-display.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.time-selection-hint {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-500);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.randomize-section {
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-sm);
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.randomize-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.randomize-input {
|
|
width: 60px;
|
|
padding: 6px 8px;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.randomize-preview {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.randomize-btn {
|
|
background: var(--warning);
|
|
color: white;
|
|
}
|
|
|
|
.randomize-btn:hover {
|
|
background: #d97706;
|
|
}
|
|
|
|
.selected-time-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 12px;
|
|
background: var(--success);
|
|
color: white;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Dark Mode Styles */
|
|
[data-theme="dark"] body {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .sidebar {
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .sidebar-header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .user-badge {
|
|
background: rgba(240, 242, 242, 0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .nav-links li a {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .nav-links li a:hover,
|
|
[data-theme="dark"] .nav-links li a.active {
|
|
background: var(--sidebar-hover);
|
|
color: var(--sidebar-text);
|
|
}
|
|
|
|
[data-theme="dark"] .nav-divider {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .top-bar {
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .page-header h1 {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .content {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .card {
|
|
background: var(--card-bg);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
[data-theme="dark"] .card-header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .stat-card,
|
|
[data-theme="dark"] .team-card {
|
|
background: var(--card-bg);
|
|
}
|
|
|
|
[data-theme="dark"] .stat-info h3,
|
|
[data-theme="dark"] .team-name,
|
|
[data-theme="dark"] .detail-value {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .stat-info p,
|
|
[data-theme="dark"] .detail-label,
|
|
[data-theme="dark"] .team-members li,
|
|
[data-theme="dark"] .team-members-list li,
|
|
[data-theme="dark"] .team-roster-display,
|
|
[data-theme="dark"] .form-text,
|
|
[data-theme="dark"] .time-selection-hint,
|
|
[data-theme="dark"] .randomize-preview {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .stat-item {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
[data-theme="dark"] .table th {
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .table td {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .table tbody tr:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
[data-theme="dark"] .form-group label {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .form-group input,
|
|
[data-theme="dark"] .form-group select,
|
|
[data-theme="dark"] .form-group textarea,
|
|
[data-theme="dark"] .form-select,
|
|
[data-theme="dark"] .form-input,
|
|
[data-theme="dark"] .randomize-input {
|
|
background: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .form-group input::placeholder,
|
|
[data-theme="dark"] .form-group textarea::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .form-group input:focus,
|
|
[data-theme="dark"] .form-group select:focus,
|
|
[data-theme="dark"] .form-group textarea:focus {
|
|
box-shadow: 0 0 0 3px rgba(0, 152, 76, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .form-actions {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .modal-content {
|
|
background: var(--card-bg);
|
|
}
|
|
|
|
[data-theme="dark"] .modal-header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .modal-close {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .modal-close:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .checkbox-label {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .checkbox-label:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .section-divider {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .section-title,
|
|
[data-theme="dark"] .empty-state h3 {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .empty-state i,
|
|
[data-theme="dark"] .empty-state p {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-container {
|
|
background: var(--card-bg);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-header h2 {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-header p,
|
|
[data-theme="dark"] .auth-link {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-form .form-group label {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-form .form-group label i {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-form .form-group input {
|
|
background: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .auth-form .form-group input:focus {
|
|
box-shadow: 0 0 0 3px rgba(0, 152, 76, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .position-tag {
|
|
background: var(--bg-tertiary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
[data-theme="dark"] .match-team .team-name {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Note: merged-disponibility-time-block dark styles are defined above with proper ordering */
|
|
|
|
[data-theme="dark"] .btn-secondary {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-secondary:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline {
|
|
background: transparent;
|
|
border-color: var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
/* Dark Mode Toggle Button */
|
|
.dark-mode-toggle {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.1rem;
|
|
color: var(--gray-500);
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.dark-mode-toggle:hover {
|
|
background: var(--gray-100);
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
[data-theme="dark"] .dark-mode-toggle {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .dark-mode-toggle:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Draggable Blocks */
|
|
.drag-handle {
|
|
cursor: move;
|
|
padding: 8px;
|
|
margin-right: 8px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--gray-400);
|
|
transition: var(--transition);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.drag-handle:hover {
|
|
background: var(--gray-100);
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.card.dragging {
|
|
opacity: 0.5;
|
|
transform: scale(0.98);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
/* Drop placeholder - shows where card will be inserted */
|
|
.sortable-placeholder {
|
|
background: var(--primary-light);
|
|
border: 2px dashed var(--primary);
|
|
border-radius: var(--radius);
|
|
min-height: 100px;
|
|
opacity: 0.5;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Dark mode placeholder */
|
|
[data-theme="dark"] .sortable-placeholder {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* Ghost is now controlled via inline styles in JS */
|
|
.sortable-ghost {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.sortable-chosen {
|
|
transform: scale(1.01);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-header .drag-handle {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.card-header .drag-handle:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Dark mode drag handle */
|
|
[data-theme="dark"] .drag-handle {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .drag-handle:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Make cards draggable by header */
|
|
.card-header {
|
|
cursor: default;
|
|
}
|
|
|
|
.card-header.draggable {
|
|
position: relative;
|
|
}
|
|
|
|
.card-header.draggable:hover .drag-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-header.draggable .drag-handle {
|
|
opacity: 0.4;
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ===== Tryouts Grid (Card-based Layout) ===== */
|
|
.tryouts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tryout-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
border: 1px solid var(--border-color, #e0e0e0);
|
|
}
|
|
|
|
.tryout-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.tryout-card .card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tryout-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tryout-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.info-icon {
|
|
width: 16px;
|
|
text-align: center;
|
|
color: var(--text-muted, #888);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #555);
|
|
min-width: 50px;
|
|
}
|
|
|
|
.info-value {
|
|
color: var(--text-primary, #333);
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.tryout-description {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary, #555);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tryout-description p {
|
|
margin: 0;
|
|
}
|
|
|
|
.tryout-card .card-footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: var(--bg-secondary, #f8f9fa);
|
|
border-top: 1px solid var(--border-color, #e0e0e0);
|
|
}
|
|
|
|
/* ===== Full-width Schedule Card ===== */
|
|
.tryout-schedule-card {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ===== Dark mode adjustments ===== */
|
|
[data-theme="dark"] .tryout-card {
|
|
border-color: var(--border-color, #333);
|
|
}
|
|
|
|
[data-theme="dark"] .tryout-card .card-footer {
|
|
background: var(--bg-secondary, #2a2a2a);
|
|
border-top-color: var(--border-color, #333);
|
|
}
|
|
|
|
[data-theme="dark"] .info-label {
|
|
color: var(--text-secondary, #aaa);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Sortable Table Headers */
|
|
.sort-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: var(--gray-500);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.sort-link:hover {
|
|
color: var(--gray-800);
|
|
}
|
|
|
|
.sort-link .fas {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.sort-inactive {
|
|
opacity: 0.3;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.sort-link:hover .sort-inactive {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
[data-theme="dark"] .sort-link {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .sort-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* =========================================================================
|
|
Error Pages
|
|
========================================================================= */
|
|
.error-container {
|
|
text-align: center;
|
|
padding: 60px 30px;
|
|
max-width: 500px;
|
|
margin: 40px auto;
|
|
background: white;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.error-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 20px;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.error-container h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--gray-800);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.error-container p {
|
|
color: var(--gray-500);
|
|
font-size: 0.95rem;
|
|
margin-bottom: 24px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.error-container .btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
[data-theme="dark"] .error-container {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .error-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .error-container h2 {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .error-container p {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* =========================================================================
|
|
Language switcher
|
|
========================================================================= */
|
|
|
|
.nav-language {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.nav-language .lang-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-language .lang-link:hover {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.nav-language .lang-current {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-language .lang-separator {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.auth-language {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-bottom: 18px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.auth-language .lang-link { color: var(--text-secondary); text-decoration: none; }
|
|
.auth-language .lang-link:hover { color: var(--primary); text-decoration: underline; }
|
|
.auth-language .lang-current { font-weight: 600; color: var(--text-primary); }
|
|
.auth-language .lang-separator { opacity: 0.4; }
|
|
|
|
/* Visually hidden, still announced by screen readers. */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px; height: 1px;
|
|
padding: 0; margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|