/* === 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; } }