mirror of
https://github.com/BigBodyCobain/Shadowbroker.git
synced 2026-05-14 04:22:07 +02:00
anoracleofra-code
99 lines
2.6 KiB
CSS
99 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #000000;
|
|
--foreground: #ededed;
|
|
--bg-primary: #000000;
|
|
--bg-secondary: rgb(17, 24, 39);
|
|
--bg-tertiary: rgb(31, 41, 55);
|
|
--bg-panel: rgba(17, 24, 39, 0.8);
|
|
--border-primary: rgb(55, 65, 81);
|
|
--border-secondary: rgb(75, 85, 99);
|
|
--text-primary: rgb(243, 244, 246);
|
|
--text-secondary: rgb(156, 163, 175);
|
|
--text-muted: rgb(107, 114, 128);
|
|
--text-heading: rgb(236, 254, 255);
|
|
--hover-accent: rgba(8, 51, 68, 0.2);
|
|
--scrollbar-thumb: rgba(100, 116, 139, 0.3);
|
|
--scrollbar-thumb-hover: rgba(100, 116, 139, 0.5);
|
|
}
|
|
|
|
/* Light theme: only the map basemap changes — UI stays dark */
|
|
[data-theme="light"] {
|
|
--background: #000000;
|
|
--foreground: #ededed;
|
|
--bg-primary: #000000;
|
|
--bg-secondary: rgb(17, 24, 39);
|
|
--bg-tertiary: rgb(31, 41, 55);
|
|
--bg-panel: rgba(17, 24, 39, 0.8);
|
|
--border-primary: rgb(55, 65, 81);
|
|
--border-secondary: rgb(75, 85, 99);
|
|
--text-primary: rgb(243, 244, 246);
|
|
--text-secondary: rgb(156, 163, 175);
|
|
--text-muted: rgb(107, 114, 128);
|
|
--text-heading: rgb(236, 254, 255);
|
|
--hover-accent: rgba(8, 51, 68, 0.2);
|
|
--scrollbar-thumb: rgba(100, 116, 139, 0.3);
|
|
--scrollbar-thumb-hover: rgba(100, 116, 139, 0.5);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
/* Styled thin scrollbar for dark HUD UI */
|
|
.styled-scrollbar::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.styled-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.styled-scrollbar::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
.styled-scrollbar {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
/* MapLibre Popup Overrides */
|
|
.maplibregl-popup-content {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.maplibregl-popup-tip {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Focus mode: dim the map canvas (tiles + drawn layers) when a popup is active.
|
|
Inside MapLibre's DOM, .maplibregl-canvas-container is a SIBLING of .maplibregl-popup,
|
|
so this filter dims the map without affecting the popup at all. */
|
|
.map-focus-active .maplibregl-canvas-container {
|
|
filter: brightness(0.3);
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
/* Keep popups fully bright and interactive above the dimmed canvas */
|
|
.map-focus-active .maplibregl-popup {
|
|
z-index: 10 !important;
|
|
}
|