mirror of
https://github.com/lockfale/OSINT-Framework.git
synced 2026-08-21 05:12:25 +02:00
s0lrayandPaperclip
6f21a88ffe
Use 100dvh (dynamic viewport height) instead of 100vh so the panel footer with "Report an Issue" buttons is accessible on mobile browsers where the address bar and navigation bar reduce visible viewport height. Falls back to 100vh for older browsers. Also enable pointer-events on the panel overlay on mobile so tapping outside the panel closes it. Co-Authored-By: Paperclip <noreply@paperclip.ing>
473 lines
8.6 KiB
CSS
473 lines
8.6 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;
|
|
height: 100dvh;
|
|
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 */
|
|
#panel-rating-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
#panel-rating-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
#star-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.star-zero-btn {
|
|
background: none;
|
|
border: 1px solid var(--color-text-secondary);
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 2px;
|
|
transition: color 100ms ease, border-color 100ms ease, transform 100ms ease;
|
|
}
|
|
|
|
.star-zero-btn:hover {
|
|
transform: scale(1.15);
|
|
color: #e8960f;
|
|
border-color: #e8960f;
|
|
}
|
|
|
|
.star-zero-btn.active {
|
|
color: #e8960f;
|
|
border-color: #e8960f;
|
|
background: rgba(232, 150, 15, 0.1);
|
|
}
|
|
|
|
.star-pos {
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.star-icon {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
color: var(--color-text-secondary);
|
|
pointer-events: none;
|
|
transition: color 100ms ease, transform 100ms ease;
|
|
}
|
|
|
|
.star-pos:hover .star-icon {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.star-icon.filled {
|
|
color: #f5a623;
|
|
}
|
|
|
|
.star-icon.half-filled {
|
|
background: linear-gradient(to right, #f5a623 50%, var(--color-text-secondary) 50%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.star-icon.user-rated {
|
|
color: #e8960f;
|
|
}
|
|
|
|
.star-icon.user-rated.half-filled {
|
|
background: linear-gradient(to right, #e8960f 50%, var(--color-text-secondary) 50%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.star-click {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.star-click.star-left {
|
|
left: 0;
|
|
width: 50%;
|
|
}
|
|
|
|
.star-click.star-right {
|
|
left: 50%;
|
|
width: 50%;
|
|
}
|
|
|
|
#rating-avg {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 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; }
|
|
|
|
/* Boolean feature badges */
|
|
.badge-api { background: #1e90cc; }
|
|
.badge-invitation-only { background: #b87800; }
|
|
.badge-deprecated { background: #8b3030; }
|
|
.badge-nsfw { background: #9b2b9b; }
|
|
.badge-region { background: #2e7d32; }
|
|
|
|
/* 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;
|
|
height: 100dvh;
|
|
top: 0;
|
|
right: 0;
|
|
border-left: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#panel-overlay.visible {
|
|
pointer-events: auto;
|
|
}
|
|
}
|