diff --git a/web/static/css/cairn.css b/web/static/css/cairn.css index 16f6924..9252f6b 100644 --- a/web/static/css/cairn.css +++ b/web/static/css/cairn.css @@ -1,472 +1,531 @@ -@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Fira+Code:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Fira+Code:wght@400;500&display=swap'); :root { - --bg: #0a0709; - --bg-surface: #151015; - --bg-hover: #1f1520; - --border: #2d1a28; - --border-glow: #4a1530; - --text: #d4c5cc; - --text-muted: #7a6670; - --accent: #e83050; - --accent-hover: #ff4d6a; - --accent-glow: rgba(232, 48, 80, 0.4); - --accent-glow-soft: rgba(232, 48, 80, 0.15); - --danger: #ff3344; - --warning: #c4943a; - --success: #4a8c5c; - --bone: #c4b5a0; - --bone-dim: #7a6e5f; - --sidebar-width: 240px; - --radius: 4px; - --font-heading: 'Cinzel', 'Georgia', serif; - --font-mono: 'Fira Code', 'SF Mono', 'Cascadia Code', monospace; + --bg: #080508; + --bg-surface: #100b10; + --bg-hover: #1a1018; + --border: #301828; + --border-glow: #501838; + --text: #c8b8be; + --text-muted: #6a545e; + --accent: #e02848; + --accent-hover: #ff3860; + --accent-glow: rgba(224, 40, 72, 0.5); + --accent-glow-soft: rgba(224, 40, 72, 0.2); + --danger: #ff2233; + --warning: #b8862e; + --success: #3d7a4a; + --bone: #b8a890; + --bone-dim: #685848; + --ember: #cc3040; + --sidebar-width: 220px; + --radius: 2px; + --font-heading: 'Cinzel Decorative', 'Georgia', serif; + --font-mono: 'Fira Code', 'Courier New', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: 'Georgia', 'Times New Roman', serif; + font-size: 14px; background: var(--bg); + background-image: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(100, 20, 40, 0.015) 2px, + rgba(100, 20, 40, 0.015) 4px + ); color: var(--text); display: flex; min-height: 100vh; } -/* Sidebar */ +/* ======= SIDEBAR ======= */ .sidebar { width: var(--sidebar-width); background: var(--bg-surface); - border-right: 1px solid var(--border); - padding: 1.5rem 0; + border-right: 2px ridge #3a1828; + padding: 0; position: fixed; top: 0; bottom: 0; overflow-y: auto; - box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; } .sidebar-header { - padding: 0 1.25rem 1rem; - border-bottom: 1px solid var(--border); - margin-bottom: 0.5rem; + padding: 1.25rem 1rem 1rem; + border-bottom: 2px groove #3a1828; + text-align: center; } .logo { font-family: var(--font-heading); - font-size: 1.5rem; + font-size: 1.4rem; font-weight: 700; color: var(--accent); - text-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(232, 48, 80, 0.2); - letter-spacing: 0.15em; + text-shadow: + 0 0 10px var(--accent-glow), + 0 0 30px rgba(224, 40, 72, 0.3), + 0 0 60px rgba(224, 40, 72, 0.1); + letter-spacing: 0.2em; text-transform: uppercase; + animation: logo-pulse 4s ease-in-out infinite; } -.logo-skull { +@keyframes logo-pulse { + 0%, 100% { text-shadow: 0 0 10px var(--accent-glow), 0 0 30px rgba(224, 40, 72, 0.3); } + 50% { text-shadow: 0 0 15px var(--accent-glow), 0 0 40px rgba(224, 40, 72, 0.45), 0 0 70px rgba(224, 40, 72, 0.15); } +} +.logo-sigil { display: block; - font-size: 2rem; + font-size: 1.8rem; line-height: 1; - margin-bottom: 0.25rem; - filter: drop-shadow(0 0 8px var(--accent-glow)); + margin-bottom: 0.35rem; + color: var(--accent); + filter: drop-shadow(0 0 6px var(--accent-glow)); + letter-spacing: 0.3em; } -.nav-links { list-style: none; padding-top: 0.5rem; } +.nav-links { list-style: none; padding: 0.5rem 0; flex: 1; } .nav-links li { position: relative; } .nav-links a { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.625rem 1.25rem; + gap: 0.6rem; + padding: 0.55rem 1rem; color: var(--text-muted); text-decoration: none; - font-size: 0.85rem; - transition: all 0.2s; - border-left: 2px solid transparent; + font-size: 0.82rem; + font-family: 'Georgia', serif; + transition: all 0.15s; + border-left: 3px solid transparent; } .nav-links a:hover { color: var(--accent-hover); - background: var(--bg-hover); + background: linear-gradient(90deg, rgba(224, 40, 72, 0.1) 0%, transparent 100%); border-left-color: var(--accent); - text-shadow: 0 0 12px var(--accent-glow); + text-shadow: 0 0 10px var(--accent-glow); } .nav-icon { - font-size: 1rem; - width: 1.5rem; + font-size: 0.95rem; + width: 1.2rem; text-align: center; - filter: grayscale(0.3); + color: var(--bone-dim); +} +.nav-links a:hover .nav-icon { + color: var(--accent); + filter: drop-shadow(0 0 4px var(--accent-glow)); } .sidebar-divider { border: none; - border-top: 1px solid var(--border); - margin: 0.75rem 1.25rem; + border-top: 1px dashed var(--border); + margin: 0.4rem 0.8rem; + opacity: 0.6; } .sidebar-footer { - padding: 1rem 1.25rem; - margin-top: auto; - border-top: 1px solid var(--border); - font-size: 0.7rem; + padding: 0.8rem 1rem; + border-top: 2px groove #3a1828; + font-size: 0.65rem; color: var(--bone-dim); font-family: var(--font-heading); - letter-spacing: 0.08em; + letter-spacing: 0.12em; + text-align: center; + text-transform: lowercase; } -/* Main content */ +/* ======= MAIN CONTENT ======= */ .content { margin-left: var(--sidebar-width); flex: 1; - padding: 2rem; + padding: 1.5rem 2rem; max-width: 1200px; } .page-header { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--border); + margin-bottom: 1.25rem; + padding-bottom: 0.75rem; + border-bottom: 2px groove #3a1828; } .page-header h2 { font-family: var(--font-heading); - font-size: 1.35rem; - font-weight: 600; + font-size: 1.2rem; + font-weight: 700; color: var(--bone); - letter-spacing: 0.06em; + letter-spacing: 0.08em; + text-shadow: 0 1px 3px rgba(0,0,0,0.5); } -/* Stats */ +/* ======= STATS ======= */ .stats-row { display: flex; - gap: 1rem; - margin-bottom: 2rem; + gap: 0.75rem; + margin-bottom: 1.5rem; } .stat-card { background: var(--bg-surface); - border: 1px solid var(--border); + border: 2px ridge #3a1828; border-radius: var(--radius); - padding: 1.25rem 1.5rem; + padding: 1rem 1.25rem; display: flex; flex-direction: column; - min-width: 160px; + min-width: 150px; position: relative; - overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .stat-card:hover { border-color: var(--border-glow); - box-shadow: 0 0 15px var(--accent-glow-soft), inset 0 0 15px rgba(232, 48, 80, 0.05); + box-shadow: + 0 0 12px var(--accent-glow-soft), + inset 0 0 20px rgba(224, 40, 72, 0.06); } .stat-value { font-family: var(--font-heading); - font-size: 2rem; + font-size: 1.75rem; font-weight: 700; color: var(--accent); - text-shadow: 0 0 15px var(--accent-glow); + text-shadow: 0 0 12px var(--accent-glow), 0 0 25px rgba(224, 40, 72, 0.2); } .stat-label { - font-size: 0.75rem; + font-size: 0.7rem; color: var(--text-muted); - margin-top: 0.25rem; + margin-top: 0.2rem; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.1em; + font-family: 'Georgia', serif; } -/* Tables */ +/* ======= TABLES ======= */ .table { width: 100%; border-collapse: collapse; - font-size: 0.875rem; + font-size: 0.82rem; + border: 1px solid var(--border); } .table th { text-align: left; - padding: 0.75rem 1rem; + padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--border-glow); + border-right: 1px solid rgba(48, 24, 40, 0.3); + background: rgba(16, 8, 14, 0.6); color: var(--bone-dim); font-family: var(--font-heading); - font-weight: 600; - font-size: 0.7rem; + font-weight: 700; + font-size: 0.65rem; text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.12em; } +.table th:last-child { border-right: none; } .table td { - padding: 0.75rem 1rem; - border-bottom: 1px solid var(--border); + padding: 0.55rem 0.75rem; + border-bottom: 1px solid rgba(48, 24, 40, 0.4); + border-right: 1px solid rgba(48, 24, 40, 0.15); } +.table td:last-child { border-right: none; } .table tr:hover td { background: var(--bg-hover); - box-shadow: inset 2px 0 0 var(--accent); + box-shadow: inset 3px 0 0 var(--ember); } -/* Badges */ +/* ======= BADGES ======= */ .badge { display: inline-block; - padding: 0.2rem 0.5rem; - border-radius: 3px; - font-size: 0.75rem; + padding: 0.15rem 0.45rem; + border-radius: var(--radius); + font-size: 0.7rem; font-weight: 600; font-family: var(--font-mono); - border: 1px solid transparent; + border: 1px solid; + text-transform: uppercase; + letter-spacing: 0.04em; } .badge-coredump { - background: rgba(255, 51, 68, 0.12); + background: rgba(255, 34, 51, 0.1); color: var(--danger); - border-color: rgba(255, 51, 68, 0.25); - text-shadow: 0 0 8px rgba(255, 51, 68, 0.3); + border-color: rgba(255, 34, 51, 0.3); + text-shadow: 0 0 6px rgba(255, 34, 51, 0.4); } .badge-fuzz { - background: rgba(74, 140, 92, 0.12); + background: rgba(61, 122, 74, 0.1); color: var(--success); - border-color: rgba(74, 140, 92, 0.25); + border-color: rgba(61, 122, 74, 0.3); } .badge-sanitizer { - background: rgba(196, 148, 58, 0.12); + background: rgba(184, 134, 46, 0.1); color: var(--warning); - border-color: rgba(196, 148, 58, 0.25); + border-color: rgba(184, 134, 46, 0.3); } .badge-simulation { - background: rgba(232, 48, 80, 0.1); + background: rgba(224, 40, 72, 0.08); color: var(--accent-hover); - border-color: rgba(232, 48, 80, 0.2); + border-color: rgba(224, 40, 72, 0.25); } -/* Buttons */ +/* ======= BUTTONS ======= */ .btn { display: inline-block; - padding: 0.5rem 1rem; + padding: 0.4rem 0.9rem; background: var(--bg-surface); color: var(--bone); - border: 1px solid var(--border); + border: 2px ridge #3a1828; border-radius: var(--radius); - font-size: 0.85rem; + font-size: 0.8rem; text-decoration: none; cursor: pointer; - transition: all 0.2s; - font-family: var(--font-heading); - letter-spacing: 0.04em; + transition: all 0.15s; + font-family: 'Georgia', serif; + letter-spacing: 0.03em; } .btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent-hover); - box-shadow: 0 0 12px var(--accent-glow-soft); - text-shadow: 0 0 8px var(--accent-glow); + box-shadow: 0 0 10px var(--accent-glow-soft); + text-shadow: 0 0 6px var(--accent-glow); } -.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8rem; } +.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.75rem; } -/* Code */ +/* ======= CODE ======= */ code { font-family: var(--font-mono); - font-size: 0.85em; - background: var(--bg-hover); - padding: 0.15rem 0.35rem; - border-radius: 3px; + font-size: 0.82em; + background: rgba(16, 8, 14, 0.8); + padding: 0.1rem 0.3rem; + border: 1px solid var(--border); + border-radius: var(--radius); color: var(--accent-hover); } .code-block { - background: var(--bg-surface); - border: 1px solid var(--border); - border-left: 3px solid var(--accent); + background: #0a060a; + border: 2px ridge #3a1828; + border-left: 4px solid var(--ember); border-radius: var(--radius); - padding: 1rem; + padding: 0.8rem; overflow-x: auto; font-family: var(--font-mono); - font-size: 0.8rem; - line-height: 1.6; + font-size: 0.78rem; + line-height: 1.5; white-space: pre-wrap; word-break: break-all; - box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6); } -/* Detail pages */ +/* ======= DETAIL PAGES ======= */ .detail-header { display: flex; align-items: center; - gap: 1rem; - margin-bottom: 1.5rem; + gap: 0.75rem; + margin-bottom: 1.25rem; } .detail-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 1rem; - margin-bottom: 2rem; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 0.75rem; + margin-bottom: 1.5rem; } .detail-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - padding: 1rem; - transition: border-color 0.3s; + padding: 0.75rem; + transition: border-color 0.2s; } .detail-item:hover { border-color: var(--border-glow); + box-shadow: 0 0 8px rgba(224, 40, 72, 0.08); } .detail-item label { display: block; font-family: var(--font-heading); - font-size: 0.7rem; + font-size: 0.6rem; color: var(--bone-dim); text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: 0.375rem; + letter-spacing: 0.1em; + margin-bottom: 0.3rem; } -.detail-actions { margin-top: 2rem; } +.detail-actions { margin-top: 1.5rem; } -/* Sections */ -.section { margin-bottom: 2rem; } +/* ======= SECTIONS ======= */ +.section { margin-bottom: 1.5rem; } .section h3 { - margin-bottom: 0.75rem; + margin-bottom: 0.6rem; font-family: var(--font-heading); - font-size: 1rem; + font-size: 0.95rem; color: var(--bone); - letter-spacing: 0.04em; + letter-spacing: 0.06em; + text-shadow: 0 1px 3px rgba(0,0,0,0.4); } -/* Utilities */ +/* ======= UTILITIES ======= */ .empty-state { color: var(--text-muted); - padding: 3rem; + padding: 2.5rem; text-align: center; - font-size: 0.9rem; + font-size: 0.85rem; font-style: italic; + border: 1px dashed var(--border); } .toolbar { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1rem; + margin-bottom: 0.75rem; } -.result-count { color: var(--text-muted); font-size: 0.875rem; } +.result-count { color: var(--text-muted); font-size: 0.82rem; } .pagination { display: flex; - gap: 0.5rem; + gap: 0.4rem; justify-content: center; - margin-top: 1.5rem; + margin-top: 1.25rem; } -/* Status badges */ +/* ======= STATUS BADGES ======= */ .badge-status-open { - background: rgba(255, 51, 68, 0.12); + background: rgba(255, 34, 51, 0.1); color: var(--danger); - border-color: rgba(255, 51, 68, 0.25); - text-shadow: 0 0 8px rgba(255, 51, 68, 0.4); + border-color: rgba(255, 34, 51, 0.35); + text-shadow: 0 0 6px rgba(255, 34, 51, 0.5); } .badge-status-resolved { - background: rgba(74, 140, 92, 0.12); + background: rgba(61, 122, 74, 0.1); color: var(--success); - border-color: rgba(74, 140, 92, 0.25); + border-color: rgba(61, 122, 74, 0.3); } -/* Campaign badges */ +/* ======= CAMPAIGN BADGES ======= */ .badge-campaign-running { - background: rgba(232, 48, 80, 0.1); + background: rgba(224, 40, 72, 0.08); color: var(--accent-hover); - border-color: rgba(232, 48, 80, 0.2); - text-shadow: 0 0 8px var(--accent-glow); + border-color: rgba(224, 40, 72, 0.25); + text-shadow: 0 0 6px var(--accent-glow); } .badge-campaign-finished { - background: rgba(74, 140, 92, 0.12); + background: rgba(61, 122, 74, 0.1); color: var(--success); - border-color: rgba(74, 140, 92, 0.25); + border-color: rgba(61, 122, 74, 0.3); } -/* Search */ +/* ======= SEARCH ======= */ .search-form { display: flex; - gap: 0.75rem; - margin-bottom: 1.5rem; + gap: 0.6rem; + margin-bottom: 1.25rem; } .search-input { flex: 1; - padding: 0.625rem 1rem; - background: var(--bg-surface); - border: 1px solid var(--border); + padding: 0.5rem 0.8rem; + background: #0a060a; + border: 2px ridge #3a1828; border-radius: var(--radius); color: var(--text); - font-size: 0.9rem; - transition: all 0.2s; + font-size: 0.85rem; + font-family: var(--font-mono); + transition: all 0.15s; } .search-input:focus { outline: none; border-color: var(--accent); - box-shadow: 0 0 12px var(--accent-glow-soft); + box-shadow: 0 0 10px var(--accent-glow-soft); } -/* Crash group detail */ +/* ======= CRASH GROUP DETAIL ======= */ .crashgroup-title { font-family: var(--font-heading); - font-size: 1.25rem; - margin-bottom: 1.5rem; + font-size: 1.1rem; + margin-bottom: 1.25rem; color: var(--bone); } -/* Regression */ +/* ======= REGRESSION ======= */ .form-row { display: flex; - gap: 0.75rem; + gap: 0.6rem; align-items: flex-end; } -.form-group { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; } +.form-group { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; } .form-group label { font-family: var(--font-heading); - font-size: 0.7rem; + font-size: 0.6rem; color: var(--bone-dim); text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.1em; } .form-group input { - padding: 0.625rem 1rem; - background: var(--bg-surface); - border: 1px solid var(--border); + padding: 0.5rem 0.8rem; + background: #0a060a; + border: 2px ridge #3a1828; border-radius: var(--radius); color: var(--text); - font-size: 0.9rem; - transition: all 0.2s; + font-size: 0.85rem; + font-family: var(--font-mono); + transition: all 0.15s; } .form-group input:focus { outline: none; border-color: var(--accent); - box-shadow: 0 0 12px var(--accent-glow-soft); + box-shadow: 0 0 10px var(--accent-glow-soft); } .regression-result { - border: 1px solid var(--border); + border: 2px ridge #3a1828; border-radius: var(--radius); - padding: 1.5rem; - margin-top: 1.5rem; + padding: 1.25rem; + margin-top: 1.25rem; } .regression-pass { border-color: var(--success); } .regression-fail { border-color: var(--danger); - box-shadow: 0 0 20px rgba(255, 51, 68, 0.15); + box-shadow: 0 0 15px rgba(255, 34, 51, 0.2); } .regression-verdict { font-family: var(--font-heading); - font-size: 1.1rem; - margin-bottom: 1rem; - letter-spacing: 0.04em; + font-size: 1rem; + margin-bottom: 0.75rem; + letter-spacing: 0.05em; } .regression-fail .regression-verdict { color: var(--danger); - text-shadow: 0 0 15px rgba(255, 51, 68, 0.4); + text-shadow: 0 0 12px rgba(255, 34, 51, 0.5); } .regression-pass .regression-verdict { color: var(--success); } .fingerprint-list { list-style: none; padding: 0; } -.fingerprint-list li { padding: 0.375rem 0; } +.fingerprint-list li { + padding: 0.3rem 0; + font-family: var(--font-mono); + font-size: 0.78rem; +} -/* Links */ -a { color: var(--accent); transition: all 0.2s; } +/* ======= LINKS ======= */ +a { color: var(--accent); text-decoration: none; transition: all 0.15s; } a:hover { color: var(--accent-hover); text-shadow: 0 0 8px var(--accent-glow); + text-decoration: underline; } -/* Scrollbar */ -::-webkit-scrollbar { width: 8px; height: 8px; } +/* ======= SCROLLBAR ======= */ +::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } -::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 4px; } -::-webkit-scrollbar-thumb:hover { background: var(--accent); } +::-webkit-scrollbar-thumb { + background: #2a1420; + border: 1px solid #3a1828; +} +::-webkit-scrollbar-thumb:hover { background: var(--border-glow); } + +/* ======= SELECTION ======= */ +::selection { + background: rgba(224, 40, 72, 0.35); + color: #fff; +} diff --git a/web/templates/layout.html b/web/templates/layout.html index ef8d554..bd8ab71 100644 --- a/web/templates/layout.html +++ b/web/templates/layout.html @@ -9,18 +9,18 @@