mirror of
https://github.com/lockfale/OSINT-Framework.git
synced 2026-08-23 06:12:23 +02:00
s0lrayandPaperclip
de13225292
The panel overlay (z-index 199) was intercepting all clicks on the tree when the panel was open, forcing users to close the panel before selecting a different tool. Setting pointer-events: none on the overlay lets clicks pass through to tree nodes, where openPanel() already handles replacing the panel content. The SVG background click handler still closes the panel when clicking empty canvas. Co-Authored-By: Paperclip <noreply@paperclip.ing>
388 lines
7.0 KiB
CSS
388 lines
7.0 KiB
CSS
/* === Tool Details Panel === */
|
|
|
|
/* Overlay backdrop (mobile) */
|
|
#panel-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 199;
|
|
}
|
|
|
|
#panel-overlay.visible {
|
|
display: block;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Panel container */
|
|
#tool-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 340px;
|
|
height: 100vh;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-md);
|
|
z-index: 200;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform 250ms ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
#tool-panel.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Header bar */
|
|
#panel-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#panel-header-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
#panel-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: bold;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.3;
|
|
word-break: break-word;
|
|
}
|
|
|
|
#panel-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-text-secondary);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 2px var(--space-1);
|
|
border-radius: var(--radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#panel-close:hover {
|
|
color: var(--color-text-primary);
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
/* Panel body sections */
|
|
#panel-body {
|
|
flex: 1;
|
|
padding: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Breadcrumb (lives in panel-header now) */
|
|
#panel-breadcrumb {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.5;
|
|
word-break: break-word;
|
|
}
|
|
|
|
#panel-breadcrumb.empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Badges */
|
|
#panel-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-badges.empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Description */
|
|
#panel-description-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-description-section.empty {
|
|
display: none;
|
|
}
|
|
|
|
.panel-section-label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: bold;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
#panel-description {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Usage context */
|
|
#panel-usage-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-usage-section.empty {
|
|
display: none;
|
|
}
|
|
|
|
#panel-usage {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Input → Output */
|
|
#panel-io-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-io-section.empty {
|
|
display: none;
|
|
}
|
|
|
|
#panel-io {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* OPSEC notes */
|
|
#panel-opsec-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-opsec-section.empty {
|
|
display: none;
|
|
}
|
|
|
|
#panel-opsec {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Community rating / vote */
|
|
#panel-rating-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-vote-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.vote-btn {
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
transition: background 150ms ease, border-color 150ms ease;
|
|
}
|
|
|
|
.vote-btn:hover {
|
|
background: var(--color-bg);
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.vote-btn.active {
|
|
background: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.vote-score {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: bold;
|
|
min-width: 2ch;
|
|
text-align: center;
|
|
}
|
|
|
|
.vote-score.positive { color: #2d9e2d; }
|
|
.vote-score.negative { color: #c84040; }
|
|
.vote-score.zero { color: var(--color-text-secondary); }
|
|
|
|
/* Footer (sticky, always visible) */
|
|
#panel-footer {
|
|
flex-shrink: 0;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
/* Report buttons */
|
|
#panel-report-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-report-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.report-btn {
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-1) var(--space-3);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
font-family: var(--font-family);
|
|
transition: background 150ms ease, color 150ms ease;
|
|
}
|
|
|
|
.report-btn:hover {
|
|
background: var(--color-bg);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* Dividers */
|
|
.panel-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: 0;
|
|
}
|
|
|
|
/* CTA button */
|
|
#panel-cta-section {
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#panel-cta-section.empty {
|
|
display: none;
|
|
}
|
|
|
|
#panel-open-tool {
|
|
display: inline-block;
|
|
padding: var(--space-3) var(--space-5);
|
|
background: var(--color-accent);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#panel-open-tool:hover {
|
|
opacity: 0.88;
|
|
}
|
|
|
|
|
|
/* Enrichment badge pills (status, pricing, opsec) */
|
|
.badge-pill {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-transform: capitalize;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Status badges */
|
|
.badge-live { background: #2d9e2d; }
|
|
.badge-down { background: #c84040; }
|
|
.badge-degraded { background: #b87800; }
|
|
|
|
/* Pricing badges */
|
|
.badge-free { background: #2d9e2d; }
|
|
.badge-freemium { background: #b87800; }
|
|
.badge-paid { background: #c84040; }
|
|
|
|
/* OPSEC badges */
|
|
.badge-passive { background: #2d9e2d; }
|
|
.badge-active { background: #c84040; }
|
|
|
|
/* Unknown / fallback */
|
|
.badge-unknown { background: #606060; }
|
|
|
|
/* OPSEC row layout */
|
|
.opsec-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.opsec-note {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Usage context sub-fields */
|
|
.usage-best-for {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.usage-io {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Description placeholder */
|
|
.panel-placeholder {
|
|
font-style: italic;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Node selection ring */
|
|
.node circle.selected-ring {
|
|
stroke: var(--color-accent);
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
/* Mobile: full-screen overlay */
|
|
@media (max-width: 768px) {
|
|
#tool-panel {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|