diff --git a/assets/css/custom.css b/assets/css/custom.css index 932a4f1..46ada91 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,29 +1,93 @@ /* ========================================================================== - GITEA CYBERDROP PRO THEME — High-Performance Glassmorphism & Cyber 3D + GITEA PREMIUM CYBER OBSIDIAN THEME — ULTRA LEGIBILITY & AAA POLISH Domain: gitea.free-warez.win ========================================================================== */ -/* 1. Global Setup, Viewport & Typography */ +/* 1. Global CSS Variables & Base Palette */ +:root, [data-theme], html, body { + --color-text: #f8fafc !important; + --color-text-light: #e2e8f0 !important; + --color-text-light-1: #cbd5e1 !important; + --color-text-light-2: #94a3b8 !important; + --color-text-light-3: #64748b !important; + --color-text-dark: #ffffff !important; + + --color-body: #060913 !important; + --color-box-body: rgba(12, 18, 34, 0.94) !important; + --color-box-header: rgba(18, 26, 48, 0.96) !important; + --color-navbar: rgba(8, 12, 24, 0.92) !important; + --color-menu: rgba(11, 17, 33, 0.92) !important; + --color-card: rgba(12, 18, 34, 0.92) !important; + --color-footer: rgba(8, 12, 24, 0.94) !important; + + --color-primary: #00f2fe !important; + --color-primary-contrast: #030712 !important; + --color-primary-dark-1: #0ea5e9 !important; + --color-primary-dark-2: #0284c7 !important; + --color-primary-hover: #38bdf8 !important; + --color-primary-active: #0ea5e9 !important; + + --color-secondary: rgba(30, 41, 59, 0.85) !important; + --color-secondary-dark-1: #1e293b !important; + --color-secondary-dark-2: #0f172a !important; + + --color-border: rgba(56, 189, 248, 0.25) !important; + --color-border-hover: rgba(0, 242, 254, 0.5) !important; + + --color-success: #10b981 !important; + --color-warning: #f59e0b !important; + --color-danger: #ef4444 !important; +} + +/* 2. Global Typography & Atmospheric Dark Canvas */ html, body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; - background: #050811 url('/assets/img/cyber_bg.jpg') no-repeat center center fixed !important; + background: #060913 url('/assets/img/cyber_bg.jpg') no-repeat center center fixed !important; background-size: cover !important; - color: #f1f5f9 !important; + color: #f8fafc !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } -/* Ambient dark vignette over background image */ +/* Atmospheric dark layer: ensures 100% text contrast across entire page */ body::before { - content: ''; - position: fixed; - inset: 0; + content: '' !important; + position: fixed !important; + inset: 0 !important; background: - radial-gradient(ellipse at 50% 15%, rgba(0, 242, 254, 0.12) 0%, transparent 65%), - radial-gradient(ellipse at 85% 75%, rgba(16, 185, 129, 0.08) 0%, transparent 60%), - linear-gradient(180deg, rgba(5, 8, 17, 0.65) 0%, rgba(5, 8, 17, 0.88) 100%) !important; - pointer-events: none; - z-index: -1; + radial-gradient(ellipse at 50% 10%, rgba(0, 242, 254, 0.10) 0%, transparent 60%), + radial-gradient(ellipse at 85% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 60%), + linear-gradient(180deg, rgba(6, 9, 18, 0.82) 0%, rgba(6, 9, 18, 0.94) 100%) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + pointer-events: none !important; + z-index: -1 !important; +} + +/* Typography Defaults & Contrast */ +h1, h2, h3, h4, h5, h6, .header, .title { + color: #ffffff !important; + font-weight: 700 !important; + letter-spacing: -0.015em !important; +} + +p, span, div, .text, .description, label { + color: #e2e8f0 !important; +} + +.muted, .text.muted, .text.grey, .time-since, .text-light, .text-light-2 { + color: #94a3b8 !important; +} + +a { + color: #00f2fe !important; + text-decoration: none !important; + transition: all 0.2s ease !important; +} + +a:hover { + color: #38bdf8 !important; + text-shadow: 0 0 10px rgba(0, 242, 254, 0.5) !important; } /* Code & Technical Typography */ @@ -35,7 +99,7 @@ code, pre, kbd, samp, font-family: 'JetBrains Mono', monospace !important; } -/* 2. Full-Width & Spacious Layout */ +/* 3. Full-Width & Spacious Layout */ .ui.container:not(.fluid) { width: min(1560px, 94vw) !important; max-width: 1620px !important; @@ -47,39 +111,39 @@ code, pre, kbd, samp, background: transparent !important; } -/* 3. Top Navigation Bar */ +/* 4. Top Navigation Bar */ .ui.top.menu { - background: rgba(8, 13, 26, 0.85) !important; + background: rgba(8, 12, 24, 0.92) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-bottom: 1px solid rgba(0, 242, 254, 0.25) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; - padding: 4px 16px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; + padding: 4px 18px !important; } .ui.menu .item { - color: #cbd5e1 !important; - font-weight: 500 !important; + color: #e2e8f0 !important; + font-weight: 600 !important; transition: all 0.25s ease !important; } .ui.menu a.item:hover { color: #00f2fe !important; - background: rgba(0, 242, 254, 0.1) !important; - border-radius: 8px !important; + background: rgba(0, 242, 254, 0.12) !important; + border-radius: 10px !important; } .ui.menu a.active.item { color: #00f2fe !important; - background: rgba(0, 242, 254, 0.15) !important; - border-radius: 8px !important; - box-shadow: 0 0 12px rgba(0, 242, 254, 0.25) !important; + background: rgba(0, 242, 254, 0.18) !important; + border-radius: 10px !important; + box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important; } /* Brand Navbar Icon */ .item.brand img.logo { - width: 34px !important; - height: 34px !important; + width: 36px !important; + height: 36px !important; filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.6)) !important; border-radius: 8px !important; transition: transform 0.3s ease !important; @@ -89,10 +153,10 @@ code, pre, kbd, samp, transform: scale(1.1) rotate(5deg) !important; } -/* 4. Cyber Hero Section (Home Page) */ +/* 5. Cyber Hero Section on Home Page */ .cyber-hero-container { position: relative; - padding: 60px 20px 40px; + padding: 60px 20px 35px; display: flex; flex-direction: column; align-items: center; @@ -106,10 +170,10 @@ code, pre, kbd, samp, top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 600px; - height: 300px; - background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, rgba(16, 185, 129, 0.1) 50%, transparent 80%); - filter: blur(50px); + width: 650px; + height: 320px; + background: radial-gradient(circle, rgba(0, 242, 254, 0.22) 0%, rgba(16, 185, 129, 0.12) 50%, transparent 80%); + filter: blur(60px); pointer-events: none; z-index: -1; } @@ -118,38 +182,38 @@ code, pre, kbd, samp, display: inline-flex; align-items: center; justify-content: center; - background: rgba(11, 17, 33, 0.55); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(0, 242, 254, 0.25); + background: rgba(11, 17, 33, 0.7); + backdrop-filter: blur(24px) saturate(180%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + border: 1px solid rgba(0, 242, 254, 0.3); border-radius: 28px; - padding: 18px 36px; - box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 242, 254, 0.18); + padding: 20px 40px; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 242, 254, 0.22); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 24px; } .cyber-banner-wrapper:hover { transform: translateY(-3px) scale(1.015); - border-color: rgba(0, 242, 254, 0.5); - box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(0, 242, 254, 0.3); + border-color: rgba(0, 242, 254, 0.55); + box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 55px rgba(0, 242, 254, 0.35); } .cyber-banner-logo { - width: min(640px, 88vw); + width: min(660px, 88vw); height: auto; max-height: 140px; object-fit: contain; - filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.45)); + filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.5)); } .cyber-hero-subtitle { font-size: 1.25rem; - font-weight: 400; - color: #94a3b8; - max-width: 800px; - margin: 0 auto 32px; - line-height: 1.6; + font-weight: 500; + color: #e2e8f0 !important; + max-width: 820px; + margin: 0 auto 34px; + line-height: 1.65; letter-spacing: 0.01em; } @@ -160,16 +224,16 @@ code, pre, kbd, samp, flex-wrap: wrap; } -/* 5. Buttons & Micro-Interactions */ +/* 6. High-Contrast Buttons */ .cyber-btn-primary, .ui.primary.button, .ui.green.button, .ui.positive.button { background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important; - color: #030712 !important; + color: #020617 !important; font-weight: 700 !important; font-size: 1rem !important; - padding: 13px 26px !important; + padding: 13px 28px !important; border-radius: 12px !important; border: none !important; - box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35) !important; + box-shadow: 0 4px 20px rgba(0, 242, 254, 0.4) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; display: inline-flex !important; @@ -179,20 +243,20 @@ code, pre, kbd, samp, .cyber-btn-primary:hover, .ui.primary.button:hover, .ui.green.button:hover, .ui.positive.button:hover { transform: translateY(-2px) scale(1.02) !important; - box-shadow: 0 8px 30px rgba(0, 242, 254, 0.55) !important; - filter: brightness(1.12) !important; + box-shadow: 0 8px 30px rgba(0, 242, 254, 0.6) !important; + filter: brightness(1.15) !important; color: #000000 !important; } .cyber-btn-secondary, .ui.basic.button, .ui.button:not(.primary):not(.green):not(.positive) { - background: rgba(19, 28, 50, 0.75) !important; - color: #f8fafc !important; + background: rgba(19, 28, 50, 0.85) !important; + color: #ffffff !important; font-weight: 600 !important; font-size: 1rem !important; padding: 13px 24px !important; border-radius: 12px !important; - border: 1px solid rgba(56, 189, 248, 0.25) !important; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; + border: 1px solid rgba(56, 189, 248, 0.35) !important; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; transition: all 0.25s ease !important; display: inline-flex !important; align-items: center !important; @@ -200,196 +264,89 @@ code, pre, kbd, samp, } .cyber-btn-secondary:hover, .ui.basic.button:hover, .ui.button:not(.primary):not(.green):not(.positive):hover { - background: rgba(30, 45, 78, 0.9) !important; + background: rgba(30, 45, 78, 0.95) !important; border-color: #00f2fe !important; color: #00f2fe !important; transform: translateY(-2px) !important; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 242, 254, 0.2) !important; + box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 242, 254, 0.25) !important; } -/* 6. Feature Cards on Home Page */ +/* 7. Homepage Feature Cards */ .cyber-features-grid { margin-top: 40px !important; margin-bottom: 60px !important; } .cyber-feature-card { - background: rgba(11, 17, 33, 0.82); - backdrop-filter: blur(24px) saturate(180%); - -webkit-backdrop-filter: blur(24px) saturate(180%); - border: 1px solid rgba(0, 242, 254, 0.2); - border-radius: 20px; - padding: 32px; - display: flex; - gap: 20px; - align-items: flex-start; - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); - transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); - height: 100%; + background: rgba(12, 18, 34, 0.94) !important; + backdrop-filter: blur(28px) saturate(180%) !important; + -webkit-backdrop-filter: blur(28px) saturate(180%) !important; + border: 1px solid rgba(0, 242, 254, 0.28) !important; + border-radius: 20px !important; + padding: 32px !important; + display: flex !important; + gap: 22px !important; + align-items: flex-start !important; + box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + height: 100% !important; } .cyber-feature-card:hover { - transform: translateY(-4px); - border-color: rgba(0, 242, 254, 0.45); - box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 254, 0.15); + transform: translateY(-4px) !important; + border-color: rgba(0, 242, 254, 0.55) !important; + box-shadow: 0 20px 55px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 242, 254, 0.2) !important; } .cyber-card-icon { - background: rgba(0, 242, 254, 0.12); - border: 1px solid rgba(0, 242, 254, 0.3); - border-radius: 14px; - padding: 14px; - display: flex; - align-items: center; - justify-content: center; - color: #00f2fe; - box-shadow: 0 0 15px rgba(0, 242, 254, 0.25); - flex-shrink: 0; + background: rgba(0, 242, 254, 0.15) !important; + border: 1px solid rgba(0, 242, 254, 0.35) !important; + border-radius: 14px !important; + padding: 14px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + color: #00f2fe !important; + box-shadow: 0 0 18px rgba(0, 242, 254, 0.3) !important; + flex-shrink: 0 !important; } .cyber-card-icon svg { - width: 28px; - height: 28px; + width: 28px !important; + height: 28px !important; + fill: #00f2fe !important; } .cyber-card-body h3 { - margin: 0 0 8px; - font-size: 1.25rem; - font-weight: 700; - color: #f8fafc; + margin: 0 0 10px !important; + font-size: 1.3rem !important; + font-weight: 700 !important; + color: #ffffff !important; } .cyber-card-body p { - margin: 0; - color: #94a3b8; - line-height: 1.6; - font-size: 0.95rem; + margin: 0 !important; + color: #cbd5e1 !important; + line-height: 1.65 !important; + font-size: 1rem !important; } -/* 7. Glassmorphism Repository & Content Containers */ -.ui.segment, -.ui.attached.segment, -.repository.file.list, -.ui.card, -.box, -.issue-content-left, -.issue-content-right { - background: rgba(11, 17, 33, 0.82) !important; - backdrop-filter: blur(24px) saturate(180%) !important; - -webkit-backdrop-filter: blur(24px) saturate(180%) !important; - border: 1px solid rgba(56, 189, 248, 0.22) !important; - border-radius: 16px !important; - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important; - color: #f1f5f9 !important; -} - -.ui.attached.header { - background: rgba(15, 23, 42, 0.92) !important; - border: 1px solid rgba(56, 189, 248, 0.22) !important; - border-radius: 16px 16px 0 0 !important; - color: #38bdf8 !important; - font-weight: 700 !important; -} - -/* Repository File List */ -#repo-files-table { - border-radius: 16px !important; - overflow: hidden !important; -} - -#repo-files-table tr { - transition: background 0.2s ease !important; -} - -#repo-files-table tr:hover { - background: rgba(0, 242, 254, 0.08) !important; -} - -/* File Tree and Breadcrumbs */ -.repo-header, .ui.breadcrumb { - color: #94a3b8 !important; -} - -.ui.breadcrumb a, .repo-header a { - color: #00f2fe !important; - font-weight: 600 !important; - text-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important; -} - -/* 8. Code View, Diffs & Markdown */ -.file-view, .file-content, .code-view, .markup { - background: rgba(6, 10, 22, 0.88) !important; - border: 1px solid rgba(56, 189, 248, 0.2) !important; - border-radius: 16px !important; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5) !important; -} - -.lines-num { - color: #64748b !important; - background: rgba(3, 7, 18, 0.5) !important; - border-right: 1px solid rgba(255, 255, 255, 0.08) !important; -} - -/* 9. Form Inputs & Textareas */ -input, textarea, .ui.input>input, .ui.selection.dropdown { - background: rgba(6, 10, 22, 0.7) !important; - border: 1px solid rgba(148, 163, 184, 0.22) !important; - border-radius: 10px !important; - color: #f8fafc !important; - padding: 10px 14px !important; - transition: all 0.25s ease !important; -} - -input:focus, textarea:focus, .ui.input>input:focus, .ui.selection.dropdown:focus { - border-color: #00f2fe !important; - background: rgba(6, 10, 22, 0.9) !important; - box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important; -} - -/* 10. Footer */ -footer, .ui.footer { - background: rgba(8, 13, 26, 0.88) !important; - backdrop-filter: blur(16px) !important; - border-top: 1px solid rgba(0, 242, 254, 0.2) !important; - color: #94a3b8 !important; - padding: 24px 0 !important; - margin-top: 50px !important; -} - -/* 11. Custom Modern Scrollbar */ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} -::-webkit-scrollbar-track { - background: rgba(5, 8, 17, 0.8); -} -::-webkit-scrollbar-thumb { - background: rgba(0, 242, 254, 0.4); - border-radius: 4px; -} -::-webkit-scrollbar-thumb:hover { - background: rgba(0, 242, 254, 0.7); -} - -/* ========================================================================== - 12. EXPLORE & DASHBOARD REPOSITORY LISTS (Cyber Glass Cards) - ========================================================================== */ +/* 8. Repository Lists & Explore View */ .secondary-nav, overflow-menu.secondary-nav { - background: rgba(11, 17, 33, 0.8) !important; - backdrop-filter: blur(20px) !important; - -webkit-backdrop-filter: blur(20px) !important; - border: 1px solid rgba(0, 242, 254, 0.2) !important; + background: rgba(11, 17, 33, 0.9) !important; + backdrop-filter: blur(24px) !important; + -webkit-backdrop-filter: blur(24px) !important; + border: 1px solid rgba(0, 242, 254, 0.25) !important; border-radius: 14px !important; padding: 6px 14px !important; margin-bottom: 24px !important; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; } .secondary-nav .item, overflow-menu.secondary-nav .item { - color: #94a3b8 !important; + color: #cbd5e1 !important; font-weight: 600 !important; - padding: 8px 18px !important; + padding: 9px 20px !important; border-radius: 10px !important; transition: all 0.25s ease !important; border: none !important; @@ -397,32 +354,26 @@ footer, .ui.footer { .secondary-nav .item:hover, overflow-menu.secondary-nav .item:hover { color: #00f2fe !important; - background: rgba(0, 242, 254, 0.1) !important; + background: rgba(0, 242, 254, 0.12) !important; } .secondary-nav .active.item, overflow-menu.secondary-nav .active.item { - color: #030712 !important; + color: #020617 !important; background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important; - box-shadow: 0 0 15px rgba(0, 242, 254, 0.4) !important; + box-shadow: 0 0 18px rgba(0, 242, 254, 0.45) !important; + font-weight: 700 !important; border: none !important; } .secondary-nav .active.item svg, overflow-menu.secondary-nav .active.item svg { - fill: #030712 !important; -} - -/* Filter & Search Bar */ -.ui.secondary.filter.menu { - background: transparent !important; - gap: 12px !important; - margin-bottom: 20px !important; + fill: #020617 !important; } .ui.secondary.filter.menu .ui.input>input { - background: rgba(6, 10, 22, 0.75) !important; - border: 1px solid rgba(0, 242, 254, 0.25) !important; + background: rgba(6, 10, 22, 0.85) !important; + border: 1px solid rgba(0, 242, 254, 0.3) !important; border-radius: 12px !important; - color: #f8fafc !important; + color: #ffffff !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important; } @@ -432,74 +383,185 @@ footer, .ui.footer { } .ui.secondary.filter.menu .ui.dropdown { - background: rgba(15, 23, 42, 0.8) !important; - border: 1px solid rgba(56, 189, 248, 0.25) !important; + background: rgba(15, 23, 42, 0.9) !important; + border: 1px solid rgba(56, 189, 248, 0.3) !important; border-radius: 12px !important; - color: #cbd5e1 !important; + color: #f1f5f9 !important; } -/* Repository List Items */ .flex-divided-list.items-with-main { border: none !important; } .flex-divided-list .item { - background: rgba(11, 17, 33, 0.82) !important; - backdrop-filter: blur(24px) saturate(180%) !important; - -webkit-backdrop-filter: blur(24px) saturate(180%) !important; - border: 1px solid rgba(0, 242, 254, 0.18) !important; + background: rgba(12, 18, 34, 0.92) !important; + backdrop-filter: blur(28px) saturate(180%) !important; + -webkit-backdrop-filter: blur(28px) saturate(180%) !important; + border: 1px solid rgba(0, 242, 254, 0.22) !important; border-radius: 16px !important; - margin-bottom: 12px !important; - padding: 18px 24px !important; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; + margin-bottom: 14px !important; + padding: 20px 26px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .flex-divided-list .item:hover { transform: translateY(-2px) !important; - border-color: rgba(0, 242, 254, 0.45) !important; - box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.15) !important; + border-color: rgba(0, 242, 254, 0.5) !important; + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(0, 242, 254, 0.2) !important; } .flex-divided-list .item .item-leading svg { fill: #00f2fe !important; - filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6)) !important; + filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.6)) !important; } .flex-divided-list .item a.name { color: #00f2fe !important; - font-size: 1.15rem !important; + font-size: 1.18rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; - transition: color 0.2s ease !important; -} - -.flex-divided-list .item a.name:hover { - color: #38bdf8 !important; - text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important; } .flex-divided-list .item .description { - color: #94a3b8 !important; - font-size: 0.95rem !important; - margin-top: 6px !important; - line-height: 1.5 !important; + color: #e2e8f0 !important; + font-size: 0.98rem !important; + margin-top: 8px !important; + line-height: 1.55 !important; } -/* Pagination Menu */ -.ui.pagination.menu { - background: rgba(11, 17, 33, 0.8) !important; - border: 1px solid rgba(0, 242, 254, 0.2) !important; - border-radius: 12px !important; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; +/* 9. Repository Page, File Table & Code Viewer */ +.ui.segment, +.ui.attached.segment, +.repository.file.list, +.ui.card, +.box, +.issue-content-left, +.issue-content-right { + background: rgba(12, 18, 34, 0.92) !important; + backdrop-filter: blur(24px) saturate(180%) !important; + -webkit-backdrop-filter: blur(24px) saturate(180%) !important; + border: 1px solid rgba(56, 189, 248, 0.25) !important; + border-radius: 16px !important; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important; + color: #f1f5f9 !important; } -.ui.pagination.menu .item { - color: #cbd5e1 !important; -} - -.ui.pagination.menu .active.item { - color: #030712 !important; - background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important; +.ui.attached.header { + background: rgba(16, 24, 46, 0.96) !important; + border: 1px solid rgba(56, 189, 248, 0.25) !important; + border-radius: 16px 16px 0 0 !important; + color: #38bdf8 !important; font-weight: 700 !important; + padding: 14px 20px !important; +} + +#repo-files-table { + background: rgba(11, 17, 33, 0.94) !important; + border-radius: 16px !important; + overflow: hidden !important; +} + +#repo-files-table th { + background: rgba(16, 24, 46, 0.96) !important; + color: #ffffff !important; + font-weight: 700 !important; + border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important; +} + +#repo-files-table td { + color: #f1f5f9 !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; + padding: 12px 16px !important; +} + +#repo-files-table a { + color: #38bdf8 !important; + font-weight: 500 !important; +} + +#repo-files-table a:hover { + color: #00f2fe !important; + text-shadow: 0 0 8px rgba(0, 242, 254, 0.6) !important; +} + +#repo-files-table tr:hover { + background: rgba(0, 242, 254, 0.1) !important; +} + +/* Breadcrumbs & Branch Selector */ +.ui.breadcrumb a, .repo-header a { + color: #00f2fe !important; + font-weight: 700 !important; + font-size: 1.1rem !important; + text-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important; +} + +.ui.breadcrumb .divider { + color: #64748b !important; +} + +/* Code Viewer & Diffs */ +.file-view, .file-content, .code-view, .markup { + background: rgba(4, 8, 18, 0.92) !important; + border: 1px solid rgba(56, 189, 248, 0.22) !important; + border-radius: 16px !important; + box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.6) !important; + color: #f8fafc !important; +} + +.lines-num { + color: #64748b !important; + background: rgba(2, 5, 12, 0.6) !important; + border-right: 1px solid rgba(255, 255, 255, 0.08) !important; +} + +.lines-code { + color: #f8fafc !important; +} + +/* 10. Form Inputs & Dropdowns */ +input, textarea, .ui.input>input, .ui.selection.dropdown { + background: rgba(6, 10, 22, 0.8) !important; + border: 1px solid rgba(148, 163, 184, 0.25) !important; + border-radius: 10px !important; + color: #ffffff !important; + padding: 11px 15px !important; + transition: all 0.25s ease !important; +} + +input:focus, textarea:focus, .ui.input>input:focus, .ui.selection.dropdown:focus { + border-color: #00f2fe !important; + background: rgba(6, 10, 22, 0.95) !important; + box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important; +} + +/* 11. Footer */ +footer, .ui.footer { + background: rgba(8, 12, 24, 0.94) !important; + backdrop-filter: blur(20px) !important; + border-top: 1px solid rgba(0, 242, 254, 0.25) !important; + color: #94a3b8 !important; + padding: 24px 0 !important; + margin-top: 60px !important; +} + +footer a, .ui.footer a { + color: #38bdf8 !important; +} + +/* 12. Custom Modern Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} +::-webkit-scrollbar-track { + background: rgba(5, 8, 17, 0.9); +} +::-webkit-scrollbar-thumb { + background: rgba(0, 242, 254, 0.45); + border-radius: 4px; +} +::-webkit-scrollbar-thumb:hover { + background: rgba(0, 242, 254, 0.75); }