dongho/worldcup2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update
dongho-repo/worldcup2026/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Dongho Kim
2026-06-07 00:51:46 +02:00
parent 371c9bfa21
commit c3f072b159
1 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+44 -28
View File
@@ -7,11 +7,19 @@
--bg-card: #ffffff;
--bg-card-hover:#f8fafc;
--bg-header: #e2e8f0;
--bg-controls: rgba(255, 255, 255, 0.85);
--bg-element: rgba(0, 0, 0, 0.04);
--bg-element-hover: rgba(0, 0, 0, 0.08);
--border: rgba(0,0,0,0.08);
--border-hover: rgba(0,0,0,0.15);
--border-light: rgba(0,0,0,0.06);
--text-primary: #0f172a;
--text-secondary: #334155;
--text-muted: rgba(15,23,42,0.6);
--text-faint: rgba(15,23,42,0.35);
--shadow-lg: 0 24px 56px rgba(15,23,42,0.15), 0 0 0 1px rgba(0,0,0,0.04);
--shadow-md: 0 4px 20px rgba(15,23,42,0.1);
--shadow-header:0 4px 32px rgba(15,23,42,0.1);
--gold: #d4af37;
--gold-glow: rgba(212,175,55,0.2);
--pitch-1: #2e7d32;
@@ -28,11 +36,19 @@
--bg-card: #0d1424;
--bg-card-hover:#111c30;
--bg-header: #060a12;
--bg-controls: rgba(8, 12, 20, 0.85);
--bg-element: rgba(255, 255, 255, 0.04);
--bg-element-hover: rgba(255, 255, 255, 0.08);
--border: rgba(255,255,255,0.07);
--border-hover: rgba(255,255,255,0.15);
--border-light: rgba(255,255,255,0.06);
--text-primary: #f0f4ff;
--text-secondary: #cbd5e1;
--text-muted: rgba(240,244,255,0.5);
--text-faint: rgba(240,244,255,0.25);
--shadow-lg: 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
--shadow-md: 0 4px 20px rgba(0,0,0,0.25);
--shadow-header:0 4px 32px rgba(0,0,0,0.5);
--gold: #ffd700;
--gold-glow: rgba(255,215,0,0.3);
--pitch-1: #1a4f21;
@@ -156,7 +172,7 @@ body {
}
.site-dates {
font-size: 13px;
color: rgba(240,244,255,0.35);
color: var(--text-faint);
letter-spacing: 1px;
margin-bottom: 32px;
}
@@ -164,7 +180,7 @@ body {
.stats-bar {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.04);
background: var(--bg-element);
border: 1px solid var(--border);
border-radius: 50px;
padding: 12px 24px;
@@ -181,12 +197,12 @@ body {
/* ── Controls Bar ─────────────────────────────────────────────────────────── */
.controls-bar {
position: sticky; top: 0; z-index: 100;
background: rgba(8,12,20,0.85);
background: var(--bg-controls);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
transition: box-shadow var(--transition);
}
.controls-bar.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,0.5); }
.controls-bar.scrolled { box-shadow: var(--shadow-header); }
.controls-inner {
max-width: 1400px; margin: 0 auto; padding: 12px 24px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
@@ -195,7 +211,7 @@ body {
.search-wrap { position: relative; flex-shrink: 0; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.search-input {
background: rgba(255,255,255,0.06);
background: var(--bg-element);
border: 1px solid var(--border);
border-radius: 24px;
color: var(--text-primary);
@@ -207,14 +223,14 @@ body {
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus {
border-color: rgba(255,215,0,0.4);
background: rgba(255,255,255,0.09);
background: var(--bg-element-hover);
box-shadow: 0 0 0 3px rgba(255,215,0,0.1);
width: 220px;
}
.filter-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
background: rgba(255,255,255,0.05);
background: var(--bg-element);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text-muted);
@@ -225,7 +241,7 @@ body {
white-space: nowrap;
}
.filter-btn:hover {
background: rgba(255,255,255,0.09);
background: var(--bg-element-hover);
border-color: var(--border-hover);
color: var(--text-primary);
transform: translateY(-1px);
@@ -269,7 +285,7 @@ body {
border-color: var(--border-hover);
background: var(--bg-card-hover);
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
box-shadow: var(--shadow-lg);
}
.group-card:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
@@ -294,7 +310,7 @@ body {
border-radius: var(--radius-sm);
transition: background var(--transition);
}
.team-card:hover { background: rgba(255,255,255,0.04); }
.team-card:hover { background: var(--bg-element); }
.team-flag {
font-size: 26px; line-height: 1; flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
@@ -345,15 +361,15 @@ body {
.modal-box {
position: relative; z-index: 1;
background: #0d1424;
border: 1px solid rgba(255,255,255,0.1);
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 20px;
width: 100%;
max-width: 640px;
max-height: 85vh;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
box-shadow: var(--shadow-lg);
animation: modal-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modal-in {
@@ -365,7 +381,7 @@ body {
.modal-header {
padding: 24px 24px 20px;
background: linear-gradient(135deg, color-mix(in srgb, var(--group-color) 18%, transparent), color-mix(in srgb, var(--group-color) 4%, transparent));
border-bottom: 1px solid rgba(255,255,255,0.07);
border-bottom: 1px solid var(--border-light);
position: relative;
flex-shrink: 0;
}
@@ -379,8 +395,8 @@ body {
.modal-teams-row { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-team-chip {
display: flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
background: var(--bg-element);
border: 1px solid var(--border-light);
border-radius: 24px;
padding: 5px 12px;
font-size: 13px; font-weight: 600;
@@ -389,8 +405,8 @@ body {
.modal-close {
position: absolute; top: 18px; right: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
background: var(--bg-element);
border: 1px solid var(--border-light);
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
@@ -399,13 +415,13 @@ body {
display: flex; align-items: center; justify-content: center;
transition: all var(--transition);
}
.modal-close:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); transform: scale(1.1); }
.modal-close:hover { background: var(--bg-element-hover); color: var(--text-primary); transform: scale(1.1); }
/* Modal body */
.modal-body { overflow-y: auto; padding: 20px 24px 24px; flex: 1; }
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
/* Modal Tabs */
.modal-tabs {
@@ -413,7 +429,7 @@ body {
gap: 12px;
padding: 0 24px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid var(--border-light);
}
.modal-tab {
@@ -608,17 +624,17 @@ body {
/* ── Match accordion card ─────────────────────────────────────────────────── */
.match-card {
border: 1px solid rgba(255,255,255,0.07);
border: 1px solid var(--border-light);
border-radius: 14px;
overflow: hidden;
margin-bottom: 8px;
transition: border-color var(--transition), box-shadow var(--transition);
background: rgba(255,255,255,0.02);
background: var(--bg-element);
}
.match-card:last-child { margin-bottom: 0; }
.match-card:hover {
border-color: rgba(255,255,255,0.14);
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
border-color: var(--border-hover);
box-shadow: var(--shadow-md);
}
.match-card.expanded {
border-color: var(--match-color, rgba(255,215,0,0.4));
@@ -639,7 +655,7 @@ body {
gap: 8px;
transition: background var(--transition);
}
.match-summary:hover { background: rgba(255,255,255,0.03); }
.match-summary:hover { background: var(--bg-element); }
.match-team-col {
display: flex;
@@ -678,7 +694,7 @@ body {
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
color: rgba(240,244,255,0.25);
color: var(--text-faint);
text-transform: uppercase;
}
@@ -769,7 +785,7 @@ body {
font-size: 13px;
background: linear-gradient(to top, rgba(255,215,0,0.02), transparent);
}
.footer-main { font-weight: 600; color: rgba(240,244,255,0.6); margin-bottom: 6px; }
.footer-main { font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.footer-sub { margin-bottom: 6px; }
.footer-debut { color: rgba(255,215,0,0.5); font-size: 12px; }