Matt
ee3bfec8b0
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m27s
Tremor v3 expects its TW3 plugin to register tremor-* design tokens (tremor-content, tremor-background, tremor-border, etc.). Since TW4 has no v3 plugin support, define these tokens manually in @theme and safelist the utility classes via @source inline(). This fixes chart axis labels, grid lines, and tooltips rendering without proper colors. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
378 lines
10 KiB
CSS
378 lines
10 KiB
CSS
@font-face {
|
||
font-family: 'Montserrat';
|
||
src: url('/fonts/Montserrat-Light.ttf') format('truetype');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Montserrat';
|
||
src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Montserrat';
|
||
src: url('/fonts/Montserrat-Medium.ttf') format('truetype');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Montserrat';
|
||
src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Montserrat';
|
||
src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@import "tailwindcss";
|
||
|
||
/* Source the JS config for extended theme values */
|
||
@config "../../tailwind.config.ts";
|
||
|
||
/* Tremor generates Tailwind utility classes dynamically via template literals
|
||
(e.g. `fill-${color}-${shade}`). Tailwind v4's scanner cannot detect these,
|
||
so we must explicitly safelist every color+shade+property combination. */
|
||
@source "../../node_modules/@tremor/react/dist/**/*.js";
|
||
|
||
/* Safelist Tremor chart color utilities — all colors × key shades × fill/stroke/bg */
|
||
@source inline("{fill,stroke,bg,text}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
|
||
@source inline("hover:{bg,text,border}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
|
||
@source inline("{border,ring}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
|
||
|
||
/* Safelist Tremor design token utility classes */
|
||
@source inline("{fill,stroke,bg,text,border}-tremor-{brand,background,border,content,content-emphasis,default,label,card,dropdown}");
|
||
|
||
/* Tremor design tokens — normally registered by Tremor's TW3 plugin.
|
||
We define them manually for Tailwind v4 compatibility. */
|
||
@theme {
|
||
--color-tremor-brand: var(--color-blue-500);
|
||
--color-tremor-brand-emphasis: var(--color-blue-700);
|
||
--color-tremor-brand-inverted: #fff;
|
||
--color-tremor-brand-muted: var(--color-blue-200);
|
||
--color-tremor-brand-faint: var(--color-blue-50);
|
||
--color-tremor-background: #fff;
|
||
--color-tremor-background-emphasis: var(--color-gray-700);
|
||
--color-tremor-background-muted: var(--color-gray-50);
|
||
--color-tremor-background-subtle: var(--color-gray-100);
|
||
--color-tremor-border: var(--color-gray-200);
|
||
--color-tremor-content: var(--color-gray-500);
|
||
--color-tremor-content-emphasis: var(--color-gray-700);
|
||
--color-tremor-content-strong: var(--color-gray-900);
|
||
--color-tremor-content-subtle: var(--color-gray-400);
|
||
--color-tremor-content-inverted: #fff;
|
||
--color-tremor-ring: var(--color-gray-200);
|
||
--color-tremor-default: var(--color-gray-500);
|
||
--color-tremor-label: var(--color-gray-400);
|
||
--color-tremor-card: #fff;
|
||
--color-tremor-dropdown: #fff;
|
||
}
|
||
|
||
/* Theme variables - using CSS custom properties with Tailwind v4 @theme */
|
||
@theme {
|
||
/* Container */
|
||
--container-2xl: 1400px;
|
||
|
||
/* Custom spacing */
|
||
--spacing-18: 4.5rem;
|
||
--spacing-22: 5.5rem;
|
||
|
||
/* Font families */
|
||
--font-sans: 'Montserrat', system-ui, sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
|
||
/* Border radius */
|
||
--radius-lg: var(--radius);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
|
||
/* Custom font sizes */
|
||
--text-display-lg: 3rem;
|
||
--text-display-lg--line-height: 1.1;
|
||
--text-display-lg--font-weight: 700;
|
||
|
||
--text-display: 2.25rem;
|
||
--text-display--line-height: 1.2;
|
||
--text-display--font-weight: 700;
|
||
|
||
--text-heading: 1.5rem;
|
||
--text-heading--line-height: 1.3;
|
||
--text-heading--font-weight: 600;
|
||
|
||
--text-subheading: 1.125rem;
|
||
--text-subheading--line-height: 1.4;
|
||
--text-subheading--font-weight: 600;
|
||
|
||
--text-body: 1rem;
|
||
--text-body--line-height: 1.5;
|
||
--text-body--font-weight: 400;
|
||
|
||
--text-small: 0.875rem;
|
||
--text-small--line-height: 1.5;
|
||
--text-small--font-weight: 400;
|
||
|
||
--text-tiny: 0.75rem;
|
||
--text-tiny--line-height: 1.5;
|
||
--text-tiny--font-weight: 400;
|
||
|
||
/* Brand colors */
|
||
--color-brand-red: #de0f1e;
|
||
--color-brand-red-hover: #c00d1a;
|
||
--color-brand-red-light: #fee2e2;
|
||
--color-brand-blue: #053d57;
|
||
--color-brand-blue-light: #0a5a7c;
|
||
--color-brand-teal: #557f8c;
|
||
--color-brand-teal-light: #6a9aa8;
|
||
|
||
/* Keyframes */
|
||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||
--animate-fade-in: fade-in 0.2s ease-out;
|
||
--animate-fade-out: fade-out 0.2s ease-out;
|
||
--animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
|
||
--animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes accordion-down {
|
||
from { height: 0; }
|
||
to { height: var(--radix-accordion-content-height); }
|
||
}
|
||
|
||
@keyframes accordion-up {
|
||
from { height: var(--radix-accordion-content-height); }
|
||
to { height: 0; }
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes fade-out {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
|
||
@keyframes slide-in-from-top {
|
||
from { transform: translateY(-10px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
|
||
@keyframes slide-in-from-bottom {
|
||
from { transform: translateY(10px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
|
||
@layer base {
|
||
:root {
|
||
/* MOPC Brand Colors - mapped to shadcn/ui variables */
|
||
--background: 0 0% 99.5%;
|
||
--foreground: 220 13% 18%;
|
||
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 220 13% 18%;
|
||
|
||
--popover: 0 0% 100%;
|
||
--popover-foreground: 220 13% 18%;
|
||
|
||
/* Primary - MOPC Red */
|
||
--primary: 354 90% 47%;
|
||
--primary-foreground: 0 0% 100%;
|
||
|
||
/* Secondary - Warm gray */
|
||
--secondary: 30 6% 96%;
|
||
--secondary-foreground: 220 13% 18%;
|
||
|
||
--muted: 30 6% 96%;
|
||
--muted-foreground: 220 8% 46%;
|
||
|
||
/* Accent - Light teal tint for hover states */
|
||
--accent: 194 30% 94%;
|
||
--accent-foreground: 220 13% 18%;
|
||
|
||
--destructive: 0 84% 60%;
|
||
--destructive-foreground: 0 0% 100%;
|
||
|
||
--border: 30 6% 91%;
|
||
--input: 30 6% 91%;
|
||
--ring: 220 9% 76%;
|
||
|
||
--radius: 0.5rem;
|
||
|
||
/* Semantic colors */
|
||
--success: 142 76% 36%;
|
||
--warning: 38 92% 50%;
|
||
--info: 194 25% 44%;
|
||
}
|
||
|
||
.dark {
|
||
--background: 220 15% 8%;
|
||
--foreground: 0 0% 98%;
|
||
|
||
--card: 220 15% 10%;
|
||
--card-foreground: 0 0% 98%;
|
||
|
||
--popover: 220 15% 10%;
|
||
--popover-foreground: 0 0% 98%;
|
||
|
||
--primary: 354 90% 50%;
|
||
--primary-foreground: 0 0% 100%;
|
||
|
||
--secondary: 220 15% 18%;
|
||
--secondary-foreground: 0 0% 98%;
|
||
|
||
--muted: 220 15% 18%;
|
||
--muted-foreground: 0 0% 64%;
|
||
|
||
--accent: 194 20% 18%;
|
||
--accent-foreground: 0 0% 98%;
|
||
|
||
--destructive: 0 84% 55%;
|
||
--destructive-foreground: 0 0% 100%;
|
||
|
||
--border: 220 15% 22%;
|
||
--input: 220 15% 22%;
|
||
--ring: 220 10% 50%;
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border;
|
||
}
|
||
|
||
body {
|
||
@apply bg-background text-foreground overflow-x-hidden;
|
||
font-feature-settings: "rlig" 1, "calt" 1;
|
||
}
|
||
|
||
/* Smooth scrolling */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* Focus styles */
|
||
*:focus-visible {
|
||
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
||
}
|
||
|
||
.leaflet-container:focus,
|
||
.leaflet-container:focus-visible {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
ring: none;
|
||
--tw-ring-shadow: none;
|
||
--tw-ring-offset-shadow: none;
|
||
}
|
||
|
||
/* Selection color */
|
||
::selection {
|
||
@apply bg-primary/20 text-foreground;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
/* Hide scrollbar but keep functionality */
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* Text balance for better typography */
|
||
.text-balance {
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* Animation utilities */
|
||
.animate-in {
|
||
animation: fade-in 0.2s ease-out, slide-in-from-bottom 0.3s ease-out;
|
||
}
|
||
|
||
/* Container for admin/jury views */
|
||
.container-app {
|
||
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
|
||
}
|
||
}
|
||
|
||
/* Custom scrollbar for non-hidden areas */
|
||
@media (min-width: 768px) {
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: hsl(var(--muted));
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: hsl(var(--muted-foreground) / 0.3);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: hsl(var(--muted-foreground) / 0.5);
|
||
}
|
||
}
|
||
|
||
/* Tremor chart tooltip fix — ensure solid background */
|
||
[class*="tremor-"] [role="tooltip"],
|
||
.recharts-tooltip-wrapper .recharts-default-tooltip,
|
||
div[class*="tremor"][class*="tooltip"],
|
||
div[class*="recharts-tooltip"] {
|
||
background-color: hsl(var(--card)) !important;
|
||
border: 1px solid hsl(var(--border)) !important;
|
||
border-radius: 0.5rem !important;
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.dark div[class*="tremor"][class*="tooltip"],
|
||
.dark .recharts-tooltip-wrapper .recharts-default-tooltip,
|
||
.dark div[class*="recharts-tooltip"] {
|
||
background-color: hsl(var(--card)) !important;
|
||
border-color: hsl(var(--border)) !important;
|
||
}
|
||
|
||
/* Tremor/Recharts tooltip color indicator icons — fix rendering */
|
||
.recharts-tooltip-wrapper svg.recharts-surface {
|
||
display: inline-block !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
/* Tremor custom tooltip color dots */
|
||
[class*="tremor"] [role="tooltip"] span[class*="bg-"],
|
||
[class*="tremor"] [role="tooltip"] span[style*="background"] {
|
||
border-radius: 2px !important;
|
||
min-width: 10px !important;
|
||
min-height: 10px !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
/* Recharts default tooltip icon fix — ensure SVG paths have correct fill */
|
||
.recharts-default-tooltip .recharts-tooltip-item-list {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.recharts-default-tooltip .recharts-tooltip-item svg {
|
||
border: none !important;
|
||
}
|