mirror of
https://github.com/prowler-cloud/prowler.git
synced 2025-12-19 05:17:47 +00:00
b9bfdc1a5a
Co-authored-by: Chandrapal Badshah <12944530+Chan9390@users.noreply.github.com> Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com> Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com> Co-authored-by: Alan Buscaglia <gentlemanprogramming@gmail.com> Co-authored-by: Adrián Jesús Peña Rodríguez <adrianjpr@gmail.com> Co-authored-by: Andoni Alonso <14891798+andoniaf@users.noreply.github.com> Co-authored-by: Rubén De la Torre Vico <ruben@prowler.com> Co-authored-by: Daniel Barranquero <danielbo2001@gmail.com>
331 lines
10 KiB
CSS
331 lines
10 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-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-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);
|
|
}
|
|
|
|
/* ===== 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-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-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-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-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;
|
|
}
|
|
}
|
|
|
|
/* ===== 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|