83173da778
Updated reports table to use the same robust styling as admin table: ✅ Added: - border-radius: 8px and overflow: hidden for rounded corners - box-shadow: 0 2px 4px var(--shadow) for elevation - color: var(--text-color) on table element for inheritance - Consistent border styling with 1px borders - font-weight: bold for headers (matching admin) ✅ Improved: - Better dark mode support with proper color inheritance - Consistent visual appearance between admin and public tables - Removed duplicate box-shadow from table-container - Simplified header borders (removed 2px, sticky positioning complexity) Both tables now share the same visual design language and dark mode behavior.
581 lines
11 KiB
CSS
581 lines
11 KiB
CSS
/* CSS Variables for theming */
|
|
:root {
|
|
--bg-color: #f4f4f9;
|
|
--text-color: #333;
|
|
--text-secondary: #666;
|
|
--text-tertiary: #999;
|
|
--card-bg: white;
|
|
--border-color: #ddd;
|
|
--input-bg: white;
|
|
--input-border: #ddd;
|
|
--button-bg: #007bff;
|
|
--button-hover: #0056b3;
|
|
--header-bg: transparent;
|
|
--footer-border: #ddd;
|
|
--table-header-bg: #f8f9fa;
|
|
--table-hover: #f8f9fa;
|
|
--toggle-bg: #f8f9fa;
|
|
--toggle-border: #dee2e6;
|
|
--toggle-active-bg: #007bff;
|
|
--shadow: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Dark mode variables */
|
|
[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #e0e0e0;
|
|
--text-secondary: #b0b0b0;
|
|
--text-tertiary: #909090;
|
|
--card-bg: #2d2d2d;
|
|
--border-color: #404040;
|
|
--input-bg: #333;
|
|
--input-border: #555;
|
|
--button-bg: #4a90e2;
|
|
--button-hover: #357abd;
|
|
--header-bg: transparent;
|
|
--footer-border: #404040;
|
|
--table-header-bg: #3a3a3a;
|
|
--table-hover: #3a3a3a;
|
|
--toggle-bg: #404040;
|
|
--toggle-border: #555;
|
|
--toggle-active-bg: #4a90e2;
|
|
--shadow: rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Auto system theme detection */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root[data-theme="auto"] {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #e0e0e0;
|
|
--text-secondary: #b0b0b0;
|
|
--text-tertiary: #909090;
|
|
--card-bg: #2d2d2d;
|
|
--border-color: #404040;
|
|
--input-bg: #333;
|
|
--input-border: #555;
|
|
--button-bg: #4a90e2;
|
|
--button-hover: #357abd;
|
|
--header-bg: transparent;
|
|
--footer-border: #404040;
|
|
--table-header-bg: #3a3a3a;
|
|
--table-hover: #3a3a3a;
|
|
--toggle-bg: #404040;
|
|
--toggle-border: #555;
|
|
--toggle-active-bg: #4a90e2;
|
|
--shadow: rgba(0,0,0,0.3);
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root[data-theme="auto"] {
|
|
--bg-color: #f4f4f9;
|
|
--text-color: #333;
|
|
--text-secondary: #666;
|
|
--text-tertiary: #999;
|
|
--card-bg: white;
|
|
--border-color: #ddd;
|
|
--input-bg: white;
|
|
--input-border: #ddd;
|
|
--button-bg: #007bff;
|
|
--button-hover: #0056b3;
|
|
--header-bg: transparent;
|
|
--footer-border: #ddd;
|
|
--table-header-bg: #f8f9fa;
|
|
--table-hover: #f8f9fa;
|
|
--toggle-bg: #f8f9fa;
|
|
--toggle-border: #dee2e6;
|
|
--toggle-active-bg: #007bff;
|
|
--shadow: rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.map-section, .form-section {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.map-section {
|
|
height: auto;
|
|
min-height: 650px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 600px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
input[type="text"], textarea {
|
|
width: calc(100% - 20px);
|
|
padding: 8px;
|
|
margin-top: 5px;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
.autocomplete-container {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.autocomplete-list {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-top: none;
|
|
border-radius: 0 0 4px 4px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
display: none;
|
|
box-shadow: 0 4px 6px var(--shadow);
|
|
}
|
|
|
|
.autocomplete-item {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.autocomplete-item:hover,
|
|
.autocomplete-item.selected {
|
|
background-color: var(--table-hover);
|
|
}
|
|
|
|
.autocomplete-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.input-help {
|
|
color: var(--text-tertiary);
|
|
font-size: 0.85em;
|
|
margin-top: 4px;
|
|
display: block;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
background-color: var(--button-bg);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease-in;
|
|
}
|
|
|
|
button[type="submit"]:hover {
|
|
background-color: var(--button-hover);
|
|
}
|
|
|
|
.message {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
display: none;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
/* Header layout for theme toggle */
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
|
|
.header-text {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Theme toggle button */
|
|
.theme-toggle {
|
|
background: var(--card-bg);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 8px var(--shadow);
|
|
}
|
|
|
|
.theme-icon {
|
|
font-size: 20px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
[data-theme="dark"] .theme-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 30px 20px;
|
|
margin-top: 30px;
|
|
border-top: 1px solid var(--footer-border);
|
|
clear: both;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.disclaimer {
|
|
font-size: 0.8em;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Reports header and toggle */
|
|
.reports-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.view-toggle {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.toggle-btn {
|
|
background-color: var(--toggle-bg);
|
|
border: 2px solid var(--toggle-border);
|
|
color: var(--text-color);
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.toggle-btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.toggle-btn.active {
|
|
background-color: var(--toggle-active-bg);
|
|
border-color: var(--toggle-active-bg);
|
|
color: white;
|
|
}
|
|
|
|
.toggle-btn.active:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* View containers */
|
|
.view-container {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Table view styles */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.reports-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: var(--card-bg);
|
|
color: var(--text-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
font-size: 14px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.reports-table th {
|
|
background-color: var(--table-header-bg);
|
|
color: var(--text-color);
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.reports-table td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.reports-table tr:hover {
|
|
background-color: var(--table-hover);
|
|
}
|
|
|
|
.reports-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.table-info {
|
|
color: var(--text-tertiary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Table cell specific styles */
|
|
.location-cell {
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
max-width: 250px;
|
|
}
|
|
|
|
.details-cell {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.time-cell {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.remaining-cell {
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.remaining-cell.urgent {
|
|
color: #ff6b6b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.remaining-cell.warning {
|
|
color: #ffa726;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.remaining-cell.normal {
|
|
color: #66bb6a;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.header-content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.header-text {
|
|
text-align: center;
|
|
}
|
|
|
|
.theme-toggle {
|
|
align-self: center;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
header p {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.map-section, .form-section {
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
#map {
|
|
height: 400px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
input[type="text"], textarea {
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
width: calc(100% - 16px);
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
width: 100%;
|
|
padding: 15px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.reports-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.reports-header h2 {
|
|
font-size: 1.3em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.view-toggle {
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-btn {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
.reports-table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.reports-table th,
|
|
.reports-table td {
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.location-cell {
|
|
max-width: 120px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.details-cell {
|
|
max-width: 100px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.time-cell {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.remaining-cell {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.autocomplete-list {
|
|
max-height: 150px;
|
|
}
|
|
|
|
.input-help {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
footer {
|
|
padding: 20px 10px;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
/* Extra small screens */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 5px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.map-section, .form-section {
|
|
padding: 8px;
|
|
}
|
|
|
|
#map {
|
|
height: 300px;
|
|
}
|
|
|
|
.reports-table th {
|
|
font-size: 10px;
|
|
padding: 6px 2px;
|
|
}
|
|
|
|
.reports-table td {
|
|
font-size: 10px;
|
|
padding: 6px 2px;
|
|
}
|
|
|
|
.location-cell {
|
|
max-width: 100px;
|
|
}
|
|
|
|
.details-cell {
|
|
max-width: 80px;
|
|
}
|
|
|
|
.toggle-btn {
|
|
font-size: 12px;
|
|
padding: 10px 6px;
|
|
}
|
|
}
|