ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-18 10:01:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
api-mintlify-docs
prowler/ui/styles/globals.css
T

314 lines
10 KiB
CSS
Raw Permalink Blame History

@import "tailwindcss";
@config "../tailwind.config.js";
@custom-variant dark (&:where(.dark, .dark *));
/* ===== LIGHT THEME (ROOT) ===== */
:root {
/* ===== LEGACY VARIABLES (CHART COLORS) ===== */
--chart-info: #3C8DFF;
--chart-warning: #FDFBD4;
--chart-warning-emphasis: #FEC94D;
--chart-danger: #F77852;
--chart-danger-emphasis: #FF006A;
--chart-success-color: #16a34a;
--chart-fail: #dc2626;
--chart-radar-primary: #9d174d;
--chart-text-primary: #1f2937;
--chart-text-secondary: #6b7280;
--chart-border: #d1d5db;
--chart-border-emphasis: #9ca3af;
--chart-background: #f9fafb;
--chart-alert-bg: #fecdd3;
--chart-alert-text: #be123c;
/* Chart HSL values */
--chart-success: 146 80% 35%;
--chart-fail: 339 90% 51%;
--chart-muted: 45 93% 47%;
--chart-critical: 336 75% 39%;
--chart-high: 339 90% 51%;
--chart-medium: 26 100% 55%;
--chart-low: 46 97% 65%;
--chart-1: 12 76% 61%;
--chart-2: 160 60% 45%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
/* ===== NEW VARIABLES (PROWLER-307) - SEMANTIC COLORS ===== */
/* 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);
/* Button Colors */
--bg-button-primary: var(--color-emerald-400);
--bg-button-primary-hover: var(--color-teal-200);
--bg-button-secondary: var(--color-slate-950);
--bg-button-secondary-press: var(--color-indigo-100);
--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-gray-300);
/* Input Colors */
--bg-input-primary: var(--color-white);
--border-input-primary: var(--color-slate-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);
/* Text Colors */
--text-neutral-primary: var(--color-slate-950);
--text-neutral-secondary: var(--color-zinc-700);
--text-neutral-tertiary: var(--color-zinc-500);
--text-error-primary: var(--color-red-600);
/* 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-fail-primary: var(--color-rose-500);
--bg-fail-secondary: var(--color-rose-50);
/* Severity Colors */
--bg-data-critical: #FF006A;
--bg-data-high: #F77852;
--bg-data-medium: #FDD34F;
--bg-data-low: #F5F3CE;
--bg-data-info: #3C8DFF;
}
/* ===== DARK THEME ===== */
.dark {
/* ===== LEGACY VARIABLES (CHART COLORS) ===== */
--chart-info: #3C8DFF;
--chart-warning: #FDFBD4;
--chart-warning-emphasis: #FEC94D;
--chart-danger: #F77852;
--chart-danger-emphasis: #FF006A;
--chart-success-color: #86da26;
--chart-fail: #db2b49;
--chart-radar-primary: #b51c80;
--chart-text-primary: #ffffff;
--chart-text-secondary: #94a3b8;
--chart-border: #475569;
--chart-border-emphasis: #334155;
--chart-background: #1e293b;
--chart-alert-bg: #432232;
--chart-alert-text: #f54280;
/* Chart HSL values */
--chart-success: 146 80% 35%;
--chart-fail: 339 90% 51%;
--chart-muted: 45 93% 47%;
--chart-critical: 336 75% 39%;
--chart-high: 339 90% 51%;
--chart-medium: 26 100% 55%;
--chart-low: 46 97% 65%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
/* ===== NEW VARIABLES (PROWLER-307) - SEMANTIC COLORS ===== */
/* 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);
/* Button Colors */
--bg-button-primary: var(--color-emerald-400);
--bg-button-primary-hover: var(--color-teal-200);
--bg-button-secondary: var(--color-slate-700);
--bg-button-secondary-press: var(--color-slate-800);
--bg-button-tertiary: var(--color-blue-500);
--bg-button-tertiary-hover: var(--color-blue-700);
--bg-button-tertiary-active: var(--color-blue-800);
--bg-button-disabled: var(--color-gray-600);
/* Input Colors */
--bg-input-primary: var(--color-slate-900);
--border-input-primary: var(--color-slate-700);
/* Border Colors */
--border-error-primary: var(--color-rose-500);
--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);
/* Text Colors */
--text-neutral-primary: var(--color-zinc-100);
--text-neutral-secondary: var(--color-zinc-400);
--text-neutral-tertiary: var(--color-zinc-500);
--text-error-primary: var(--color-rose-300);
/* Background Colors */
--bg-neutral-primary: var(--color-zinc-950);
--bg-neutral-secondary: var(--color-slate-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-fail-primary: var(--color-rose-500);
--bg-fail-secondary: #432232;
/* Severity Colors */
--bg-data-critical: #FF006A;
--bg-data-high: #F77852;
--bg-data-medium: #FEC94D;
--bg-data-low: #FDFBD4;
--bg-data-info: #3C8DFF;
}
/* ===== TAILWIND THEME MAPPINGS ===== */
@theme {
/* Remap base variables to --color- prefix for Tailwind compatibility */
/* ===== LEGACY CHART COLORS ===== */
--color-chart-info: var(--chart-info);
--color-chart-warning: var(--chart-warning);
--color-chart-warning-emphasis: var(--chart-warning-emphasis);
--color-chart-danger: var(--chart-danger);
--color-chart-danger-emphasis: var(--chart-danger-emphasis);
--color-chart-success: var(--chart-success-color);
--color-chart-fail: var(--chart-fail);
--color-chart-radar-primary: var(--chart-radar-primary);
--color-chart-text-primary: var(--chart-text-primary);
--color-chart-text-secondary: var(--chart-text-secondary);
--color-chart-border: var(--chart-border);
--color-chart-border-emphasis: var(--chart-border-emphasis);
--color-chart-background: var(--chart-background);
--color-chart-alert-bg: var(--chart-alert-bg);
--color-chart-alert-text: var(--chart-alert-text);
/* ===== NEW SEMANTIC COLORS (PROWLER-307) ===== */
/* 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);
/* Button Colors */
--color-button-primary: var(--bg-button-primary);
--color-button-primary-hover: var(--bg-button-primary-hover);
--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-input-primary: var(--bg-input-primary);
--color-input-border: var(--border-input-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: var(--text-error-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-fail: var(--bg-fail-primary);
--color-bg-fail-secondary: var(--bg-fail-secondary);
}
/* ===== 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 */
}
.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;
}
}
Reference in New Issue View Git Blame Copy Permalink