Initial commit: Lageplan v1.0 - Next.js 15.5, React 19
This commit is contained in:
Pepe Ziberi
228
src/app/globals.css
Normal file
228
src/app/globals.css
Normal file
@@ -0,0 +1,228 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Nacht-Modus: Sehr dunkel, bernstein/rot-Akzente (Nachtsicht-Erhaltung) */
|
||||
.dark {
|
||||
--background: 0 0% 5%;
|
||||
--foreground: 30 20% 75%;
|
||||
--card: 0 0% 7%;
|
||||
--card-foreground: 30 20% 75%;
|
||||
--popover: 0 0% 8%;
|
||||
--popover-foreground: 30 20% 75%;
|
||||
--primary: 25 90% 45%;
|
||||
--primary-foreground: 0 0% 5%;
|
||||
--secondary: 0 0% 12%;
|
||||
--secondary-foreground: 30 20% 75%;
|
||||
--muted: 0 0% 12%;
|
||||
--muted-foreground: 30 10% 50%;
|
||||
--accent: 0 0% 14%;
|
||||
--accent-foreground: 30 20% 75%;
|
||||
--destructive: 0 70% 40%;
|
||||
--destructive-foreground: 30 20% 85%;
|
||||
--border: 0 0% 15%;
|
||||
--input: 0 0% 15%;
|
||||
--ring: 25 80% 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* MapLibre styles */
|
||||
.maplibregl-map {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Night mode: map stays bright (readable), only UI around it is dark */
|
||||
/* MapLibre controls get subtle dark styling */
|
||||
.dark .maplibregl-ctrl-group {
|
||||
background: #222 !important;
|
||||
border: 1px solid #444 !important;
|
||||
}
|
||||
.dark .maplibregl-ctrl-group button {
|
||||
background-color: #222 !important;
|
||||
}
|
||||
.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
|
||||
filter: invert(0.8);
|
||||
}
|
||||
.dark .maplibregl-ctrl-attrib {
|
||||
background: rgba(0,0,0,0.6) !important;
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-group {
|
||||
@apply shadow-md rounded-lg overflow-hidden;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-group button {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
/* Touch-friendly: disable text selection on interactive elements */
|
||||
.touch-none {
|
||||
touch-action: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-muted rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-muted-foreground/30 rounded-full hover:bg-muted-foreground/50;
|
||||
}
|
||||
|
||||
/* Drawing tools cursor */
|
||||
.draw-mode-point {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.draw-mode-line,
|
||||
.draw-mode-polygon,
|
||||
.draw-mode-rectangle,
|
||||
.draw-mode-circle {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.draw-mode-select {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Symbol markers on map: no border/background (override global border-border) */
|
||||
.symbol-marker-wrapper {
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.symbol-marker {
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Symbol dragging */
|
||||
.symbol-dragging {
|
||||
@apply opacity-70 scale-110 shadow-lg;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Moveable handles: larger and touch-friendly */
|
||||
.moveable-control-box .moveable-control {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
margin-top: -7px !important;
|
||||
margin-left: -7px !important;
|
||||
border-radius: 50% !important;
|
||||
background: #3b82f6 !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
|
||||
}
|
||||
.moveable-control-box .moveable-rotation .moveable-control {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin-top: -14px !important;
|
||||
margin-left: -14px !important;
|
||||
background: #f97316 !important;
|
||||
cursor: grab !important;
|
||||
border: 2px solid #fff !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
|
||||
position: relative !important;
|
||||
}
|
||||
.moveable-control-box .moveable-rotation .moveable-control::after {
|
||||
content: '' !important;
|
||||
display: block !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") !important;
|
||||
background-size: contain !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
.moveable-control-box .moveable-rotation .moveable-control:active {
|
||||
cursor: grabbing !important;
|
||||
background: #ea580c !important;
|
||||
}
|
||||
.moveable-control-box .moveable-line {
|
||||
background: #3b82f6 !important;
|
||||
height: 2px !important;
|
||||
}
|
||||
.moveable-control-box .moveable-rotation .moveable-line {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Toast animations */
|
||||
.toast-enter {
|
||||
animation: toast-enter 0.2s ease-out;
|
||||
}
|
||||
|
||||
.toast-exit {
|
||||
animation: toast-exit 0.2s ease-in;
|
||||
}
|
||||
|
||||
@keyframes toast-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toast-exit {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user