mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-24 13:01:56 +00:00
Hugo P.Brito
e691176612
On narrow screens the five section tabs (Finding Overview, Remediation, Findings for this resource, Scans, Events) did not fit, and because they had no dedicated scroll container the overflow leaked up to the resource card (whose overflow-y-auto implicitly resolves overflow-x to auto), scrolling the entire drawer body horizontally. - TabsList is now its own horizontal scroll container: triggers keep their intrinsic size (shrink-0) and stay on one line (whitespace-nowrap) so a partially-visible tab plus a thin scrollbar make it obvious more tabs are reachable by scrolling. - The resource card is pinned to overflow-x-hidden + min-w-0 so no child can force the drawer body to scroll sideways. - minimal-scrollbar now sets a 6px height so the horizontal scrollbar is actually visible on WebKit (it previously only set width).
410 lines
12 KiB
CSS
410 lines
12 KiB
CSS
@import "tailwindcss";
|
|
@config "../tailwind.config.js";
|
|
@source "../node_modules/streamdown/dist/*.js";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ===== LIGHT THEME (ROOT) ===== */
|
|
:root {
|
|
/* Button Colors */
|
|
--bg-button-primary: var(--color-emerald-300);
|
|
--bg-button-primary-hover: var(--color-teal-200);
|
|
--bg-button-primary-press: var(--color-emerald-400);
|
|
--bg-button-secondary: var(--color-slate-950);
|
|
--bg-button-secondary-press: var(--color-slate-800);
|
|
--bg-button-tertiary: var(--color-blue-600);
|
|
--bg-button-tertiary-hover: var(--color-blue-500);
|
|
--bg-button-tertiary-active: var(--color-indigo-600);
|
|
--bg-button-disabled: var(--color-neutral-300);
|
|
|
|
/* Radar Map */
|
|
--bg-radar-map: #b51c8033;
|
|
--bg-radar-button: #b51c80;
|
|
|
|
/* Neutral Map */
|
|
--bg-neutral-map: var(--color-neutral-300);
|
|
|
|
/* Input Colors */
|
|
--bg-input-primary: var(--color-white);
|
|
--border-input-primary: var(--color-slate-400);
|
|
--border-input-primary-press: var(--color-slate-700);
|
|
--border-input-primary-pressed: #a7f3d0;
|
|
--border-input-primary-fill: var(--color-slate-500);
|
|
|
|
/* Text Colors */
|
|
--text-neutral-primary: var(--color-slate-950);
|
|
--text-neutral-secondary: var(--color-zinc-800);
|
|
--text-neutral-tertiary: var(--color-zinc-500);
|
|
--text-error-primary: var(--color-red-600);
|
|
--text-warning-primary: var(--color-orange-500);
|
|
--text-success-primary: var(--color-green-600);
|
|
|
|
/* Border Colors */
|
|
--border-error-primary: var(--color-red-500);
|
|
--border-neutral-primary: var(--color-neutral-200);
|
|
--border-neutral-secondary: var(--color-slate-200);
|
|
--border-neutral-tertiary: var(--color-slate-300);
|
|
--border-tag-primary: var(--color-gray-400);
|
|
--border-data-emphasis: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Background Colors */
|
|
--bg-neutral-primary: #fdfdfd;
|
|
--bg-neutral-secondary: var(--color-white);
|
|
--bg-neutral-tertiary: #fbfdfd;
|
|
--bg-tag-primary: var(--color-slate-50);
|
|
--bg-pass-primary: var(--color-emerald-400);
|
|
--bg-pass-secondary: var(--color-emerald-50);
|
|
--bg-warning-primary: var(--color-orange-500);
|
|
--bg-warning-secondary: var(--color-orange-50);
|
|
--bg-fail-primary: var(--color-rose-500);
|
|
--bg-fail-secondary: var(--color-rose-50);
|
|
|
|
/* Data Background Colors */
|
|
--bg-data-azure: var(--color-sky-400);
|
|
--bg-data-kubernetes: var(--color-indigo-600);
|
|
--bg-data-aws: var(--color-amber-500);
|
|
--bg-data-gcp: var(--color-red-500);
|
|
--bg-data-m365: var(--color-green-400);
|
|
--bg-data-github: var(--color-slate-950);
|
|
|
|
/* Severity Colors */
|
|
--bg-data-critical: #ff006a;
|
|
--bg-data-high: #f77852;
|
|
--bg-data-medium: #fdd34f;
|
|
--bg-data-low: #f5f3ce;
|
|
--bg-data-info: #3c8dff;
|
|
--bg-data-muted: var(--color-neutral-500);
|
|
|
|
/* Chart Dots */
|
|
--chart-dots: var(--color-neutral-200);
|
|
|
|
/* Progress Bar */
|
|
--shadow-progress-glow:
|
|
0 0 10px var(--bg-button-primary), 0 0 5px var(--bg-button-primary);
|
|
|
|
/* Lighthouse AI */
|
|
--gradient-lighthouse: linear-gradient(96deg, #2ee59b 3.55%, #62dff0 98.85%);
|
|
}
|
|
|
|
/* ===== DARK THEME ===== */
|
|
.dark {
|
|
/* Button Colors */
|
|
--bg-button-primary: var(--color-emerald-300);
|
|
--bg-button-primary-hover: var(--color-teal-200);
|
|
--bg-button-primary-press: var(--color-emerald-400);
|
|
--bg-button-secondary: var(--color-white);
|
|
--bg-button-secondary-press: var(--color-emerald-100);
|
|
--bg-button-tertiary: var(--color-blue-300);
|
|
--bg-button-tertiary-hover: var(--color-blue-400);
|
|
--bg-button-tertiary-active: var(--color-blue-600);
|
|
--bg-button-disabled: var(--color-neutral-700);
|
|
|
|
/* Neutral Map */
|
|
--bg-neutral-map: var(--color-gray-800);
|
|
|
|
/* Input Colors */
|
|
--bg-input-primary: var(--color-neutral-900);
|
|
--border-input-primary: var(--color-neutral-800);
|
|
--border-input-primary-press: var(--color-neutral-800);
|
|
--border-input-primary-pressed: #a7f3d0;
|
|
--border-input-primary-fill: var(--color-neutral-300);
|
|
|
|
/* Text Colors */
|
|
--text-neutral-primary: var(--color-zinc-100);
|
|
--text-neutral-secondary: var(--color-zinc-300);
|
|
--text-neutral-tertiary: var(--color-zinc-400);
|
|
--text-error-primary: var(--color-red-500);
|
|
--text-warning-primary: var(--color-orange-500);
|
|
--text-success-primary: var(--color-green-500);
|
|
|
|
/* Border Colors */
|
|
--border-error-primary: var(--color-red-400);
|
|
--border-neutral-primary: var(--color-zinc-800);
|
|
--border-neutral-secondary: var(--color-zinc-900);
|
|
--border-neutral-tertiary: var(--color-zinc-900);
|
|
--border-tag-primary: var(--color-slate-700);
|
|
--border-data-emphasis: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Background Colors */
|
|
--bg-neutral-primary: var(--color-zinc-950);
|
|
--bg-neutral-secondary: var(--color-stone-950);
|
|
--bg-neutral-tertiary: #121110;
|
|
--bg-tag-primary: var(--color-slate-950);
|
|
--bg-pass-primary: var(--color-green-400);
|
|
--bg-pass-secondary: var(--color-emerald-900);
|
|
--bg-warning-primary: var(--color-orange-400);
|
|
--bg-warning-secondary: var(--color-orange-900);
|
|
--bg-fail-primary: var(--color-rose-500);
|
|
--bg-fail-secondary: #432232;
|
|
|
|
/* Data Background Colors */
|
|
--bg-data-azure: var(--color-sky-400);
|
|
--bg-data-kubernetes: var(--color-indigo-600);
|
|
--bg-data-aws: var(--color-amber-500);
|
|
--bg-data-gcp: var(--color-red-500);
|
|
--bg-data-m365: var(--color-green-400);
|
|
--bg-data-github: var(--color-neutral-100);
|
|
|
|
/* Severity Colors */
|
|
--bg-data-critical: #ff006a;
|
|
--bg-data-high: #f77852;
|
|
--bg-data-medium: #fec94d;
|
|
--bg-data-low: #fdfbd4;
|
|
--bg-data-info: #3c8dff;
|
|
--bg-data-muted: var(--color-neutral-500);
|
|
|
|
/* Chart Dots */
|
|
--chart-dots: var(--text-neutral-primary);
|
|
|
|
/* Progress Bar */
|
|
--shadow-progress-glow:
|
|
0 0 10px var(--bg-button-primary), 0 0 5px var(--bg-button-primary);
|
|
}
|
|
|
|
/* ===== TAILWIND THEME MAPPINGS ===== */
|
|
@theme {
|
|
/* Data Background Colors */
|
|
--color-bg-data-azure: var(--bg-data-azure);
|
|
--color-bg-data-kubernetes: var(--bg-data-kubernetes);
|
|
--color-bg-data-aws: var(--bg-data-aws);
|
|
--color-bg-data-gcp: var(--bg-data-gcp);
|
|
--color-bg-data-m365: var(--bg-data-m365);
|
|
--color-bg-data-github: var(--bg-data-github);
|
|
--color-bg-data-critical: var(--bg-data-critical);
|
|
--color-bg-data-high: var(--bg-data-high);
|
|
--color-bg-data-medium: var(--bg-data-medium);
|
|
--color-bg-data-low: var(--bg-data-low);
|
|
--color-bg-data-info: var(--bg-data-info);
|
|
--color-bg-data-muted: var(--bg-data-muted);
|
|
|
|
/* Button Colors */
|
|
--color-button-primary: var(--bg-button-primary);
|
|
--color-button-primary-hover: var(--bg-button-primary-hover);
|
|
--color-button-primary-press: var(--bg-button-primary-press);
|
|
--color-button-secondary: var(--bg-button-secondary);
|
|
--color-button-secondary-press: var(--bg-button-secondary-press);
|
|
--color-button-tertiary: var(--bg-button-tertiary);
|
|
--color-button-tertiary-hover: var(--bg-button-tertiary-hover);
|
|
--color-button-tertiary-active: var(--bg-button-tertiary-active);
|
|
--color-button-disabled: var(--bg-button-disabled);
|
|
|
|
/* Input Colors */
|
|
--color-bg-input-primary: var(--bg-input-primary);
|
|
--color-border-input-primary: var(--border-input-primary);
|
|
--color-border-input-primary-press: var(--border-input-primary-press);
|
|
--color-border-input-primary-pressed: var(--border-input-primary-pressed);
|
|
--color-border-input-primary-fill: var(--border-input-primary-fill);
|
|
|
|
/* Neutral Map Colors */
|
|
--color-bg-neutral-map: var(--bg-neutral-map);
|
|
|
|
/* Success Colors */
|
|
--color-text-success: var(--text-success-primary);
|
|
|
|
/* Border Colors */
|
|
--color-border-error: var(--border-error-primary);
|
|
--color-border-neutral-primary: var(--border-neutral-primary);
|
|
--color-border-neutral-secondary: var(--border-neutral-secondary);
|
|
--color-border-neutral-tertiary: var(--border-neutral-tertiary);
|
|
--color-border-tag: var(--border-tag-primary);
|
|
--color-border-data-emphasis: var(--border-data-emphasis);
|
|
|
|
/* Text Colors */
|
|
--color-text-neutral-primary: var(--text-neutral-primary);
|
|
--color-text-neutral-secondary: var(--text-neutral-secondary);
|
|
--color-text-neutral-tertiary: var(--text-neutral-tertiary);
|
|
--color-text-error-primary: var(--text-error-primary);
|
|
--color-text-warning-primary: var(--text-warning-primary);
|
|
--color-text-success-primary: var(--text-success-primary);
|
|
|
|
/* Background Colors */
|
|
--color-bg-neutral-primary: var(--bg-neutral-primary);
|
|
--color-bg-neutral-secondary: var(--bg-neutral-secondary);
|
|
--color-bg-neutral-tertiary: var(--bg-neutral-tertiary);
|
|
--color-bg-tag: var(--bg-tag-primary);
|
|
--color-bg-pass: var(--bg-pass-primary);
|
|
--color-bg-pass-secondary: var(--bg-pass-secondary);
|
|
--color-bg-warning: var(--bg-warning-primary);
|
|
--color-bg-warning-secondary: var(--bg-warning-secondary);
|
|
--color-bg-fail: var(--bg-fail-primary);
|
|
--color-bg-fail-secondary: var(--bg-fail-secondary);
|
|
|
|
/* Shadows */
|
|
--shadow-progress-glow: var(--shadow-progress-glow);
|
|
}
|
|
|
|
/* ===== CONTAINER UTILITY ===== */
|
|
@utility container {
|
|
margin-inline: auto;
|
|
padding-inline: 2rem;
|
|
}
|
|
|
|
/* ===== COMPONENT LAYER ===== */
|
|
@layer components {
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Lighthouse chat markdown styles */
|
|
.lighthouse-markdown ul,
|
|
.lighthouse-markdown ol {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.lighthouse-markdown li {
|
|
margin-top: 0.375rem;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.lighthouse-markdown li > p {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Nested list styling - different bullets for different levels */
|
|
.lighthouse-markdown > ul {
|
|
list-style-type: disc !important;
|
|
}
|
|
|
|
.lighthouse-markdown > ul > li > ul,
|
|
.lighthouse-markdown ul ul {
|
|
list-style-type: "◦ " !important;
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.lighthouse-markdown > ul > li > ul > li > ul,
|
|
.lighthouse-markdown ul ul ul {
|
|
list-style-type: "▪ " !important;
|
|
}
|
|
|
|
.lighthouse-markdown > ul > li > ul > li > ul > li > ul,
|
|
.lighthouse-markdown ul ul ul ul {
|
|
list-style-type: "- " !important;
|
|
}
|
|
|
|
/* Nested lists indentation */
|
|
.lighthouse-markdown ul ul,
|
|
.lighthouse-markdown ol ol,
|
|
.lighthouse-markdown ul ol,
|
|
.lighthouse-markdown ol ul {
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.lighthouse-markdown h2,
|
|
.lighthouse-markdown h3,
|
|
.lighthouse-markdown h4 {
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lighthouse-markdown p + ul,
|
|
.lighthouse-markdown p + ol {
|
|
margin-top: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* ===== UTILITY LAYER ===== */
|
|
@layer utilities {
|
|
/* Screen reader only - visually hidden but accessible */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Hide scrollbar */
|
|
.no-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
/* Minimal scrollbar styles */
|
|
.minimal-scrollbar {
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: rgb(203 213 225 / 0.5) transparent; /* thumb and track for Firefox */
|
|
}
|
|
|
|
.minimal-scrollbar:hover {
|
|
scrollbar-color: rgb(148 163 184 / 0.7) transparent; /* darker thumb on hover */
|
|
}
|
|
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
.minimal-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px; /* visible thumb for horizontal scroll containers (e.g. tab bars) */
|
|
}
|
|
|
|
.minimal-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.minimal-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgb(203 213 225 / 0.5);
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgb(148 163 184 / 0.7);
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark .minimal-scrollbar {
|
|
scrollbar-color: rgb(71 85 105 / 0.5) transparent;
|
|
}
|
|
|
|
.dark .minimal-scrollbar:hover {
|
|
scrollbar-color: rgb(100 116 139 / 0.7) transparent;
|
|
}
|
|
|
|
.dark .minimal-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgb(71 85 105 / 0.5);
|
|
}
|
|
|
|
.dark .minimal-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgb(100 116 139 / 0.7);
|
|
}
|
|
|
|
.checkbox-update {
|
|
margin-right: 0.5rem;
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* Download icon animation */
|
|
.animate-download-icon polyline,
|
|
.animate-download-icon line {
|
|
animation: dropArrow 0.6s ease-out infinite;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
}
|
|
}
|
|
|
|
/* ===== BASE LAYER ===== */
|
|
@layer base {
|
|
/* Global base styles */
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Override vaul's injected user-select: none to allow text selection in drawers */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
[data-vaul-drawer][data-vaul-drawer] {
|
|
user-select: text;
|
|
}
|
|
}
|