149 lines
3.3 KiB
CSS
149 lines
3.3 KiB
CSS
/*
|
|
* Helpdesk backend colour system.
|
|
* One palette is shared across dashboard, tickets, Kanban, support and settings.
|
|
*/
|
|
|
|
:root {
|
|
--hd-primary-50: #eff6ff;
|
|
--hd-primary-100: #dbeafe;
|
|
--hd-primary-200: #bfdbfe;
|
|
--hd-primary-300: #93c5fd;
|
|
--hd-primary-400: #60a5fa;
|
|
--hd-primary-500: #3b82f6;
|
|
--hd-primary-600: #2563eb;
|
|
--hd-primary-700: #1d4ed8;
|
|
--hd-primary-800: #1e40af;
|
|
--hd-primary-900: #1e3a8a;
|
|
|
|
--hd-surface: #ffffff;
|
|
--hd-surface-muted: #f8fafc;
|
|
--hd-border: #e2e8f0;
|
|
--hd-text: #0f172a;
|
|
--hd-text-muted: #64748b;
|
|
}
|
|
|
|
.dark {
|
|
--hd-surface: #18181b;
|
|
--hd-surface-muted: #27272a;
|
|
--hd-border: #3f3f46;
|
|
--hd-text: #f4f4f5;
|
|
--hd-text-muted: #a1a1aa;
|
|
}
|
|
|
|
.hd-helpdesk-surface {
|
|
color: var(--hd-text);
|
|
}
|
|
|
|
.hd-helpdesk-surface a:not([data-flux-button]) {
|
|
color: var(--hd-primary-600);
|
|
}
|
|
|
|
.dark .hd-helpdesk-surface a:not([data-flux-button]) {
|
|
color: var(--hd-primary-400);
|
|
}
|
|
|
|
/* Shared cards/panels */
|
|
.hd-card,
|
|
.hd-panel {
|
|
border: 1px solid var(--hd-border);
|
|
background: var(--hd-surface);
|
|
border-radius: 0.875rem;
|
|
}
|
|
|
|
.hd-card-header,
|
|
.hd-panel-header {
|
|
border-bottom: 1px solid var(--hd-border);
|
|
background: var(--hd-surface-muted);
|
|
}
|
|
|
|
/* Shared Helpdesk buttons where plain HTML buttons are used. */
|
|
.hd-button-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--hd-primary-600);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
padding: 0.55rem 0.9rem;
|
|
transition: background-color .15s ease, box-shadow .15s ease;
|
|
}
|
|
|
|
.hd-button-primary:hover {
|
|
background: var(--hd-primary-700);
|
|
}
|
|
|
|
.hd-button-primary:focus-visible {
|
|
outline: 2px solid var(--hd-primary-400);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Fields */
|
|
.hd-select,
|
|
.hd-input,
|
|
.hd-textarea {
|
|
width: 100%;
|
|
border: 1px solid var(--hd-border);
|
|
background: var(--hd-surface);
|
|
color: var(--hd-text);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.hd-select:focus,
|
|
.hd-input:focus,
|
|
.hd-textarea:focus {
|
|
border-color: var(--hd-primary-500);
|
|
outline: 2px solid color-mix(in srgb, var(--hd-primary-500) 25%, transparent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* Status/accent helpers */
|
|
.hd-accent {
|
|
color: var(--hd-primary-600);
|
|
}
|
|
|
|
.dark .hd-accent {
|
|
color: var(--hd-primary-400);
|
|
}
|
|
|
|
.hd-accent-bg {
|
|
background: var(--hd-primary-600);
|
|
color: #fff;
|
|
}
|
|
|
|
.hd-accent-soft {
|
|
background: var(--hd-primary-50);
|
|
color: var(--hd-primary-800);
|
|
border-color: var(--hd-primary-200);
|
|
}
|
|
|
|
.dark .hd-accent-soft {
|
|
background: color-mix(in srgb, var(--hd-primary-900) 55%, transparent);
|
|
color: var(--hd-primary-200);
|
|
border-color: var(--hd-primary-800);
|
|
}
|
|
|
|
/*
|
|
* Flux sidebar active state.
|
|
* Flux currently exposes current state using aria-current on the rendered link.
|
|
*/
|
|
.hd-sidebar a[aria-current="page"] {
|
|
background: var(--hd-primary-600) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.hd-sidebar a[aria-current="page"] svg {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.hd-sidebar a:not([aria-current="page"]):hover {
|
|
background: var(--hd-primary-50);
|
|
color: var(--hd-primary-800);
|
|
}
|
|
|
|
.dark .hd-sidebar a:not([aria-current="page"]):hover {
|
|
background: color-mix(in srgb, var(--hd-primary-900) 30%, transparent);
|
|
color: var(--hd-primary-200);
|
|
}
|