mirror of
https://github.com/lockfale/OSINT-Framework.git
synced 2026-08-30 19:49:37 +02:00
s0lrayandPaperclip
b684b3cd88
Parse (T)/(D)/(R)/(M) suffixes from tool names and render them as colored tspan elements in the SVG tree. Add matching badge pill styles to the HTML legend so it visually matches the tree indicators. - T (tool) → blue #4a9eda - D (dork) → orange #e8944a - R (registration) → amber #c8a030 - M (manual URL) → purple #9a7eda Badge colors are theme-invariant; they work on both dark and light backgrounds without separate light-mode overrides. Co-Authored-By: Paperclip <noreply@paperclip.ing>
129 lines
2.7 KiB
CSS
129 lines
2.7 KiB
CSS
/* === Color tokens === */
|
|
:root {
|
|
--color-bg: #1a1a1a;
|
|
--color-surface: #2d2d2d;
|
|
--color-text-primary: #e0e0e0;
|
|
--color-text-secondary: #999;
|
|
--color-node-stroke: steelblue;
|
|
--color-node-fill-branch: #3a3a3a;
|
|
--color-node-fill-leaf: #1a1a1a;
|
|
--color-link: #555;
|
|
--color-noscript-bg: #2a1a00;
|
|
--color-noscript-border: #7a4a00;
|
|
--color-legend: #e0e0e0;
|
|
--color-header: #e0e0e0;
|
|
|
|
/* Status badge colors — saturated enough for both light and dark backgrounds */
|
|
--badge-T: #4a9eda;
|
|
--badge-D: #e8944a;
|
|
--badge-R: #c8a030;
|
|
--badge-M: #9a7eda;
|
|
}
|
|
|
|
body.light-mode {
|
|
--color-bg: #ffffff;
|
|
--color-surface: #f5f5f5;
|
|
--color-text-primary: #000000;
|
|
--color-text-secondary: #767676;
|
|
--color-node-stroke: steelblue;
|
|
--color-node-fill-branch: lightsteelblue;
|
|
--color-node-fill-leaf: #ffffff;
|
|
--color-link: #ccc;
|
|
--color-noscript-bg: rgb(255, 228, 196);
|
|
--color-noscript-border: rgb(255, 204, 153);
|
|
--color-legend: #000000;
|
|
--color-header: #000000;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text-primary);
|
|
font-size: 14px;
|
|
font-family: "Helvetica Neue", Helvetica;
|
|
}
|
|
|
|
noscript p {
|
|
text-align: center;
|
|
background-color: var(--color-noscript-bg);
|
|
color: var(--color-text-primary);
|
|
margin: 0 auto;
|
|
width: 80vw;
|
|
padding: 25px 0;
|
|
margin-top: 80px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--color-noscript-border);
|
|
margin-bottom: 20px;
|
|
display: flex-wrap;
|
|
}
|
|
|
|
#body {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
#header {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
top: 20px;
|
|
text-align: center;
|
|
color: var(--color-header);
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0;
|
|
width: 330px;
|
|
font-size: 11px;
|
|
color: var(--color-legend);
|
|
}
|
|
|
|
.legend a {
|
|
color: var(--color-node-stroke);
|
|
}
|
|
|
|
.node {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.node circle {
|
|
cursor: pointer;
|
|
fill: var(--color-node-fill-leaf);
|
|
stroke: var(--color-node-stroke);
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.node text {
|
|
font-size: 12px;
|
|
fill: var(--color-text-primary);
|
|
}
|
|
|
|
path.link {
|
|
fill: none;
|
|
stroke: var(--color-link);
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
h3 {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-node-stroke);
|
|
}
|
|
|
|
/* Status badge pills (used in legend) */
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
}
|
|
.badge-T { background-color: var(--badge-T); }
|
|
.badge-D { background-color: var(--badge-D); }
|
|
.badge-R { background-color: var(--badge-R); }
|
|
.badge-M { background-color: var(--badge-M); }
|