mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-04 19:21:51 +00:00
alejandrobailo
538 lines
16 KiB
CSS
538 lines
16 KiB
CSS
@import "tailwindcss";
|
|
/* All @import rules must precede @config/@source — a late @import is invalid
|
|
* per the CSS spec and lightningcss (Tailwind v4) silently drops it. */
|
|
@import "./tours.css";
|
|
|
|
@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 =====
|
|
* Editorial contrast tweaks: pure-black canvas, pure-white primary text,
|
|
* and one tier brighter primary border for clearer element separation.
|
|
*/
|
|
.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: #111111;
|
|
--border-input-primary: var(--color-zinc-700);
|
|
--border-input-primary-press: var(--color-zinc-500);
|
|
--border-input-primary-pressed: #a7f3d0;
|
|
--border-input-primary-fill: var(--color-zinc-200);
|
|
|
|
/* Text Colors */
|
|
--text-neutral-primary: #ffffff;
|
|
--text-neutral-secondary: var(--color-zinc-200);
|
|
--text-neutral-tertiary: var(--color-zinc-400);
|
|
--text-error-primary: var(--color-red-400);
|
|
--text-warning-primary: var(--color-orange-400);
|
|
--text-success-primary: var(--color-green-500);
|
|
|
|
/* Border Colors */
|
|
--border-error-primary: var(--color-red-400);
|
|
--border-neutral-primary: var(--color-zinc-700);
|
|
--border-neutral-secondary: var(--color-zinc-800);
|
|
--border-neutral-tertiary: var(--color-zinc-700);
|
|
--border-tag-primary: var(--color-slate-700);
|
|
--border-data-emphasis: rgba(255, 255, 255, 0.14);
|
|
|
|
/* Background Colors */
|
|
--bg-neutral-primary: #000000;
|
|
--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;
|
|
}
|
|
|
|
.lighthouse-markdown table {
|
|
min-width: 100%;
|
|
width: max-content;
|
|
}
|
|
|
|
.lighthouse-markdown [data-streamdown="mermaid-block"] {
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.lighthouse-markdown
|
|
[data-streamdown="mermaid-block"]
|
|
> div:first-child
|
|
.fixed {
|
|
padding: 1rem !important;
|
|
background: transparent !important;
|
|
backdrop-filter: none !important;
|
|
}
|
|
|
|
.lighthouse-markdown
|
|
[data-streamdown="mermaid-block"]
|
|
> div:first-child
|
|
.fixed
|
|
> [role="presentation"] {
|
|
box-sizing: border-box;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-neutral-tertiary);
|
|
border-radius: 0.75rem;
|
|
background: var(--bg-neutral-tertiary);
|
|
backdrop-filter: blur(46px);
|
|
}
|
|
|
|
/* !important beats the inline max-width px that mermaid sets on the svg.
|
|
Scoped to the inline chart (last child): streamdown renders its
|
|
fullscreen overlay inside the controls row and sizes it itself. */
|
|
.lighthouse-markdown [data-streamdown="mermaid-block"] > div:last-child svg {
|
|
max-width: 100% !important;
|
|
height: auto;
|
|
}
|
|
|
|
/* Streamdown's fullscreen [&>div]:h-full can stretch the floating
|
|
pan/zoom controls; keep the pills content-sized and inside the chart. */
|
|
.lighthouse-markdown
|
|
[data-streamdown="mermaid-block"]
|
|
div:has(> div[role="application"])
|
|
> div:not([role="application"]) {
|
|
height: auto !important;
|
|
}
|
|
|
|
.lighthouse-markdown
|
|
[data-streamdown="mermaid-block"]
|
|
> div:last-child
|
|
> div:not([role="application"]) {
|
|
bottom: 0 !important;
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.lighthouse-markdown
|
|
[data-streamdown="mermaid-block"]
|
|
> div:first-child
|
|
.fixed
|
|
[role="presentation"]
|
|
> div
|
|
> div:not([role="application"]) {
|
|
bottom: 3rem !important;
|
|
}
|
|
|
|
/* Lighthouse overview banner animated gradient layers */
|
|
.lighthouse-banner-gradient-neutral {
|
|
background: radial-gradient(
|
|
circle at center,
|
|
var(--bg-neutral-tertiary) 0,
|
|
transparent 50%
|
|
)
|
|
no-repeat;
|
|
}
|
|
|
|
.lighthouse-banner-gradient-primary {
|
|
background: radial-gradient(
|
|
circle at center,
|
|
var(--bg-button-primary) 0,
|
|
transparent 50%
|
|
)
|
|
no-repeat;
|
|
}
|
|
|
|
.lighthouse-banner-gradient-primary-hover {
|
|
background: radial-gradient(
|
|
circle at center,
|
|
var(--bg-button-primary-hover) 0,
|
|
transparent 50%
|
|
)
|
|
no-repeat;
|
|
}
|
|
|
|
.lighthouse-banner-gradient-primary-press {
|
|
background: radial-gradient(
|
|
circle at center,
|
|
var(--bg-button-primary-press) 0,
|
|
transparent 50%
|
|
)
|
|
no-repeat;
|
|
}
|
|
}
|
|
|
|
/* ===== 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
|
|
*
|
|
* The descendant selectors target `.cm-scroller` so that CodeMirror
|
|
* editors which receive `.minimal-scrollbar` on their `.cm-editor`
|
|
* wrapper also style their inner scroller (the element that actually
|
|
* overflows when the editor fills a bounded container).
|
|
*/
|
|
.minimal-scrollbar,
|
|
.minimal-scrollbar .cm-scroller {
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: rgb(203 213 225 / 0.5) transparent; /* thumb and track for Firefox */
|
|
}
|
|
|
|
.minimal-scrollbar:hover,
|
|
.minimal-scrollbar .cm-scroller:hover {
|
|
scrollbar-color: rgb(148 163 184 / 0.7) transparent; /* darker thumb on hover */
|
|
}
|
|
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
.minimal-scrollbar::-webkit-scrollbar,
|
|
.minimal-scrollbar .cm-scroller::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.minimal-scrollbar::-webkit-scrollbar-track,
|
|
.minimal-scrollbar .cm-scroller::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.minimal-scrollbar::-webkit-scrollbar-thumb,
|
|
.minimal-scrollbar .cm-scroller::-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,
|
|
.minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgb(148 163 184 / 0.7);
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark .minimal-scrollbar,
|
|
.dark .minimal-scrollbar .cm-scroller {
|
|
scrollbar-color: rgb(71 85 105 / 0.5) transparent;
|
|
}
|
|
|
|
.dark .minimal-scrollbar:hover,
|
|
.dark .minimal-scrollbar .cm-scroller:hover {
|
|
scrollbar-color: rgb(100 116 139 / 0.7) transparent;
|
|
}
|
|
|
|
.dark .minimal-scrollbar::-webkit-scrollbar-thumb,
|
|
.dark .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb {
|
|
background-color: rgb(71 85 105 / 0.5);
|
|
}
|
|
|
|
.dark .minimal-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
.dark .minimal-scrollbar .cm-scroller::-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;
|
|
}
|
|
}
|