design.estate/dees-catalog-geo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-geo-map): Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-05 16:50:51 +00:00
parent 32454a7d19
commit 54999a52b7
6 changed files with 275 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
ts_web/elements/00componentstyles.ts
View File

@@ -1,4 +1,4 @@
import { css } from '@design.estate/dees-element';
import { css, cssManager } from '@design.estate/dees-element';
/**
* Shared component styles for geo components
@@ -103,8 +103,8 @@ export const toolbarStyles = css`
flex-direction: column;
gap: 4px;
padding: 8px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -120,7 +120,7 @@ export const toolbarStyles = css`
.toolbar-divider {
height: 1px;
margin: 4px 0;
background: var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.tool-button {
@@ -133,13 +133,13 @@ export const toolbarStyles = css`
border: none;
border-radius: 6px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.tool-button.active {
@@ -170,8 +170,8 @@ export const searchStyles = css`
.search-input-wrapper {
display: flex;
align-items: center;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -187,7 +187,7 @@ export const searchStyles = css`
justify-content: center;
width: 36px;
height: 36px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
flex-shrink: 0;
}
@@ -202,14 +202,14 @@ export const searchStyles = css`
padding: 0 12px 0 0;
border: none;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
font-size: 13px;
font-family: inherit;
outline: none;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
}
.search-spinner {
@@ -224,7 +224,7 @@ export const searchStyles = css`
.search-spinner svg {
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
animation: spin 1s linear infinite;
}
@@ -243,15 +243,15 @@ export const searchStyles = css`
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.15s ease, color 0.15s ease;
}
.search-clear:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.search-clear svg {
@@ -266,8 +266,8 @@ export const searchStyles = css`
right: 0;
max-height: 300px;
overflow-y: auto;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -285,7 +285,7 @@ export const searchStyles = css`
padding: 10px 12px;
cursor: pointer;
transition: background-color 0.1s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
}
.search-result:last-child {
@@ -294,25 +294,25 @@ export const searchStyles = css`
.search-result:hover,
.search-result.highlighted {
background: rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.search-result-name {
font-size: 13px;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.3;
}
.search-result-type {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
text-transform: capitalize;
}
.search-no-results {
padding: 12px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
font-size: 13px;
}
`;
@@ -323,8 +323,8 @@ export const searchStyles = css`
export const navigationStyles = css`
.navigation-panel {
width: 300px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -337,7 +337,7 @@ export const navigationStyles = css`
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-header-icon {
@@ -357,14 +357,14 @@ export const navigationStyles = css`
.nav-header-title {
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.nav-mode-selector {
display: flex;
gap: 4px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-mode-btn {
@@ -377,15 +377,15 @@ export const navigationStyles = css`
border: none;
border-radius: 6px;
background: transparent;
color: rgba(255, 255, 255, 0.6);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
font-size: 12px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-mode-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
}
.nav-mode-btn.active {
@@ -398,6 +398,67 @@ export const navigationStyles = css`
height: 16px;
}
/* Traffic toggle in navigation panel */
.nav-traffic-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-traffic-toggle-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
}
.nav-traffic-toggle-label svg {
width: 14px;
height: 14px;
color: var(--geo-tool-active, #0084ff);
}
.nav-traffic-toggle-btn {
position: relative;
width: 36px;
height: 20px;
border: none;
border-radius: 10px;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.2)')};
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0;
}
.nav-traffic-toggle-btn.active {
background: var(--geo-tool-active, #0084ff);
}
.toggle-track {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
}
.nav-traffic-toggle-btn.active .toggle-thumb {
transform: translateX(16px);
}
.nav-inputs {
padding: 12px;
display: flex;
@@ -437,10 +498,10 @@ export const navigationStyles = css`
width: 100%;
height: 36px;
padding: 0 36px 0 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
color: var(--geo-text, #fff);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
font-size: 13px;
font-family: inherit;
outline: none;
@@ -452,7 +513,7 @@ export const navigationStyles = css`
}
.nav-input::placeholder {
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
}
.nav-input.has-value {
@@ -472,14 +533,14 @@ export const navigationStyles = css`
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-set-map-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
}
.nav-set-map-btn.active {
@@ -505,13 +566,13 @@ export const navigationStyles = css`
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
cursor: pointer;
transition: color 0.15s ease;
}
.nav-input-clear:hover {
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.nav-input-clear svg {
@@ -526,8 +587,8 @@ export const navigationStyles = css`
right: 0;
max-height: 200px;
overflow-y: auto;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.98));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.98)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px;
z-index: 20;
}
@@ -539,7 +600,7 @@ export const navigationStyles = css`
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.1s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
}
.nav-search-result:last-child {
@@ -548,12 +609,12 @@ export const navigationStyles = css`
.nav-search-result:hover,
.nav-search-result.highlighted {
background: rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-search-result-name {
font-size: 12px;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
@@ -562,7 +623,7 @@ export const navigationStyles = css`
.nav-search-result-type {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
text-transform: capitalize;
}
@@ -602,12 +663,12 @@ export const navigationStyles = css`
}
.nav-action-btn.secondary {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.nav-action-btn.secondary:hover {
background: rgba(255, 255, 255, 0.15);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.15)')};
}
.nav-action-btn svg {
@@ -622,8 +683,8 @@ export const navigationStyles = css`
gap: 16px;
padding: 12px;
background: rgba(0, 132, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-summary-item {
@@ -632,7 +693,7 @@ export const navigationStyles = css`
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.nav-summary-item svg {
@@ -650,7 +711,7 @@ export const navigationStyles = css`
display: flex;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
transition: background-color 0.15s ease;
cursor: pointer;
}
@@ -660,7 +721,7 @@ export const navigationStyles = css`
}
.nav-step:hover {
background: rgba(255, 255, 255, 0.05);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
}
.nav-step-icon {
@@ -670,8 +731,8 @@ export const navigationStyles = css`
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
font-size: 14px;
flex-shrink: 0;
}
@@ -683,14 +744,14 @@ export const navigationStyles = css`
.nav-step-instruction {
font-size: 13px;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.4;
margin-bottom: 2px;
}
.nav-step-distance {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
}
.nav-error {
@@ -716,7 +777,7 @@ export const navigationStyles = css`
justify-content: center;
gap: 8px;
padding: 16px;
color: rgba(255, 255, 255, 0.6);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
font-size: 13px;
}
@@ -729,7 +790,7 @@ export const navigationStyles = css`
.nav-empty-steps {
padding: 16px 12px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
font-size: 12px;
}
@@ -739,7 +800,7 @@ export const navigationStyles = css`
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-back-btn {
@@ -750,15 +811,15 @@ export const navigationStyles = css`
height: 32px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: var(--geo-text, #fff);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease;
flex-shrink: 0;
}
.nav-back-btn:hover {
background: rgba(255, 255, 255, 0.2);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.2)')};
}
.nav-back-btn svg {
@@ -774,7 +835,7 @@ export const navigationStyles = css`
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.nav-directions-summary svg {
@@ -784,7 +845,7 @@ export const navigationStyles = css`
}
.nav-directions-separator {
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
margin: 0 4px;
}
@@ -852,12 +913,12 @@ export const navigationStyles = css`
.nav-traffic-text {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.nav-traffic-delay {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
margin-left: auto;
}
`;
@@ -888,8 +949,8 @@ export const headerToolbarStyles = css`
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
min-height: 52px;
position: relative;
z-index: 10;
@@ -919,7 +980,7 @@ export const headerToolbarStyles = css`
.header-toolbar .toolbar-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.15);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
margin: 0 4px;
}
@@ -934,13 +995,13 @@ export const headerToolbarStyles = css`
border: none;
border-radius: 6px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.header-toolbar .tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.header-toolbar .tool-button.active {
@@ -967,8 +1028,8 @@ export const headerToolbarStyles = css`
/* Left Sidebar - Navigation Panel */
.left-sidebar {
grid-area: left-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-right: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-right: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
overflow: hidden;
display: flex;
flex-direction: column;
@@ -994,8 +1055,8 @@ export const headerToolbarStyles = css`
/* Right Sidebar - Draw Panel */
.right-sidebar {
grid-area: right-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-left: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-left: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
overflow: hidden;
display: flex;
flex-direction: column;
@@ -1021,7 +1082,7 @@ export const headerToolbarStyles = css`
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.draw-panel-header-icon {
@@ -1041,7 +1102,7 @@ export const headerToolbarStyles = css`
.draw-panel-header-title {
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.draw-tools-grid {
@@ -1058,17 +1119,17 @@ export const headerToolbarStyles = css`
justify-content: center;
gap: 6px;
padding: 12px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.draw-tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.2);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
}
.draw-tool-button.active {
@@ -1096,7 +1157,7 @@ export const headerToolbarStyles = css`
.draw-panel-divider {
height: 1px;
margin: 4px 12px;
background: rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.draw-panel-actions {
@@ -1112,10 +1173,10 @@ export const headerToolbarStyles = css`
justify-content: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
font-size: 12px;
font-weight: 500;
@@ -1123,8 +1184,8 @@ export const headerToolbarStyles = css`
}
.draw-action-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.2);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
}
.draw-action-button.active {
@@ -1145,7 +1206,7 @@ export const headerToolbarStyles = css`
.draw-action-button.danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
}
/* Map container takes grid area */
@@ -1177,9 +1238,9 @@ export const trafficStyles = css`
padding: 0;
border: none;
border-radius: 8px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
color: var(--geo-text, #fff);
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -1187,7 +1248,7 @@ export const trafficStyles = css`
}
.traffic-toggle-btn:hover:not(:disabled) {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.15));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
}
.traffic-toggle-btn.active {
@@ -1215,7 +1276,7 @@ export const trafficStyles = css`
justify-content: center;
width: 14px;
height: 14px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border-radius: 50%;
}
@@ -1230,8 +1291,8 @@ export const trafficStyles = css`
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -1252,7 +1313,7 @@ export const trafficStyles = css`
.traffic-status-text {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
}
.traffic-error {
@@ -1273,8 +1334,8 @@ export const trafficStyles = css`
/* Traffic Legend */
.traffic-legend {
padding: 10px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -1285,7 +1346,7 @@ export const trafficStyles = css`
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
margin-bottom: 8px;
}
@@ -1300,7 +1361,7 @@ export const trafficStyles = css`
align-items: center;
gap: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.traffic-legend-color {
@@ -1312,8 +1373,8 @@ export const trafficStyles = css`
.traffic-legend-updated {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
}
`;