1050 lines
22 KiB
CSS
1050 lines
22 KiB
CSS
/* FitPub - 80s Aerobic Style (Static Edition) */
|
|
|
|
:root {
|
|
--neon-pink: #ff1493;
|
|
--neon-purple: #9d00ff;
|
|
--neon-cyan: #00ffff;
|
|
--neon-yellow: #ffff00;
|
|
--neon-orange: #ff6600;
|
|
--neon-green: #39ff14;
|
|
--neon-blue: #00d4ff;
|
|
--primary-color: var(--neon-pink);
|
|
--secondary-color: var(--neon-cyan);
|
|
--danger-color: #dc3545;
|
|
--warning-color: #ffc107;
|
|
--dark-color: #1a0033;
|
|
--light-color: #f8f9fa;
|
|
--accent-orange: var(--neon-orange);
|
|
--accent-lime: var(--neon-green);
|
|
--border-radius: 0.5rem;
|
|
}
|
|
|
|
/* Base styles */
|
|
body {
|
|
font-family: 'Arial Black', 'Arial Bold', sans-serif;
|
|
color: var(--dark-color);
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* Navigation */
|
|
.navbar {
|
|
background: linear-gradient(135deg, var(--dark-color) 0%, #2d0052 100%) !important;
|
|
border-bottom: 3px solid var(--neon-pink);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 900;
|
|
font-size: 1.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.nav-link {
|
|
color: rgba(255, 255, 255, 0.95) !important;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--neon-cyan) !important;
|
|
}
|
|
|
|
/* Map container */
|
|
.map-container {
|
|
height: 400px;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.map-container-large {
|
|
height: 600px;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: white;
|
|
border: 3px solid var(--neon-pink);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 8px 20px rgba(255, 20, 147, 0.4);
|
|
}
|
|
|
|
.card-header {
|
|
background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
|
|
color: white !important;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
border-bottom: 3px solid var(--neon-orange);
|
|
}
|
|
|
|
/* Activity cards */
|
|
.activity-card {
|
|
transition: box-shadow 0.2s ease;
|
|
border: 3px solid var(--neon-cyan);
|
|
box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
.activity-card:hover {
|
|
box-shadow: 0 8px 20px rgba(0, 255, 255, 0.4);
|
|
}
|
|
|
|
.activity-type-badge {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border: 2px solid currentColor;
|
|
}
|
|
|
|
.activity-type-run {
|
|
background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.activity-type-ride {
|
|
background: linear-gradient(135deg, var(--neon-yellow) 0%, var(--neon-orange) 100%);
|
|
color: var(--dark-color);
|
|
}
|
|
|
|
.activity-type-hike {
|
|
background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-green) 100%);
|
|
color: var(--dark-color);
|
|
}
|
|
|
|
/* Metrics display */
|
|
.metric-card {
|
|
background: linear-gradient(135deg, #ffffff 0%, #fff0ff 100%);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border: 2px solid var(--neon-pink);
|
|
border-left: 6px solid var(--neon-orange);
|
|
box-shadow: 0 4px 8px rgba(255, 20, 147, 0.2);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.metric-card:hover {
|
|
box-shadow: 0 6px 16px rgba(255, 20, 147, 0.3);
|
|
}
|
|
|
|
.metric-card .fw-bold {
|
|
font-weight: 900 !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 0.875rem;
|
|
color: var(--dark-color);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* File upload area */
|
|
.file-upload-area {
|
|
border: 4px dashed var(--neon-cyan);
|
|
border-radius: var(--border-radius);
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
transition: border-color 0.2s, background-color 0.2s;
|
|
cursor: pointer;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f0ffff 100%);
|
|
}
|
|
|
|
.file-upload-area:hover,
|
|
.file-upload-area.drag-over {
|
|
border-color: var(--neon-pink);
|
|
background: linear-gradient(135deg, #fff0ff 0%, #f0ffff 100%);
|
|
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.2);
|
|
}
|
|
|
|
.file-upload-icon {
|
|
font-size: 3rem;
|
|
background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Timeline */
|
|
.timeline-item {
|
|
border-left: 3px solid var(--light-color);
|
|
padding-left: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -0.5rem;
|
|
top: 0.5rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-color);
|
|
border: 3px solid white;
|
|
}
|
|
|
|
.timeline-date {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Timeline Cards */
|
|
.timeline-card {
|
|
transition: box-shadow 0.2s;
|
|
border: 3px solid transparent;
|
|
background: linear-gradient(white, white) padding-box,
|
|
linear-gradient(135deg, var(--neon-orange) 0%, var(--neon-green) 100%) border-box;
|
|
box-shadow: 0 4px 8px rgba(255, 102, 0, 0.2);
|
|
}
|
|
|
|
.timeline-card:hover {
|
|
box-shadow: 0 8px 16px rgba(255, 102, 0, 0.3);
|
|
}
|
|
|
|
.timeline-card .user-avatar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timeline-card .avatar-placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: var(--light-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.activity-preview-map {
|
|
background-color: var(--light-color);
|
|
position: relative;
|
|
}
|
|
|
|
.activity-preview-map .leaflet-container {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Timeline Metrics */
|
|
.timeline-card .metric-card {
|
|
padding: 0.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.timeline-card .metric-value {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.timeline-card .metric-label {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Profile Pages */
|
|
.avatar-placeholder-large {
|
|
width: 120px;
|
|
height: 120px;
|
|
background-color: var(--light-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 4rem;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stat-card-hover {
|
|
transition: background-color 0.2s;
|
|
cursor: pointer;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.stat-card-hover:hover {
|
|
background-color: var(--light-color);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.activity-item {
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.activity-item:hover {
|
|
background-color: var(--light-color);
|
|
border-radius: var(--border-radius);
|
|
padding: 0.5rem;
|
|
margin: -0.5rem;
|
|
}
|
|
|
|
/* Charts */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Loading states */
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 3px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
border-top-color: var(--primary-color);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* HTMX loading indicator */
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.htmx-request .htmx-indicator {
|
|
display: inline-block;
|
|
}
|
|
|
|
.htmx-request.htmx-indicator {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.text-muted {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.visibility-public {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.visibility-followers {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.visibility-private {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
/* Empty State Illustrations */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 5rem;
|
|
color: #d1d5db;
|
|
margin-bottom: 1.5rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.empty-state-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.empty-state-message {
|
|
font-size: 1rem;
|
|
color: #6b7280;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.empty-state-action {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/* Empty state variants */
|
|
.empty-state-activities .empty-state-icon {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.empty-state-notifications .empty-state-icon {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.empty-state-timeline .empty-state-icon {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.empty-state-users .empty-state-icon {
|
|
color: var(--accent-lime);
|
|
}
|
|
|
|
.empty-state-search .empty-state-icon {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.map-container {
|
|
height: 300px;
|
|
}
|
|
|
|
.map-container-large {
|
|
height: 400px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.empty-state-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
border-width: 3px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
|
|
border-color: var(--neon-pink) !important;
|
|
color: white !important;
|
|
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
box-shadow: 0 6px 20px rgba(255, 20, 147, 0.5);
|
|
}
|
|
|
|
.btn-success {
|
|
background: linear-gradient(135deg, var(--neon-green) 0%, var(--neon-cyan) 100%) !important;
|
|
border-color: var(--neon-green) !important;
|
|
color: var(--dark-color) !important;
|
|
box-shadow: 0 4px 12px rgba(57, 255, 20, 0.4);
|
|
}
|
|
|
|
.btn-success:hover {
|
|
box-shadow: 0 6px 20px rgba(57, 255, 20, 0.5);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: linear-gradient(135deg, #dc3545 0%, #c92333 100%) !important;
|
|
border-color: #dc3545 !important;
|
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
border-color: var(--neon-pink) !important;
|
|
color: var(--neon-pink) !important;
|
|
border-width: 3px !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background: var(--neon-pink) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* Headings */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--dark-color);
|
|
}
|
|
|
|
h1 {
|
|
background: linear-gradient(135deg,
|
|
var(--neon-pink) 0%,
|
|
var(--neon-cyan) 50%,
|
|
var(--neon-orange) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ============================================
|
|
DARK MODE (CSS-Only, OS Preference)
|
|
============================================ */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Dark mode color overrides */
|
|
:root {
|
|
--dark-bg: #0f0520;
|
|
--dark-bg-alt: #1a0a30;
|
|
--dark-surface: #251040;
|
|
--dark-surface-hover: #301550;
|
|
--dark-text: #e8e8f0;
|
|
--dark-text-muted: #a8a8c0;
|
|
--dark-border: #3d2060;
|
|
}
|
|
|
|
/* Base */
|
|
body {
|
|
background: var(--dark-bg);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Override Bootstrap utility classes */
|
|
.bg-light {
|
|
background-color: var(--dark-surface) !important;
|
|
}
|
|
|
|
.text-dark {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: var(--dark-surface);
|
|
border-color: var(--neon-pink);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 8px 20px rgba(255, 20, 147, 0.5);
|
|
}
|
|
|
|
.card-body {
|
|
background: var(--dark-surface);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.activity-card {
|
|
background: var(--dark-surface);
|
|
border-color: var(--neon-cyan);
|
|
box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
|
|
}
|
|
|
|
.activity-card:hover {
|
|
box-shadow: 0 8px 20px rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Timeline */
|
|
.timeline-card {
|
|
background: var(--dark-surface) !important;
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.timeline-card .text-dark {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
.timeline-card .card-title a {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
.timeline-card .fw-bold {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
.timeline-item {
|
|
border-left-color: var(--dark-border);
|
|
}
|
|
|
|
.timeline-item::before {
|
|
border-color: var(--dark-surface);
|
|
}
|
|
|
|
.timeline-date {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
/* Metrics */
|
|
.metric-card {
|
|
background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg-alt) 100%);
|
|
border-color: var(--neon-pink);
|
|
box-shadow: 0 4px 8px rgba(255, 20, 147, 0.3);
|
|
}
|
|
|
|
.metric-card:hover {
|
|
box-shadow: 0 6px 16px rgba(255, 20, 147, 0.4);
|
|
}
|
|
|
|
.metric-label {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
/* File upload */
|
|
.file-upload-area {
|
|
background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg-alt) 100%);
|
|
border-color: var(--neon-cyan);
|
|
}
|
|
|
|
.file-upload-area:hover,
|
|
.file-upload-area.drag-over {
|
|
background: linear-gradient(135deg, var(--dark-surface-hover) 0%, var(--dark-bg-alt) 100%);
|
|
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
|
|
}
|
|
|
|
/* Headings */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Text utilities */
|
|
.text-muted {
|
|
color: var(--dark-text-muted) !important;
|
|
}
|
|
|
|
/* Avatar placeholders */
|
|
.avatar-placeholder,
|
|
.avatar-placeholder-large {
|
|
background-color: var(--dark-surface-hover);
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
/* Stats */
|
|
.stat-label {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
.stat-card-hover:hover {
|
|
background-color: var(--dark-surface-hover);
|
|
}
|
|
|
|
.activity-item:hover {
|
|
background-color: var(--dark-surface-hover);
|
|
}
|
|
|
|
/* Empty states */
|
|
.empty-state {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
.empty-state-icon {
|
|
color: var(--dark-border);
|
|
}
|
|
|
|
.empty-state-title {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.empty-state-message {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
/* Activity preview map */
|
|
.activity-preview-map {
|
|
background-color: var(--dark-surface);
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.loading-spinner {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
border-top-color: var(--neon-pink);
|
|
}
|
|
|
|
/* Forms */
|
|
.form-control,
|
|
.form-select {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background-color: var(--dark-surface-hover);
|
|
border-color: var(--neon-cyan);
|
|
color: var(--dark-text);
|
|
box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--dark-text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Input groups */
|
|
.input-group-text {
|
|
background-color: var(--dark-surface-hover);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-content {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--neon-pink);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom-color: var(--dark-border);
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top-color: var(--dark-border);
|
|
}
|
|
|
|
.modal-title {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Close button */
|
|
.btn-close {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
/* Dropdowns */
|
|
.dropdown-menu {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.dropdown-item:hover,
|
|
.dropdown-item:focus {
|
|
background-color: var(--dark-surface-hover);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-top-color: var(--dark-border);
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert-success {
|
|
background-color: rgba(57, 255, 20, 0.15);
|
|
border-color: var(--neon-green);
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: rgba(220, 53, 69, 0.15);
|
|
border-color: #dc3545;
|
|
color: #ff6b7a;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: rgba(0, 255, 255, 0.15);
|
|
border-color: var(--neon-cyan);
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: rgba(255, 193, 7, 0.15);
|
|
border-color: var(--warning-color);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
/* Tables */
|
|
.table {
|
|
color: var(--dark-text);
|
|
border-color: var(--dark-border);
|
|
}
|
|
|
|
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover > * {
|
|
background-color: var(--dark-surface-hover);
|
|
}
|
|
|
|
/* List groups */
|
|
.list-group-item {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: var(--dark-surface-hover);
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination .page-link {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.pagination .page-link:hover {
|
|
background-color: var(--dark-surface-hover);
|
|
border-color: var(--neon-cyan);
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background-color: var(--neon-pink);
|
|
border-color: var(--neon-pink);
|
|
color: white;
|
|
}
|
|
|
|
.pagination .page-item.disabled .page-link {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--neon-pink);
|
|
}
|
|
|
|
/* HR */
|
|
hr {
|
|
border-top-color: var(--dark-border);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
background-color: var(--dark-surface);
|
|
}
|
|
|
|
.breadcrumb-item + .breadcrumb-item::before {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
.breadcrumb-item.active {
|
|
color: var(--dark-text-muted);
|
|
}
|
|
|
|
/* Toast */
|
|
.toast {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.toast-header {
|
|
background-color: var(--dark-surface-hover);
|
|
border-bottom-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Progress bars */
|
|
.progress {
|
|
background-color: var(--dark-surface-hover);
|
|
}
|
|
|
|
/* Accordion */
|
|
.accordion-item {
|
|
background-color: var(--dark-surface);
|
|
border-color: var(--dark-border);
|
|
}
|
|
|
|
.accordion-button {
|
|
background-color: var(--dark-surface);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background-color: var(--dark-surface-hover);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.accordion-button:focus {
|
|
border-color: var(--neon-cyan);
|
|
box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
|
|
}
|
|
|
|
.accordion-body {
|
|
background-color: var(--dark-surface);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Code blocks */
|
|
code {
|
|
background-color: var(--dark-surface-hover);
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
pre {
|
|
background-color: var(--dark-surface-hover);
|
|
border-color: var(--dark-border);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Offcanvas */
|
|
.offcanvas {
|
|
background-color: var(--dark-surface);
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.offcanvas-header {
|
|
border-bottom-color: var(--dark-border);
|
|
}
|
|
|
|
.offcanvas-title {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Footer */
|
|
footer,
|
|
footer.bg-light {
|
|
background-color: var(--dark-surface) !important;
|
|
border-top: 3px solid var(--neon-pink);
|
|
}
|
|
|
|
footer h5,
|
|
footer.bg-light h5 {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
footer .text-muted,
|
|
footer.bg-light .text-muted {
|
|
color: var(--dark-text-muted) !important;
|
|
}
|
|
|
|
footer a,
|
|
footer.bg-light a {
|
|
color: var(--neon-cyan) !important;
|
|
}
|
|
|
|
footer a:hover,
|
|
footer.bg-light a:hover {
|
|
color: var(--neon-pink) !important;
|
|
}
|
|
|
|
footer p,
|
|
footer.bg-light p {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
/* Indoor Activity Placeholder - Dark Mode */
|
|
#indoorPlaceholder .card {
|
|
background: var(--dark-surface);
|
|
border-color: var(--neon-cyan);
|
|
}
|
|
|
|
#indoorPlaceholder .card-body {
|
|
background: var(--dark-surface);
|
|
}
|
|
|
|
#indoorPlaceholder .text-muted,
|
|
#indoorPlaceholder h4 {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
#indoorPlaceholder p.text-muted {
|
|
color: var(--dark-text-muted) !important;
|
|
}
|
|
|
|
/* Indoor activity placeholder for timeline - Dark Mode */
|
|
.indoor-activity-placeholder {
|
|
background-color: var(--dark-surface) !important;
|
|
}
|
|
|
|
.indoor-activity-placeholder .text-muted {
|
|
color: var(--dark-text-muted) !important;
|
|
}
|
|
|
|
.indoor-activity-placeholder .fw-bold {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
/* Form elements - Dark Mode Fix */
|
|
.form-label {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
.form-check-label {
|
|
color: var(--dark-text) !important;
|
|
}
|
|
|
|
.form-text {
|
|
color: var(--dark-text-muted) !important;
|
|
}
|
|
|
|
/* Typography - Dark Mode Fix */
|
|
strong {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
b {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
small {
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
/* Indoor badge - Dark Mode */
|
|
.badge.bg-warning.text-dark {
|
|
background: rgba(255, 165, 0, 0.25) !important; /* Orange with transparency */
|
|
color: var(--neon-orange) !important;
|
|
border: 1px solid var(--neon-orange);
|
|
}
|
|
}
|