diff --git a/app/static/style.css b/app/static/style.css index 2b4df62..7c38613 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -1,372 +1,167 @@ +/* ========================================================================== + SneakyScope Stylesheet + Consolidated + Commented + ========================================================================== */ + +/* ========================================================================== + 0) Theme Variables + -------------------------------------------------------------------------- */ :root { - font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + /* Typography */ + --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + + /* Colors (derived from your current palette) */ + --bg: #0b0f14; + --text: #e6edf3; + --header-bg: #0f1720; + --card-bg: #111826; + --border: #1f2a36; /* darker border */ + --border-2: #243041; /* lighter border used on inputs/tables */ + --input-bg: #0b1220; + + --link: #7dd3fc; + --link-hover: #38bdf8; + + /* Accents */ + --accent-pill-bg: rgba(59,130,246,.18); + --accent-pill-bd: rgba(59,130,246,.45); + + /* Radius & Shadows */ + --radius: 12px; } +/* ========================================================================== + 1) Base / Reset + -------------------------------------------------------------------------- */ +html { scroll-behavior: smooth; } + +:root { font-family: var(--font-sans); } + body { - margin: 0; - background: #0b0f14; - color: #e6edf3; + margin: 0; + background: var(--bg); + color: var(--text); } +a { + color: var(--link); + text-decoration: underline; +} +a:hover { color: var(--link-hover); } + +img { + max-width: 100%; + height: auto; + border-radius: 8px; + border: 1px solid var(--border-2); +} + +/* ========================================================================== + 2) Layout (header/footer/main/cards) + -------------------------------------------------------------------------- */ header, footer { - padding: 1rem 1.25rem; - background: #0f1720; - border-bottom: 1px solid #1f2a36; + padding: 1rem 1.25rem; + background: var(--header-bg); + border-bottom: 1px solid var(--border); } -/* ===== main: now full-width (no 960px cap) ===== */ main { - padding: 1.5rem 2rem; /* a bit more horizontal breathing room */ - max-width: 100%; /* remove fixed cap */ - width: 100%; - margin: 0; /* no auto centering since we’re full-width */ - box-sizing: border-box; + /* full-width layout */ + padding: 1.5rem 2rem; + max-width: 100%; + width: 100%; + margin: 0; + box-sizing: border-box; } .card { - background: #111826; - padding: 1rem; - border: 1px solid #1f2a36; - border-radius: 12px; - margin-bottom: 1rem; + background: var(--card-bg); + padding: 1rem; + border: 1px solid var(--border); + border-radius: var(--radius); + margin-bottom: 1rem; + /* anchors don't hide under sticky nav */ + scroll-margin-top: 72px; } +/* ========================================================================== + 3) Form Controls & Buttons + -------------------------------------------------------------------------- */ label { - display: block; - margin-bottom: 0.5rem; + display: block; + margin-bottom: 0.5rem; } -input[type=url] { - width: 100%; - padding: 0.7rem; - border-radius: 8px; - border: 1px solid #243041; - background: #0b1220; - color: #e6edf3; +input[type="url"] { + width: 100%; + padding: 0.7rem; + border-radius: 8px; + border: 1px solid var(--border-2); + background: var(--input-bg); + color: var(--text); } button, .button { - display: inline-block; - margin-top: 0.75rem; - padding: 0.6rem 1rem; - border-radius: 8px; - border: 1px solid #243041; - background: #1a2535; - color: #e6edf3; - text-decoration: none; -} - -.flash { - list-style: none; - padding: 0.5rem 1rem; -} - -.flash .error { - color: #ff6b6b; -} - -.grid { - display: grid; - grid-template-columns: 150px 1fr; - gap: 0.5rem 1rem; -} - -img { - max-width: 100%; - height: auto; - border-radius: 8px; - border: 1px solid #243041; -} - -pre.code { - white-space: pre-wrap; - word-break: break-all; - background: #0b1220; - padding: 0.75rem; - border-radius: 8px; - border: 1px solid #243041; -} - -/* Links */ -a { - color: #7dd3fc; /* Soft cyan for dark background */ - text-decoration: underline; -} - -a:hover { - color: #38bdf8; /* Slightly brighter on hover */ -} - -/* Accordion / details summary */ -details summary { - cursor: pointer; - padding: 0.5rem; - font-weight: bold; - border-radius: 8px; - background: #111826; - border: 1px solid #1f2a36; - margin-bottom: 0.5rem; - transition: background 0.3s ease; -} - -details[open] summary { - background: #1a2535; /* Slightly lighter when expanded */ -} - -details > ul, details > table { - padding-left: 1rem; - margin: 0.5rem 0; -} - -/* Highlight flagged forms */ -details.flagged summary { - border-left: 4px solid #ff6b6b; /* Red accent for flagged forms */ -} - -/* Smooth collapse/expand */ -details ul, details p { - transition: all 0.3s ease; -} - -/* Enrichment / GeoIP / Forms / Redirects Tables */ -.enrichment-table { - width: 100%; - border-collapse: collapse; - margin-bottom: 1rem; -} - -.enrichment-table th, -.enrichment-table td { - border: 1px solid #243041; - padding: 0.5rem; - vertical-align: top; -} - -.enrichment-table th { - background: #111826; - text-align: left; -} - -.enrichment-table td { - width: auto; /* browser resizes naturally */ - word-break: break-word; -} - -/* Scripts Table Special Handling */ -.scripts-table pre.code { - margin: 0; - padding: 0.25rem; - font-size: 0.9rem; -} - -/* Hover effects for table rows */ -.enrichment-table tbody tr:hover { - background: #1f2a36; -} - -/* Card table headings */ -.enrichment-table thead th { - border-bottom: 2px solid #243041; -} - -/* Ensure nested tables don't overflow */ -.card table { - table-layout: auto; - word-break: break-word; -} - -/* ============================ - Results Table (3+ columns) - - Visual style matches .enrichment-table - - Adds better wrapping for long strings (URL/UUID) - - Right-aligns timestamps for scannability - ============================ */ - -.results-table { - width: 100%; - border-collapse: collapse; - background: #111826; /* match card background */ - border: 1px solid #1f2a36; /* subtle border like cards */ - border-radius: 12px; /* rounded corners */ - overflow: hidden; /* clip the rounded corners */ - table-layout: auto; /* allow natural column sizing */ -} - -/* Header styling */ -.results-table thead th { - padding: 0.6rem 0.75rem; - background: #0f1720; /* match header tone */ - border-bottom: 1px solid #1f2a36; - text-align: left; - font-weight: 600; - white-space: nowrap; /* keep short headers on one line */ -} - -/* Body cells */ -.results-table tbody td { - padding: 0.6rem 0.75rem; - border-top: 1px solid #1f2a36; - vertical-align: top; - text-align: left; -} - -/* Zebra rows for readability (optional) */ -.results-table tbody tr:nth-child(odd) { - background: #0d1522; /* slight contrast row */ -} - -/* Links inside table should inherit your global link colors */ -.results-table a { - text-decoration: underline; -} - -/* ---- Column-specific tweaks ---- */ - -/* URL column: allow wrapping of long URLs without blowing the layout */ -.results-table td.url, -.results-table td.url a { - word-wrap: break-word; /* legacy support */ - overflow-wrap: anywhere; /* modern wrapping for long URLs */ - word-break: break-word; -} - -/* UUID column: force wrap to avoid overflow */ -.results-table td.uuid { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - word-break: break-all; /* split at any point to keep table narrow */ - max-width: 28ch; /* reasonable width to avoid stretching */ -} - -/* Timestamp column: align right and keep on a single line */ -.results-table td.timestamp { - text-align: right; - white-space: nowrap; /* keep ISO timestamps on one line */ -} - -/* Optional: make the newest (first) row stand out subtly */ -.results-table tbody tr:first-child { - box-shadow: inset 0 0 0 1px #243041; -} - -/* Optional: small, subtle buttons in table cells (e.g., copy UUID) */ -.results-table .copy-btn { - margin-left: 0.4rem; - padding: 0.2rem 0.45rem; - border-radius: 6px; - border: 1px solid #243041; + display: inline-block; + margin-top: 0.75rem; + padding: 0.6rem 1rem; + border-radius: 8px; + border: 1px solid var(--border-2); background: #1a2535; - color: #e6edf3; + color: var(--text); + text-decoration: none; cursor: pointer; - line-height: 1; +} +button:hover, .button:hover { filter: brightness(1.05); } + +/* Flash messages */ +.flash { list-style: none; padding: 0.5rem 1rem; } +.flash .error { color: #ff6b6b; } + +/* Simple grid utility */ +.grid { + display: grid; + grid-template-columns: 150px 1fr; + gap: 0.5rem 1rem; +} + +/* ========================================================================== + 4) Code Blocks & Details/Accordion + -------------------------------------------------------------------------- */ +pre.code { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9rem; + white-space: pre-wrap; /* wrap long lines */ + word-break: break-all; + background: var(--input-bg); + padding: 0.75rem; + border-radius: 8px; + border: 1px solid var(--border-2); } -.results-table .copy-btn:hover { - filter: brightness(1.1); +details summary { + cursor: pointer; + padding: 0.5rem; + font-weight: bold; + border-radius: 8px; + background: var(--card-bg); + border: 1px solid var(--border); + margin-bottom: 0.5rem; + transition: background 0.3s ease; } +details[open] summary { background: #1a2535; } -/* ===== Responsive niceties for very small screens ===== */ -@media (max-width: 768px) { - main { - padding: 1rem; /* a tad tighter on mobile */ - } +/* inner spacing when expanded */ +details > ul, +details > table { padding-left: 1rem; margin: 0.5rem 0; } - .enrichment-table, - .results-table { - display: block; - overflow-x: auto; /* allow horizontal scroll if needed */ - white-space: nowrap; - } -} +/* flagged state */ +details.flagged summary { border-left: 4px solid #ff6b6b; } -/* SCRIPTS TABLE */ -.scripts-table td ul { - margin: 0.25rem 0 0.25rem 1rem; - padding-left: 1rem; -} -.scripts-table td small { - opacity: 0.85; -} -/* keep the table from exploding */ -.scripts-table { - table-layout: fixed; - width: 100%; -} +/* gentle transitions */ +details ul, details p { transition: all 0.3s ease; } -/* columns: Type | Source URL | Snippet | Matches */ -.scripts-table th:nth-child(1) { width: 8rem; } -.scripts-table th:nth-child(2) { width: 32rem; } /* tweak as you like */ -.scripts-table th:nth-child(3) { width: 24rem; } -.scripts-table th:nth-child(4) { width: auto; } - -/* ellipsize the table cells by default */ -.scripts-table td, .scripts-table th { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - - -/* lists & small text inside cells */ -.forms-table td ul { - margin: 0.25rem 0 0.25rem 1rem; - padding-left: 1rem; -} -.forms-table td small { - opacity: 0.85; -} - -/* keep the table from exploding */ -.forms-table { - table-layout: fixed; - width: 100%; -} - -/* columns: Action | Method | Inputs | Matches | Form Snippet */ -.forms-table th:nth-child(1) { width: 15rem; } /* Action */ -.forms-table th:nth-child(2) { width: 5rem; } /* Method */ -.forms-table th:nth-child(3) { width: 15rem; } /* Inputs */ -.forms-table th:nth-child(5) { width: 24rem; } /* Snippet */ -.forms-table th:nth-child(4) { width: auto; } /* Matches grows */ - -/* ellipsize cells by default */ -.forms-table td, -.forms-table th { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* nicer wrapping inside snippet/details & input chips */ -.forms-table details { white-space: normal; } -.forms-table details > pre.code { - white-space: pre-wrap; /* let long lines wrap */ - max-height: 28rem; - overflow: auto; -} -.forms-table .chips { - display: flex; - gap: 0.25rem; - flex-wrap: wrap; - white-space: normal; /* allow chip text to wrap if needed */ -} - -/* (optional) responsive tweaks */ -@media (max-width: 1200px) { - .forms-table th:nth-child(1) { width: 22rem; } - .forms-table th:nth-child(3) { width: 16rem; } - .forms-table th:nth-child(5) { width: 18rem; } -} - - -/* let URLs/snippets wrap *inside* their cell when expanded content shows */ -.breakable { - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -/* when user opens
, keep code readable without blowing layout */ +/* readable expanded code without blowing layout */ details pre.code { white-space: pre-wrap; word-break: break-word; @@ -374,7 +169,159 @@ details pre.code { overflow: auto; } -/* Generic badge */ +/* ========================================================================== + 5) Tables — Enrichment (generic) + -------------------------------------------------------------------------- */ +.enrichment-table { + width: 100%; + border-collapse: collapse; + margin-bottom: 1rem; +} +.enrichment-table th, +.enrichment-table td { + border: 1px solid var(--border-2); + padding: 0.5rem; + vertical-align: top; +} +.enrichment-table th { + background: var(--card-bg); + text-align: left; +} +.enrichment-table td { + width: auto; + word-break: break-word; +} +.enrichment-table tbody tr:hover { background: #1f2a36; } +.enrichment-table thead th { border-bottom: 2px solid var(--border-2); } +/* ensure nested tables don't overflow cards */ +.card table { table-layout: auto; word-break: break-word; } + +/* ========================================================================== + 6) Tables — Shared Rules (Scripts & Forms) + -------------------------------------------------------------------------- */ +.scripts-table, +.forms-table { + table-layout: fixed; + width: 100%; +} +.scripts-table td ul, +.forms-table td ul { + margin: 0.25rem 0 0.25rem 1rem; + padding-left: 1rem; +} +.scripts-table td small, +.forms-table td small { opacity: 0.85; } +/* ellipsize by default */ +.scripts-table td, .scripts-table th, +.forms-table td, .forms-table th { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +/* allow wrapping inside expanded blocks */ +.scripts-table details, +.forms-table details { white-space: normal; } +.scripts-table details > pre.code, +.forms-table details > pre.code { + white-space: pre-wrap; + max-height: 28rem; + overflow: auto; +} + +/* ========================================================================== + 7) Scripts Table (columns & tweaks) + -------------------------------------------------------------------------- */ +/* compact inline snippet */ +.scripts-table pre.code { margin: 0; padding: 0.25rem; font-size: 0.9rem; } + +/* columns: Type | Source URL | Snippet | Matches */ +.scripts-table th:nth-child(1) { width: 8rem; } +.scripts-table th:nth-child(2) { width: 32rem; } +.scripts-table th:nth-child(3) { width: 24rem; } +.scripts-table th:nth-child(4) { width: auto; } + +/* ========================================================================== + 8) Forms Table (columns & helpers) + -------------------------------------------------------------------------- */ +/* columns: Action | Method | Inputs | Matches | Form Snippet */ +.forms-table th:nth-child(1) { width: 15rem; } /* Action */ +.forms-table th:nth-child(2) { width: 5rem; } /* Method */ +.forms-table th:nth-child(3) { width: 15rem; } /* Inputs */ +.forms-table th:nth-child(5) { width: 24rem; } /* Snippet */ +.forms-table th:nth-child(4) { width: auto; } /* Matches grows */ + +/* input chips layout inside cells */ +.forms-table .chips { + display: flex; + gap: 0.25rem; + flex-wrap: wrap; + white-space: normal; +} + +/* ========================================================================== + 9) Results Table (Recent runs list) + -------------------------------------------------------------------------- */ +.results-table { + width: 100%; + border-collapse: collapse; + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius); + overflow: hidden; + table-layout: auto; +} +.results-table thead th { + padding: 0.6rem 0.75rem; + background: var(--header-bg); + border-bottom: 1px solid var(--border); + text-align: left; + font-weight: 600; + white-space: nowrap; +} +.results-table tbody td { + padding: 0.6rem 0.75rem; + border-top: 1px solid var(--border); + vertical-align: top; + text-align: left; +} +.results-table tbody tr:nth-child(odd) { background: #0d1522; } +.results-table a { text-decoration: underline; } + +/* column-specific helpers */ +.results-table td.url, +.results-table td.url a { + overflow-wrap: anywhere; + word-break: break-word; +} +.results-table td.uuid { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + word-break: break-all; + max-width: 28ch; +} +.results-table td.timestamp { + text-align: right; + white-space: nowrap; +} +.results-table tbody tr:first-child { box-shadow: inset 0 0 0 1px var(--border-2); } +.results-table .copy-btn { + margin-left: 0.4rem; + padding: 0.2rem 0.45rem; + border-radius: 6px; + border: 1px solid var(--border-2); + background: #1a2535; + color: var(--text); + cursor: pointer; + line-height: 1; + font-size: 0.9rem; +} +.results-table .copy-btn:hover { filter: brightness(1.1); } + +/* ========================================================================== + 10) Utilities (chips, badges, helpers) + -------------------------------------------------------------------------- */ +.breakable { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } + +/* Generic badge + severities */ .badge { display: inline-block; padding: 0.1rem 0.4rem; @@ -384,18 +331,17 @@ details pre.code { line-height: 1; vertical-align: middle; user-select: none; + border: 1px solid transparent; /* individual severities add their borders */ } - -/* Severity colors */ -.sev-high { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6c4; } -.sev-medium { background: #fff8e1; color: #8a6d3b; border: 1px solid #ffe0a3; } -.sev-low { background: #e8f5e9; color: #1b5e20; border: 1px solid #b9e6be; } +.sev-high { background: #fdecea; color: #b71c1c; border-color: #f5c6c4; } +.sev-medium { background: #fff8e1; color: #8a6d3b; border-color: #ffe0a3; } +.sev-low { background: #e8f5e9; color: #1b5e20; border-color: #b9e6be; } /* Tag chips */ +.chips { display: flex; gap: 0.25rem; flex-wrap: wrap; } .chip { display: inline-block; padding: 0.1rem 0.35rem; - margin-left: 0.25rem; border-radius: 999px; font-size: 0.7rem; line-height: 1; @@ -404,3 +350,72 @@ details pre.code { border: 1px solid #d9e2ec; } +/* ========================================================================== + 11) Sticky Top Jump Navigation + -------------------------------------------------------------------------- */ +.top-jump-nav { + position: sticky; + top: 0; + z-index: 50; + display: flex; + align-items: center; + gap: .5rem .75rem; + padding: .5rem 1rem; + margin: 0 0 1rem 0; + + background: var(--card-bg); + border: 1px solid rgba(255,255,255,.08); + box-shadow: 0 4px 14px rgba(0,0,0,.25); + border-radius: 10px; + + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} +.top-jump-nav a { + display: inline-block; + padding: .4rem .75rem; + border: 1px solid rgba(255,255,255,.12); + border-radius: 999px; + text-decoration: none; + font-size: .95rem; + line-height: 1; + color: inherit; + opacity: .95; +} +.top-jump-nav a:hover, +.top-jump-nav a:focus { + opacity: 1; + background: rgba(255,255,255,.06); + outline: none; +} +.top-jump-nav a.active { + background: var(--accent-pill-bg); + border-color: var(--accent-pill-bd); + box-shadow: inset 0 0 0 1px rgba(59,130,246,.25); +} + +/* ========================================================================== + 12) Responsive Tweaks + -------------------------------------------------------------------------- */ +@media (max-width: 1200px) { + .forms-table th:nth-child(1) { width: 22rem; } + .forms-table th:nth-child(3) { width: 16rem; } + .forms-table th:nth-child(5) { width: 18rem; } +} + +@media (max-width: 768px) { + main { padding: 1rem; } + + .enrichment-table, + .results-table { + display: block; + overflow-x: auto; + white-space: nowrap; + } +} + +@media (max-width: 640px) { + .top-jump-nav { padding: .4rem .6rem; gap: .4rem .5rem; } + .top-jump-nav a { padding: .35rem .6rem; font-size: .9rem; } +} diff --git a/app/templates/result.html b/app/templates/result.html index 7d17236..a6def85 100644 --- a/app/templates/result.html +++ b/app/templates/result.html @@ -2,19 +2,19 @@ {% block content %} -
-

Jump to Section

- -
+ + + +