mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-10 17:21:38 -05:00
236 lines
8 KiB
CSS
236 lines
8 KiB
CSS
/* Leaflet Theme Styles - Light and Dark mode support */
|
|
|
|
/* CSS Custom Properties for Light Theme */
|
|
[data-theme="light"] {
|
|
--leaflet-bg-color: #ffffff;
|
|
--leaflet-text-color: #000000;
|
|
--leaflet-border-color: #e5e7eb;
|
|
--leaflet-shadow-color: rgba(0, 0, 0, 0.1);
|
|
--leaflet-hover-color: #f3f4f6;
|
|
--leaflet-link-color: #0066cc;
|
|
--leaflet-scale-bg: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
/* CSS Custom Properties for Dark Theme */
|
|
[data-theme="dark"] {
|
|
--leaflet-bg-color: #374151;
|
|
--leaflet-text-color: #ffffff;
|
|
--leaflet-border-color: #4b5563;
|
|
--leaflet-shadow-color: rgba(0, 0, 0, 0.3);
|
|
--leaflet-hover-color: #4b5563;
|
|
--leaflet-link-color: #66b3ff;
|
|
--leaflet-scale-bg: rgba(55, 65, 81, 0.9);
|
|
}
|
|
|
|
/* Leaflet default controls theme override */
|
|
.leaflet-control-layers,
|
|
.leaflet-control-zoom,
|
|
.leaflet-control-attribution,
|
|
.leaflet-bar a,
|
|
.leaflet-control-layers-toggle,
|
|
.leaflet-control-layers-list,
|
|
.leaflet-control-draw {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
border-color: var(--leaflet-border-color) !important;
|
|
box-shadow: 0 1px 4px var(--leaflet-shadow-color) !important;
|
|
|
|
}
|
|
|
|
/* Leaflet zoom buttons */
|
|
.leaflet-control-zoom a {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
border-bottom: 1px solid var(--leaflet-border-color) !important;
|
|
}
|
|
|
|
.leaflet-control-zoom a:hover {
|
|
background-color: var(--leaflet-hover-color) !important;
|
|
}
|
|
|
|
/* Leaflet layer control */
|
|
.leaflet-control-layers-toggle {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
/* Replace default icon with custom SVG */
|
|
background-image: none !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.leaflet-control-layers-toggle::before {
|
|
content: '' !important;
|
|
display: block !important;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>') !important;
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
}
|
|
|
|
/* Dark theme - use white stroke for the icon */
|
|
[data-theme="dark"] .leaflet-control-layers-toggle::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>') !important;
|
|
}
|
|
|
|
/* Light theme - use black stroke for the icon */
|
|
[data-theme="light"] .leaflet-control-layers-toggle::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>') !important;
|
|
}
|
|
|
|
.leaflet-control-layers-expanded {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
}
|
|
|
|
.leaflet-control-layers label {
|
|
color: var(--leaflet-text-color) !important;
|
|
}
|
|
|
|
/* Leaflet Draw controls */
|
|
.leaflet-draw-toolbar a {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
border-bottom: 1px solid var(--leaflet-border-color) !important;
|
|
}
|
|
|
|
.leaflet-draw-toolbar a:hover {
|
|
background-color: var(--leaflet-hover-color) !important;
|
|
}
|
|
|
|
.leaflet-draw-actions a {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
}
|
|
|
|
/* Leaflet popups */
|
|
.leaflet-popup-content-wrapper {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
}
|
|
|
|
.leaflet-popup-tip {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
}
|
|
|
|
/* Attribution control */
|
|
.leaflet-control-attribution a {
|
|
color: var(--leaflet-link-color) !important;
|
|
}
|
|
|
|
/* Custom control buttons */
|
|
.leaflet-control-button,
|
|
.add-visit-button,
|
|
.leaflet-bar button {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
border: 1px solid var(--leaflet-border-color) !important;
|
|
box-shadow: 0 1px 4px var(--leaflet-shadow-color) !important;
|
|
}
|
|
|
|
.leaflet-control-button:hover,
|
|
.add-visit-button:hover,
|
|
.leaflet-bar button:hover {
|
|
background-color: var(--leaflet-hover-color) !important;
|
|
}
|
|
|
|
/* Any other custom controls */
|
|
.leaflet-top .leaflet-control button,
|
|
.leaflet-bottom .leaflet-control button,
|
|
.leaflet-left .leaflet-control button,
|
|
.leaflet-right .leaflet-control button {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
border: 1px solid var(--leaflet-border-color) !important;
|
|
}
|
|
|
|
/* Location search button */
|
|
.location-search-toggle,
|
|
#location-search-toggle {
|
|
background-color: var(--leaflet-bg-color) !important;
|
|
color: var(--leaflet-text-color) !important;
|
|
border: 1px solid var(--leaflet-border-color) !important;
|
|
box-shadow: 0 1px 4px var(--leaflet-shadow-color) !important;
|
|
}
|
|
|
|
.location-search-toggle:hover,
|
|
#location-search-toggle:hover {
|
|
background-color: var(--leaflet-hover-color) !important;
|
|
}
|
|
|
|
/* Distance scale control */
|
|
.leaflet-control-scale {
|
|
background: var(--leaflet-scale-bg) !important;
|
|
border-radius: 3px !important;
|
|
padding: 2px !important;
|
|
}
|
|
|
|
/* Family member tooltip - dark styled like the visit popup */
|
|
.leaflet-tooltip.family-member-tooltip {
|
|
background-color: #374151 !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid #4b5563 !important;
|
|
border-radius: 4px !important;
|
|
padding: 4px 8px !important;
|
|
font-size: 11px !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.leaflet-tooltip.family-member-tooltip::before {
|
|
border-top-color: #374151 !important;
|
|
}
|
|
|
|
/* Family member popup - just override colors, keep default layout */
|
|
.leaflet-popup-content-wrapper:has(.family-member-popup) {
|
|
background-color: #1f2937 !important;
|
|
color: #f9fafb !important;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper:has(.family-member-popup) + .leaflet-popup-tip {
|
|
background-color: #1f2937 !important;
|
|
}
|
|
|
|
/* Family member marker pulse animation for recent updates */
|
|
@keyframes family-marker-pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
|
}
|
|
}
|
|
|
|
.family-member-marker-recent {
|
|
animation: family-marker-pulse 2s infinite;
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.family-member-marker-recent .leaflet-marker-icon > div {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(16, 185, 129, 0.7);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Fix bottom controls being cut off */
|
|
.leaflet-bottom {
|
|
padding-bottom: 10px !important;
|
|
transition: padding-bottom 0.3s ease;
|
|
}
|
|
|
|
.leaflet-bottom.leaflet-left {
|
|
padding-left: 10px !important;
|
|
}
|
|
|
|
.leaflet-bottom.leaflet-right {
|
|
padding-right: 10px !important;
|
|
}
|
|
|
|
/* DaisyUI tooltips on map buttons - ensure they appear above date navigation (z-index: 9999) */
|
|
.tooltip:before,
|
|
.tooltip:after {
|
|
z-index: 10000 !important;
|
|
}
|