Ole-Morten Duesund
7d40c9e9a8
- Info-knappen (ℹ) åpner nå sivilforsvarsdialog med alle 5 steg, med «Om»-lenke i bunnen (som Android-appen) - Laste-overleggets knapper («Lagre kart» / «Hopp over») får tekst fra i18n i stedet for å være tomme - Kompassvisningen resizes canvas når den blir synlig, fikser 0×0-canvas når den initialiseres mens containeren er skjult Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
513 lines
8.5 KiB
CSS
513 lines
8.5 KiB
CSS
/**
|
|
* Dark emergency theme — same colors as the Android app (colors.xml).
|
|
* Mobile-first responsive design.
|
|
*/
|
|
|
|
/* --- Reset & base --- */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #1A1A2E;
|
|
color: #ECEFF1;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
/* --- Focus indicators for screen reader / switch access --- */
|
|
:focus-visible {
|
|
outline: 2px solid #FF6B35;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* --- Respect reduced motion preference --- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* --- App shell layout --- */
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* --- Status bar --- */
|
|
#status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #16213E;
|
|
padding: 6px 12px;
|
|
min-height: 36px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#status-text {
|
|
flex: 1;
|
|
color: #CFD8DC;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#about-btn,
|
|
#refresh-btn {
|
|
background: none;
|
|
border: none;
|
|
color: #CFD8DC;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#about-btn:hover,
|
|
#refresh-btn:hover {
|
|
color: #ECEFF1;
|
|
}
|
|
|
|
/* --- Main content area (map or compass) --- */
|
|
#main-content {
|
|
flex: 1;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
#map-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#compass-container {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #0F0F23;
|
|
position: relative;
|
|
}
|
|
|
|
#compass-container.active {
|
|
display: block;
|
|
}
|
|
|
|
#compass-distance {
|
|
position: absolute;
|
|
bottom: 32px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#compass-address {
|
|
position: absolute;
|
|
top: 24px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 18px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* --- Toggle FAB --- */
|
|
#toggle-fab {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: #FF6B35;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#toggle-fab:hover {
|
|
background: #E55A2B;
|
|
}
|
|
|
|
/* --- Reset view button --- */
|
|
#reset-view-btn {
|
|
position: absolute;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #16213E;
|
|
border: 2px solid #CFD8DC;
|
|
color: #CFD8DC;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
z-index: 1000;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#reset-view-btn.visible {
|
|
display: flex;
|
|
}
|
|
|
|
#reset-view-btn:hover {
|
|
background: #1A1A2E;
|
|
color: #ECEFF1;
|
|
border-color: #ECEFF1;
|
|
}
|
|
|
|
/* --- No-cache warning banner --- */
|
|
#no-cache-banner {
|
|
display: none;
|
|
align-items: center;
|
|
background: #E65100;
|
|
padding: 6px 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#no-cache-banner.visible {
|
|
display: flex;
|
|
}
|
|
|
|
#no-cache-banner span {
|
|
flex: 1;
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#cache-retry-btn {
|
|
background: none;
|
|
border: 1px solid #FFFFFF;
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* --- Bottom sheet --- */
|
|
#bottom-sheet {
|
|
background: #1A1A2E;
|
|
padding: 12px;
|
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Selected shelter summary */
|
|
#selected-shelter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#mini-arrow {
|
|
width: 48px;
|
|
height: 48px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#selected-shelter-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
#selected-shelter-address {
|
|
color: #ECEFF1;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#selected-shelter-details {
|
|
color: #90A4AE;
|
|
font-size: 13px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Shelter list items */
|
|
#shelter-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.shelter-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.shelter-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.shelter-item.selected {
|
|
border-color: #FF6B35;
|
|
background: rgba(255, 107, 53, 0.1);
|
|
padding-left: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.shelter-item.selected::before {
|
|
content: '\25B6';
|
|
position: absolute;
|
|
left: 6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #FF6B35;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.shelter-item-address {
|
|
color: #ECEFF1;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.shelter-item-details {
|
|
color: #90A4AE;
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* --- Loading overlay --- */
|
|
#loading-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 2000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
#loading-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid rgba(255, 255, 255, 0.2);
|
|
border-top-color: #FF6B35;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
#loading-text {
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
padding: 0 32px;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
#loading-button-row {
|
|
display: none;
|
|
gap: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
#loading-button-row button {
|
|
padding: 8px 20px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#loading-skip-btn {
|
|
background: transparent;
|
|
border: 1px solid #FFFFFF;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
#loading-ok-btn {
|
|
background: #FF6B35;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* --- Shelter marker icons --- */
|
|
.shelter-marker {
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* --- Leaflet overrides for dark theme --- */
|
|
.leaflet-control-zoom a {
|
|
background: #16213E !important;
|
|
color: #ECEFF1 !important;
|
|
border-color: #2a2a4e !important;
|
|
}
|
|
|
|
.leaflet-control-attribution {
|
|
background: rgba(26, 26, 46, 0.8) !important;
|
|
color: #90A4AE !important;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.leaflet-control-attribution a {
|
|
color: #CFD8DC !important;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
background: #16213E !important;
|
|
color: #ECEFF1 !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.leaflet-popup-tip {
|
|
background: #16213E !important;
|
|
}
|
|
|
|
.leaflet-popup-close-button {
|
|
color: #CFD8DC !important;
|
|
}
|
|
|
|
/* --- About dialog --- */
|
|
#about-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.about-content {
|
|
background: #16213E;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
max-width: 480px;
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.about-heading {
|
|
color: #FF6B35;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.about-subheading {
|
|
color: #ECEFF1;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-top: 16px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.about-para {
|
|
color: #90A4AE;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.about-footer {
|
|
margin-top: 20px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.about-small {
|
|
color: #90A4AE;
|
|
font-size: 11px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#civil-defense-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.about-link-btn {
|
|
display: block;
|
|
margin: 16px 0 0;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
color: #FF6B35;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
min-height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.about-clear-btn {
|
|
display: block;
|
|
margin: 12px 0 0;
|
|
padding: 8px 16px;
|
|
background: transparent;
|
|
border: 1px solid #90A4AE;
|
|
border-radius: 6px;
|
|
color: #90A4AE;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.about-clear-btn:disabled {
|
|
border-color: #4a6a5a;
|
|
color: #4a6a5a;
|
|
cursor: default;
|
|
}
|
|
|
|
.about-close-btn {
|
|
display: block;
|
|
margin: 16px auto 0;
|
|
padding: 10px 32px;
|
|
background: #FF6B35;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|