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

2
.gitignore vendored
View File

@@ -16,3 +16,5 @@ skills-lock.json
.playwright-mcp/ .playwright-mcp/
dashboard-*.png dashboard-*.png
scans-*.png scans-*.png
scan-*.png
dashboard-*.png

View File

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

BIN
scan-68-card.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 KiB

BIN
scan-68-final.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 408 KiB

BIN
scan-68-v2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 385 KiB

BIN
scan-68-v3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 385 KiB

BIN
scan-68.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 379 KiB