48a2b26f59
- Implemented `generate_mermaid_with_instances.py` to create ER diagrams that include all classes, relationships, enum values, and instance data. - Loaded instance data from YAML files and enriched enum definitions with meaningful annotations. - Configured output paths for generated diagrams in both frontend and schema directories. - Added support for excluding technical classes and limiting the number of displayed enum and instance values for readability.
1042 lines
19 KiB
CSS
1042 lines
19 KiB
CSS
/**
|
|
* NDE Map Page Styles
|
|
* Following Netwerk Digitaal Erfgoed (NDE) house style
|
|
*/
|
|
|
|
/* Page Layout */
|
|
.nde-map-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - 60px); /* Subtract header height */
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
/* Header */
|
|
.map-header {
|
|
background: linear-gradient(135deg, #0a3dfa 0%, #1e50ff 100%);
|
|
color: white;
|
|
padding: 1rem 1.5rem;
|
|
box-shadow: 0 2px 8px rgba(10, 61, 250, 0.2);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* View Controls Bar */
|
|
.map-view-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 1rem;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e1e5eb;
|
|
}
|
|
|
|
.view-control-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
background: white;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: #4a5568;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.view-control-btn:hover {
|
|
background: #f3f4f6;
|
|
border-color: #0a3dfa;
|
|
color: #0a3dfa;
|
|
}
|
|
|
|
.view-control-btn.fullscreen-btn--active {
|
|
background: #0a3dfa;
|
|
border-color: #0a3dfa;
|
|
color: white;
|
|
}
|
|
|
|
.view-control-btn.fullscreen-btn--active:hover {
|
|
background: #1e50ff;
|
|
}
|
|
|
|
/* Fullscreen mode styles */
|
|
.nde-map-page.fullscreen-active {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 9999;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.nde-map-page.fullscreen-active .map-header {
|
|
display: none;
|
|
}
|
|
|
|
.nde-map-page.fullscreen-active .map-view-controls {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 1000;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
border: none;
|
|
padding: 0.35rem;
|
|
}
|
|
|
|
.nde-map-page.fullscreen-active .map-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.nde-map-page.fullscreen-active .map-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.nde-map-page.fullscreen-active .map-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.header-content h1 {
|
|
margin: 0 0 0.25rem 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.header-content .subtitle {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Map Container */
|
|
.map-container {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.map-sidebar {
|
|
width: 280px;
|
|
background: white;
|
|
border-right: 1px solid #e1e5eb;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain; /* Prevent scroll propagation to parent/footer */
|
|
}
|
|
|
|
.map-sidebar h3 {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #4a5568;
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
|
|
/* Filter Section */
|
|
.filter-section {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #e1e5eb;
|
|
}
|
|
|
|
/* Active Filters Section (in sidebar) */
|
|
.active-filters-section {
|
|
padding: 1rem;
|
|
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
|
|
border-bottom: 2px solid #c7d2fe;
|
|
}
|
|
|
|
.active-filters-section h3 {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #4338ca;
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
|
|
.active-filters-section .filter-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.active-filters-section .filter-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
background: white;
|
|
color: #374151;
|
|
border: 1px solid #d1d5db;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.active-filters-section .filter-tag.province-tag {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
border-color: #6ee7b7;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.type-tag {
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.city-tag {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
border-color: #93c5fd;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.highlight-tag {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
border-color: #fcd34d;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.highlight-tag .match-indicator {
|
|
font-size: 0.65rem;
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.highlight-tag.no-match,
|
|
.active-filters-section .filter-tag.ghcid-tag.no-match {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border-color: #fca5a5;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.enriched-tag {
|
|
background: #ecfdf5;
|
|
color: #065f46;
|
|
border-color: #a7f3d0;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.source-tag {
|
|
background: #f3e8ff;
|
|
color: #6b21a8;
|
|
border-color: #d8b4fe;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.has-tag {
|
|
background: #fef9c3;
|
|
color: #713f12;
|
|
border-color: #fde047;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.rating-tag {
|
|
background: #fff7ed;
|
|
color: #9a3412;
|
|
border-color: #fdba74;
|
|
}
|
|
|
|
.active-filters-section .filter-tag.ghcid-tag {
|
|
background: #eef2ff;
|
|
color: #3730a3;
|
|
border-color: #a5b4fc;
|
|
}
|
|
|
|
.active-filters-section .clear-filters-btn {
|
|
width: 100%;
|
|
padding: 0.4rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
background: white;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
color: #4b5563;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.active-filters-section .clear-filters-btn:hover {
|
|
background: #f3f4f6;
|
|
border-color: #dc2626;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.filter-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
border: 1px solid #d1d5db;
|
|
background: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: #4a5568;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background: #f3f4f6;
|
|
border-color: #0a3dfa;
|
|
color: #0a3dfa;
|
|
}
|
|
|
|
/* Type Filters */
|
|
.type-filters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.type-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
padding: 0.25rem 0;
|
|
font-size: 0.875rem;
|
|
color: #374151;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.type-filter:hover {
|
|
color: #0a3dfa;
|
|
}
|
|
|
|
.type-filter input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
accent-color: #0a3dfa;
|
|
}
|
|
|
|
.type-color {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.type-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.type-count {
|
|
color: #9ca3af;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats-section {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #e1e5eb;
|
|
}
|
|
|
|
.stats-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 0.5rem 1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.stats-list dt {
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.stats-list dd {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
text-align: right;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Legend Section */
|
|
.legend-section {
|
|
padding: 1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.data-source-info {
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Map Wrapper */
|
|
.map-wrapper {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.leaflet-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Leaflet Popup Customization */
|
|
.map-popup {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.map-popup .popup-photo {
|
|
margin: -14px -14px 10px -14px;
|
|
border-radius: 8px 8px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map-popup .popup-photo img {
|
|
width: 100%;
|
|
max-height: 200px;
|
|
min-height: 100px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.map-popup .popup-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.map-popup .type-badge {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.5rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: white;
|
|
border-radius: 3px;
|
|
margin-bottom: 0.5rem;
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
.map-popup .status-badge {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.5rem;
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
border-radius: 3px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.map-popup .status-badge.closed {
|
|
background: #dc2626;
|
|
color: white;
|
|
}
|
|
|
|
.map-popup h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.map-popup p {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 0.85rem;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.map-popup .description {
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
line-height: 1.4;
|
|
/* Remove truncation - let it flow naturally when popup is resized */
|
|
}
|
|
|
|
/* Rating styles */
|
|
.popup-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.popup-rating .stars {
|
|
color: #f59e0b;
|
|
font-size: 0.9rem;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.popup-rating .rating-value {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.popup-rating .rating-count {
|
|
color: #6b7280;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Address and phone */
|
|
.popup-address,
|
|
.popup-phone {
|
|
font-size: 0.8rem !important;
|
|
color: #4b5563 !important;
|
|
margin-bottom: 0.35rem !important;
|
|
}
|
|
|
|
.popup-phone a {
|
|
color: #0a3dfa;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.popup-phone a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Opening hours and reviews (collapsible) */
|
|
.popup-hours,
|
|
.popup-reviews {
|
|
font-size: 0.8rem;
|
|
margin: 0.5rem 0;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-hours summary,
|
|
.popup-reviews summary {
|
|
padding: 0.5rem;
|
|
background: #f9fafb;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
list-style: none;
|
|
}
|
|
|
|
.popup-hours summary::-webkit-details-marker,
|
|
.popup-reviews summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.popup-hours summary::before,
|
|
.popup-reviews summary::before {
|
|
content: '▶ ';
|
|
font-size: 0.65rem;
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
.popup-hours[open] summary::before,
|
|
.popup-reviews[open] summary::before {
|
|
content: '▼ ';
|
|
}
|
|
|
|
.popup-hours ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
background: white;
|
|
max-height: 140px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.popup-hours li {
|
|
padding: 0.2rem 0;
|
|
color: #4b5563;
|
|
font-size: 0.75rem;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.popup-hours li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Reviews list */
|
|
.reviews-list {
|
|
padding: 0.5rem;
|
|
background: white;
|
|
max-height: 350px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.review {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.review:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.review-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.review-header strong {
|
|
font-size: 0.75rem;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.review-rating {
|
|
color: #f59e0b;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.review-text {
|
|
font-size: 0.75rem;
|
|
color: #4b5563;
|
|
line-height: 1.4;
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.review-time {
|
|
font-size: 0.65rem;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* Links section */
|
|
.popup-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.popup-links a {
|
|
font-size: 0.75rem;
|
|
color: #0a3dfa;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.15s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.popup-links a:hover {
|
|
color: #1e50ff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Loading State */
|
|
.loading-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid #e1e5eb;
|
|
border-top-color: #0a3dfa;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-container p {
|
|
font-size: 1rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Error State */
|
|
.error-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.error-container h2 {
|
|
color: #dc2626;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.error-container p {
|
|
color: #6b7280;
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.error-hint {
|
|
background: #f3f4f6;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.error-hint code {
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: #1f2937;
|
|
color: #10b981;
|
|
border-radius: 4px;
|
|
font-family: 'Fira Code', 'Consolas', monospace;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.map-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.map-sidebar {
|
|
width: 100%;
|
|
max-height: 40vh;
|
|
border-right: none;
|
|
border-bottom: 1px solid #e1e5eb;
|
|
}
|
|
|
|
.map-wrapper {
|
|
min-height: 60vh;
|
|
}
|
|
|
|
.map-header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.header-content h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* Leaflet overrides for NDE style */
|
|
.leaflet-control-zoom a {
|
|
background: white !important;
|
|
color: #0a3dfa !important;
|
|
}
|
|
|
|
.leaflet-control-zoom a:hover {
|
|
background: #f3f4f6 !important;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
padding: 0;
|
|
resize: both;
|
|
overflow: auto;
|
|
min-width: 280px;
|
|
max-width: 600px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
margin: 14px;
|
|
margin-bottom: 2rem; /* Extra bottom margin for footer buttons */
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain; /* Prevent scroll propagation to parent/footer */
|
|
width: auto !important; /* Override Leaflet's inline width */
|
|
}
|
|
|
|
/* Enhanced close button visibility */
|
|
.leaflet-popup-close-button {
|
|
width: 28px !important;
|
|
height: 28px !important;
|
|
font-size: 24px !important;
|
|
line-height: 24px !important;
|
|
color: white !important;
|
|
background: #dc2626 !important;
|
|
border-radius: 50% !important;
|
|
top: -10px !important;
|
|
right: -10px !important;
|
|
padding: 0 !important;
|
|
text-align: center !important;
|
|
font-weight: bold !important;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
|
|
transition: all 0.15s ease !important;
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
.leaflet-popup-close-button:hover {
|
|
background: #b91c1c !important;
|
|
transform: scale(1.1) !important;
|
|
}
|
|
|
|
.leaflet-popup-tip {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Desktop: Hide default bottom tip when popup is positioned horizontally */
|
|
@media (min-width: 769px) {
|
|
.institution-popup .leaflet-popup-tip-container {
|
|
display: none;
|
|
}
|
|
|
|
/* Add subtle left/right border indicator instead of tip */
|
|
.institution-popup .leaflet-popup-content-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.institution-popup .leaflet-popup-content-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border: 8px solid transparent;
|
|
}
|
|
}
|
|
|
|
/* URL Filter Bar */
|
|
.url-filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-top: 0.75rem;
|
|
padding: 0.6rem 1rem;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.url-filter-bar .filter-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.url-filter-bar .filter-tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.url-filter-bar .filter-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.6rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border-radius: 20px;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.url-filter-bar .filter-tag.province-tag {
|
|
background: rgba(46, 204, 113, 0.8);
|
|
}
|
|
|
|
.url-filter-bar .filter-tag.type-tag {
|
|
color: white;
|
|
}
|
|
|
|
.url-filter-bar .filter-tag.city-tag {
|
|
background: rgba(52, 152, 219, 0.9);
|
|
color: white;
|
|
}
|
|
|
|
.url-filter-bar .filter-tag.highlight-tag {
|
|
background: rgba(255, 215, 0, 0.9);
|
|
color: #1f2937;
|
|
}
|
|
|
|
.url-filter-bar .filter-tag.highlight-tag .match-indicator {
|
|
font-size: 0.7rem;
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
|
|
.url-filter-bar .filter-tag.highlight-tag.no-match {
|
|
background: rgba(239, 68, 68, 0.9);
|
|
color: white;
|
|
}
|
|
|
|
.url-filter-bar .clear-filters-btn {
|
|
margin-left: auto;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.url-filter-bar .clear-filters-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Responsive: stack filter bar on mobile */
|
|
@media (max-width: 768px) {
|
|
.url-filter-bar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.url-filter-bar .clear-filters-btn {
|
|
margin-left: 0;
|
|
margin-top: 0.25rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* New enrichment data styles */
|
|
|
|
/* Alternative name when verified name differs */
|
|
.popup-alt-name {
|
|
font-size: 0.75rem !important;
|
|
color: #9ca3af !important;
|
|
font-style: italic;
|
|
margin-top: -0.25rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
/* Identifiers (GHCID, ISIL) */
|
|
.popup-identifiers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.identifier-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.2rem 0.5rem;
|
|
font-size: 0.7rem;
|
|
font-family: 'Fira Code', 'Consolas', monospace;
|
|
border-radius: 4px;
|
|
background: #f3f4f6;
|
|
color: #4b5563;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.identifier-badge.ghcid {
|
|
background: #eef2ff;
|
|
color: #3730a3;
|
|
border-color: #c7d2fe;
|
|
}
|
|
|
|
.identifier-badge.isil {
|
|
background: #f0fdf4;
|
|
color: #166534;
|
|
border-color: #bbf7d0;
|
|
}
|
|
|
|
/* Clickable GHCID badge - click to copy UUID */
|
|
.identifier-badge.ghcid.clickable {
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.identifier-badge.ghcid.clickable:hover {
|
|
background: #c7d2fe;
|
|
border-color: #a5b4fc;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.identifier-badge.ghcid.clickable:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* Copied state - brief visual feedback */
|
|
.identifier-badge.ghcid.clickable.copied {
|
|
background: #d1fae5;
|
|
border-color: #6ee7b7;
|
|
color: #065f46;
|
|
}
|
|
|
|
.identifier-badge.ghcid.clickable.copied::after {
|
|
content: ' ✓';
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Museum Register badge */
|
|
.popup-museum-register {
|
|
font-size: 0.8rem !important;
|
|
color: #b45309 !important;
|
|
background: #fef3c7;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: 4px;
|
|
margin: 0.5rem 0 !important;
|
|
border: 1px solid #fcd34d;
|
|
}
|
|
|
|
/* Social media links */
|
|
.popup-social {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin: 0.5rem 0;
|
|
padding: 0.35rem 0;
|
|
}
|
|
|
|
.popup-social a {
|
|
font-size: 1.1rem;
|
|
text-decoration: none;
|
|
opacity: 0.8;
|
|
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.popup-social a:hover {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
/* Resize handle indicator for popup */
|
|
.leaflet-popup-content-wrapper::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: linear-gradient(135deg, transparent 50%, #9ca3af 50%);
|
|
border-radius: 0 0 4px 0;
|
|
cursor: nwse-resize;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Minimal footer in sidebar - pushed below the fold */
|
|
.map-sidebar > .minimal-footer {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.7rem;
|
|
color: #9ca3af;
|
|
text-align: center;
|
|
border-top: 1px solid #e5e7eb;
|
|
margin-top: auto;
|
|
/* Add substantial top padding to ensure footer is below visible area */
|
|
padding-top: calc(100vh - 400px);
|
|
}
|