mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-23 20:42:02 +00:00
Alejandro Bailo
753 lines
22 KiB
CSS
753 lines
22 KiB
CSS
@import "tailwindcss";
|
|
/* All @import rules must precede @plugin/@source — a late @import is invalid
|
|
* per the CSS spec and lightningcss (Tailwind v4) silently drops it. */
|
|
@import "./tours.css";
|
|
@plugin "tailwindcss-animate";
|
|
@plugin "@tailwindcss/typography";
|
|
@source "../node_modules/streamdown/dist/*.js";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* Pushed page/panel content resolves responsive variants against its marked
|
|
* width container. Everything else — notably body portals and fixed overlays
|
|
* — keeps normal viewport media queries, so body never becomes a containing
|
|
* block for fixed positioning. Widths match Tailwind's defaults. */
|
|
@custom-variant sm {
|
|
@media (width >= 40rem) {
|
|
&:where(:not([data-responsive-container] *)) {
|
|
@slot;
|
|
}
|
|
}
|
|
@container (width >= 40rem) {
|
|
&:where([data-responsive-container] *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
@custom-variant md {
|
|
@media (width >= 48rem) {
|
|
&:where(:not([data-responsive-container] *)) {
|
|
@slot;
|
|
}
|
|
}
|
|
@container (width >= 48rem) {
|
|
&:where([data-responsive-container] *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
@custom-variant lg {
|
|
@media (width >= 64rem) {
|
|
&:where(:not([data-responsive-container] *)) {
|
|
@slot;
|
|
}
|
|
}
|
|
@container (width >= 64rem) {
|
|
&:where([data-responsive-container] *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
@custom-variant xl {
|
|
@media (width >= 80rem) {
|
|
&:where(:not([data-responsive-container] *)) {
|
|
@slot;
|
|
}
|
|
}
|
|
@container (width >= 80rem) {
|
|
&:where([data-responsive-container] *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
@custom-variant 2xl {
|
|
@media (width >= 96rem) {
|
|
&:where(:not([data-responsive-container] *)) {
|
|
@slot;
|
|
}
|
|
}
|
|
@container (width >= 96rem) {
|
|
&:where([data-responsive-container] *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Fonts are provided by next/font as CSS variables on <html>; `inline` avoids
|
|
* emitting a circular --font-sans: var(--font-sans) declaration on :root. */
|
|
@theme inline {
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
}
|
|
|
|
/* ===== 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);
|
|
|
|
/* App sidebar */
|
|
--bg-sidebar-active: rgba(255, 255, 255, 0.78);
|
|
--bg-sidebar-hover: rgba(255, 255, 255, 0.55);
|
|
--bg-sidebar-subitem-active: rgba(16, 185, 129, 0.1);
|
|
--bg-sidebar-toggle: rgba(255, 255, 255, 0.4);
|
|
--border-sidebar-active: rgba(15, 23, 42, 0.09);
|
|
--border-sidebar-hover: rgba(15, 23, 42, 0.06);
|
|
--border-sidebar-guide: rgba(15, 23, 42, 0.12);
|
|
--border-sidebar-toggle: rgba(15, 23, 42, 0.08);
|
|
--sidebar-active-bar: var(--color-emerald-400);
|
|
--sidebar-active-icon: var(--color-emerald-600);
|
|
--shadow-sidebar-active: 0 8px 24px rgba(15, 23, 42, 0.06);
|
|
--gradient-sidebar-halo: radial-gradient(
|
|
circle,
|
|
rgba(46, 229, 155, 0.14) 0%,
|
|
rgba(98, 223, 240, 0.06) 42%,
|
|
transparent 72%
|
|
);
|
|
|
|
/* Lighthouse AI */
|
|
--gradient-lighthouse: linear-gradient(96deg, #2ee59b 3.55%, #62dff0 98.85%);
|
|
|
|
/* Cloud feature badge */
|
|
--gradient-feature-cloud: linear-gradient(
|
|
112deg,
|
|
rgb(46, 229, 155) 3.5%,
|
|
rgb(98, 223, 240) 98.8%
|
|
);
|
|
--bg-feature-new: var(--color-emerald-500);
|
|
--text-feature-new: var(--color-white);
|
|
}
|
|
|
|
/* ===== 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);
|
|
|
|
/* App sidebar */
|
|
--bg-sidebar-active: rgba(255, 255, 255, 0.06);
|
|
--bg-sidebar-hover: rgba(255, 255, 255, 0.045);
|
|
--bg-sidebar-subitem-active: rgba(46, 229, 155, 0.09);
|
|
--bg-sidebar-toggle: rgba(255, 255, 255, 0.025);
|
|
--border-sidebar-active: rgba(255, 255, 255, 0.11);
|
|
--border-sidebar-hover: rgba(255, 255, 255, 0.07);
|
|
--border-sidebar-guide: rgba(255, 255, 255, 0.1);
|
|
--border-sidebar-toggle: rgba(255, 255, 255, 0.08);
|
|
--sidebar-active-bar: var(--color-emerald-300);
|
|
--sidebar-active-icon: var(--color-emerald-300);
|
|
--shadow-sidebar-active: 0 10px 28px rgba(0, 0, 0, 0.22);
|
|
--gradient-sidebar-halo: radial-gradient(
|
|
circle,
|
|
rgba(46, 229, 155, 0.16) 0%,
|
|
rgba(98, 223, 240, 0.07) 40%,
|
|
transparent 72%
|
|
);
|
|
}
|
|
|
|
/* ===== 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);
|
|
--color-bg-feature-new: var(--bg-feature-new);
|
|
--color-text-feature-new: var(--text-feature-new);
|
|
|
|
/* App sidebar */
|
|
--color-bg-sidebar-active: var(--bg-sidebar-active);
|
|
--color-bg-sidebar-hover: var(--bg-sidebar-hover);
|
|
--color-bg-sidebar-subitem-active: var(--bg-sidebar-subitem-active);
|
|
--color-bg-sidebar-toggle: var(--bg-sidebar-toggle);
|
|
--color-border-sidebar-active: var(--border-sidebar-active);
|
|
--color-border-sidebar-hover: var(--border-sidebar-hover);
|
|
--color-border-sidebar-guide: var(--border-sidebar-guide);
|
|
--color-border-sidebar-toggle: var(--border-sidebar-toggle);
|
|
--color-sidebar-active-bar: var(--sidebar-active-bar);
|
|
--color-sidebar-active-icon: var(--sidebar-active-icon);
|
|
|
|
/* Shadows */
|
|
--shadow-progress-glow: var(--shadow-progress-glow);
|
|
--shadow-sidebar-active: var(--shadow-sidebar-active);
|
|
|
|
/* Background images */
|
|
--background-image-feature-cloud: var(--gradient-feature-cloud);
|
|
|
|
/* Breakpoints */
|
|
--breakpoint-3xl: 1920px;
|
|
|
|
/* Animations */
|
|
--animate-fade-in: fade-in 200ms ease-out forwards;
|
|
--animate-collapsible-down: collapsible-down 0.2s ease-out;
|
|
--animate-collapsible-up: collapsible-up 0.2s ease-out;
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes collapsible-down {
|
|
from {
|
|
height: 0;
|
|
}
|
|
to {
|
|
height: var(--radix-collapsible-content-height);
|
|
}
|
|
}
|
|
|
|
@keyframes collapsible-up {
|
|
from {
|
|
height: var(--radix-collapsible-content-height);
|
|
}
|
|
to {
|
|
height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Used from plain CSS (`.animate-download-icon`), so it must always be
|
|
* emitted — keep it outside @theme. */
|
|
@keyframes dropArrow {
|
|
0% {
|
|
transform: translateY(-8px);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ===== CONTAINER UTILITY ===== */
|
|
@utility container {
|
|
margin-inline: auto;
|
|
padding-inline: 2rem;
|
|
}
|
|
|
|
/* ===== COMPONENT LAYER ===== */
|
|
@layer components {
|
|
.app-sidebar-halo {
|
|
position: absolute;
|
|
top: -8rem;
|
|
left: -9rem;
|
|
width: 26rem;
|
|
height: 26rem;
|
|
pointer-events: none;
|
|
background: var(--gradient-sidebar-halo);
|
|
filter: blur(28px);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/* 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-bg-neutral-primary text-text-neutral-primary;
|
|
}
|
|
}
|
|
|
|
/* Neutralize the browser's native autofill highlight (Chromium/WebKit paint a
|
|
forced blue/yellow background on :autofill). box-shadow inset masks it; the
|
|
long transition stops the native color from flashing before the mask lands.
|
|
Kept UNLAYERED + !important: the mask is a box-shadow and collides with
|
|
shadcn's focus:ring (also a box-shadow, in @layer utilities) — a layered
|
|
rule can't win that, so this sits outside the cascade layers. */
|
|
input:autofill,
|
|
input:autofill:hover,
|
|
input:autofill:focus,
|
|
input:autofill:active,
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
-webkit-text-fill-color: var(--text-neutral-secondary) !important;
|
|
-webkit-box-shadow: 0 0 0 1000px var(--bg-input-primary) inset !important;
|
|
box-shadow: 0 0 0 1000px var(--bg-input-primary) inset !important;
|
|
caret-color: var(--text-neutral-secondary);
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|