9d02424aac
Add CSS for fullscreen mode with CTA button Implement first name only display for map markers Add fullscreen toggle button with proper icons Update template to support fullpage mode Add new page with fullscreen map view
185 lines
3.7 KiB
CSS
185 lines
3.7 KiB
CSS
/* Petition map page styles */
|
|
|
|
.petition-map-section {
|
|
|
|
#petition-map {
|
|
position: relative;
|
|
height: clamp(420px, 70vh, 800px);
|
|
background: oklch(0.96 0.005 220);
|
|
|
|
.map-loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: oklch(0.55 0.03 220);
|
|
font-size: 0.9rem;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Leaflet overrides for muted style */
|
|
.leaflet-container {
|
|
background: oklch(0.96 0.005 220);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.leaflet-control-attribution {
|
|
font-size: 0.65rem;
|
|
background: oklch(1 0 0 / 0.75);
|
|
}
|
|
}
|
|
|
|
.petition-map-footer {
|
|
padding-block: 1rem 2rem;
|
|
|
|
.back-link {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Fylke polygon styles (set via Leaflet path options, these are fallbacks) */
|
|
.leaflet-interactive {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Signer name tooltip */
|
|
.signer-tip {
|
|
background: oklch(0.618 0.1176 173.93);
|
|
color: oklch(0.97 0 0);
|
|
border: none;
|
|
box-shadow: none;
|
|
font-family: var(--font-body);
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
padding: 1px 5px;
|
|
border-radius: 8px;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
|
|
&::before { display: none; } /* hide tooltip arrow */
|
|
}
|
|
|
|
/* Anonymous tooltip */
|
|
.signer-tip--anon {
|
|
background: oklch(0.618 0.1176 173.93);
|
|
padding: 2px 5px 2px 4px;
|
|
|
|
.anon-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
/* Fylke popup / info panel */
|
|
.fylke-popup {
|
|
font-family: var(--font-body);
|
|
font-size: 0.85rem;
|
|
max-width: 220px;
|
|
|
|
.fylke-popup-title {
|
|
font-family: var(--font-heading);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.4rem;
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.fylke-popup-count {
|
|
font-size: 0.8rem;
|
|
color: oklch(0.5 0.03 173.93);
|
|
}
|
|
}
|
|
|
|
/* Fullscreen / minimize button */
|
|
.petition-map-fullscreen-btn {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 2.8rem; /* clear of Leaflet zoom controls */
|
|
z-index: 1000;
|
|
background: oklch(1 0 0 / 0.9);
|
|
color: var(--color-grey);
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
box-shadow: 0 1px 4px oklch(0 0 0 / 0.3);
|
|
|
|
&:hover {
|
|
background: oklch(1 0 0);
|
|
color: var(--color-green);
|
|
}
|
|
}
|
|
|
|
/* CTA button — hidden by default, shown in fullpage mode */
|
|
.petition-map-cta-btn {
|
|
display: none;
|
|
}
|
|
|
|
.petition-map-section--fullpage {
|
|
position: relative;
|
|
|
|
.petition-map-cta-btn {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
background: var(--color-blue);
|
|
color: oklch(1 0 0);
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 2rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 12px oklch(0 0 0 / 0.25);
|
|
text-decoration: none;
|
|
transition: background 0.15s, transform 0.15s;
|
|
|
|
&:hover {
|
|
background: var(--color-green);
|
|
transform: translateX(-50%) translateY(-2px);
|
|
}
|
|
}
|
|
|
|
#petition-map {
|
|
flex: 1;
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
/* Fullpage: make main stretch and propagate height into the map */
|
|
:has(.petition-map-section--fullpage) main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> article {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.petition-map-section--fullpage {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* Petition map counter */
|
|
#petition-map-count {
|
|
background: var(--color-green-light);
|
|
padding: 0 1.5rem 1rem;
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
color: var(--color-green);
|
|
}
|