fix: замена несуществующих CSS-переменных на hex-цвета

35 var(--pico-color-*) → hex (#e04040, #4caf50, #f0c000, #2196f3, #202632, #2a3140...)
Все бордеры, фоны и цвета статусов теперь рендерятся корректно
This commit is contained in:
Marker689
2026-05-10 11:32:09 +03:00
parent 2c753748f0
commit 29b463a1b2
7 changed files with 42 additions and 34 deletions

View File

@@ -3,16 +3,16 @@
/* ------------------------------------------------------------------ */
/* Status / severity colours */
/* ------------------------------------------------------------------ */
.flagged { color: var(--pico-color-red-400); font-weight: bold; }
.clean { color: var(--pico-color-green-400); }
.flagged { color: #e04040; font-weight: bold; }
.clean { color: #4caf50; }
.status-pending { color: var(--pico-color-yellow-400); }
.status-scanning { color: var(--pico-color-blue-400); animation: pulse 1.5s ease-in-out infinite; }
.status-completed { color: var(--pico-color-green-400); }
.status-failed { color: var(--pico-color-red-400); }
.status-pending { color: #f0c000; }
.status-scanning { color: #2196f3; animation: pulse 1.5s ease-in-out infinite; }
.status-completed { color: #4caf50; }
.status-failed { color: #e04040; }
.severity-WARNING { color: var(--pico-color-yellow-400); }
.severity-ERROR { color: var(--pico-color-red-400); }
.severity-WARNING { color: #f0c000; }
.severity-ERROR { color: #e04040; }
/* ------------------------------------------------------------------ */
/* Dashboard blocks */
@@ -29,7 +29,7 @@
}
.dash-block-warn {
border-left: 3px solid var(--pico-color-red-400);
border-left: 3px solid #e04040;
}
/* ------------------------------------------------------------------ */
@@ -69,8 +69,8 @@ table.compact td { padding: 0.35rem 0.5rem; }
.scan-error {
margin-top: 0.75rem;
padding: 0.5rem 0.75rem;
background: rgba(var(--pico-color-red-400), 0.1);
border-left: 3px solid var(--pico-color-red-400);
background: rgba(224, 64, 64, 0.1);
border-left: 3px solid #e04040;
border-radius: 4px;
font-size: 0.85rem;
}
@@ -79,32 +79,38 @@ table.compact td { padding: 0.35rem 0.5rem; }
/* Finding blocks (replaces accordion details/summary) */
/* ------------------------------------------------------------------ */
.finding-block {
margin-bottom: 0.75rem;
border: 1px solid var(--pico-color-gray-600);
margin-bottom: 1rem;
border: 1px solid #202632 !important;
border-left: 3px solid #2a3140 !important;
border-radius: 6px;
overflow: hidden;
}
.finding-block.finding-warning { border-left-color: #f0c000 !important; }
.finding-block.finding-error { border-left-color: #e04040 !important; }
.finding-summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--pico-color-gray-650);
padding: 0.6rem 0.85rem;
background: rgba(255, 255, 255, 0.04);
font-size: 0.9rem;
border-bottom: 1px solid var(--pico-color-gray-600);
border-bottom: 1px solid #202632;
}
.finding-body {
padding: 0.75rem;
padding: 0.85rem 1rem;
}
.finding-body p {
margin-bottom: 0.5rem;
.finding-body > p:first-child {
margin-bottom: 0.6rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.finding-body pre {
background: var(--pico-color-gray-700);
background: #141924;
padding: 0.5rem;
border-radius: 4px;
overflow-x: auto;
@@ -121,8 +127,8 @@ table.compact td { padding: 0.35rem 0.5rem; }
border-radius: 6px;
font-size: 0.85rem;
line-height: 1.55;
border-left: 4px solid var(--pico-color-gray-500);
background: var(--pico-color-gray-750);
border-left: 4px solid #2a3140;
background: #1a1f2b;
}
.llm-header {
@@ -146,9 +152,9 @@ table.compact td { padding: 0.35rem 0.5rem; }
.llm-badge-suspicious { background: #5c4a1a; color: #facc15; }
.llm-badge-malicious { background: #5c1a1a; color: #f87171; }
.llm-safe { border-left-color: var(--pico-color-green-400); background: rgba(74,222,128,0.06); }
.llm-suspicious { border-left-color: var(--pico-color-yellow-400); background: rgba(250,204,21,0.06); }
.llm-malicious { border-left-color: var(--pico-color-red-400); background: rgba(248,113,113,0.08); }
.llm-safe { border-left-color: #4caf50; background: rgba(74,222,128,0.06); }
.llm-suspicious { border-left-color: #f0c000; background: rgba(250,204,21,0.06); }
.llm-malicious { border-left-color: #e04040; background: rgba(248,113,113,0.08); }
.llm-severity {
font-size: 0.72rem;
@@ -160,7 +166,7 @@ table.compact td { padding: 0.35rem 0.5rem; }
.llm-summary {
font-style: italic;
margin-bottom: 0.4rem;
color: var(--pico-color-zinc-300);
color: #c2c7d0;
}
.llm-analysis {
@@ -185,7 +191,7 @@ table.compact td { padding: 0.35rem 0.5rem; }
font-size: 0.72rem;
opacity: 0.5;
font-style: italic;
border-top: 1px solid var(--pico-color-gray-600);
border-top: 1px solid #202632;
padding-top: 0.4rem;
}
@@ -201,16 +207,16 @@ table.compact td { padding: 0.35rem 0.5rem; }
.copy-btn {
cursor: pointer;
background: none;
border: 1px solid var(--pico-color-gray-500);
border: 1px solid #2a3140;
padding: 0.15rem 0.5rem;
font-size: 0.7rem;
border-radius: 3px;
color: var(--pico-color-gray-300);
color: #c2c7d0;
transition: background 0.2s;
}
.copy-btn:hover { background: var(--pico-color-gray-600); }
.copy-btn.copied { color: var(--pico-color-green-400); border-color: var(--pico-color-green-400); }
.copy-btn:hover { background: #202632; }
.copy-btn.copied { color: #4caf50; border-color: #4caf50; }
.htmx-indicator { display: inline; }
@@ -218,7 +224,7 @@ table.compact td { padding: 0.35rem 0.5rem; }
/* Nav / breadcrumbs / empty state */
/* ------------------------------------------------------------------ */
nav { margin-bottom: 1rem; }
nav.sticky { position: sticky; top: 0; z-index: 100; background: var(--pico-color-dark); padding: 0.5rem 0; border-bottom: 1px solid var(--pico-color-gray-500); }
nav.sticky { position: sticky; top: 0; z-index: 100; background: #13171f; padding: 0.5rem 0; border-bottom: 1px solid #2a3140; }
.breadcrumbs { margin-bottom: 1rem; font-size: 0.85rem; opacity: 0.7; }
.breadcrumbs a { text-decoration: none; }
@@ -241,7 +247,7 @@ nav.sticky { position: sticky; top: 0; z-index: 100; background: var(--pico-c
.filter-bar select { margin-bottom: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--pico-color-gray-600); }
th.sortable:hover { background: #202632; }
th.sortable .sort-icon { margin-left: 0.25rem; opacity: 0.3; }
th.sortable.active .sort-icon { opacity: 1; }
@@ -252,7 +258,7 @@ th.sortable.active .sort-icon { opacity: 1; }
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--pico-color-blue-400);
border: 2px solid #2196f3;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;