mirror of
https://github.com/0xMarcio/cve.git
synced 2026-10-27 16:51:03 +00:00
0xMarcio
1aa51fa852
CISA publishes a catalogue of vulnerabilities observed being exploited in the wild, and 1,111 of its 1,685 entries are CVEs this index already holds PoCs for. That is the one fact a reader most wants before opening an exploit, and it was nowhere on the page. The weekly audit stores the catalogue, the build trims it to the CVEs the index carries, and a result row shows a KEV chip -- with the ransomware flag where CISA records one, which covers 352 of them. 37 KB served. A failed fetch keeps the stored catalogue rather than dropping the badge off every entry. The chip reuses the header pill's treatment: the palette still spends green on things you can click and amber on star counts only.
336 lines
9.3 KiB
CSS
336 lines
9.3 KiB
CSS
/* CVE PoC Hub — design tokens from the frontend refit handoff. */
|
|
:root {
|
|
--page: #0a1114;
|
|
--header-top: #102026;
|
|
--header-bottom: #0d191e;
|
|
--surface: #0d171b;
|
|
--surface-sunken: #08100f;
|
|
--table-header: #0b1519;
|
|
--footer: #0b1418;
|
|
--row-hover: #101d21;
|
|
--pill: #0e1b20;
|
|
--border-strong: #23353a;
|
|
--border: #1d2c31;
|
|
--border-faint: #162327;
|
|
--border-hairline: #142023;
|
|
--text-primary: #f2f7f6;
|
|
--text: #eaf3f1;
|
|
--text-muted: #9fb3b0;
|
|
--prose: #8fa3a0;
|
|
--text-dim: #7f9491;
|
|
--text-faint: #5c6f6c;
|
|
--text-faintest: #4a5c59;
|
|
--separator: #3d4d4a;
|
|
--accent: #58e39b;
|
|
--accent-hover: #7df0b3;
|
|
--star: #e8b84b;
|
|
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
|
|
|
|
html, body { margin: 0; padding: 0; background: var(--page); min-height: 100%; }
|
|
body {
|
|
font-family: var(--sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { color: var(--accent-hover); }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.container { max-width: 1180px; margin: 0 auto; padding: 0 40px; width: 100%; }
|
|
|
|
/* ---- header ------------------------------------------------------------ */
|
|
|
|
.masthead {
|
|
background: linear-gradient(180deg, var(--header-top) 0%, var(--header-bottom) 100%);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 44px 0 38px;
|
|
}
|
|
.wordmark {
|
|
margin: 0;
|
|
font: 700 46px/1 var(--sans);
|
|
color: var(--text-primary);
|
|
letter-spacing: -.035em;
|
|
}
|
|
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
|
|
.pill {
|
|
font: 400 12px/1 var(--sans);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border-strong);
|
|
background: var(--pill);
|
|
border-radius: 20px;
|
|
padding: 7px 13px;
|
|
}
|
|
.search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 22px;
|
|
background: var(--surface-sunken);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 8px;
|
|
padding: 15px 18px;
|
|
}
|
|
.search-glyph { font: 400 14px/1 var(--mono); color: var(--text-faintest); }
|
|
.search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: 0;
|
|
font: 400 15px/1 var(--mono);
|
|
color: var(--text);
|
|
}
|
|
.search input::placeholder { color: var(--text-faintest); }
|
|
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.search-status {
|
|
font: 400 11.5px/1 var(--mono);
|
|
color: var(--text-faintest);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- content ----------------------------------------------------------- */
|
|
|
|
.content { flex: 1; padding-top: 34px; padding-bottom: 56px; }
|
|
[hidden] { display: none !important; }
|
|
|
|
.card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
.card-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 11px;
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.card-head h2 { margin: 0; font: 600 15px/1 var(--sans); color: var(--text); }
|
|
.card-count { font: 400 12px/1 var(--mono); color: var(--text-faint); }
|
|
|
|
.col-head {
|
|
display: grid;
|
|
padding: 9px 20px;
|
|
background: var(--table-header);
|
|
border-bottom: 1px solid var(--border);
|
|
font: 500 9.5px/1 var(--mono);
|
|
letter-spacing: .11em;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* ---- state A: results -------------------------------------------------- */
|
|
|
|
.results .col-head, .result-row { grid-template-columns: 230px 1fr; }
|
|
.result-row { display: grid; border-bottom: 1px solid var(--border-faint); }
|
|
.result-row:last-child { border-bottom: 0; }
|
|
|
|
.result-meta { padding: 20px; border-right: 1px solid var(--border-faint); }
|
|
.result-id {
|
|
font: 600 14.5px/1.2 var(--mono);
|
|
color: var(--accent);
|
|
letter-spacing: -.01em;
|
|
}
|
|
.result-pocs { font: 500 11.5px/1 var(--mono); color: var(--text-dim); margin-top: 11px; }
|
|
.kev {
|
|
display: inline-block;
|
|
margin-top: 11px;
|
|
font: 500 10px/1 var(--mono);
|
|
letter-spacing: .09em;
|
|
color: var(--text);
|
|
background: var(--pill);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.result-dates { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
|
|
.result-date { display: flex; gap: 8px; font: 400 10.5px/1.4 var(--mono); }
|
|
.result-date dt { width: 62px; color: var(--text-faintest); margin: 0; }
|
|
.result-date dd { color: var(--prose); margin: 0; }
|
|
.mitre {
|
|
display: inline-block;
|
|
margin-top: 16px;
|
|
font: 500 10.5px/1 var(--mono);
|
|
color: var(--text-dim);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 4px;
|
|
padding: 6px 9px;
|
|
}
|
|
.mitre:hover { color: var(--text); border-color: #3a5158; }
|
|
|
|
.result-body { padding: 20px 20px 22px; min-width: 0; }
|
|
.result-desc {
|
|
margin: 0;
|
|
font: 400 13px/1.6 var(--mono);
|
|
color: var(--prose);
|
|
max-height: 4.7em;
|
|
overflow: hidden;
|
|
}
|
|
.result-desc.is-open { max-height: none; }
|
|
.expander {
|
|
margin-top: 9px;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font: 500 11px/1 var(--mono);
|
|
color: var(--accent);
|
|
}
|
|
.expander:hover { color: var(--accent-hover); }
|
|
|
|
.poc-list {
|
|
margin-top: 18px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.poc-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 84px 58px;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--border-hairline);
|
|
}
|
|
.poc-row:hover { background: var(--row-hover); }
|
|
.poc-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: 400 12.5px/1 var(--mono);
|
|
}
|
|
.poc-owner { color: var(--text-faint); }
|
|
.poc-sep { color: var(--separator); }
|
|
.poc-name a { font-weight: 500; }
|
|
.poc-stars { font: 400 12px/1 var(--mono); color: var(--text-faint); text-align: right; }
|
|
.poc-stars.is-popular { color: var(--star); }
|
|
.poc-age { font: 400 11.5px/1 var(--mono); color: var(--text-faintest); text-align: right; }
|
|
.poc-more {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 9px 14px;
|
|
cursor: pointer;
|
|
font: 500 11px/1 var(--mono);
|
|
color: var(--text-dim);
|
|
}
|
|
.poc-more:hover { color: var(--accent); }
|
|
|
|
/* ---- state B: nothing matched ------------------------------------------ */
|
|
|
|
.empty { padding: 52px 20px; text-align: center; }
|
|
.empty-head { font: 400 14px/1 var(--mono); color: var(--prose); }
|
|
.empty-head b { color: var(--text); font-weight: 400; }
|
|
.empty-hint { font: 400 13px/1.6 var(--sans); color: var(--text-faint); margin-top: 10px; }
|
|
.empty-hint code { font-family: var(--mono); color: var(--text-dim); }
|
|
|
|
/* ---- state C: trending ------------------------------------------------- */
|
|
|
|
.trend-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
|
|
.trend-head h2 {
|
|
margin: 0;
|
|
font: 700 23px/1 var(--sans);
|
|
color: var(--text);
|
|
letter-spacing: -.02em;
|
|
}
|
|
.toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
|
|
.toggle button {
|
|
border: 0;
|
|
border-right: 1px solid var(--border);
|
|
padding: 7px 13px;
|
|
cursor: pointer;
|
|
font: 500 11px/1 var(--mono);
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
}
|
|
.toggle button:last-child { border-right: 0; }
|
|
.toggle button[aria-pressed="true"] { background: var(--accent); color: var(--surface-sunken); }
|
|
.trend-note { font: 400 12px/1 var(--mono); color: var(--text-faint); }
|
|
|
|
.trend-card { margin-top: 16px; }
|
|
.trend-card .col-head, .trend-row {
|
|
grid-template-columns: 80px 92px 300px 1fr;
|
|
gap: 18px;
|
|
}
|
|
.trend-row {
|
|
display: grid;
|
|
align-items: center;
|
|
padding: 11px 20px;
|
|
border-bottom: 1px solid var(--border-hairline);
|
|
}
|
|
.trend-row:last-child { border-bottom: 0; }
|
|
.trend-row:hover { background: var(--row-hover); }
|
|
.col-stars { text-align: right; }
|
|
.trend-stars {
|
|
font: 500 12.5px/1 var(--mono);
|
|
color: var(--text-faint);
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
.trend-stars.is-popular { color: var(--star); }
|
|
.trend-age { font: 400 12px/1 var(--mono); color: var(--text-dim); white-space: nowrap; }
|
|
.trend-name {
|
|
font: 500 12.5px/1 var(--mono);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.trend-desc {
|
|
font: 400 12.5px/1.45 var(--sans);
|
|
color: var(--prose);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- footer ------------------------------------------------------------ */
|
|
|
|
.site-footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: 16px 0;
|
|
background: var(--footer);
|
|
}
|
|
.site-footer .container {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
font: 400 11.5px/1.6 var(--mono);
|
|
color: var(--text-faintest);
|
|
}
|
|
.site-footer span:last-child { margin-left: auto; }
|
|
|
|
/* ---- narrow viewports -------------------------------------------------- */
|
|
|
|
@media (max-width: 900px) {
|
|
.container { padding: 0 20px; }
|
|
.wordmark { font-size: 34px; }
|
|
.results .col-head { display: none; }
|
|
.result-row { grid-template-columns: 1fr; }
|
|
.result-meta { border-right: 0; border-bottom: 1px solid var(--border-faint); }
|
|
.trend-card .col-head, .trend-row { grid-template-columns: 70px 88px 1fr; }
|
|
.col-desc, .trend-desc { display: none; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.trend-card .col-head, .trend-row { grid-template-columns: 70px 1fr; }
|
|
.col-updated, .trend-age { display: none; }
|
|
}
|