mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-02-07 04:38:50 -06:00
90b419969c
- Fix header alignment issues with comments counter and action button - Remove nested card styling conflicts in comments list - Improve comment header flex layout with proper spacing - Fix timestamp text overflow with ellipsis for long content - Make comment actions always visible instead of hover-only - Remove conflicting CSS resets that broke flex layouts - Remove decorative guideline to prevent double left borders - Optimize comment metadata flex behavior for better responsiveness Resolves vertical alignment issues in comment headers and improves overall visual consistency of the comment system.
4828 lines
127 KiB
CSS
4828 lines
127 KiB
CSS
:root {
|
|
/* Primary Color Palette - Enhanced Modern Blue */
|
|
--primary-color: #3b82f6;
|
|
--primary-dark: #2563eb;
|
|
--primary-light: #93c5fd;
|
|
--primary-50: #eff6ff;
|
|
--primary-100: #dbeafe;
|
|
--primary-200: #bfdbfe;
|
|
--primary-300: #93c5fd;
|
|
--primary-400: #60a5fa;
|
|
--primary-500: #3b82f6;
|
|
--primary-600: #2563eb;
|
|
--primary-700: #1d4ed8;
|
|
--primary-800: #1e40af;
|
|
--primary-900: #1e3a8a;
|
|
|
|
/* Semantic Color System */
|
|
--secondary-color: #64748b;
|
|
--success-color: #10b981;
|
|
--success-light: #d1fae5;
|
|
--danger-color: #ef4444;
|
|
--danger-light: #fee2e2;
|
|
--warning-color: #f59e0b;
|
|
--warning-light: #fef3c7;
|
|
--info-color: #06b6d4;
|
|
--info-light: #cffafe;
|
|
|
|
/* Neutral Color Palette - Enhanced */
|
|
--gray-50: #f9fafb;
|
|
--gray-100: #f3f4f6;
|
|
--gray-200: #e5e7eb;
|
|
--gray-300: #d1d5db;
|
|
--gray-400: #9ca3af;
|
|
--gray-500: #6b7280;
|
|
--gray-600: #4b5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1f2937;
|
|
--gray-900: #111827;
|
|
|
|
/* Background Colors - Modern Hierarchy */
|
|
--dark-color: #1e293b;
|
|
--light-color: #f8fafc;
|
|
--body-bg: #ffffff;
|
|
--surface-color: #ffffff;
|
|
--surface-variant: #f8fafc;
|
|
--surface-hover: #f1f5f9;
|
|
--surface-pressed: #e2e8f0;
|
|
|
|
/* Border and Divider Colors - Refined */
|
|
--border-color: #e2e8f0;
|
|
--border-light: #f1f5f9;
|
|
--border-strong: #cbd5e1;
|
|
--divider-color: #e2e8f0;
|
|
|
|
/* Text Colors - Improved Hierarchy */
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #475569;
|
|
--text-tertiary: #64748b;
|
|
--text-muted: #9ca3af;
|
|
--text-on-primary: #ffffff;
|
|
--text-on-dark: #f8fafc;
|
|
|
|
/* Component Backgrounds - Enhanced */
|
|
--navbar-bg: rgba(255, 255, 255, 0.95);
|
|
--navbar-border: rgba(226, 232, 240, 0.6);
|
|
--dropdown-bg: #ffffff;
|
|
--card-bg: #ffffff;
|
|
--input-bg: #ffffff;
|
|
--input-border: #d1d5db;
|
|
--input-focus: #3b82f6;
|
|
|
|
/* Visual Effects - Modern Shadows and Gradients */
|
|
--bg-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
--bg-gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
--card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
--card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
--card-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.12);
|
|
--focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.12);
|
|
--focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.12);
|
|
|
|
/* Spacing and Layout - Refined System */
|
|
--border-radius: 8px;
|
|
--border-radius-lg: 12px;
|
|
--border-radius-sm: 6px;
|
|
--border-radius-xs: 4px;
|
|
--border-radius-full: 9999px;
|
|
--section-spacing: 2.5rem;
|
|
--card-spacing: 1.5rem;
|
|
--mobile-section-spacing: 1.5rem;
|
|
--mobile-card-spacing: 1rem;
|
|
--navbar-height: 72px;
|
|
--container-padding: 1.5rem;
|
|
--grid-gap: 1.5rem;
|
|
--grid-gap-sm: 1rem;
|
|
|
|
/* Transitions and Animations - Enhanced */
|
|
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--animation-duration: 0.3s;
|
|
--animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Typography - Enhanced Scale */
|
|
--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-extrabold: 800;
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.625;
|
|
|
|
/* Interactive States */
|
|
--hover-opacity: 0.9;
|
|
--active-opacity: 0.95;
|
|
--disabled-opacity: 0.5;
|
|
--loading-opacity: 0.6;
|
|
|
|
/* Z-Index Scale */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
--z-toast: 1080;
|
|
|
|
/* Bootstrap Integration - Enhanced */
|
|
--bs-body-bg: var(--body-bg);
|
|
--bs-body-color: var(--text-primary);
|
|
--bs-body-font-family: var(--font-family-sans);
|
|
--bs-body-font-size: 0.95rem;
|
|
--bs-body-line-height: var(--line-height-normal);
|
|
--bs-card-bg: var(--card-bg);
|
|
--bs-card-border-color: var(--border-color);
|
|
--bs-card-border-radius: var(--border-radius);
|
|
--bs-dropdown-bg: var(--dropdown-bg);
|
|
--bs-dropdown-border-color: var(--border-color);
|
|
--bs-dropdown-link-color: var(--text-secondary);
|
|
--bs-dropdown-link-hover-bg: var(--surface-hover);
|
|
--bs-dropdown-link-hover-color: var(--text-primary);
|
|
}
|
|
|
|
/* Dark Theme Variables */
|
|
[data-theme="dark"] {
|
|
/* Primary Color Palette - Enhanced for dark theme */
|
|
--primary-color: #60a5fa;
|
|
--primary-dark: #3b82f6;
|
|
--primary-light: #93c5fd;
|
|
--primary-50: #1e3a8a;
|
|
--primary-100: #1e40af;
|
|
--primary-200: #1d4ed8;
|
|
--primary-300: #2563eb;
|
|
--primary-400: #3b82f6;
|
|
--primary-500: #60a5fa;
|
|
--primary-600: #93c5fd;
|
|
--primary-700: #bfdbfe;
|
|
--primary-800: #dbeafe;
|
|
--primary-900: #eff6ff;
|
|
|
|
/* Semantic Color System - Dark theme */
|
|
--secondary-color: #94a3b8;
|
|
--success-color: #34d399;
|
|
--success-light: #064e3b;
|
|
--danger-color: #f87171;
|
|
--danger-light: #7f1d1d;
|
|
--warning-color: #fbbf24;
|
|
--warning-light: #78350f;
|
|
--info-color: #38bdf8;
|
|
--info-light: #164e63;
|
|
|
|
/* Neutral Color Palette - Dark theme */
|
|
--gray-50: #0f172a;
|
|
--gray-100: #1e293b;
|
|
--gray-200: #334155;
|
|
--gray-300: #475569;
|
|
--gray-400: #64748b;
|
|
--gray-500: #94a3b8;
|
|
--gray-600: #cbd5e1;
|
|
--gray-700: #e2e8f0;
|
|
--gray-800: #f1f5f9;
|
|
--gray-900: #f8fafc;
|
|
|
|
/* Background Colors - Dark theme specific */
|
|
--dark-color: #0f172a;
|
|
--light-color: #1e293b;
|
|
--body-bg: #0b1220;
|
|
--surface-color: #0f172a;
|
|
--surface-variant: #1e293b;
|
|
--surface-hover: #334155;
|
|
--surface-pressed: #475569;
|
|
|
|
/* Border and Divider Colors - Dark theme */
|
|
--border-color: #334155;
|
|
--border-light: #1e293b;
|
|
--border-strong: #475569;
|
|
--divider-color: #334155;
|
|
|
|
/* Text Colors - Dark theme */
|
|
--text-primary: #f1f5f9;
|
|
--text-secondary: #cbd5e1;
|
|
--text-tertiary: #94a3b8;
|
|
--text-muted: #64748b;
|
|
--text-on-primary: #ffffff;
|
|
--text-on-dark: #0f172a;
|
|
|
|
/* Component Backgrounds - Dark theme */
|
|
--navbar-bg: rgba(11, 18, 32, 0.95);
|
|
--navbar-border: rgba(51, 65, 85, 0.6);
|
|
--dropdown-bg: #0f172a;
|
|
--card-bg: #0f172a;
|
|
--input-bg: #1e293b;
|
|
--input-border: #475569;
|
|
--input-focus: #60a5fa;
|
|
|
|
/* Visual Effects - Dark theme */
|
|
--bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
|
|
--bg-gradient-subtle: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
|
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
|
|
--card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
|
|
--card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
|
|
--card-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
|
|
--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.2);
|
|
--focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.2);
|
|
--focus-ring-success: 0 0 0 3px rgba(52, 211, 153, 0.2);
|
|
|
|
/* Bootstrap Integration - Dark theme */
|
|
--bs-body-bg: var(--body-bg);
|
|
--bs-body-color: var(--text-primary);
|
|
--bs-body-font-family: var(--font-family-sans);
|
|
--bs-card-bg: var(--card-bg);
|
|
--bs-card-border-color: var(--border-color);
|
|
--bs-dropdown-bg: var(--dropdown-bg);
|
|
--bs-dropdown-border-color: var(--border-color);
|
|
--bs-dropdown-link-color: var(--text-secondary);
|
|
--bs-dropdown-link-hover-bg: var(--surface-hover);
|
|
--bs-dropdown-link-hover-color: var(--text-primary);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-sans);
|
|
background: var(--body-bg);
|
|
color: var(--text-primary);
|
|
line-height: var(--line-height-normal);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.95rem;
|
|
font-weight: var(--font-weight-normal);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
scroll-behavior: smooth;
|
|
transition: background-color var(--transition), color var(--transition);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Base backgrounds in dark theme */
|
|
[data-theme="dark"] body {
|
|
background: var(--body-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
main {
|
|
flex: 1 0 auto;
|
|
display: block;
|
|
padding-bottom: var(--section-spacing);
|
|
}
|
|
|
|
/* Enhanced Container Layout */
|
|
.container {
|
|
max-width: 1400px;
|
|
padding-left: var(--container-padding);
|
|
padding-right: var(--container-padding);
|
|
}
|
|
|
|
.container-fluid {
|
|
padding-left: var(--container-padding);
|
|
padding-right: var(--container-padding);
|
|
}
|
|
|
|
/* Responsive container padding */
|
|
@media (max-width: 768px) {
|
|
.container,
|
|
.container-fluid {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Improved Section Spacing */
|
|
.section-spacing {
|
|
margin-bottom: var(--section-spacing);
|
|
}
|
|
|
|
.section-spacing:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Enhanced Card Layout - Modern Design */
|
|
.card {
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
border-radius: var(--border-radius);
|
|
transition: var(--transition-slow);
|
|
background: var(--card-bg);
|
|
overflow: hidden;
|
|
margin-bottom: var(--card-spacing);
|
|
position: relative;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
|
opacity: 0;
|
|
transition: opacity var(--transition);
|
|
}
|
|
|
|
.card:hover::before {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Simplified card variants */
|
|
.card.card-elevated {
|
|
box-shadow: var(--card-shadow-lg);
|
|
}
|
|
|
|
/* Ensure all card variants have consistent border radius */
|
|
.card {
|
|
border-radius: var(--border-radius) !important;
|
|
}
|
|
|
|
.card-header {
|
|
border-top-left-radius: var(--border-radius) !important;
|
|
border-top-right-radius: var(--border-radius) !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
.card-footer {
|
|
border-bottom-left-radius: var(--border-radius) !important;
|
|
border-bottom-right-radius: var(--border-radius) !important;
|
|
border-top-left-radius: 0 !important;
|
|
border-top-right-radius: 0 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .card,
|
|
[data-theme="dark"] .modal-content,
|
|
[data-theme="dark"] .dropdown-menu,
|
|
[data-theme="dark"] .mobile-table-row,
|
|
[data-theme="dark"] .table tr {
|
|
background: #0f172a !important;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-color) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .card-header,
|
|
[data-theme="dark"] .alert,
|
|
[data-theme="dark"] .table td,
|
|
[data-theme="dark"] .table th {
|
|
background: #0f172a;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .card a:hover .card-body { background-color: #111827; }
|
|
[data-theme="dark"] .dropdown-item { background-color: #0f172a !important; color: var(--text-secondary) !important; }
|
|
[data-theme="dark"] .dropdown-item:hover { background-color: #111827 !important; }
|
|
[data-theme="dark"] .navbar .dropdown-menu { --bs-dropdown-bg: #0f172a; }
|
|
|
|
.card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card.hover-lift:hover {
|
|
box-shadow: var(--card-shadow-hover);
|
|
transform: translateY(-4px) scale(1.02);
|
|
border-color: var(--primary-200);
|
|
}
|
|
|
|
.card.hover-lift {
|
|
transition: all var(--transition-slow) var(--animation-timing);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card.hover-lift:active {
|
|
transform: translateY(-2px) scale(1.01);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.card a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.card a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Quick action card hover effects */
|
|
.card a:hover .card-body {
|
|
background-color: var(--light-color);
|
|
}
|
|
|
|
.card a:hover .bg-primary.bg-opacity-10 {
|
|
background-color: rgba(59, 130, 246, 0.2) !important;
|
|
}
|
|
|
|
.card a:hover .bg-secondary.bg-opacity-10 {
|
|
background-color: rgba(100, 116, 139, 0.2) !important;
|
|
}
|
|
|
|
.card a:hover .bg-info.bg-opacity-10 {
|
|
background-color: rgba(8, 145, 178, 0.2) !important;
|
|
}
|
|
|
|
.card a:hover .bg-warning.bg-opacity-10 {
|
|
background-color: rgba(217, 119, 6, 0.2) !important;
|
|
}
|
|
|
|
.card-header {
|
|
background: var(--card-bg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1.75rem 2rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--text-primary);
|
|
font-size: 1.125rem;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.card-header.card-header-lg {
|
|
padding: 2rem 2.5rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.card-header.card-header-sm {
|
|
padding: 1.25rem 1.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 2rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.card-body.card-body-lg {
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
.card-body.card-body-sm {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-footer {
|
|
background: var(--surface-variant);
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 1.5rem 2rem;
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Enhanced Button System - Modern Styling with Square Corners */
|
|
.btn {
|
|
border-radius: 0 !important;
|
|
font-weight: var(--font-weight-medium) !important;
|
|
padding: 0.875rem 1.5rem !important;
|
|
transition: var(--transition-slow) !important;
|
|
position: relative !important;
|
|
font-size: 0.95rem !important;
|
|
min-height: 48px !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
text-decoration: none !important;
|
|
cursor: pointer !important;
|
|
gap: 0.5rem !important;
|
|
line-height: var(--line-height-tight) !important;
|
|
-webkit-tap-highlight-color: transparent !important;
|
|
user-select: none !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
font-family: var(--font-family-sans) !important;
|
|
letter-spacing: 0.025em !important;
|
|
|
|
/* Default neutral styling with enhanced visual hierarchy */
|
|
border: 1px solid var(--input-border) !important;
|
|
background: var(--surface-color) !important;
|
|
color: var(--text-primary) !important;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
|
|
.btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
|
|
opacity: 0;
|
|
transition: opacity var(--transition);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Button focus states */
|
|
.btn:focus {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.btn:focus:not(:focus-visible) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn:focus-visible {
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--surface-hover) !important;
|
|
border-color: var(--primary-color) !important;
|
|
color: var(--text-primary) !important;
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0) scale(0.98) !important;
|
|
transition: var(--transition-fast) !important;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
|
|
.btn i {
|
|
color: #6b7280;
|
|
margin-right: 0.375rem;
|
|
}
|
|
|
|
.btn:hover i {
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Primary button styling - Enhanced */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-600) 100%) !important;
|
|
border-color: var(--primary-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2), 0 1px 2px rgba(59, 130, 246, 0.1) !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%) !important;
|
|
border-color: var(--primary-600) !important;
|
|
color: var(--text-on-primary) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.2) !important;
|
|
}
|
|
|
|
.btn-primary:focus {
|
|
box-shadow: var(--focus-ring), 0 2px 4px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
|
|
transform: translateY(0) scale(0.98);
|
|
}
|
|
|
|
/* Success button styling - Enhanced */
|
|
.btn-success {
|
|
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%) !important;
|
|
border-color: var(--success-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2), 0 1px 2px rgba(16, 185, 129, 0.1) !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.btn-success::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-success:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
|
|
border-color: #059669 !important;
|
|
color: var(--text-on-primary) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(16, 185, 129, 0.2) !important;
|
|
}
|
|
|
|
/* Danger button styling */
|
|
.btn-danger {
|
|
background: var(--danger-color);
|
|
border-color: var(--danger-color);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #b91c1c;
|
|
border-color: #b91c1c;
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
|
|
}
|
|
|
|
/* Outline button styling - Enhanced */
|
|
.btn-outline-primary {
|
|
background: transparent !important;
|
|
border: 2px solid var(--primary-color) !important;
|
|
color: var(--primary-color) !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
-webkit-backdrop-filter: blur(8px) !important;
|
|
}
|
|
|
|
.btn-outline-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-outline-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background: var(--primary-color) !important;
|
|
border-color: var(--primary-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3) !important;
|
|
}
|
|
|
|
/* Dark Mode Button Overrides - Comprehensive Fix */
|
|
|
|
/* Primary buttons in dark mode */
|
|
[data-theme="dark"] .btn-primary {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 2px 4px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-primary:focus {
|
|
box-shadow: var(--focus-ring), 0 2px 4px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
/* Success buttons in dark mode */
|
|
[data-theme="dark"] .btn-success {
|
|
background: var(--success-color);
|
|
border-color: var(--success-color);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-success:hover {
|
|
background: #059669;
|
|
border-color: #059669;
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Danger buttons in dark mode */
|
|
[data-theme="dark"] .btn-danger {
|
|
background: var(--danger-color);
|
|
border-color: var(--danger-color);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-danger:hover {
|
|
background: #dc2626;
|
|
border-color: #dc2626;
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Warning buttons in dark mode */
|
|
[data-theme="dark"] .btn-warning {
|
|
background: var(--warning-color);
|
|
border-color: var(--warning-color);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-warning:hover {
|
|
background: #d97706;
|
|
border-color: #d97706;
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Info buttons in dark mode */
|
|
[data-theme="dark"] .btn-info {
|
|
background: var(--info-color);
|
|
border-color: var(--info-color);
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 2px 4px rgba(56, 189, 248, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-info:hover {
|
|
background: #0284c7;
|
|
border-color: #0284c7;
|
|
color: var(--text-on-primary);
|
|
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Secondary buttons in dark mode */
|
|
[data-theme="dark"] .btn-secondary {
|
|
background: var(--text-muted);
|
|
border-color: var(--text-muted);
|
|
color: var(--surface-color);
|
|
box-shadow: 0 2px 4px rgba(148, 163, 184, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-secondary:hover {
|
|
background: var(--text-secondary);
|
|
border-color: var(--text-secondary);
|
|
color: var(--surface-color);
|
|
box-shadow: 0 4px 12px rgba(148, 163, 184, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Outline buttons in dark mode */
|
|
[data-theme="dark"] .btn-outline-primary {
|
|
background: transparent;
|
|
border: 2px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-primary:hover {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: var(--text-on-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-secondary {
|
|
background: transparent;
|
|
border: 2px solid var(--text-muted);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-secondary:hover {
|
|
background: var(--text-muted);
|
|
border-color: var(--text-muted);
|
|
color: var(--surface-color);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-success {
|
|
background: transparent;
|
|
border: 2px solid var(--success-color);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-success:hover {
|
|
background: var(--success-color);
|
|
border-color: var(--success-color);
|
|
color: var(--text-on-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-danger {
|
|
background: transparent;
|
|
border: 2px solid var(--danger-color);
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-danger:hover {
|
|
background: var(--danger-color);
|
|
border-color: var(--danger-color);
|
|
color: var(--text-on-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-warning {
|
|
background: transparent;
|
|
border: 2px solid var(--warning-color);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-warning:hover {
|
|
background: var(--warning-color);
|
|
border-color: var(--warning-color);
|
|
color: var(--text-on-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-info {
|
|
background: transparent;
|
|
border: 2px solid var(--info-color);
|
|
color: var(--info-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-info:hover {
|
|
background: var(--info-color);
|
|
border-color: var(--info-color);
|
|
color: var(--text-on-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
|
|
}
|
|
|
|
/* Modern header button style */
|
|
.btn-header {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.btn-header.btn-primary {
|
|
background: #f9fafb;
|
|
color: #6b7280;
|
|
border-color: #6b7280;
|
|
}
|
|
|
|
.btn-header.btn-primary:hover {
|
|
background: #f3f4f6;
|
|
border-color: #4b5563;
|
|
color: #4b5563;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
|
|
}
|
|
|
|
.btn-header.btn-outline-primary {
|
|
background: transparent;
|
|
color: #6b7280;
|
|
border-color: #6b7280;
|
|
}
|
|
|
|
.btn-header.btn-outline-primary:hover {
|
|
background: #f9fafb;
|
|
color: #4b5563;
|
|
border-color: #4b5563;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
|
|
-webkit-tap-highlight-color: transparent;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* Primary button styling is handled above - removed duplicate */
|
|
|
|
/* Soft button variants - Uniform Grey */
|
|
.btn-soft-primary {
|
|
color: #6b7280;
|
|
background: rgba(107, 114, 128, 0.1);
|
|
border: 1px solid rgba(107, 114, 128, 0.2);
|
|
}
|
|
.btn-soft-primary:hover { background: rgba(107, 114, 128, 0.15); color: #4b5563; }
|
|
|
|
.btn-soft-secondary {
|
|
color: #6b7280;
|
|
background: rgba(107, 114, 128, 0.1);
|
|
border: 1px solid rgba(107, 114, 128, 0.2);
|
|
}
|
|
.btn-soft-secondary:hover { background: rgba(107, 114, 128, 0.15); color: #4b5563; }
|
|
|
|
.btn-soft-success {
|
|
color: #6b7280;
|
|
background: rgba(107, 114, 128, 0.1);
|
|
border: 1px solid rgba(107, 114, 128, 0.2);
|
|
}
|
|
.btn-soft-success:hover { background: rgba(107, 114, 128, 0.15); color: #4b5563; }
|
|
|
|
.btn-soft-danger {
|
|
color: #6b7280;
|
|
background: rgba(107, 114, 128, 0.1);
|
|
border: 1px solid rgba(107, 114, 128, 0.2);
|
|
}
|
|
.btn-soft-danger:hover { background: rgba(107, 114, 128, 0.15); color: #4b5563; }
|
|
|
|
/* Icon-only buttons */
|
|
.btn-icon {
|
|
padding: 0.5rem;
|
|
width: 36px;
|
|
height: 36px;
|
|
min-height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn-icon.btn-sm { width: 32px; height: 32px; min-height: 32px; }
|
|
.btn-icon i { font-size: 0.95rem; }
|
|
|
|
/* Global theme toggle button - uniform grey */
|
|
/* Theme toggle styles removed - button no longer in header */
|
|
|
|
/* Success and danger button styling is handled above - removed duplicate */
|
|
|
|
/* Light theme outline button styles */
|
|
.btn-outline-primary {
|
|
background: transparent;
|
|
border: 2px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: var(--text-on-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
background: transparent;
|
|
border: 2px solid var(--text-muted);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background: var(--text-muted);
|
|
border-color: var(--text-muted);
|
|
color: var(--surface-color);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
|
|
}
|
|
|
|
/* Outline light buttons in dark mode */
|
|
[data-theme="dark"] .btn-outline-light {
|
|
background: transparent;
|
|
border: 2px solid var(--text-secondary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-light:hover {
|
|
background: var(--text-secondary);
|
|
border-color: var(--text-secondary);
|
|
color: var(--surface-color);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(203, 213, 225, 0.3);
|
|
}
|
|
|
|
/* Keep outline secondary buttons light when opened/active */
|
|
.btn-outline-secondary:focus,
|
|
.btn-outline-secondary:active,
|
|
.btn-outline-secondary.dropdown-toggle.show,
|
|
.show > .btn-outline-secondary.dropdown-toggle {
|
|
background: #f9fafb;
|
|
border-color: #4b5563;
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Unify small/large sizes */
|
|
.btn-sm {
|
|
padding: 0.4rem 0.65rem;
|
|
font-size: 0.85rem;
|
|
min-height: 36px;
|
|
}
|
|
.btn-lg {
|
|
padding: 0.9rem 1.25rem;
|
|
font-size: 1.05rem;
|
|
min-height: 56px;
|
|
}
|
|
|
|
/* Enhanced Form Layout */
|
|
.form-control, .form-select {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 1rem 1.25rem;
|
|
font-size: 1rem;
|
|
transition: var(--transition);
|
|
background: var(--bs-body-bg, #ffffff);
|
|
min-height: 52px; /* baseline */
|
|
}
|
|
|
|
[data-theme="dark"] .form-control,
|
|
[data-theme="dark"] .form-select {
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .form-control:focus,
|
|
[data-theme="dark"] .form-select:focus {
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
border-color: var(--primary-color);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
[data-theme="dark"] textarea.form-control {
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .form-control::placeholder {
|
|
color: var(--text-muted);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
[data-theme="dark"] .form-select option {
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* EasyMDE (Markdown editor) enhanced theming */
|
|
.EasyMDEContainer {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Toolbar */
|
|
.EasyMDEContainer .editor-toolbar {
|
|
background: var(--bs-body-bg, #ffffff) !important;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0.375rem 0.5rem;
|
|
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
|
|
}
|
|
.EasyMDEContainer .editor-toolbar a {
|
|
color: var(--text-secondary) !important;
|
|
border-radius: 6px;
|
|
height: 32px;
|
|
width: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition);
|
|
opacity: 0.9;
|
|
}
|
|
.EasyMDEContainer .editor-toolbar a:hover,
|
|
.EasyMDEContainer .editor-toolbar a.active {
|
|
background: var(--light-color) !important;
|
|
color: var(--text-primary) !important;
|
|
box-shadow: inset 0 0 0 2px var(--primary-color);
|
|
opacity: 1;
|
|
}
|
|
.EasyMDEContainer .editor-toolbar .separator {
|
|
border-left: 1px solid var(--border-color);
|
|
margin: 0 0.35rem;
|
|
}
|
|
|
|
/* Editor surface */
|
|
.EasyMDEContainer .CodeMirror,
|
|
.EasyMDEContainer .CodeMirror-scroll,
|
|
.EasyMDEContainer .cm-s-easymde.CodeMirror,
|
|
.EasyMDEContainer .cm-s-easymde .CodeMirror-scroll {
|
|
background: var(--bs-body-bg, #ffffff) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
.EasyMDEContainer .cm-s-easymde.CodeMirror {
|
|
border-top: none !important; /* aligns with toolbar */
|
|
}
|
|
.EasyMDEContainer .cm-s-easymde .CodeMirror-gutters {
|
|
background: var(--bs-body-bg, #ffffff) !important;
|
|
border-right: 1px solid var(--border-color) !important;
|
|
}
|
|
.EasyMDEContainer .CodeMirror {
|
|
min-height: 280px;
|
|
font-size: 0.95rem;
|
|
line-height: 1.55;
|
|
}
|
|
.EasyMDEContainer .CodeMirror-scroll { padding: 0.75rem 1rem; }
|
|
.EasyMDEContainer .CodeMirror pre { color: var(--text-primary) !important; }
|
|
.EasyMDEContainer .CodeMirror-cursor { border-left-color: #1e293b !important; }
|
|
.EasyMDEContainer .CodeMirror .CodeMirror-placeholder { color: #64748b !important; }
|
|
.EasyMDEContainer .CodeMirror-selected { background: rgba(59,130,246,0.15) !important; }
|
|
.EasyMDEContainer .CodeMirror-focused { box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
|
|
|
|
/* Status bar and preview */
|
|
.EasyMDEContainer .editor-statusbar {
|
|
background: var(--bs-body-bg, #ffffff) !important;
|
|
color: var(--text-secondary) !important;
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 0.375rem 0.75rem;
|
|
}
|
|
.EasyMDEContainer .editor-preview,
|
|
.EasyMDEContainer .editor-preview-side {
|
|
background: var(--bs-body-bg, #ffffff) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
/* Light token colors for readability */
|
|
.EasyMDEContainer .cm-header { color: #1e40af !important; }
|
|
.EasyMDEContainer .cm-strong { color: #1e293b !important; }
|
|
.EasyMDEContainer .cm-em { color: #dc2626 !important; }
|
|
.EasyMDEContainer .cm-quote { color: #059669 !important; }
|
|
.EasyMDEContainer .cm-link { color: #2563eb !important; text-decoration: underline; }
|
|
.EasyMDEContainer .cm-formatting-header { color: #2563eb !important; }
|
|
.EasyMDEContainer .cm-url { color: #2563eb !important; }
|
|
.EasyMDEContainer .cm-code { color: #dc2626 !important; }
|
|
.EasyMDEContainer .cm-hr { color: #64748b !important; }
|
|
|
|
/* Dark theme */
|
|
[data-theme="dark"] .EasyMDEContainer .editor-toolbar {
|
|
background: #0b1220 !important;
|
|
border-color: var(--border-color) !important;
|
|
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
|
|
}
|
|
[data-theme="dark"] .EasyMDEContainer .editor-toolbar a {
|
|
color: var(--text-secondary) !important;
|
|
opacity: 0.95;
|
|
}
|
|
[data-theme="dark"] .EasyMDEContainer .editor-toolbar a:hover,
|
|
[data-theme="dark"] .EasyMDEContainer .editor-toolbar a.active {
|
|
background: #111827 !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .EasyMDEContainer .CodeMirror,
|
|
[data-theme="dark"] .EasyMDEContainer .CodeMirror-scroll,
|
|
[data-theme="dark"] .EasyMDEContainer .cm-s-easymde.CodeMirror,
|
|
[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .CodeMirror-scroll {
|
|
background: #0f172a !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
[data-theme="dark"] .EasyMDEContainer .cm-s-easymde.CodeMirror {
|
|
border-top: none !important;
|
|
}
|
|
[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .CodeMirror-gutters {
|
|
background: #0f172a !important;
|
|
border-right: 1px solid var(--border-color) !important;
|
|
}
|
|
[data-theme="dark"] .EasyMDEContainer .CodeMirror-selected { background: rgba(59,130,246,0.25) !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .CodeMirror pre { color: var(--text-primary) !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor { border-left-color: #e5e7eb !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .CodeMirror .CodeMirror-placeholder { color: #64748b !important; }
|
|
|
|
/* Dark token colors */
|
|
[data-theme="dark"] .EasyMDEContainer .cm-header { color: #93c5fd !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .cm-strong { color: #e5e7eb !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .cm-em { color: #fca5a5 !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .cm-quote { color: #a7f3d0 !important; }
|
|
[data-theme="dark"] .EasyMDEContainer .cm-link { color: #60a5fa !important; text-decoration: underline; }
|
|
[data-theme="dark"] .EasyMDEContainer .cm-formatting-header { color: #60a5fa !important; }
|
|
|
|
/* ==========================================
|
|
Markdown Editor Wrapper (Task forms)
|
|
========================================== */
|
|
|
|
.markdown-editor-wrapper {
|
|
position: relative;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.markdown-editor-wrapper .EasyMDEContainer {
|
|
border: none !important; /* outer border handled by inner parts */
|
|
border-radius: 12px !important;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.markdown-editor-wrapper .editor-toolbar {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
|
border: 2px solid #e2e8f0 !important;
|
|
border-top: none !important;
|
|
border-radius: 0 0 12px 12px !important;
|
|
position: relative;
|
|
}
|
|
|
|
.markdown-editor-wrapper .editor-toolbar a {
|
|
height: 34px !important;
|
|
width: 34px !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
border-radius: 6px !important;
|
|
transition: var(--transition) !important;
|
|
color: #64748b !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.markdown-editor-wrapper .editor-toolbar a:hover,
|
|
.markdown-editor-wrapper .editor-toolbar a.active {
|
|
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
|
|
color: var(--primary-color) !important;
|
|
transform: translateY(-1px) scale(1.05);
|
|
}
|
|
|
|
.markdown-editor-wrapper .CodeMirror,
|
|
.markdown-editor-wrapper .editor-preview-side {
|
|
background: #ffffff !important;
|
|
padding: 1rem 1.25rem !important;
|
|
font-size: 0.95rem !important;
|
|
line-height: 1.6 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-toolbar {
|
|
background: linear-gradient(135deg, #0b1220 0%, #1f2a44 100%) !important;
|
|
border-color: #1f2a44 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .markdown-editor-wrapper .CodeMirror,
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-preview-side {
|
|
background: #0f172a !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
/* Toast UI Editor polish within wrapper */
|
|
.markdown-editor-wrapper .toastui-editor-defaultUI {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--bs-body-bg, #ffffff);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-defaultUI-toolbar {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 8px 10px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-icons {
|
|
border-radius: 6px;
|
|
border: 1px solid transparent;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-icons:hover {
|
|
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents,
|
|
.markdown-editor-wrapper .ProseMirror {
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents {
|
|
color: var(--text-primary);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-main .toastui-editor-md-container {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
.markdown-editor-wrapper:focus-within .toastui-editor-defaultUI {
|
|
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents pre,
|
|
.markdown-editor-wrapper .toastui-editor-contents code {
|
|
background: #f8fafc;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents pre {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 14px 16px;
|
|
overflow-x: auto;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents pre code {
|
|
background: transparent;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
|
|
font-size: 0.92em;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents code:not(pre code) {
|
|
background: #f1f5f9;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
border-radius: var(--border-radius);
|
|
padding: 2px 6px;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents blockquote {
|
|
border-left: 4px solid var(--primary-color);
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
padding: 12px 16px;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents hr {
|
|
border: none;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
|
|
margin: 1.25rem 0;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents a {
|
|
color: var(--primary-color);
|
|
text-decoration: underline;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents ul,
|
|
.markdown-editor-wrapper .toastui-editor-contents ol {
|
|
padding-left: 1.25rem;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents li + li {
|
|
margin-top: 0.25rem;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents input[type="checkbox"] {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents th,
|
|
.markdown-editor-wrapper .toastui-editor-contents td {
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents th {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
color: var(--text-primary);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents tr:nth-child(even) td {
|
|
background: rgba(59,130,246,0.03);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-contents img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-toolbar-icons {
|
|
transition: transform 0.15s ease;
|
|
}
|
|
.markdown-editor-wrapper .toastui-editor-toolbar-icons:active {
|
|
transform: translateY(1px) scale(0.98);
|
|
}
|
|
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-defaultUI {
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-defaultUI-toolbar {
|
|
background: linear-gradient(135deg, #0b1220 0%, #1f2a44 100%);
|
|
border-bottom-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-main .toastui-editor-md-container {
|
|
border-right-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents,
|
|
[data-theme="dark"] .markdown-editor-wrapper .ProseMirror {
|
|
color: var(--text-primary);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .ProseMirror {
|
|
caret-color: #e5e7eb;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents h1,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents h2,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents h3,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents h4,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents h5,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents h6 {
|
|
color: var(--text-primary);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents a {
|
|
color: #93c5fd;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents pre,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents code {
|
|
background: #0f172a;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents pre code {
|
|
color: #e5e7eb;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents pre {
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents blockquote {
|
|
background: linear-gradient(135deg, #1f2a44 0%, #374151 100%);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents code:not(pre code) {
|
|
background: #111827;
|
|
border-color: var(--border-color);
|
|
color: #f472b6;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents th,
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents td {
|
|
color: var(--text-primary);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-defaultUI-toolbar .toastui-editor-toolbar-icons {
|
|
color: var(--text-secondary);
|
|
opacity: 0.95;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents th {
|
|
background: linear-gradient(135deg, #1f2a44 0%, #374151 100%);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents tr:nth-child(even) td {
|
|
background: rgba(96,165,250,0.06);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-contents hr {
|
|
background: linear-gradient(90deg, transparent, #1f2a44, transparent);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .toastui-editor-mode-switch {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Enhanced editor surface inside wrapper */
|
|
.markdown-editor-wrapper .EasyMDEContainer .CodeMirror {
|
|
border-radius: 12px 12px 0 0 !important;
|
|
border: 2px solid #e2e8f0 !important;
|
|
border-bottom: none !important;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.6 !important;
|
|
padding: 16px !important;
|
|
color: #1e293b !important;
|
|
min-height: 300px !important;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .CodeMirror-focused {
|
|
border-color: var(--primary-color) !important;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
|
}
|
|
|
|
/* Toolbar polish */
|
|
.markdown-editor-wrapper .editor-toolbar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
|
}
|
|
.markdown-editor-wrapper .editor-toolbar i.separator {
|
|
border-left: 1px solid #cbd5e1 !important;
|
|
margin: 0 8px !important;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Dark variants */
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .CodeMirror {
|
|
background: #0f172a !important;
|
|
color: #e5e7eb !important;
|
|
border-color: #1f2a44 !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .CodeMirror-focused {
|
|
border-color: var(--primary-color) !important;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-toolbar::before {
|
|
background: linear-gradient(90deg, transparent, #60a5fa, transparent);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-toolbar a {
|
|
color: #94a3b8 !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-toolbar a:hover,
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-toolbar a.active {
|
|
background: linear-gradient(135deg, #1f2a44 0%, #374151 100%) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .editor-toolbar i.separator {
|
|
border-left-color: #374151 !important;
|
|
}
|
|
|
|
/* Preview polish */
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview {
|
|
background: #ffffff !important;
|
|
color: #1e293b !important;
|
|
padding: 20px !important;
|
|
border-radius: 12px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
|
|
line-height: 1.7 !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview {
|
|
background: #0f172a !important;
|
|
color: #e5e7eb !important;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h1,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h2,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h3,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h4,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h5,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h6 {
|
|
color: var(--primary-color) !important;
|
|
margin-top: 1.5em !important;
|
|
margin-bottom: 0.5em !important;
|
|
position: relative;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h1::after,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h2::after,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview h3::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 30px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--primary-color), transparent);
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview blockquote {
|
|
border-left: 4px solid var(--primary-color) !important;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
|
padding: 12px 16px !important;
|
|
margin: 16px 0 !important;
|
|
border-radius: 0 8px 8px 0 !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview blockquote {
|
|
background: linear-gradient(135deg, #1f2a44 0%, #374151 100%) !important;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview code {
|
|
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
|
|
color: #e11d48 !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: var(--border-radius-sm) !important;
|
|
font-size: 0.9em !important;
|
|
font-weight: 600;
|
|
border: 1px solid rgba(225, 29, 72, 0.1);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview code {
|
|
background: linear-gradient(135deg, #1f2a44 0%, #374151 100%) !important;
|
|
color: #f472b6 !important;
|
|
border-color: rgba(244, 114, 182, 0.2);
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview pre {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
|
border: 1px solid #e2e8f0 !important;
|
|
border-radius: 8px !important;
|
|
padding: 16px !important;
|
|
overflow-x: auto !important;
|
|
position: relative;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview pre::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview pre {
|
|
background: linear-gradient(135deg, #0b1220 0%, #1f2a44 100%) !important;
|
|
border-color: #1f2a44 !important;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview table {
|
|
border-collapse: collapse !important;
|
|
width: 100% !important;
|
|
margin: 16px 0 !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview th,
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview td {
|
|
border: 1px solid #e2e8f0 !important;
|
|
padding: 8px 12px !important;
|
|
text-align: left !important;
|
|
}
|
|
.markdown-editor-wrapper .EasyMDEContainer .editor-preview th {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
|
|
font-weight: 600 !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview th,
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview td {
|
|
border-color: #1f2a44 !important;
|
|
}
|
|
[data-theme="dark"] .markdown-editor-wrapper .EasyMDEContainer .editor-preview th {
|
|
background: linear-gradient(135deg, #1f2a44 0%, #374151 100%) !important;
|
|
color: #60a5fa !important;
|
|
}
|
|
[data-theme="dark"] .input-group-text {
|
|
background: #111827;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .form-text { color: var(--text-muted); }
|
|
[data-theme="dark"] .form-control::placeholder { color: #64748b; }
|
|
[data-theme="dark"] .form-select option { background: #0f172a; color: var(--text-primary); }
|
|
[data-theme="dark"] .form-check-input {
|
|
background-color: #0f172a;
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #6b7280;
|
|
box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Enhanced Table Layout */
|
|
.table {
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: visible; /* Allow dropdowns to overflow */
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Allow table containers to overflow for dropdowns */
|
|
.table-responsive {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.table th {
|
|
background: var(--light-color);
|
|
border: none;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
padding: 1.25rem 1rem;
|
|
text-transform: none;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.3px;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
.table td {
|
|
padding: 1.25rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
vertical-align: middle;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.table tbody tr {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--light-color);
|
|
}
|
|
|
|
[data-theme="dark"] .table tbody tr:hover {
|
|
background: #111827;
|
|
}
|
|
|
|
/* Consistent table action groups */
|
|
.table td,
|
|
.table th {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.actions-cell {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table td .btn-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* Ensure grouped action buttons sit flush with no gaps */
|
|
.btn-group > .btn,
|
|
.btn-group .btn-action {
|
|
margin: 0;
|
|
}
|
|
.btn-group > .btn + .btn,
|
|
.btn-group > .btn + .btn-group,
|
|
.btn-group > .btn-group + .btn,
|
|
.btn-group > .btn-group + .btn-group {
|
|
margin-left: -1px; /* collapse borders */
|
|
}
|
|
|
|
/* Enhanced form handling inside button groups */
|
|
.btn-group > form {
|
|
display: inline-flex;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Collapse borders between adjacent form-wrapped buttons */
|
|
.btn-group > form + form {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
/* Form button styling within groups */
|
|
.btn-group > form .btn {
|
|
border-radius: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* First form button (left) */
|
|
.btn-group > form:first-child .btn {
|
|
border-top-left-radius: var(--border-radius-sm);
|
|
border-bottom-left-radius: var(--border-radius-sm);
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Middle form buttons */
|
|
.btn-group > form:not(:first-child):not(:last-child) .btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Last form button (right) */
|
|
.btn-group > form:last-child .btn {
|
|
border-top-right-radius: var(--border-radius-sm);
|
|
border-bottom-right-radius: var(--border-radius-sm);
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
/* Single form button in group */
|
|
.btn-group > form:only-child .btn {
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
/* Hover and focus states for form buttons in groups */
|
|
.btn-group > form:hover {
|
|
z-index: 2;
|
|
}
|
|
|
|
.btn-group > form .btn:focus {
|
|
z-index: 3;
|
|
}
|
|
|
|
/* Enhanced button group styling for proper left/middle/right positioning */
|
|
.btn-group .btn-action {
|
|
border-radius: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* First button (left) */
|
|
.btn-group .btn-action:first-child {
|
|
border-top-left-radius: var(--border-radius-sm);
|
|
border-bottom-left-radius: var(--border-radius-sm);
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Middle buttons */
|
|
.btn-group .btn-action:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
/* Last button (right) */
|
|
.btn-group .btn-action:last-child {
|
|
border-top-right-radius: var(--border-radius-sm);
|
|
border-bottom-right-radius: var(--border-radius-sm);
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
/* Single button in group (both first and last) */
|
|
.btn-group .btn-action:only-child {
|
|
border-radius: var(--border-radius-sm);
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Hover state management for grouped buttons */
|
|
.btn-group .btn-action:hover {
|
|
z-index: 2; /* Bring hovered button to front */
|
|
}
|
|
|
|
/* Focus state for grouped buttons */
|
|
.btn-group .btn-action:focus {
|
|
z-index: 3;
|
|
}
|
|
|
|
.table td .btn-group .btn {
|
|
padding: 0.45rem 0.6rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.table td .btn-group .btn i {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Restore contiguous button-group corners when custom .btn radius is applied */
|
|
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
|
|
.btn-group > .btn-group:not(:last-child) > .btn {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Enhanced Action Button System - Modern Styling */
|
|
.btn-action {
|
|
padding: 0.5rem 0.75rem !important;
|
|
font-size: 0.875rem !important;
|
|
line-height: 1 !important;
|
|
background: var(--surface-color) !important;
|
|
border: 1px solid var(--gray-400) !important;
|
|
color: var(--gray-500) !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 0.375rem !important;
|
|
transition: var(--transition-slow) !important;
|
|
border-radius: 0 !important;
|
|
min-width: 36px !important;
|
|
min-height: 36px !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
-webkit-backdrop-filter: blur(8px) !important;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
|
|
.btn-action::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(107, 114, 128, 0.1), transparent);
|
|
transition: left 0.5s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-action:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-action:hover {
|
|
background: var(--surface-hover) !important;
|
|
border-color: var(--gray-600) !important;
|
|
color: var(--gray-600) !important;
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
.btn-action:focus {
|
|
box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Dark theme action button adjustments */
|
|
[data-theme="dark"] .btn-action {
|
|
background: var(--surface-color);
|
|
border-color: var(--text-muted);
|
|
color: var(--text-muted);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-action:hover {
|
|
background: var(--surface-variant);
|
|
border-color: var(--text-secondary);
|
|
color: var(--text-secondary);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-action:focus {
|
|
box-shadow: var(--focus-ring), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* All action button icons should match the border color for consistency */
|
|
.btn-action i {
|
|
color: inherit; /* Icons inherit the button's text color, which matches the border */
|
|
}
|
|
|
|
/* All action button variants use consistent dark grey styling */
|
|
.btn-action--view,
|
|
.btn-action--edit,
|
|
.btn-action--danger,
|
|
.btn-action--success,
|
|
.btn-action--warning,
|
|
.btn-action--more {
|
|
border-color: #6b7280;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.btn-action--view:hover,
|
|
.btn-action--edit:hover,
|
|
.btn-action--danger:hover,
|
|
.btn-action--success:hover,
|
|
.btn-action--warning:hover,
|
|
.btn-action--more:hover {
|
|
background: rgba(107, 114, 128, 0.1);
|
|
border-color: #4b5563;
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Dark theme action button variants */
|
|
[data-theme="dark"] .btn-action--view,
|
|
[data-theme="dark"] .btn-action--edit,
|
|
[data-theme="dark"] .btn-action--danger,
|
|
[data-theme="dark"] .btn-action--success,
|
|
[data-theme="dark"] .btn-action--warning,
|
|
[data-theme="dark"] .btn-action--more {
|
|
border-color: var(--text-muted);
|
|
color: var(--text-muted);
|
|
background: var(--surface-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-action--view:hover,
|
|
[data-theme="dark"] .btn-action--edit:hover,
|
|
[data-theme="dark"] .btn-action--danger:hover,
|
|
[data-theme="dark"] .btn-action--success:hover,
|
|
[data-theme="dark"] .btn-action--warning:hover,
|
|
[data-theme="dark"] .btn-action--more:hover {
|
|
background: var(--surface-variant);
|
|
border-color: var(--text-secondary);
|
|
color: var(--text-secondary);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Enhanced Button Group Styling - Square Corners */
|
|
.btn-group .btn-action {
|
|
border-radius: 0 !important;
|
|
margin-left: -1px !important;
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.btn-group .btn-action:first-child {
|
|
border-radius: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.btn-group .btn-action:last-child {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.btn-group .btn-action:only-child {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.btn-group .btn-action:hover,
|
|
.btn-group .btn-action:focus {
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Ensure dropdown buttons in action groups follow dark grey styling */
|
|
.btn-action.dropdown-toggle,
|
|
.btn-action.dropdown-toggle-split {
|
|
border-color: #6b7280 !important;
|
|
color: #6b7280 !important;
|
|
background: var(--surface-color) !important;
|
|
}
|
|
|
|
.btn-action.dropdown-toggle:hover,
|
|
.btn-action.dropdown-toggle-split:hover,
|
|
.btn-action.dropdown-toggle:focus,
|
|
.btn-action.dropdown-toggle-split:focus {
|
|
border-color: #4b5563 !important;
|
|
color: #4b5563 !important;
|
|
background: rgba(107, 114, 128, 0.1) !important;
|
|
}
|
|
|
|
.btn-action.dropdown-toggle.show,
|
|
.btn-action.dropdown-toggle-split.show {
|
|
border-color: #4b5563 !important;
|
|
color: #4b5563 !important;
|
|
background: rgba(107, 114, 128, 0.1) !important;
|
|
}
|
|
|
|
/* Dark theme dropdown buttons */
|
|
[data-theme="dark"] .btn-action.dropdown-toggle,
|
|
[data-theme="dark"] .btn-action.dropdown-toggle-split {
|
|
border-color: var(--text-muted) !important;
|
|
color: var(--text-muted) !important;
|
|
background: var(--surface-color) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .btn-action.dropdown-toggle:hover,
|
|
[data-theme="dark"] .btn-action.dropdown-toggle-split:hover,
|
|
[data-theme="dark"] .btn-action.dropdown-toggle:focus,
|
|
[data-theme="dark"] .btn-action.dropdown-toggle-split:focus,
|
|
[data-theme="dark"] .btn-action.dropdown-toggle.show,
|
|
[data-theme="dark"] .btn-action.dropdown-toggle-split.show {
|
|
border-color: var(--text-secondary) !important;
|
|
color: var(--text-secondary) !important;
|
|
background: var(--surface-variant) !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Icon styling and transitions */
|
|
.btn-action i {
|
|
font-size: 0.95rem;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
/* Hover effects are handled by the general action button styles above - removed duplicates */
|
|
|
|
.btn-group > .btn:nth-child(n+2),
|
|
.btn-group > .btn-group:nth-child(n+2) > .btn {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.btn-group > .btn:not(:first-child),
|
|
.btn-group > .btn-group:not(:first-child) > .btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
/* Badges and progress helpers */
|
|
.badge-soft-primary { background: rgba(59,130,246,0.12); color: var(--primary-color); border: 1px solid rgba(59,130,246,0.25); }
|
|
.badge-soft-secondary { background: rgba(148,163,184,0.12); color: var(--text-secondary); border: 1px solid rgba(148,163,184,0.25); }
|
|
.badge-soft-success { background: rgba(34,197,94,0.12); color: #166534; border: 1px solid rgba(34,197,94,0.25); }
|
|
.badge-soft-danger { background: rgba(239,68,68,0.12); color: #991b1b; border: 1px solid rgba(239,68,68,0.25); }
|
|
.badge-pill { border-radius: 9999px; }
|
|
|
|
.progress-thin { height: 6px; border-radius: 9999px; overflow: hidden; }
|
|
.progress-thin .progress-bar { border-radius: 9999px; }
|
|
|
|
/* Enhanced Navigation Layout - Modern Glass Effect with Square Corners */
|
|
.navbar {
|
|
background: var(--navbar-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
border-bottom: 1px solid var(--navbar-border);
|
|
padding: 0.75rem 0;
|
|
z-index: var(--z-fixed);
|
|
position: sticky;
|
|
top: 0;
|
|
min-height: var(--navbar-height);
|
|
transition: all var(--transition);
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Prevent overflow issues with longer localized labels */
|
|
.navbar .container {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Allow left nav items to consume available space; keep right group fixed */
|
|
.navbar-nav.me-auto { flex: 1 1 auto; min-width: 0; }
|
|
.navbar-nav.ms-auto { flex: 0 0 auto; }
|
|
|
|
/* Allow wrapping to a second row on tighter widths (desktop too) */
|
|
.navbar-nav { flex-wrap: wrap; row-gap: 0.25rem; column-gap: 0.25rem; background-color: transparent; border-radius: 0;}
|
|
.navbar-nav .nav-item { flex: 0 1 auto; min-width: 0; }
|
|
|
|
/* Dark theme navbar styling */
|
|
[data-theme="dark"] .navbar {
|
|
background: var(--navbar-bg) !important;
|
|
border-bottom-color: var(--border-color) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .navbar-collapse {
|
|
background: var(--navbar-bg) !important;
|
|
}
|
|
[data-theme="dark"] .navbar .navbar-toggler {
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .navbar .navbar-toggler-icon {
|
|
filter: invert(1) brightness(0.9);
|
|
}
|
|
[data-theme="dark"] .navbar .nav-link {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
[data-theme="dark"] .navbar .nav-link.active {
|
|
color: var(--text-primary) !important;
|
|
background: var(--surface-variant) !important;
|
|
}
|
|
[data-theme="dark"] .navbar .nav-link:hover {
|
|
color: var(--primary-color) !important;
|
|
background: var(--surface-hover) !important;
|
|
}
|
|
[data-theme="dark"] .navbar .navbar-brand {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
[data-theme="dark"] .navbar .navbar-brand .text-dark {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
[data-theme="dark"] .mobile-tabbar { background: #0b1220; border-top: 1px solid var(--border-color); }
|
|
|
|
/* Navbar shadow on scroll - Enhanced */
|
|
.navbar.scrolled {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
border-bottom-color: var(--border-strong);
|
|
background: var(--navbar-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
color: var(--primary-color) !important;
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Prevent very long app names from breaking the layout */
|
|
.navbar-brand span {
|
|
max-width: 220px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-brand img {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.navbar-brand:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.navbar-brand:hover {
|
|
color: var(--primary-dark) !important;
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
color: var(--text-secondary) !important;
|
|
font-weight: 500;
|
|
padding: 0.875rem 1.25rem;
|
|
border-radius: 0;
|
|
transition: var(--transition);
|
|
position: relative;
|
|
margin: 0 0.25rem;
|
|
min-height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
white-space: nowrap; /* keep single label per link */
|
|
overflow: hidden; /* enable ellipsis if needed */
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.navbar-nav .nav-link:hover {
|
|
color: #6b7280 !important;
|
|
background: var(--light-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
[data-theme="dark"] .navbar-nav .nav-link:hover {
|
|
background: #111827;
|
|
}
|
|
|
|
.navbar-nav .nav-link.active {
|
|
background: #6b7280;
|
|
color: white !important;
|
|
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
|
|
}
|
|
|
|
/* ==========================================
|
|
Density toggle (compact mode)
|
|
========================================== */
|
|
html.compact .card-body { padding: 0.75rem 1rem; }
|
|
html.compact .card-header { padding: 0.75rem 1rem; }
|
|
html.compact .card-footer { padding: 0.75rem 1rem; }
|
|
html.compact .btn { padding: 0.5rem 0.75rem; min-height: 40px; }
|
|
html.compact .table th, html.compact .table td { padding: 0.75rem; }
|
|
html.compact .form-control, html.compact .form-select { min-height: 44px; padding: 0.5rem 0.75rem; }
|
|
html.compact .navbar { min-height: calc(var(--navbar-height) - 12px); }
|
|
|
|
/* Enhanced Mobile Layout */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.section-spacing {
|
|
margin-bottom: var(--mobile-section-spacing);
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: var(--mobile-card-spacing);
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 1.25rem 1.25rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1rem;
|
|
min-height: 52px;
|
|
width: 100%;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
padding: 1rem 1.25rem;
|
|
font-size: 16px;
|
|
min-height: 56px;
|
|
}
|
|
|
|
.table th, .table td {
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
|
|
.navbar {
|
|
padding: 0.75rem 0;
|
|
min-height: calc(var(--navbar-height) - 10px);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
padding: 1rem 1.5rem;
|
|
margin: 0.25rem 0;
|
|
font-size: 1.1rem;
|
|
min-height: var(--mobile-touch-target, 52px);
|
|
}
|
|
}
|
|
|
|
/* Enhanced Small Mobile Layout */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 1rem 1rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 1rem 1.25rem;
|
|
font-size: 0.95rem;
|
|
min-height: 56px;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
padding: 0.875rem 1rem;
|
|
min-height: 56px;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Grid Layout */
|
|
.row {
|
|
margin-left: -0.75rem;
|
|
margin-right: -0.75rem;
|
|
}
|
|
|
|
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.row {
|
|
margin-left: -0.5rem;
|
|
margin-right: -0.5rem;
|
|
}
|
|
|
|
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Typography */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h1 { font-size: 2.25rem; }
|
|
h2 { font-size: 1.875rem; }
|
|
h3 { font-size: 1.5rem; }
|
|
h4 { font-size: 1.25rem; }
|
|
h5 { font-size: 1.125rem; }
|
|
h6 { font-size: 1rem; }
|
|
|
|
@media (max-width: 768px) {
|
|
h1 { font-size: 1.875rem; }
|
|
h2 { font-size: 1.625rem; }
|
|
h3 { font-size: 1.375rem; }
|
|
h4 { font-size: 1.125rem; }
|
|
h5 { font-size: 1rem; }
|
|
h6 { font-size: 0.95rem; }
|
|
}
|
|
|
|
/* Enhanced Spacing Utilities */
|
|
.section-gap {
|
|
margin-bottom: var(--section-spacing);
|
|
}
|
|
|
|
.card-gap {
|
|
margin-bottom: var(--card-spacing);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.section-gap {
|
|
margin-bottom: var(--mobile-section-spacing);
|
|
}
|
|
|
|
.card-gap {
|
|
margin-bottom: var(--mobile-card-spacing);
|
|
}
|
|
}
|
|
|
|
/* Enhanced Animation Classes */
|
|
.fade-in {
|
|
animation: fadeIn 0.4s ease-out;
|
|
}
|
|
|
|
.slide-up {
|
|
animation: slideUp 0.4s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Enhanced Utility Classes */
|
|
.text-gradient {
|
|
background: var(--bg-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--card-shadow-hover);
|
|
border-radius: var(--border-radius); /* Ensure border radius is maintained on hover */
|
|
}
|
|
|
|
/* Enhanced dropdown menu styling */
|
|
.dropdown-menu {
|
|
background: var(--dropdown-bg);
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
z-index: 1060 !important;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px !important;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
margin-top: 0.5rem;
|
|
overflow: visible !important; /* Allow outlines to show */
|
|
position: absolute !important;
|
|
pointer-events: auto;
|
|
background-clip: padding-box;
|
|
min-width: 200px;
|
|
max-width: clamp(220px, 90vw, 360px);
|
|
padding: 0.75rem 0.25rem; /* Add padding to prevent outline clipping */
|
|
}
|
|
|
|
/* Ensure dropdowns in tables have proper stacking */
|
|
.table .dropdown {
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.table .dropdown.show {
|
|
z-index: 1100 !important;
|
|
}
|
|
|
|
.table .dropdown-menu {
|
|
z-index: 1070 !important;
|
|
}
|
|
|
|
/* Global fix for table overflow issues with dropdowns */
|
|
.card .table-responsive,
|
|
.card-body .table-responsive {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Specific cards that need overflow for dropdowns - safer approach */
|
|
.card.shadow-sm {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Dedicated navbar dropdown tweaks for better clarity */
|
|
.navbar .dropdown-menu {
|
|
min-width: 220px;
|
|
border-radius: 12px !important;
|
|
padding: 0.75rem 0.25rem; /* Add padding to prevent outline clipping */
|
|
position: absolute !important;
|
|
right: 0;
|
|
overflow: visible !important; /* Allow outlines to show */
|
|
}
|
|
.navbar .dropdown-item {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
/* Dark mode dropdown menu container */
|
|
[data-theme="dark"] .dropdown-menu {
|
|
background: #0f172a !important;
|
|
border-color: var(--border-color);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* Dropdown items styling */
|
|
.dropdown-item {
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.125rem 0.25rem; /* Add margin for outline space */
|
|
color: var(--text-primary);
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
background: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
white-space: normal; /* allow wrapping for long translations */
|
|
word-break: break-word; /* break long words/URLs if needed */
|
|
hyphens: auto; /* hyphenate when possible */
|
|
line-height: 1.25;
|
|
border-radius: 8px; /* Add border radius for better outline appearance */
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: var(--light-color);
|
|
color: var(--text-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.dropdown-item:focus {
|
|
background-color: var(--light-color);
|
|
color: var(--text-primary);
|
|
outline: 2px solid var(--primary-color, #3b82f6);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
margin: 0.5rem 0;
|
|
border-color: var(--border-color);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Dark mode dropdown items */
|
|
[data-theme="dark"] .dropdown-item {
|
|
color: var(--text-secondary) !important;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
[data-theme="dark"] .dropdown-item:hover {
|
|
background-color: #111827 !important;
|
|
color: var(--text-primary) !important;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
[data-theme="dark"] .dropdown-item:focus {
|
|
background-color: #111827 !important;
|
|
color: var(--text-primary) !important;
|
|
outline: 2px solid var(--primary-color, #3b82f6);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .dropdown-divider {
|
|
background-color: var(--border-color) !important;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Light mode dropdown overrides */
|
|
[data-theme="light"] .dropdown-menu {
|
|
background-color: var(--dropdown-bg) !important;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* Ensure dropdowns inside cards stack above adjacent content */
|
|
.card .dropdown,
|
|
.mobile-card .dropdown {
|
|
position: relative;
|
|
z-index: 2000;
|
|
}
|
|
.dropdown-item {
|
|
background-color: var(--dropdown-bg) !important; /* make items opaque */
|
|
}
|
|
.dropdown-menu::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--dropdown-bg); /* solid background to avoid transparency */
|
|
border-radius: inherit;
|
|
z-index: -1; /* sit behind menu content but within menu stacking */
|
|
}
|
|
|
|
/* Fix white overlay in dark mode dropdown */
|
|
[data-theme="dark"] .dropdown-menu::before {
|
|
background: #0f172a;
|
|
}
|
|
|
|
/* Solid hover state for items to further avoid transparency feel */
|
|
.dropdown-item:hover, .dropdown-item:focus {
|
|
background-color: var(--light-color) !important;
|
|
}
|
|
|
|
/* Ensure input-group icons match input height */
|
|
.input-group .input-group-text {
|
|
min-height: 52px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
/* Backdrop to block interactions behind open dropdowns */
|
|
/* Removed custom dropdown backdrop; rely on Bootstrap defaults */
|
|
|
|
/* Increase dropdown item touch targets and spacing */
|
|
.dropdown-item {
|
|
padding: 0.6rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dropdown-item i { width: 1rem; text-align: center; flex: 0 0 auto; }
|
|
|
|
/* Ensure user name in navbar doesn't overflow */
|
|
.navbar .nav-item.dropdown .nav-link span {
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Prevent navbar from clipping dropdown outlines */
|
|
.navbar {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.navbar .container,
|
|
.navbar .container-fluid {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Ensure dropdown containers have enough space for outlines */
|
|
.navbar .nav-item.dropdown {
|
|
position: relative;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Add padding to navbar to accommodate focus outlines */
|
|
.navbar-nav {
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
/* Ensure dropdown toggle has space for focus outline */
|
|
.navbar .dropdown-toggle {
|
|
margin: 0.125rem;
|
|
}
|
|
|
|
/* Enhanced Mobile Components */
|
|
.mobile-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mobile-stack .btn {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.mobile-stack .btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.touch-target {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.touch-target {
|
|
min-height: 52px;
|
|
min-width: 52px;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Footer Layout */
|
|
.footer {
|
|
background: var(--bs-body-bg, #ffffff);
|
|
color: var(--text-secondary);
|
|
padding: 2.5rem 0;
|
|
margin-top: 4rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .footer {
|
|
background: #0b1220;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
/* Enhanced Toast Container */
|
|
.toast-container {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.toast {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
box-shadow: var(--card-shadow-hover);
|
|
}
|
|
|
|
/* Enhanced Loading Animation */
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
/* Skeleton loader utility */
|
|
.skeleton {
|
|
display: inline-block;
|
|
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Enhanced Modal Layout */
|
|
.modal-content {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden; /* ensure rounded corners render on all sides */
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1.75rem;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.75rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 1.75rem;
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.modal-dialog {
|
|
margin: 0.75rem;
|
|
max-width: calc(100% - 1.5rem);
|
|
}
|
|
|
|
.modal-header, .modal-body, .modal-footer {
|
|
padding: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Badge Layout */
|
|
.badge {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
padding: 0.5rem 0.875rem;
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
/* Enhanced Alert Layout */
|
|
.alert {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 1.25rem 1.5rem;
|
|
font-weight: 500;
|
|
position: relative;
|
|
background: var(--bs-card-bg, #ffffff);
|
|
}
|
|
|
|
[data-theme="dark"] .alert { background: #0f172a; }
|
|
[data-theme="dark"] .alert-success { background: #052e1f; color: #a7f3d0; }
|
|
[data-theme="dark"] .alert-danger { background: #3f1d1d; color: #fecaca; }
|
|
[data-theme="dark"] .alert-info { background: #082f49; color: #bae6fd; }
|
|
[data-theme="dark"] .alert-warning { background: #422006; color: #fed7aa; }
|
|
|
|
/* ==========================================
|
|
Dark theme utility & component overrides
|
|
========================================== */
|
|
|
|
/* Text utilities */
|
|
[data-theme="dark"] .text-dark { color: var(--text-primary) !important; }
|
|
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
|
|
[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
|
|
|
|
/* Background utilities */
|
|
[data-theme="dark"] .bg-white { background-color: #0f172a !important; }
|
|
[data-theme="dark"] .bg-light { background-color: #111827 !important; }
|
|
[data-theme="dark"] .bg-body { background-color: #0b1220 !important; }
|
|
|
|
/* Borders and dividers */
|
|
[data-theme="dark"] .border,
|
|
[data-theme="dark"] .border-top,
|
|
[data-theme="dark"] .border-bottom,
|
|
[data-theme="dark"] .border-start,
|
|
[data-theme="dark"] .border-end,
|
|
[data-theme="dark"] hr,
|
|
[data-theme="dark"] .dropdown-divider { border-color: var(--border-color) !important; }
|
|
|
|
/* List groups */
|
|
[data-theme="dark"] .list-group-item {
|
|
background-color: #0f172a;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .list-group-item.active {
|
|
background-color: var(--primary-color);
|
|
color: #ffffff;
|
|
border-color: var(--primary-dark);
|
|
}
|
|
|
|
/* Badges */
|
|
[data-theme="dark"] .badge.bg-light {
|
|
background-color: #1f2937 !important;
|
|
color: var(--text-secondary) !important;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Pagination */
|
|
[data-theme="dark"] .pagination .page-link {
|
|
background-color: #0f172a;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
[data-theme="dark"] .pagination .page-item.active .page-link {
|
|
background-color: var(--primary-color);
|
|
color: #ffffff;
|
|
border-color: var(--primary-dark);
|
|
}
|
|
[data-theme="dark"] .pagination .page-link:hover {
|
|
background-color: #111827;
|
|
}
|
|
|
|
/* Tables: ensure caption and muted text are readable */
|
|
[data-theme="dark"] table caption { color: var(--text-muted); }
|
|
|
|
/* Inputs toggles and checks */
|
|
[data-theme="dark"] .form-check-input:checked {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Enhanced status badges for dark mode */
|
|
[data-theme="dark"] .status-todo {
|
|
background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
|
|
color: #cbd5e1 !important;
|
|
border: 1px solid #64748b !important;
|
|
}
|
|
[data-theme="dark"] .status-in_progress {
|
|
background: linear-gradient(135deg, #451a03 0%, #78350f 100%) !important;
|
|
color: #fbbf24 !important;
|
|
border: 1px solid #f59e0b !important;
|
|
}
|
|
[data-theme="dark"] .status-review {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%) !important;
|
|
color: #dbeafe !important;
|
|
border: 1px solid #3b82f6 !important;
|
|
}
|
|
[data-theme="dark"] .status-done {
|
|
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
|
|
color: #d1fae5 !important;
|
|
border: 1px solid #10b981 !important;
|
|
}
|
|
[data-theme="dark"] .status-cancelled {
|
|
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
|
|
color: #fee2e2 !important;
|
|
border: 1px solid #ef4444 !important;
|
|
}
|
|
|
|
/* Priority badges for dark mode */
|
|
[data-theme="dark"] .priority-low {
|
|
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
|
|
color: #d1fae5 !important;
|
|
border: 1px solid #10b981 !important;
|
|
}
|
|
[data-theme="dark"] .priority-medium {
|
|
background: linear-gradient(135deg, #451a03 0%, #78350f 100%) !important;
|
|
color: #fbbf24 !important;
|
|
border: 1px solid #f59e0b !important;
|
|
}
|
|
[data-theme="dark"] .priority-high {
|
|
background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%) !important;
|
|
color: #fed7aa !important;
|
|
border: 1px solid #fd7e14 !important;
|
|
}
|
|
[data-theme="dark"] .priority-urgent {
|
|
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
|
|
color: #fee2e2 !important;
|
|
border: 1px solid #dc3545 !important;
|
|
}
|
|
|
|
/* Task detail styling for dark mode */
|
|
[data-theme="dark"] .payment-detail .detail-label {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
[data-theme="dark"] .payment-detail .detail-value {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
[data-theme="dark"] .section-title {
|
|
color: var(--text-primary) !important;
|
|
border-bottom-color: var(--primary-color) !important;
|
|
}
|
|
[data-theme="dark"] .client-details .client-name {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
/* Fix hardcoded priority colors in templates for dark mode */
|
|
[data-theme="dark"] .priority-low[style*="background-color: #28a745"] {
|
|
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
|
|
color: #d1fae5 !important;
|
|
border: 1px solid #10b981 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .priority-medium[style*="background-color: #ffc107"] {
|
|
background: linear-gradient(135deg, #451a03 0%, #78350f 100%) !important;
|
|
color: #fbbf24 !important;
|
|
border: 1px solid #f59e0b !important;
|
|
}
|
|
|
|
[data-theme="dark"] .priority-high[style*="background-color: #fd7e14"] {
|
|
background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%) !important;
|
|
color: #fed7aa !important;
|
|
border: 1px solid #fd7e14 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .priority-urgent[style*="background-color: #dc3545"] {
|
|
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
|
|
color: #fee2e2 !important;
|
|
border: 1px solid #dc3545 !important;
|
|
}
|
|
|
|
/* Fix any hardcoded dark backgrounds */
|
|
[data-theme="dark"] [style*="background: #1f2a44"] {
|
|
background: var(--surface-variant) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
/* Enhanced button focus states for dark mode */
|
|
[data-theme="dark"] .btn:focus {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
[data-theme="dark"] .btn:focus:not(:focus-visible) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-theme="dark"] .btn:focus-visible {
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
/* Ensure button text is always readable in dark mode */
|
|
[data-theme="dark"] .btn {
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Badge improvements for dark mode */
|
|
[data-theme="dark"] .badge {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .badge.bg-primary {
|
|
background: var(--primary-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .badge.bg-success {
|
|
background: var(--success-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .badge.bg-danger {
|
|
background: var(--danger-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .badge.bg-warning {
|
|
background: var(--warning-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .badge.bg-info {
|
|
background: var(--info-color) !important;
|
|
color: var(--text-on-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .badge.bg-secondary {
|
|
background: var(--text-muted) !important;
|
|
color: var(--surface-color) !important;
|
|
}
|
|
|
|
.alert-success {
|
|
border-color: #10b981;
|
|
background: #f0fdf4;
|
|
color: #065f46;
|
|
}
|
|
|
|
.alert-danger {
|
|
border-color: #ef4444;
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.alert-info {
|
|
border-color: #06b6d4;
|
|
background: #f0f9ff;
|
|
color: #0c4a6e;
|
|
}
|
|
|
|
.alert-warning {
|
|
border-color: #f59e0b;
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
}
|
|
|
|
/* Enhanced Timer Display */
|
|
.timer-display {
|
|
font-family: 'Inter', monospace;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.timer-display {
|
|
font-size: 1.75rem;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Stats Cards */
|
|
.stats-card {
|
|
background: var(--bg-gradient);
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-card .card-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stats-card i {
|
|
font-size: 2.5rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Ensure header subtitle text is white within stats-card headers */
|
|
.stats-card .text-muted,
|
|
.stats-card p {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
}
|
|
.stats-card h1, .stats-card .h1,
|
|
.stats-card h2, .stats-card .h2,
|
|
.stats-card h3, .stats-card .h3 {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Header action buttons on stats cards: low opacity default, high on hover */
|
|
.stats-card .btn-header {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border-color: rgba(255, 255, 255, 0.45);
|
|
background: transparent;
|
|
opacity: 0.85;
|
|
}
|
|
.stats-card .btn-header:hover {
|
|
opacity: 1;
|
|
color: #ffffff;
|
|
border-color: rgba(255, 255, 255, 0.9);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
|
|
}
|
|
.stats-card .btn-header i { color: inherit; }
|
|
|
|
.stats-card h4 {
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-card h4 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.stats-card i {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--light-color);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* ==========================================
|
|
Global Accessibility & Motion Preferences
|
|
========================================== */
|
|
|
|
/* Visible focus outlines (keyboard / a11y) */
|
|
.btn:focus,
|
|
.form-control:focus,
|
|
.form-select:focus,
|
|
.nav-link:focus,
|
|
.dropdown-item:focus {
|
|
outline: 2px solid #6b7280;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* High-contrast user preference support */
|
|
@media (prefers-contrast: high) {
|
|
.card,
|
|
.btn,
|
|
.table td,
|
|
.dropdown-menu {
|
|
border-width: 2px;
|
|
border-color: #000 !important;
|
|
}
|
|
.dropdown-item {
|
|
color: #000 !important;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
.dropdown-item:hover {
|
|
background: #000 !important;
|
|
color: #fff !important;
|
|
}
|
|
.dropdown-divider { border-top: 2px solid #000 !important; }
|
|
}
|
|
|
|
/* Reduced-motion user preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.001s !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001s !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
.fade-in,
|
|
.slide-up,
|
|
.mobile-fade-in,
|
|
.mobile-slide-up {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* Shared summary cards used across pages (invoices, reports) */
|
|
.summary-card {
|
|
transition: all 0.3s ease;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.summary-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.summary-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.empty-state i {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.summary-card { margin-bottom: 1rem; }
|
|
.summary-value { font-size: 18px; }
|
|
}
|
|
|
|
/* Shared page header utilities to align with admin dashboard */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-header .h3 { margin: 0; }
|
|
|
|
/* ==========================================
|
|
Prettier Header Buttons (page/card/modal headers)
|
|
========================================== */
|
|
.card-header .btn,
|
|
.page-header .btn,
|
|
.modal-header .btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.card-header .btn:hover,
|
|
.page-header .btn:hover,
|
|
.modal-header .btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card-header .btn.btn-outline-primary,
|
|
.page-header .btn.btn-outline-primary,
|
|
.modal-header .btn.btn-outline-primary {
|
|
background: transparent;
|
|
color: #6b7280;
|
|
border-color: #6b7280;
|
|
}
|
|
|
|
.card-header .btn.btn-outline-primary:hover,
|
|
.page-header .btn.btn-outline-primary:hover,
|
|
.modal-header .btn.btn-outline-primary:hover {
|
|
background: #f9fafb;
|
|
color: #4b5563;
|
|
border-color: #4b5563;
|
|
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
|
|
}
|
|
|
|
.card-header .btn i,
|
|
.page-header .btn i,
|
|
.modal-header .btn i {
|
|
margin-right: 0.375rem;
|
|
}
|
|
|
|
/* Add small spacing after icons in regular buttons (avoid icon-only/header buttons) */
|
|
.btn:not(.btn-icon):not(.btn-header) i {
|
|
margin-right: 0.375rem;
|
|
}
|
|
|
|
/* Button icon color fixes for dark mode */
|
|
[data-theme="dark"] .btn i {
|
|
color: inherit;
|
|
}
|
|
|
|
[data-theme="dark"] .btn-primary i,
|
|
[data-theme="dark"] .btn-success i,
|
|
[data-theme="dark"] .btn-danger i,
|
|
[data-theme="dark"] .btn-warning i,
|
|
[data-theme="dark"] .btn-info i,
|
|
[data-theme="dark"] .btn-secondary i {
|
|
color: var(--text-on-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-primary i {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-secondary i {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-success i {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-danger i {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-warning i {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-info i {
|
|
color: var(--info-color);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-outline-light i {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Navbar dark mode fixes */
|
|
[data-theme="dark"] .navbar-nav .nav-link {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .navbar-nav .nav-link:hover {
|
|
color: var(--primary-color) !important;
|
|
background: rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .navbar-nav .nav-link.active {
|
|
background: var(--primary-color);
|
|
color: var(--text-on-primary) !important;
|
|
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
/* Consistent badge sizing used next to page titles */
|
|
.badge.fs-6 {
|
|
line-height: 1;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
/* Tooltip overrides to keep light tooltips in dark mode */
|
|
[data-theme="dark"] .tooltip .tooltip-inner {
|
|
background-color: #f9fafb; /* light */
|
|
color: #111827; /* dark text */
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
[data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before,
|
|
[data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
|
|
border-top-color: #f9fafb;
|
|
}
|
|
[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
|
|
[data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
|
|
border-bottom-color: #f9fafb;
|
|
}
|
|
[data-theme="dark"] .tooltip.bs-tooltip-start .tooltip-arrow::before,
|
|
[data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
|
|
border-left-color: #f9fafb;
|
|
}
|
|
[data-theme="dark"] .tooltip.bs-tooltip-end .tooltip-arrow::before,
|
|
[data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
|
|
border-right-color: #f9fafb;
|
|
}
|
|
|
|
/* ==========================================
|
|
Consistent Navbar Height (Desktop)
|
|
========================================== */
|
|
@media (min-width: 992px) {
|
|
.navbar {
|
|
height: var(--navbar-height);
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.navbar .container {
|
|
height: var(--navbar-height);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
/* Slightly tighter spacing on dense labels */
|
|
.navbar-nav .nav-link { padding: 0.7rem 1rem; }
|
|
}
|
|
|
|
/* ==========================================
|
|
Comments System Styles
|
|
========================================== */
|
|
.comments-section {
|
|
position: relative;
|
|
}
|
|
|
|
.comments-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.comments-header h6 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.comments-header .badge {
|
|
vertical-align: middle;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Add a bit of space between the counter and the action button */
|
|
.comments-header > .btn {
|
|
margin-left: 0.75rem;
|
|
}
|
|
|
|
/* Neutralize nested cards inside the comments list to avoid double borders/padding */
|
|
.comments-list .card {
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
.comments-list .card-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.comment {
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.comment:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.comment-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
gap: 0.75rem;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.comment-avatar .avatar-circle {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.comment-meta {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.comment-author {
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.comment-author .badge {
|
|
font-size: 0.7rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.comment-timestamp {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.comment-timestamp i {
|
|
font-size: 0.75rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.comment-actions {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
opacity: 1;
|
|
transition: all 0.2s ease;
|
|
margin-top: 0.25rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.comment:hover .comment-actions { opacity: 1; }
|
|
|
|
/* Push action buttons to the far right while keeping meta flexible */
|
|
.comment-actions { margin-left: auto; }
|
|
|
|
.comment-actions .btn {
|
|
padding: 0.375rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.comment-actions .btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.comment-content {
|
|
margin-left: 0;
|
|
padding-left: 3.5rem;
|
|
position: relative;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Removed decorative guideline to prevent double left bar next to .comment-text */
|
|
|
|
.comment-text {
|
|
color: var(--text-primary);
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
font-size: 0.9rem;
|
|
background: rgba(59, 130, 246, 0.02);
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 8px;
|
|
border-left: 3px solid var(--primary-color);
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.comment-text::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: var(--primary-color);
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
|
|
/* Ensure all other comment elements have normal text flow */
|
|
.comment,
|
|
.comment-header,
|
|
.comment-meta,
|
|
.comment-author,
|
|
.comment-timestamp,
|
|
.comment-actions,
|
|
.comment-content,
|
|
.comment-edit-form,
|
|
.comment-reply-form {
|
|
white-space: normal !important;
|
|
}
|
|
|
|
/* Avoid over-aggressive resets that broke flex layouts in headers/actions */
|
|
|
|
/* Ensure only comment text preserves line breaks */
|
|
.comment-text {
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
/* Additional specific fixes for comment metadata */
|
|
.comment-author,
|
|
.comment-timestamp,
|
|
.comment-timestamp time,
|
|
.comment-timestamp span {
|
|
white-space: normal;
|
|
}
|
|
|
|
.comment-edit-form,
|
|
.comment-reply-form {
|
|
margin-left: 3.5rem;
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background: rgba(59, 130, 246, 0.03);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.comment-replies {
|
|
margin-left: 2rem;
|
|
padding-left: 1.5rem;
|
|
border-left: 3px solid #e2e8f0;
|
|
position: relative;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.comment-replies::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -1.5px;
|
|
top: 0;
|
|
width: 3px;
|
|
height: 20px;
|
|
background: linear-gradient(180deg, var(--primary-color) 0%, transparent 100%);
|
|
border-radius: 0 0 2px 2px;
|
|
}
|
|
|
|
.comment-reply {
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.comment-reply:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-reply .comment {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.comment-reply .comment:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.new-comment-form {
|
|
margin-bottom: 2rem;
|
|
padding: 1.5rem;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
border-radius: 12px;
|
|
border: 2px dashed #e2e8f0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.new-comment-form:hover {
|
|
border-color: var(--primary-color);
|
|
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
|
|
}
|
|
|
|
.no-comments {
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border-radius: 12px;
|
|
border: 2px dashed #e2e8f0;
|
|
}
|
|
|
|
.no-comments .fas {
|
|
font-size: 3rem;
|
|
opacity: 0.3;
|
|
margin-bottom: 1rem;
|
|
display: block;
|
|
}
|
|
|
|
/* Comment form styling */
|
|
.comment-form textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.comment-form textarea:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.comment-form .btn {
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
padding: 0.5rem 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.comment-form .btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Dark theme adjustments */
|
|
[data-theme="dark"] .comment {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
border-color: #334155;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .comment:hover {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
[data-theme="dark"] .comment-avatar .avatar-circle {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
[data-theme="dark"] .comment-text {
|
|
background: rgba(59, 130, 246, 0.05);
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
[data-theme="dark"] .comment-replies {
|
|
border-left-color: #334155;
|
|
}
|
|
|
|
[data-theme="dark"] .comment-reply .comment {
|
|
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
|
border-color: #475569;
|
|
}
|
|
|
|
[data-theme="dark"] .new-comment-form {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
border-color: #334155;
|
|
}
|
|
|
|
[data-theme="dark"] .new-comment-form:hover {
|
|
border-color: var(--primary-color);
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
|
|
}
|
|
|
|
[data-theme="dark"] .no-comments {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
border-color: #334155;
|
|
}
|
|
|
|
[data-theme="dark"] .comment-edit-form,
|
|
[data-theme="dark"] .comment-reply-form {
|
|
background: rgba(59, 130, 246, 0.08);
|
|
border-color: rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .comment-form textarea {
|
|
background: #1e293b;
|
|
border-color: #334155;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
[data-theme="dark"] .comment-form textarea:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
|
background: #0f172a;
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.comment {
|
|
margin-bottom: 1rem;
|
|
padding: 1.25rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.comment-header {
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.comment-avatar .avatar-circle {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.comment-content {
|
|
padding-left: 2.75rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.comment-content::before {
|
|
left: 1rem;
|
|
top: -0.25rem;
|
|
}
|
|
|
|
.comment-replies {
|
|
margin-left: 1rem;
|
|
padding-left: 1rem;
|
|
border-left-width: 2px;
|
|
}
|
|
|
|
.comment-edit-form,
|
|
.comment-reply-form {
|
|
margin-left: 2.75rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.comment-actions {
|
|
opacity: 1; /* Always show on mobile */
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.comment-actions .btn {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.new-comment-form {
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.no-comments {
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.no-comments .fas {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.comment-text {
|
|
font-size: 0.85rem;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.comment-author {
|
|
margin-bottom: 0.25rem;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Additional animations and effects */
|
|
.comment-item {
|
|
animation: slideInComment 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
@keyframes slideInComment {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Hover effects for better interactivity */
|
|
.comment-avatar .avatar-circle {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.comment:hover .comment-avatar .avatar-circle {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
/* Loading states */
|
|
.comment-form .btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
.comment-form .btn:disabled:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Animation for new comments */
|
|
@keyframes slideInComment {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.comment-item {
|
|
animation: slideInComment 0.3s ease-out;
|
|
}
|
|
|
|
/* Loading spinner for forms */
|
|
.spinner-border-sm {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-width: 0.1em;
|
|
}
|
|
|
|
/* Modal z-index fix for comments */
|
|
#deleteCommentModal {
|
|
z-index: 1060 !important;
|
|
}
|
|
|
|
#deleteCommentModal .modal-backdrop {
|
|
z-index: 1055 !important;
|
|
}
|
|
|
|
/* Ensure modal is clickable */
|
|
#deleteCommentModal .modal-dialog {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ===== MODERN UI ENHANCEMENTS ===== */
|
|
|
|
/* Enhanced Navigation */
|
|
.navbar {
|
|
background: var(--navbar-bg);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0.75rem 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.navbar.scrolled {
|
|
box-shadow: var(--card-shadow);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
[data-theme="dark"] .navbar.scrolled {
|
|
background: rgba(11, 18, 32, 0.95);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--text-primary) !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.navbar-brand:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-secondary) !important;
|
|
font-weight: var(--font-weight-medium);
|
|
padding: 0.75rem 1rem !important;
|
|
border-radius: var(--border-radius-xs);
|
|
transition: var(--transition);
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link.active {
|
|
color: var(--primary-color) !important;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* Enhanced Form Elements */
|
|
.form-control {
|
|
border: 2px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 0.875rem 1rem;
|
|
font-size: 0.95rem;
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
transition: var(--transition);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: var(--focus-ring);
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--text-muted);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-select {
|
|
border: 2px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 0.875rem 1rem;
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
/* Enhanced Tables */
|
|
.table {
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--card-shadow);
|
|
background: var(--card-bg);
|
|
}
|
|
|
|
.table thead th {
|
|
background: var(--surface-variant);
|
|
border: none;
|
|
color: var(--text-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
padding: 1rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.875rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.table tbody tr {
|
|
border: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--surface-variant);
|
|
}
|
|
|
|
.table tbody td {
|
|
border: none;
|
|
padding: 1rem;
|
|
color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Dashboard specific classes to replace inline styles */
|
|
.timer-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.timer-status-icon {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
|
|
.timer-display {
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--success-color);
|
|
background: var(--surface-variant);
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
/* Force minimal rounded corners on all dropdowns */
|
|
.dropdown-menu,
|
|
.btn-group .dropdown-menu,
|
|
.navbar .dropdown-menu,
|
|
.table .dropdown-menu,
|
|
.card .dropdown-menu {
|
|
border-radius: var(--border-radius-sm) !important;
|
|
}
|
|
|
|
/* Also ensure form selects use minimal corners */
|
|
.form-select,
|
|
.form-control {
|
|
border-radius: var(--border-radius-sm) !important;
|
|
}
|
|
|
|
/* ===== ENHANCED COMMON PAGE STYLING PATTERNS ===== */
|
|
/* Based on modern clients page design - Applied globally */
|
|
|
|
/* Modern Status Badge System */
|
|
.status-badge {
|
|
padding: 6px 12px;
|
|
border-radius: var(--border-radius-full);
|
|
font-size: 12px;
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: 0.5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition-slow);
|
|
display: inline-block;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.status-badge::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
transition: left 0.6s;
|
|
}
|
|
|
|
.status-badge:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.status-badge:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Enhanced Status Badge Large */
|
|
.status-badge-large {
|
|
padding: 8px 16px;
|
|
border-radius: var(--border-radius-full);
|
|
font-size: 14px;
|
|
font-weight: var(--font-weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition-slow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.status-badge-large::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
transition: left 0.6s;
|
|
}
|
|
|
|
.status-badge-large:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.status-badge-large:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Modern Section Title */
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: var(--font-weight-semibold);
|
|
border-bottom: 2px solid var(--primary-color);
|
|
padding-bottom: 8px;
|
|
position: relative;
|
|
color: var(--text-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 30px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--primary-color), transparent);
|
|
}
|
|
|
|
/* Enhanced Detail Row System */
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.detail-row:hover {
|
|
background: var(--primary-50);
|
|
padding-left: 8px;
|
|
border-radius: var(--border-radius-sm);
|
|
border-bottom-color: var(--primary-200);
|
|
}
|
|
|
|
.detail-label {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--text-secondary);
|
|
transition: color var(--transition);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.detail-value {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--text-primary);
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
/* Enhanced Content Box */
|
|
.content-box {
|
|
background: var(--surface-variant);
|
|
padding: 16px;
|
|
border-radius: var(--border-radius);
|
|
border-left: 4px solid var(--primary-color);
|
|
line-height: var(--line-height-relaxed);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition-slow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.content-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
|
|
transition: left 0.8s;
|
|
}
|
|
|
|
.content-box:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.content-box:hover {
|
|
transform: translateX(4px);
|
|
box-shadow: var(--card-shadow);
|
|
border-left-color: var(--primary-600);
|
|
}
|
|
|
|
/* Enhanced Summary Card System */
|
|
.summary-card {
|
|
transition: var(--transition-slow);
|
|
border-radius: var(--border-radius-lg);
|
|
position: relative;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.summary-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
transition: left 0.6s;
|
|
}
|
|
|
|
.summary-card:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.summary-card:hover {
|
|
transform: translateY(-4px) scale(1.02);
|
|
box-shadow: var(--card-shadow-hover);
|
|
}
|
|
|
|
.summary-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--border-radius-sm);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition-slow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.summary-card:hover .summary-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: 0.4px;
|
|
text-transform: uppercase;
|
|
transition: color var(--transition);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 20px;
|
|
font-weight: var(--font-weight-extrabold);
|
|
color: var(--text-primary);
|
|
transition: var(--transition-slow);
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
.summary-card:hover .summary-value {
|
|
transform: scale(1.05);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Enhanced Table Hover Effects */
|
|
.table-hover tbody tr {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
background-color: var(--primary-50);
|
|
transform: scale(1.002);
|
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* Enhanced Button Group Animations */
|
|
.btn-group .btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-group .btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Dark Theme Adaptations */
|
|
[data-theme="dark"] .detail-row:hover {
|
|
background: var(--primary-900);
|
|
border-bottom-color: var(--primary-700);
|
|
}
|
|
|
|
[data-theme="dark"] .content-box {
|
|
background: var(--surface-variant);
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
[data-theme="dark"] .content-box:hover {
|
|
background: var(--surface-hover);
|
|
border-left-color: var(--primary-400);
|
|
}
|
|
|
|
[data-theme="dark"] .summary-card:hover .summary-value {
|
|
color: var(--primary-400);
|
|
}
|
|
|
|
[data-theme="dark"] .table-hover tbody tr:hover {
|
|
background-color: var(--primary-900);
|
|
box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
/* Mobile Responsive Enhancements */
|
|
@media (max-width: 768px) {
|
|
.detail-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
.status-badge-large {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.summary-card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.content-box {
|
|
padding: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.summary-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
/* ===== TASK CARD SYSTEM ===== */
|
|
/* Enhanced task cards for project and task views */
|
|
|
|
.task-card {
|
|
transition: var(--transition-slow);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
position: relative;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.task-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
|
|
transition: left 1.2s;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.task-card:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.task-card:hover {
|
|
transform: translateY(-4px) scale(1.01);
|
|
box-shadow: var(--card-shadow-hover);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Priority-based left borders */
|
|
.task-card.priority-low {
|
|
border-left: 4px solid var(--success-color);
|
|
}
|
|
|
|
.task-card.priority-medium {
|
|
border-left: 4px solid var(--warning-color);
|
|
}
|
|
|
|
.task-card.priority-high {
|
|
border-left: 4px solid #f97316;
|
|
}
|
|
|
|
.task-card.priority-urgent {
|
|
border-left: 4px solid var(--danger-color);
|
|
}
|
|
|
|
/* Enhanced Task Title Links */
|
|
.task-title-link {
|
|
transition: var(--transition);
|
|
font-weight: var(--font-weight-semibold);
|
|
position: relative;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.task-title-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--primary-color);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.task-title-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.task-title-link:hover {
|
|
color: var(--primary-color) !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* Enhanced Task Description */
|
|
.task-description {
|
|
background: var(--bg-gradient-subtle);
|
|
border-radius: var(--border-radius);
|
|
padding: 12px;
|
|
border-left: 3px solid var(--primary-color);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition-slow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.task-description::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
|
|
transition: left 0.8s;
|
|
}
|
|
|
|
.task-description:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.task-description:hover {
|
|
transform: translateX(4px);
|
|
box-shadow: var(--card-shadow);
|
|
border-left-color: var(--primary-600);
|
|
}
|
|
|
|
/* Task Meta Items */
|
|
.task-meta-item {
|
|
transition: var(--transition);
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.task-meta-item:hover {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.task-meta-item .bg-opacity-10 {
|
|
transition: var(--transition);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.task-meta-item:hover .bg-opacity-10 {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Enhanced Progress Bars */
|
|
.progress {
|
|
background: var(--bg-gradient-subtle);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.progress::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
|
}
|
|
|
|
.progress-bar {
|
|
background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-600) 100%);
|
|
border-radius: var(--border-radius-sm);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
animation: progress-shine 2s infinite;
|
|
}
|
|
|
|
@keyframes progress-shine {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* Project Badge */
|
|
.project-badge {
|
|
background: var(--surface-variant);
|
|
color: var(--text-secondary);
|
|
padding: 4px 8px;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 12px;
|
|
font-weight: var(--font-weight-medium);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.project-badge:hover {
|
|
background: var(--surface-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Priority Badge System */
|
|
.priority-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--border-radius-full);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition-slow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.priority-badge::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
|
transition: left 0.8s;
|
|
}
|
|
|
|
.priority-badge:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.priority-badge:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Status Badge Variants */
|
|
.status-todo {
|
|
background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
|
|
color: var(--gray-600);
|
|
border: 1px solid var(--gray-400);
|
|
}
|
|
|
|
.status-in_progress {
|
|
background: linear-gradient(135deg, var(--warning-light) 0%, #fde68a 100%);
|
|
color: #92400e;
|
|
border: 1px solid var(--warning-color);
|
|
}
|
|
|
|
.status-review {
|
|
background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
|
|
color: var(--primary-800);
|
|
border: 1px solid var(--primary-color);
|
|
}
|
|
|
|
.status-done {
|
|
background: linear-gradient(135deg, var(--success-light) 0%, #bbf7d0 100%);
|
|
color: #166534;
|
|
border: 1px solid var(--success-color);
|
|
}
|
|
|
|
.status-cancelled {
|
|
background: linear-gradient(135deg, var(--danger-light) 0%, #fecaca 100%);
|
|
color: #991b1b;
|
|
border: 1px solid var(--danger-color);
|
|
}
|
|
|
|
/* Priority Badge Variants */
|
|
.priority-low {
|
|
background: linear-gradient(135deg, var(--success-light) 0%, #bbf7d0 100%);
|
|
color: #166534;
|
|
border: 1px solid var(--success-color);
|
|
}
|
|
|
|
.priority-medium {
|
|
background: linear-gradient(135deg, var(--warning-light) 0%, #fde68a 100%);
|
|
color: #92400e;
|
|
border: 1px solid var(--warning-color);
|
|
}
|
|
|
|
.priority-high {
|
|
background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
|
|
color: #c2410c;
|
|
border: 1px solid #f97316;
|
|
}
|
|
|
|
.priority-urgent {
|
|
background: linear-gradient(135deg, var(--danger-light) 0%, #fecaca 100%);
|
|
color: #991b1b;
|
|
border: 1px solid var(--danger-color);
|
|
}
|
|
|
|
/* Dark Theme Task Adaptations */
|
|
[data-theme="dark"] .task-card {
|
|
background: var(--card-bg);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="dark"] .task-card:hover {
|
|
border-color: var(--primary-color);
|
|
box-shadow: var(--card-shadow-hover);
|
|
}
|
|
|
|
[data-theme="dark"] .task-description {
|
|
background: var(--bg-gradient-subtle);
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
[data-theme="dark"] .task-description:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
[data-theme="dark"] .task-title-link {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .task-title-link:hover {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .progress {
|
|
background: var(--bg-gradient-subtle);
|
|
}
|
|
|
|
[data-theme="dark"] .project-badge {
|
|
background: var(--surface-variant);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .project-badge:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
/* Dark theme status badges */
|
|
[data-theme="dark"] .status-todo {
|
|
background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-600) 100%);
|
|
color: var(--gray-300);
|
|
border-color: var(--gray-500);
|
|
}
|
|
|
|
[data-theme="dark"] .status-in_progress {
|
|
background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
|
|
color: var(--warning-color);
|
|
border-color: var(--warning-color);
|
|
}
|
|
|
|
[data-theme="dark"] .status-review {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
|
color: var(--primary-400);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
[data-theme="dark"] .status-done {
|
|
background: linear-gradient(135deg, #14532d 0%, #166534 100%);
|
|
color: var(--success-color);
|
|
border-color: var(--success-color);
|
|
}
|
|
|
|
[data-theme="dark"] .status-cancelled {
|
|
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
|
|
color: var(--danger-color);
|
|
border-color: var(--danger-color);
|
|
}
|
|
|
|
[data-theme="dark"] .priority-low {
|
|
background: linear-gradient(135deg, #14532d 0%, #166534 100%);
|
|
color: var(--success-color);
|
|
border-color: var(--success-color);
|
|
}
|
|
|
|
[data-theme="dark"] .priority-medium {
|
|
background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
|
|
color: var(--warning-color);
|
|
border-color: var(--warning-color);
|
|
}
|
|
|
|
[data-theme="dark"] .priority-high {
|
|
background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%);
|
|
color: #fb923c;
|
|
border-color: #f97316;
|
|
}
|
|
|
|
[data-theme="dark"] .priority-urgent {
|
|
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
|
|
color: var(--danger-color);
|
|
border-color: var(--danger-color);
|
|
}
|
|
|