647 lines
19 KiB
CSS
647 lines
19 KiB
CSS
:root {
|
|
|
|
--accent1: hsla(199, 100%, 20%, 1);
|
|
--accent1-hsl: 199, 100%, 20%;
|
|
--accent1-hover: #555;
|
|
--accent1-color:#fff;
|
|
--focus-ring-color: var(--accent1);
|
|
|
|
--accent2: hsla(168, 100%, 33%, 1);
|
|
--accent2-hsl: 168, 100%, 33%;
|
|
--accent2-hover: #555;
|
|
--accent2-color:#fff;
|
|
|
|
--nav-link-color: #fff;
|
|
--header-nav-link-color: #fff;
|
|
|
|
--tab-background: rgba(245, 245, 245, 1);
|
|
--tab-color: var(--accent1);
|
|
--tab-hover-background: var(--neutral);
|
|
--tab-active-background: rgba(245, 245, 245, 1);
|
|
--tab-active-color: #333;
|
|
|
|
--primary-content-bg-opacity: 0.15;
|
|
--main-titles-color: #fff;
|
|
|
|
--primary-background: rgba(255, 255, 255, 0.8);
|
|
--secondary-background: rgba(255, 255, 255, 1);
|
|
--layered-background: rgba(255, 255, 255, 0.9);
|
|
--light-layered-background: rgba(255, 255, 255, 0.4);
|
|
|
|
--primary-font-color: #333333;
|
|
--secondary-font-color: #000;
|
|
|
|
--neutral: rgba(230, 230, 230, 0.8);
|
|
--solid-neutral: rgba(220, 220, 220, 1);
|
|
--neutral-background: rgba(240, 240, 240, 0.7);
|
|
|
|
--col-title-bg: rgb(255, 255, 255, 1);
|
|
--col-content-bg: rgba(255,255,255, 0.8);
|
|
--col-hover-bg: rgba(245, 245, 245, 0.7);
|
|
--col-row-striped: rgba(250, 250, 250, 0.5);
|
|
|
|
--primary-color: var(--accent1);
|
|
--secondary-color: var(--accent2);
|
|
|
|
--main-bg: var(--primary-background);
|
|
--left-panel-bg: transparent;
|
|
--content-bg: var(--secondary-background);
|
|
|
|
--glass-blur: blur( 8px );
|
|
--glass-background: rgba(255,255,255,1);
|
|
--glass-border: 1px solid rgba(255,255,255,0.9);
|
|
|
|
--main-action-bg: var(--accent1);
|
|
--main-action-color: var(--accent1-color);
|
|
--main-action-hover-bg: var(--accent1-hover);
|
|
--main-action-hover-color: var(--accent1-color);
|
|
|
|
--secondary-action-bg: var(--primary-background);
|
|
--secondary-action-color: var(--primary-font-color);
|
|
--secondary-action-hover-bg: var(--accent2-hover);
|
|
--secondary-action-hover-color: var(--accent2-color);
|
|
|
|
--main-menu-link-bg: var(--secondary-background);
|
|
--main-menu-link-color: var(--primary-font-color);
|
|
|
|
--main-menu-link-hover-bg: rgba(255, 255, 255, 0.2);
|
|
--main-menu-link-hover-color: var(--accent1);
|
|
|
|
--main-menu-overlayed-link-hover-bg: rgba(255, 255, 255, 0.4);
|
|
|
|
--main-menu-link-active-bg: var(--primary-background);
|
|
--main-menu-link-active-color: var(--accent1);
|
|
|
|
--main-menu-border-color:var(--neutral);
|
|
|
|
--project-selector-bg: var(--secondary-background);
|
|
--project-selector-color: var(--primary-font-color);
|
|
--project-selector-hover-bg: var(--primary-background);
|
|
--project-selector-hover-color: var(--primary-font-color);
|
|
|
|
--dropdown-link-bg:var(--secondary-background);
|
|
--dropdown-link-color: var(--primary-font-color);
|
|
--dropdown-link-hover-bg: var(--tab-active-background);
|
|
--dropdown-link-hover-color: var(--primary-font-color);
|
|
|
|
--input-background: #fff;
|
|
|
|
--header-action-hover-color:var(--neutral);
|
|
--header-bg-color:var(--accent1);
|
|
--header-gradient:linear-gradient(135deg, var(--accent1) 20%,var(--accent2) 90%);
|
|
--element-gradient:linear-gradient(135deg, var(--accent1) 20%,var(--accent2) 100%);
|
|
|
|
--primary-font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
|
--font-size-xs: 10px;
|
|
--font-size-s: 12px;
|
|
--base-font-size: 14px;
|
|
--font-size-m: var(--base-font-size);
|
|
--font-size-l: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-xxl: 20px;
|
|
--font-size-xxxl: 24px;
|
|
|
|
--main-border-color:rgba(220,220,220, 1);
|
|
--main-border-color-hover:rgba(200,200,200, 0.9);
|
|
|
|
/* Softer shadows */
|
|
--min-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
|
--regular-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
|
|
--large-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
|
|
|
|
--box-radius-large: 24px;
|
|
--box-radius: 16px;
|
|
--box-radius-small: 8px;
|
|
--element-radius: 16px;
|
|
--input-radius: 15px;
|
|
|
|
--input-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075);
|
|
--input-padding: 4px 10px;
|
|
|
|
--kanban-col-bg: transparent;
|
|
--kanban-col-title-bg: var(--col-title-bg);
|
|
--kanban-col-title-color:var(--primary-font-color);
|
|
--kanban-card-bg: var(--layered-background);
|
|
--kanban-card-hover: rgba(240, 240, 240, 0.8);
|
|
|
|
|
|
--accordion-header-bg: var(--secondary-action-bg);
|
|
--accordion-header-radius: 10px;
|
|
|
|
--interactive-icon-color: #777;
|
|
|
|
--dark-red: #c41e3a;
|
|
--dark-red-text-color: #fff;
|
|
|
|
--red: #d64045;
|
|
--red-text-color: #fff;
|
|
|
|
--green: #2e7d32;
|
|
--green-text-color: #fff;
|
|
|
|
--dark-green: #1b5e20;
|
|
--dark-green-text-color: #fff;
|
|
|
|
--yellow: #f9a825;
|
|
--yellow-text-color: #000;
|
|
|
|
--blue: #1976d2;
|
|
--blue-text-color: #fff;
|
|
|
|
--dark-blue: #0d47a1;
|
|
--dark-blue-text-color: #fff;
|
|
|
|
--darker-blue: #002171;
|
|
--darker-blue-text-color: #fff;
|
|
|
|
--purple:#5F0F40;
|
|
--purple-text-color:#fff;
|
|
|
|
--magenta:#bb1b75;
|
|
--purple-text-color:#fff;
|
|
|
|
--pink: #F26CA7;
|
|
--pink-text-color:#000;
|
|
|
|
--brown: #BB611B;
|
|
--brown-text-color: #fff;
|
|
|
|
--grey: #aaaaaa;
|
|
--grey-text-color:#000;
|
|
|
|
--dark-grey: #4c4c4c;
|
|
--dark-grey-text-color: #fff;
|
|
|
|
--teal: #1bbbb1;
|
|
--teal-text-color: #fff;
|
|
|
|
--zlayer-1: 1; /*Background*/
|
|
--zlayer-2: 5; /* Maincontentinnnter */
|
|
--zlayer-3: 10; /* Element contentinner */
|
|
--zlayer-4: 15; /* over element contentinnter (headlines, status) */
|
|
--zlayer-5: 20; /* Highest layer on content inner (Filters) */
|
|
--zlayer-6: 25; /* modal */
|
|
--zlayer-7: 30; /* modal dropdowns*/
|
|
--zlayer-8: 35; /* modal dialogs */
|
|
--zlayer-9: 40; /* modal modals*/
|
|
|
|
--transparencyLayer: transparent;
|
|
|
|
/* Priority Colors */
|
|
--priority-critical: #dc2626; /* Red-600 */
|
|
--priority-critical-bg: #fee2e2; /* Red-100 */
|
|
--priority-high: #f97316; /* Orange-500 */
|
|
--priority-high-bg: #ffedd5; /* Orange-100 */
|
|
--priority-medium: #eab308; /* Yellow-500 */
|
|
--priority-medium-bg: #fef3c7; /* Yellow-100 */
|
|
--priority-low: #22c55e; /* Green-500 */
|
|
--priority-low-bg: #dcfce7; /* Green-100 */
|
|
--priority-lowest: #6b7280; /* Gray-500 */
|
|
--priority-lowest-bg: #f3f4f6; /* Gray-100 */
|
|
|
|
/* Swimlane Header Design Tokens */
|
|
--swimlane-header-bg: var(--layered-background);
|
|
--swimlane-header-border: var(--main-border-color);
|
|
--swimlane-header-hover: var(--col-hover-bg);
|
|
--swimlane-indicator-size: 32px;
|
|
--swimlane-label-font-size: 14px;
|
|
--swimlane-count-bg: var(--accent2);
|
|
--swimlane-count-color: white;
|
|
|
|
/* Progress Bar Tokens */
|
|
--progress-bar-height: 4px;
|
|
--progress-bar-bg: var(--main-border-color);
|
|
--progress-bar-radius: 2px;
|
|
|
|
/* Status Colors for Progress Bars */
|
|
--status-new-color: #60a5fa; /* Blue-400 */
|
|
--status-in-progress-color: #f59e0b; /* Amber-500 */
|
|
--status-done-color: #10b981; /* Emerald-500 */
|
|
|
|
/* Feedback Colors */
|
|
--feedback-success-bg: #e8f5e9;
|
|
--feedback-success-color: var(--green);
|
|
--feedback-success-border: #4caf50;
|
|
--feedback-warning-bg: #fff3e0;
|
|
--feedback-warning-color: #856404;
|
|
--feedback-warning-border: #ff9800;
|
|
--feedback-info-bg: #e3f2fd;
|
|
--feedback-info-color: var(--blue);
|
|
--feedback-info-border: #2196f3;
|
|
--feedback-error-bg: #ffebee;
|
|
--feedback-error-color: #c62828;
|
|
--feedback-error-border: #f44336;
|
|
|
|
/* ═══ DESIGN SYSTEM v2 — SEMANTIC ALIASES ═══ */
|
|
|
|
/* New accent colors (brand-layer) */
|
|
--accent3: #CADE1B;
|
|
--accent3-text: #A8B516;
|
|
--accent3-color: #000;
|
|
--accent4: #F61067;
|
|
--accent4-soft: #C84D7C;
|
|
--accent4-color: #fff;
|
|
|
|
/* Semantic tints */
|
|
--accent1-light: rgba(0,71,102,0.06);
|
|
--accent2-light: rgba(0,184,147,0.08);
|
|
--accent3-light: rgba(202,222,27,0.10);
|
|
--accent4-light: rgba(246,16,103,0.06);
|
|
|
|
/* Color: Text (aliases → existing tokens) */
|
|
--color-text-primary: var(--color-text-default);
|
|
--color-text-secondary: var(--secondary-font-color);
|
|
--color-text-muted: var(--interactive-icon-color);
|
|
--color-text-disabled: var(--solid-neutral);
|
|
--color-text-on-accent: var(--accent1-color);
|
|
|
|
/* Color: Background (aliases → existing tokens) */
|
|
--color-bg-page: var(--color-surface-page);
|
|
--color-bg-card: var(--color-surface-card);
|
|
--color-bg-elevated: var(--layered-background);
|
|
--color-bg-muted: var(--color-surface-inset);
|
|
--color-bg-hover: var(--col-hover-bg);
|
|
--color-bg-input: var(--input-background);
|
|
|
|
/* Color: Border (aliases → existing tokens) */
|
|
--color-border-default: var(--main-border-color);
|
|
--color-border-light: var(--neutral);
|
|
--color-border-hover: var(--main-border-color-hover);
|
|
|
|
/* Shadow */
|
|
--shadow-xs: var(--input-shadow);
|
|
--shadow-sm: var(--shadow-s);
|
|
--shadow-md: var(--shadow-m);
|
|
--shadow-lg: var(--shadow-l);
|
|
--shadow-xl: 0 14px 48px rgba(0,0,0,0.13);
|
|
|
|
/* Radius */
|
|
--radius-xs: 4px;
|
|
--radius-sm: var(--box-radius-small);
|
|
--radius: var(--element-radius);
|
|
--radius-lg: var(--box-radius);
|
|
--radius-pill: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Typography: Size (aliases → existing tokens) */
|
|
--text-xs: var(--font-size-xs);
|
|
--text-sm: var(--font-size-s);
|
|
--text-base: var(--base-font-size);
|
|
--text-md: var(--font-size-m);
|
|
--text-lg: var(--font-size-l);
|
|
--text-xl: var(--font-size-xl);
|
|
--text-2xl: var(--font-size-xxl);
|
|
--text-3xl: var(--font-size-xxxl);
|
|
|
|
/* Typography: Weight */
|
|
--font-weight-light: 300;
|
|
--font-weight-body: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-heading: 650;
|
|
--font-weight-bold: 700;
|
|
--font-weight-display: 800;
|
|
|
|
/* Typography: Line-Height */
|
|
--line-height-tight: 1;
|
|
--line-height-snug: 1.3;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.6;
|
|
--line-height-loose: 1.75;
|
|
|
|
/* Typography: Display sizes */
|
|
--font-size-display-sm: 28px;
|
|
--font-size-display-md: 36px;
|
|
--font-size-display-lg: 40px;
|
|
--font-size-display-xl: 120px;
|
|
|
|
/* Motion: Duration */
|
|
--duration-fast: 0.1s;
|
|
--duration-normal: 0.15s;
|
|
--duration-moderate: 0.2s;
|
|
--duration-slow: 0.3s;
|
|
|
|
/* Opacity */
|
|
--opacity-faint: 0.2;
|
|
--opacity-disabled: 0.5;
|
|
--opacity-muted: 0.6;
|
|
--opacity-subdued: 0.7;
|
|
--opacity-subtle: 0.85;
|
|
|
|
/* Glass extensions */
|
|
--glass-bg: var(--glass-background);
|
|
--glass-inset: inset 0 1px 0 rgba(255,255,255,0.1);
|
|
--glass-bg-subtle: rgba(255, 255, 255, 0.92);
|
|
--glass-blur-subtle: blur(4px);
|
|
|
|
/* Emboss */
|
|
--emboss-track: rgba(0,0,0,0.04);
|
|
--emboss-highlight: rgba(255,255,255,0.15);
|
|
|
|
/* ═══ DESIGN SYSTEM v3 — BASE (PRIMITIVE) TOKENS ═══ */
|
|
|
|
--lt-color-blue-300: #66b3ff;
|
|
--lt-color-blue-400: #1976d2;
|
|
--lt-color-blue-500: var(--accent1);
|
|
--lt-color-green-500: var(--accent2);
|
|
--lt-color-lime-500: var(--accent3);
|
|
--lt-color-magenta-500: var(--accent4);
|
|
--lt-color-red-500: #d64045;
|
|
--lt-color-yellow-500: #f9a825;
|
|
--lt-color-gray-50: #fafafa;
|
|
--lt-color-gray-100: #f5f6f7;
|
|
--lt-color-gray-200: #dcdcdc;
|
|
--lt-color-gray-500: #777777;
|
|
--lt-color-gray-800: #333333;
|
|
|
|
--lt-spacing-1: 0.25rem;
|
|
--lt-spacing-2: 0.5rem;
|
|
--lt-spacing-4: 1rem;
|
|
--lt-spacing-6: 1.5rem;
|
|
--lt-spacing-8: 2rem;
|
|
--lt-spacing-12: 3rem;
|
|
|
|
/* ═══ DESIGN SYSTEM v3 — FUNCTIONAL TOKENS ═══ */
|
|
|
|
/* Colors: Brand */
|
|
--color-brand-primary: var(--lt-color-blue-500);
|
|
--color-brand-secondary: var(--lt-color-green-500);
|
|
|
|
/* Colors: Surface */
|
|
--color-surface-page: rgba(255, 255, 255, 0.8);
|
|
--color-surface-card: rgba(255, 255, 255, 1);
|
|
--color-surface-inset: rgba(240, 240, 240, 0.7);
|
|
--color-surface-overlay: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Colors: Text */
|
|
--color-text-default: var(--lt-color-gray-800);
|
|
--color-text-link: var(--color-brand-primary);
|
|
--color-text-on-emphasis: #ffffff;
|
|
|
|
/* Colors: State */
|
|
--color-state-danger: var(--lt-color-red-500);
|
|
--color-state-warning: var(--lt-color-yellow-500);
|
|
--color-state-success: var(--lt-color-green-500);
|
|
--color-state-info: var(--lt-color-blue-400);
|
|
|
|
/* Focus */
|
|
--color-focus-ring: var(--lt-color-blue-300);
|
|
|
|
/* Typography: naming-doc scale */
|
|
--text-s: 0.875rem;
|
|
--text-m: 1rem;
|
|
--text-l: 1.25rem;
|
|
--font-family-base: var(--primary-font-family);
|
|
--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
|
|
--font-weight-normal: var(--font-weight-body);
|
|
|
|
/* Radius: naming-doc scale */
|
|
--radius-s: 0.25rem;
|
|
--radius-m: 0.5rem;
|
|
--radius-l: 1rem;
|
|
|
|
/* Shadow: naming-doc scale */
|
|
--shadow-s: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
|
--shadow-m: 0px 4px 8px rgba(0, 0, 0, 0.08);
|
|
--shadow-l: 0px 8px 16px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Z-index: semantic names */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1100;
|
|
--z-modal: 1300;
|
|
--z-toast: 1400;
|
|
|
|
/* ═══ DESIGN SYSTEM v3 — COMPONENT TOKENS ═══ */
|
|
|
|
--btn-bg: var(--color-brand-primary);
|
|
--btn-color: var(--color-text-on-emphasis);
|
|
--btn-radius: var(--radius-m);
|
|
|
|
--card-bg: var(--color-surface-card);
|
|
--card-border: var(--color-border-default);
|
|
--card-radius: var(--radius-m);
|
|
--card-shadow: var(--shadow-s);
|
|
|
|
--input-bg: var(--color-bg-input);
|
|
--input-border: var(--color-border-default);
|
|
--input-text: var(--color-text-default);
|
|
|
|
--modal-bg: var(--color-surface-card);
|
|
--modal-overlay: var(--color-surface-overlay);
|
|
--modal-radius: var(--radius-l);
|
|
--modal-shadow: var(--shadow-l);
|
|
|
|
--badge-radius: var(--radius-full);
|
|
|
|
--dropdown-bg: var(--color-surface-card);
|
|
--dropdown-border: var(--color-border-default);
|
|
--dropdown-shadow: var(--shadow-m);
|
|
|
|
}
|
|
|
|
.ss-option:hover {
|
|
color: white;
|
|
background-color: var(--accent1) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
LIGHT MODE ACCESSIBILITY ENHANCEMENTS
|
|
============================================ */
|
|
|
|
/* Enhanced focus indicators for light mode - high contrast */
|
|
a:focus-visible {
|
|
outline: 2px solid var(--focus-ring-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Dashboard task links - critical for keyboard navigation and low vision users */
|
|
.latest-todos a:focus-visible,
|
|
.sortableTicketList a:focus-visible {
|
|
outline: 2px solid var(--focus-ring-color);
|
|
outline-offset: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Button focus states */
|
|
button:focus-visible,
|
|
.btn:focus-visible {
|
|
outline: 2px solid var(--focus-ring-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Form element focus states */
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid var(--focus-ring-color);
|
|
border-color: var(--focus-ring-color);
|
|
}
|
|
|
|
/* Navigation and menu focus */
|
|
.nav a:focus-visible,
|
|
.dropdown-menu a:focus-visible {
|
|
outline: 2px solid var(--focus-ring-color);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* Link hover state - high contrast change for low vision accessibility */
|
|
a:hover {
|
|
color: #000000;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* Dashboard task links - extra visual feedback on hover */
|
|
.latest-todos a:hover,
|
|
.sortableTicketList a:hover {
|
|
color: #000000;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* ===================================
|
|
CUSTOM INPUT COMPONENT FOCUS STATES
|
|
=================================== */
|
|
|
|
/* Chosen Dropdowns */
|
|
.chosen-container-single .chosen-single:focus-visible,
|
|
.chosen-container-multi .chosen-choices:focus-visible,
|
|
.chosen-container-active.chosen-with-drop .chosen-single {
|
|
outline: 2px solid var(--accent1) !important;
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Fallback for keyboard focus when :focus-visible doesn't trigger */
|
|
.chosen-container-single .chosen-single:focus,
|
|
.chosen-container-multi .chosen-choices:focus {
|
|
outline: 2px solid var(--accent1) !important;
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Chosen dropdown search input */
|
|
.chosen-container-active .chosen-search input[type="text"]:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* SlimSelect */
|
|
.ss-main:focus-visible,
|
|
.ss-main.ss-open-above:focus-visible,
|
|
.ss-main.ss-open-below:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* jQuery UI Datepicker Input */
|
|
input.hasDatepicker:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
border-color: var(--accent1);
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* jQuery UI Datepicker Widget - when opened */
|
|
.ui-datepicker .ui-state-active:focus-visible,
|
|
.ui-datepicker .ui-datepicker-current-day a:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* TagsInput Container */
|
|
div.tagsinput:focus-within {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
border-color: var(--accent1);
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* TagsInput Individual Tags */
|
|
.tagsinput span.tag a:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* Custom Toggle Switch */
|
|
input[type="checkbox"].toggle:focus-visible + label,
|
|
input[type="checkbox"].toggle:focus-visible + .toggle-label {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Radio Tab Component */
|
|
.radioTab:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
background-color: rgba(var(--accent1-hsl), 0.05);
|
|
}
|
|
|
|
/* Selectable Component (emoji, icon, color picker) */
|
|
.selectable:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
background-color: rgba(var(--accent1-hsl), 0.1);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Weekday Selector */
|
|
.weekday-label:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Kanban Cards */
|
|
.ticketBox:focus-visible {
|
|
outline: 3px solid var(--accent1);
|
|
outline-offset: 4px;
|
|
background-color: var(--kanban-card-hover);
|
|
box-shadow: 0 0 0 6px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Dropdown Menu Items - Use :focus-visible instead of :focus */
|
|
.dropdown-menu > li > a:focus-visible {
|
|
background-color: var(--dropdown-link-hover-bg);
|
|
color: var(--dropdown-link-hover-color);
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Upload Buttons */
|
|
.uppy-FileInput-btn:focus-visible,
|
|
.date-picker-form-control .reset-button:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Time Pickers */
|
|
input[type="time"]:focus-visible {
|
|
outline: 2px solid var(--accent1);
|
|
outline-offset: 2px;
|
|
border-color: var(--accent1);
|
|
box-shadow: 0 0 0 4px rgba(var(--accent1-hsl), 0.1);
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.selectable:focus-visible {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* CRITICAL: Remove Bootstrap inset shadow from Chosen search input */
|
|
.chosen-container-multi .chosen-choices li.search-field input[type="text"],
|
|
.chosen-container-multi .chosen-choices .search-field input,
|
|
.chosen-container .chosen-choices input.chosen-search-input,
|
|
#collaborators_chosen input[type="text"] {
|
|
box-shadow: none !important;
|
|
-webkit-box-shadow: none !important;
|
|
}
|