fredericandterraputix
2fe8cf92e1
Co-authored-by: terraputix <terraputix@mailbox.org> Reviewed-on: useweb/open-meteo-blue#4
165 lines
6.0 KiB
CSS
165 lines
6.0 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════════
|
|
ECharts Global Styles — Open-Meteo Weather
|
|
|
|
Shared CSS for all ECharts chart instances across the application.
|
|
Provides consistent theming, tooltip styling, and responsive behavior
|
|
that integrates with the application's design system (Tailwind + shadcn).
|
|
═══════════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ─── Chart Wrapper ────────────────────────────────────────────────────────── */
|
|
|
|
.echart-wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ─── Chart Container (legacy class support) ───────────────────────────────── */
|
|
|
|
.echarts-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
|
|
/* Ensure canvas background is always transparent so our page bg shows through */
|
|
.echart-wrapper canvas,
|
|
.echarts-container canvas {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ─── Tooltip Styling ──────────────────────────────────────────────────────── */
|
|
|
|
/* Override ECharts' default tooltip to match the application's popover design */
|
|
.echarts-tooltip {
|
|
background: hsl(var(--popover)) !important;
|
|
border: 1px solid hsl(var(--border)) !important;
|
|
border-radius: var(--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.05) !important;
|
|
padding: 0.625rem 0.75rem !important;
|
|
font-size: 0.8125rem !important;
|
|
line-height: 1.4 !important;
|
|
max-width: min(90vw, 480px) !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.echarts-tooltip-content {
|
|
color: hsl(var(--popover-foreground)) !important;
|
|
}
|
|
|
|
/* Tooltip marker dots — make them slightly larger and rounded */
|
|
.echarts-tooltip .echarts-tooltip-marker,
|
|
.echarts-tooltip span[style*="border-radius"] {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* ─── Loading Mask ─────────────────────────────────────────────────────────── */
|
|
|
|
.echarts-loading-mask {
|
|
background: hsl(var(--background) / 0.8) !important;
|
|
}
|
|
|
|
/* ─── Light Mode Adjustments ───────────────────────────────────────────────── */
|
|
|
|
[data-theme='light'] .echart-wrapper,
|
|
[data-theme='light'] .echarts-container,
|
|
:root:not(.dark):not([data-theme='dark']) .echart-wrapper,
|
|
:root:not(.dark):not([data-theme='dark']) .echarts-container {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
[data-theme='light'] .echarts-tooltip,
|
|
:root:not(.dark):not([data-theme='dark']) .echarts-tooltip {
|
|
color: hsl(var(--popover-foreground)) !important;
|
|
}
|
|
|
|
/* ─── Dark Mode Adjustments ────────────────────────────────────────────────── */
|
|
|
|
.dark .echart-wrapper,
|
|
[data-theme='dark'] .echart-wrapper,
|
|
.dark .echarts-container,
|
|
[data-theme='dark'] .echarts-container {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.dark .echarts-tooltip,
|
|
[data-theme='dark'] .echarts-tooltip {
|
|
color: hsl(var(--popover-foreground)) !important;
|
|
box-shadow:
|
|
0 4px 6px -1px rgb(0 0 0 / 0.3),
|
|
0 2px 4px -2px rgb(0 0 0 / 0.15) !important;
|
|
}
|
|
|
|
/* ─── Toolbox Icon Overrides ───────────────────────────────────────────────── */
|
|
|
|
/* Make sure the toolbox icons are visually subtle until hovered */
|
|
.echart-wrapper [class*="toolbox"],
|
|
.echarts-container [class*="toolbox"] {
|
|
opacity: 0.6;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.echart-wrapper:hover [class*="toolbox"],
|
|
.echarts-container:hover [class*="toolbox"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ─── Chart Spacing ────────────────────────────────────────────────────────── */
|
|
|
|
/* Add consistent vertical spacing between stacked chart instances */
|
|
.chart-content .echart-wrapper + .echart-wrapper {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* ─── Responsive Sizing ────────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 640px) {
|
|
.echarts-container {
|
|
min-height: 240px;
|
|
}
|
|
|
|
/* Slightly smaller tooltips on mobile */
|
|
.echarts-tooltip {
|
|
font-size: 0.75rem !important;
|
|
padding: 0.5rem 0.625rem !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 641px) and (max-width: 1024px) {
|
|
.echarts-container {
|
|
min-height: 280px;
|
|
}
|
|
}
|
|
|
|
/* ─── Print Styles ─────────────────────────────────────────────────────────── */
|
|
|
|
@media print {
|
|
.echart-wrapper,
|
|
.echarts-container {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* Hide interactive elements when printing */
|
|
.echart-wrapper [class*="toolbox"],
|
|
.echarts-container [class*="toolbox"],
|
|
.chart-toolbar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ─── Accessibility ────────────────────────────────────────────────────────── */
|
|
|
|
/* Respect reduced motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.echart-wrapper *,
|
|
.echarts-container * {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|