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

dark mode supoport and new design

Browse Source
This commit is contained in:
Mark Gregory
2026-08-27 16:01:39 +01:00
parent a3ef18384b
commit 6de15d1398
16 changed files with 338 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/themes/backend/assets/css/helpdesk.css
+251
View File
@@ -1935,3 +1935,254 @@ html.dark .hd-auth-surface a:hover {
flex-direction: column !important;
}
}
/* ============================================================
Site mark + coloured sidebar navigation
============================================================ */
.hd-brand-mark {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid #394251;
border-radius: 11px;
background: linear-gradient(145deg, #222934, #151a22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.055),
0 6px 14px rgba(0,0,0,.18);
transition:
transform .15s ease,
border-color .15s ease,
background-color .15s ease;
}
.hd-brand-mark:hover {
transform: translateY(-1px);
border-color: #596579;
background: #252d38;
}
.hd-brand-icon {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
}
/* Individual sidebar accents. */
.hd-nav-link {
--hd-nav-accent: #64748b;
--hd-nav-accent-rgb: 100, 116, 139;
}
.hd-nav-link--dashboard {
--hd-nav-accent: #3b82f6;
--hd-nav-accent-rgb: 59, 130, 246;
}
.hd-nav-link--tickets {
--hd-nav-accent: #06b6d4;
--hd-nav-accent-rgb: 6, 182, 212;
}
.hd-nav-link--kanban {
--hd-nav-accent: #f59e0b;
--hd-nav-accent-rgb: 245, 158, 11;
}
.hd-nav-link--settings {
--hd-nav-accent: #8b5cf6;
--hd-nav-accent-rgb: 139, 92, 246;
}
.hd-nav-link--documents {
--hd-nav-accent: #10b981;
--hd-nav-accent-rgb: 16, 185, 129;
}
.hd-nav-link--categories {
--hd-nav-accent: #0ea5e9;
--hd-nav-accent-rgb: 14, 165, 233;
}
.hd-nav-link--users {
--hd-nav-accent: #6366f1;
--hd-nav-accent-rgb: 99, 102, 241;
}
.hd-nav-link--roles {
--hd-nav-accent: #f43f5e;
--hd-nav-accent-rgb: 244, 63, 94;
}
.hd-nav-link i {
width: 30px !important;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--hd-nav-accent-rgb), .24);
border-radius: 8px;
background: rgba(var(--hd-nav-accent-rgb), .10);
color: var(--hd-nav-accent) !important;
transition:
background-color .15s ease,
border-color .15s ease,
color .15s ease,
transform .15s ease;
}
.hd-nav-link:hover {
background:
linear-gradient(
90deg,
rgba(var(--hd-nav-accent-rgb), .10),
rgba(var(--hd-nav-accent-rgb), .035)
) !important;
color: #fff !important;
}
.hd-nav-link:hover i {
transform: translateX(1px);
border-color: rgba(var(--hd-nav-accent-rgb), .45);
background: rgba(var(--hd-nav-accent-rgb), .18);
color: #fff !important;
}
.hd-nav-link.is-active {
background:
linear-gradient(
90deg,
rgba(var(--hd-nav-accent-rgb), .20),
rgba(var(--hd-nav-accent-rgb), .07)
) !important;
color: #fff !important;
box-shadow:
inset 3px 0 var(--hd-nav-accent),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.hd-nav-link.is-active i {
border-color: rgba(var(--hd-nav-accent-rgb), .58);
background: var(--hd-nav-accent);
color: #fff !important;
box-shadow: 0 4px 12px rgba(var(--hd-nav-accent-rgb), .22);
}
/* Light-mode counterparts. */
html:not(.dark) .hd-brand-mark {
border-color: #d6dde7;
background: linear-gradient(145deg, #ffffff, #eef2f7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.8),
0 5px 12px rgba(15,23,42,.08);
}
html:not(.dark) .hd-brand-mark:hover {
border-color: #b9c3d0;
background: #f8fafc;
}
html:not(.dark) .hd-nav-link i {
border-color: rgba(var(--hd-nav-accent-rgb), .22);
background: rgba(var(--hd-nav-accent-rgb), .08);
color: var(--hd-nav-accent) !important;
}
html:not(.dark) .hd-nav-link:hover {
background:
linear-gradient(
90deg,
rgba(var(--hd-nav-accent-rgb), .10),
rgba(var(--hd-nav-accent-rgb), .025)
) !important;
color: #111827 !important;
}
html:not(.dark) .hd-nav-link:hover i {
color: var(--hd-nav-accent) !important;
background: rgba(var(--hd-nav-accent-rgb), .14);
}
html:not(.dark) .hd-nav-link.is-active {
background:
linear-gradient(
90deg,
rgba(var(--hd-nav-accent-rgb), .15),
rgba(var(--hd-nav-accent-rgb), .045)
) !important;
color: #111827 !important;
box-shadow: inset 3px 0 var(--hd-nav-accent) !important;
}
html:not(.dark) .hd-nav-link.is-active i {
color: #fff !important;
background: var(--hd-nav-accent);
}
/* Keep the top-left area compact on smaller screens. */
@media (max-width: 700px) {
.hd-brand-mark {
width: 34px;
height: 34px;
flex-basis: 34px;
border-radius: 9px;
}
.hd-brand-icon {
width: 21px;
height: 21px;
}
}
/* Brand favicon: force a compact header-sized mark. */
.hd-brand-mark {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
flex: 0 0 42px !important;
padding: 7px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.hd-brand-mark .hd-brand-icon,
.hd-brand-icon {
display: block !important;
width: 28px !important;
height: 28px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 28px !important;
max-height: 28px !important;
object-fit: contain !important;
object-position: center !important;
flex: none !important;
}
@media (max-width: 700px) {
.hd-brand-mark {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
flex: 0 0 38px !important;
padding: 7px !important;
}
.hd-brand-mark .hd-brand-icon,
.hd-brand-icon {
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
}
}