mag/Helpddesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added support for legacy tickets, fixed switching of modes and also style updates

Browse Source
This commit is contained in:
Mark Gregory
2026-09-28 15:40:20 +01:00
parent 912c120299
commit afa2ee472e
5 changed files with 74 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/assets/css/app.css
+58 -99
View File
@@ -1440,112 +1440,71 @@ html:not(.dark) .hd-helpdesk-surface {
color: #1f2937;
}
/* ==========================================================================\n Appearance switch integration\n The module stylesheet is loaded after the backend theme, so light-mode\n overrides must live here rather than only in the shared backend stylesheet.\n ========================================================================== */
:root:not(.dark) .hd-helpdesk-surface {
/* Professional theme contract: readable contrast in both application modes. */
html:not(.dark) .hd-helpdesk-surface {
color: #18181b !important;
}
html:not(.dark) .hd-helpdesk-surface :is(.text-zinc-100,.text-zinc-200,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700,.text-zinc-900) {
color: #3f3f46 !important;
}
html:not(.dark) .hd-helpdesk-surface :is(h1,h2,h3,h4,.font-semibold,.font-bold,.font-black):not(.hd-btn):not([class*="text-white"]) {
color: #18181b;
}
:root:not(.dark) .hd-helpdesk-surface .bg-zinc-950,
:root:not(.dark) .hd-helpdesk-surface .bg-zinc-900,
:root:not(.dark) .hd-helpdesk-surface .bg-neutral-950,
:root:not(.dark) .hd-helpdesk-surface .bg-neutral-900,
:root:not(.dark) .hd-helpdesk-surface .bg-slate-950,
:root:not(.dark) .hd-helpdesk-surface .bg-slate-900,
:root:not(.dark) .hd-helpdesk-surface .bg-gray-950,
:root:not(.dark) .hd-helpdesk-surface .bg-gray-900,
:root:not(.dark) .hd-helpdesk-surface [class*="bg-zinc-950/"],
:root:not(.dark) .hd-helpdesk-surface [class*="bg-zinc-900/"],
:root:not(.dark) .hd-helpdesk-surface [class*="bg-slate-950/"],
:root:not(.dark) .hd-helpdesk-surface [class*="bg-slate-900/"] {
background: #ffffff !important;
background-color: #ffffff !important;
}
:root:not(.dark) .hd-helpdesk-surface .bg-zinc-800,
:root:not(.dark) .hd-helpdesk-surface .bg-neutral-800,
:root:not(.dark) .hd-helpdesk-surface .bg-slate-800,
:root:not(.dark) .hd-helpdesk-surface .bg-gray-800 {
background: #f4f4f5 !important;
background-color: #f4f4f5 !important;
}
:root:not(.dark) .hd-helpdesk-surface .border-zinc-800,
:root:not(.dark) .hd-helpdesk-surface .border-zinc-700,
:root:not(.dark) .hd-helpdesk-surface .border-neutral-800,
:root:not(.dark) .hd-helpdesk-surface .border-slate-800,
:root:not(.dark) .hd-helpdesk-surface .border-gray-800,
:root:not(.dark) .hd-helpdesk-surface [class*="border-zinc-700/"],
:root:not(.dark) .hd-helpdesk-surface [class*="border-zinc-800/"] {
border-color: #e4e4e7 !important;
}
:root:not(.dark) .hd-helpdesk-surface .text-white:not(.hd-btn):not(button),
:root:not(.dark) .hd-helpdesk-surface .text-zinc-100,
:root:not(.dark) .hd-helpdesk-surface .text-zinc-200,
:root:not(.dark) .hd-helpdesk-surface .text-slate-100,
:root:not(.dark) .hd-helpdesk-surface .text-slate-200 {
color: #18181b !important;
}
:root:not(.dark) .hd-helpdesk-surface .text-zinc-300,
:root:not(.dark) .hd-helpdesk-surface .text-zinc-400,
:root:not(.dark) .hd-helpdesk-surface .text-zinc-500,
:root:not(.dark) .hd-helpdesk-surface .text-slate-300,
:root:not(.dark) .hd-helpdesk-surface .text-slate-400,
:root:not(.dark) .hd-helpdesk-surface .text-slate-500 {
color: #71717a !important;
}
/* Hero/header gradients are decorative, but they must also follow appearance. */
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%) !important;
color: #18181b !important;
border-color: #e4e4e7 !important;
}
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-white {
color: #18181b !important;
}
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-blue-200,
:root:not(.dark) .hd-helpdesk-surface .bg-gradient-to-br:not(.hd-btn) .text-blue-100 {
html:not(.dark) .hd-helpdesk-surface .text-blue-100\/90,
html:not(.dark) .hd-helpdesk-surface .text-blue-100,
html:not(.dark) .hd-helpdesk-surface .text-blue-200,
html:not(.dark) .hd-helpdesk-surface .text-amber-100\/85,
html:not(.dark) .hd-helpdesk-surface .text-amber-100,
html:not(.dark) .hd-helpdesk-surface .text-amber-200 {
color: #475569 !important;
}
/* Native/select2 controls had unconditional dark colours. */
:root:not(.dark) .hd-select,
:root:not(.dark) .hd-ticket-board-select,
:root:not(.dark) .helpdesk-ticket-form input,
:root:not(.dark) .helpdesk-ticket-form textarea,
:root:not(.dark) .helpdesk-ticket-form select,
:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--single,
:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
:root:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__rendered {
background: #ffffff !important;
background-color: #ffffff !important;
color: #18181b !important;
border-color: #d4d4d8 !important;
caret-color: #18181b !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
}
:root:not(.dark) .hd-select option,
:root:not(.dark) .hd-ticket-board-select option,
:root:not(.dark) .select2-dropdown,
:root:not(.dark) .select2-search__field,
:root:not(.dark) .select2-container--default .select2-results__option {
background: #ffffff !important;
/* Heroes are light in light mode and intentionally dark in dark mode. */
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) {
background: linear-gradient(135deg,#ffffff 0%,#f8fafc 55%,#eef4ff 100%) !important;
color: #18181b !important;
}
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) {
background: linear-gradient(135deg,#020617 0%,#0f172a 55%,#172554 100%) !important;
color: #f8fafc !important;
}
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) :is(h1,h2,h3) { color:#18181b !important; }
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) p { color:#475569 !important; }
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) :is(h1,h2,h3) { color:#f8fafc !important; }
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) p { color:#cbd5e1 !important; }
/* Kanban/list/settings surfaces that use bespoke hard-coded dark rules. */
:root:not(.dark) .helpdesk-kanban-column,
:root:not(.dark) .hd-core-settings section,
:root:not(.dark) .hd-core-settings table,
:root:not(.dark) .hd-helpdesk-surface table {
background-color: #ffffff !important;
color: #18181b !important;
/* Search/filter surface follows the switch instead of remaining black. */
html:not(.dark) .hd-helpdesk-surface .hd-filter-panel {
background:#ffffff !important; border-color:#d4d4d8 !important; color:#18181b !important;
}
:root:not(.dark) .helpdesk-kanban-column > div:first-child,
:root:not(.dark) .hd-helpdesk-surface thead,
:root:not(.dark) .hd-core-settings thead {
background-color: #f4f4f5 !important;
color: #3f3f46 !important;
html.dark .hd-helpdesk-surface .hd-filter-panel {
background:#18181b !important; border-color:#3f3f46 !important; color:#f4f4f5 !important;
}
html:not(.dark) .hd-ticket-search,
html:not(.dark) .hd-ticket-search-wrap { background:#fff !important; color:#18181b !important; border-color:#cbd5e1 !important; }
html:not(.dark) .hd-ticket-search::placeholder { color:#71717a !important; opacity:1; }
html:not(.dark) .hd-ticket-search-icon { color:#52525b !important; }
html.dark .hd-ticket-search,
html.dark .hd-ticket-search-wrap { background:#09090b !important; color:#f4f4f5 !important; border-color:#3f3f46 !important; }
html.dark .hd-ticket-search::placeholder { color:#a1a1aa !important; opacity:1; }
html.dark .hd-ticket-search-icon { color:#a1a1aa !important; }
/* Tables: body copy must never fade into its background. */
html:not(.dark) .hd-helpdesk-surface table tbody { color:#27272a !important; }
html:not(.dark) .hd-helpdesk-surface table tbody :is(.text-zinc-500,.text-zinc-600,.text-zinc-700) { color:#52525b !important; }
html:not(.dark) .hd-helpdesk-surface table tbody :is(.font-medium,.font-semibold) { color:#18181b !important; }
html.dark .hd-helpdesk-surface table tbody { color:#e4e4e7 !important; }
html.dark .hd-helpdesk-surface table tbody :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700) { color:#a1a1aa !important; }
html.dark .hd-helpdesk-surface table tbody :is(.font-medium,.font-semibold) { color:#f4f4f5 !important; }
/* Settings navigation cards use dark copy on translucent pastel cards in light mode. */
.hd-settings-section-card { border-color:var(--hd-card-border) !important; background:var(--hd-card-bg) !important; }
html:not(.dark) .hd-settings-section-card { color:#18181b !important; box-shadow:0 8px 20px rgba(15,23,42,.08) !important; }
html:not(.dark) .hd-settings-section-card.is-active { color:#fff !important; background:var(--hd-card-active) !important; }
html.dark .hd-settings-section-card { color:#f8fafc !important; }
html.dark .hd-settings-section-card.is-active { background:var(--hd-card-active) !important; }
.hd-settings-section-card > div:first-child { opacity:.82 !important; }
/* Muted text remains secondary, but readable. */
html:not(.dark) .hd-helpdesk-surface .hd-muted { color:#52525b !important; }
html.dark .hd-helpdesk-surface .hd-muted { color:#a1a1aa !important; }