Spaces:
Running
Running
| :root { | |
| --bg-gradient-start: #0a0e27; | |
| --bg-gradient-end: #1a1033; | |
| --panel: rgba(17, 24, 39, 0.8); | |
| --panel-hover: rgba(30, 41, 59, 0.95); | |
| --text: #f8fafc; | |
| --text-secondary: #cbd5e1; | |
| --muted: #94a3b8; | |
| --accent: #a78bfa; | |
| --accent-bright: #c4b5fd; | |
| --border: rgba(148, 163, 184, 0.15); | |
| --row-hover: rgba(139, 92, 246, 0.1); | |
| --gold-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)); | |
| --silver-bg: linear-gradient(135deg, rgba(203, 213, 225, 0.15), rgba(148, 163, 184, 0.1)); | |
| --bronze-bg: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(234, 88, 12, 0.1)); | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); | |
| background-attachment: fixed; | |
| color: var(--text); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| line-height: 1.6; | |
| font-size: 15px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 20px 32px; | |
| background: var(--panel); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .topbar__left { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .topbar__right { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| font-size: 14px; | |
| } | |
| .app-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -0.5px; | |
| } | |
| .app-title::before { | |
| content: "🏆 "; | |
| -webkit-text-fill-color: var(--accent-bright); | |
| } | |
| .muted { | |
| color: var(--muted); | |
| font-size: 14px; | |
| } | |
| .link { | |
| color: var(--accent-bright); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| } | |
| .link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-bright); | |
| transition: width 0.3s ease; | |
| } | |
| .link:hover::after { | |
| width: 100%; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| margin: 24px 0 16px; | |
| } | |
| .control input[type="search"], | |
| .control select { | |
| background: var(--panel); | |
| backdrop-filter: blur(8px); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-sm); | |
| min-width: 200px; | |
| } | |
| .control input[type="search"]:focus, | |
| .control select:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2), var(--shadow-sm); | |
| transform: translateY(-1px); | |
| } | |
| .control input[type="search"]::placeholder { | |
| color: var(--muted); | |
| } | |
| .control button { | |
| background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); | |
| color: #fff; | |
| border: none; | |
| border-radius: 12px; | |
| padding: 12px 24px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-sm); | |
| font-size: 14px; | |
| } | |
| .control button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%); | |
| } | |
| .control button:active { | |
| transform: translateY(0); | |
| } | |
| .table-wrap { | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: var(--panel); | |
| backdrop-filter: blur(12px); | |
| box-shadow: var(--shadow-lg); | |
| animation: fadeInUp 0.6s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| table.table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| } | |
| thead th { | |
| text-align: left; | |
| font-weight: 700; | |
| padding: 18px 16px; | |
| border-bottom: 2px solid var(--border); | |
| background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%); | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-secondary); | |
| } | |
| thead th:hover { | |
| background: linear-gradient(180deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.1) 100%); | |
| color: var(--accent-bright); | |
| } | |
| tbody td { | |
| padding: 16px; | |
| border-bottom: 1px solid var(--border); | |
| transition: all 0.2s ease; | |
| font-size: 14px; | |
| } | |
| tbody tr { | |
| transition: all 0.3s ease; | |
| } | |
| tbody tr:hover { | |
| background: var(--row-hover); | |
| transform: scale(1.01); | |
| } | |
| /* Sıralama göstergeleri */ | |
| th[aria-sort="ascending"]::after, | |
| th[aria-sort="descending"]::after { | |
| content: ''; | |
| display: inline-block; | |
| margin-left: 8px; | |
| width: 0; | |
| height: 0; | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| transition: all 0.2s ease; | |
| } | |
| th[aria-sort="ascending"]::after { | |
| border-bottom: 6px solid var(--accent-bright); | |
| } | |
| th[aria-sort="descending"]::after { | |
| border-top: 6px solid var(--accent-bright); | |
| } | |
| /* İlk 3 vurgusu - modernize edildi */ | |
| tr.rank-1 { | |
| background: var(--gold-bg); | |
| border-left: 4px solid #fbbf24; | |
| } | |
| tr.rank-2 { | |
| background: var(--silver-bg); | |
| border-left: 4px solid #cbd5e1; | |
| } | |
| tr.rank-3 { | |
| background: var(--bronze-bg); | |
| border-left: 4px solid #fb923c; | |
| } | |
| tr.rank-1:hover, | |
| tr.rank-2:hover, | |
| tr.rank-3:hover { | |
| transform: scale(1.02); | |
| box-shadow: var(--shadow-md); | |
| } | |
| td.rank-cell { | |
| font-weight: 800; | |
| font-size: 16px; | |
| color: var(--accent-bright); | |
| } | |
| .footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 20px 0; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .disclaimer { | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| .visually-hidden { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| #summaryStats { | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .topbar { | |
| flex-direction: column; | |
| gap: 12px; | |
| padding: 16px; | |
| } | |
| .topbar__left, | |
| .topbar__right { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .app-title { | |
| font-size: 24px; | |
| } | |
| .container { | |
| padding: 16px; | |
| } | |
| thead th:nth-child(3), | |
| thead th:nth-child(4) { | |
| display: none; | |
| } | |
| tbody td:nth-child(3), | |
| tbody td:nth-child(4) { | |
| display: none; | |
| } | |
| .control input[type="search"], | |
| .control select { | |
| min-width: 100%; | |
| } | |
| } | |
| /* Pulse animasyonu - yükleme sırasında */ | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .loading { | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |