2599 lines
89 KiB
CSS
Executable File
2599 lines
89 KiB
CSS
Executable File
.hd-helpdesk-surface .hd-btn,
|
|
.hd-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
border-radius: .85rem;
|
|
padding: .62rem 1.05rem;
|
|
font-size: .875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 800;
|
|
color: #ffffff !important;
|
|
text-decoration: none !important;
|
|
border: 1px solid rgba(255,255,255,.14);
|
|
box-shadow: 0 12px 28px rgba(0,0,0,.22);
|
|
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
|
}
|
|
.hd-helpdesk-surface .hd-btn:hover,
|
|
.hd-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 16px 34px rgba(0,0,0,.30);
|
|
}
|
|
.hd-helpdesk-surface .hd-btn-sm,
|
|
.hd-btn-sm {
|
|
border-radius: .65rem;
|
|
padding: .42rem .78rem;
|
|
font-size: .8125rem;
|
|
}
|
|
.hd-helpdesk-surface .hd-btn-blue,
|
|
.hd-btn-blue { background: #2563eb !important; }
|
|
.hd-helpdesk-surface .hd-btn-blue:hover,
|
|
.hd-btn-blue:hover { background: #1d4ed8 !important; }
|
|
.hd-helpdesk-surface .hd-btn-green,
|
|
.hd-btn-green { background: #16a34a !important; }
|
|
.hd-helpdesk-surface .hd-btn-green:hover,
|
|
.hd-btn-green:hover { background: #15803d !important; }
|
|
.hd-helpdesk-surface .hd-btn-amber,
|
|
.hd-btn-amber { background: #f59e0b !important; }
|
|
.hd-helpdesk-surface .hd-btn-amber:hover,
|
|
.hd-btn-amber:hover { background: #d97706 !important; }
|
|
.hd-helpdesk-surface .hd-btn-red,
|
|
.hd-btn-red { background: #dc2626 !important; }
|
|
.hd-helpdesk-surface .hd-btn-red:hover,
|
|
.hd-btn-red:hover { background: #b91c1c !important; }
|
|
.hd-helpdesk-surface .hd-btn-violet,
|
|
.hd-btn-violet { background: #7c3aed !important; }
|
|
.hd-helpdesk-surface .hd-btn-violet:hover,
|
|
.hd-btn-violet:hover { background: #6d28d9 !important; }
|
|
|
|
.hd-helpdesk-surface button[type="submit"],
|
|
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
|
|
background: #16a34a !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="reset"],
|
|
.hd-helpdesk-surface button[wire\:target^="reset"] {
|
|
background: #f59e0b !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="edit"],
|
|
.hd-helpdesk-surface button[wire\:target^="edit"] {
|
|
background: #2563eb !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="delete"],
|
|
.hd-helpdesk-surface button[wire\:target^="delete"] {
|
|
background: #dc2626 !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-select {
|
|
width: 100%;
|
|
min-height: 3.35rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid #3f3f46 !important;
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
padding: .78rem 3rem .78rem 1rem;
|
|
font-weight: 800;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
|
|
}
|
|
.hd-select:focus {
|
|
border-color: #60a5fa !important;
|
|
box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
|
|
}
|
|
|
|
.helpdesk-ticket-form,
|
|
.helpdesk-ticket-form * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.helpdesk-ticket-form input,
|
|
.helpdesk-ticket-form textarea,
|
|
.helpdesk-ticket-form select,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
border-color: #3f3f46 !important;
|
|
caret-color: #f4f4f5 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.helpdesk-ticket-form input:disabled,
|
|
.helpdesk-ticket-form textarea:disabled,
|
|
.helpdesk-ticket-form select:disabled,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
|
|
.helpdesk-ticket-form [disabled],
|
|
.helpdesk-ticket-form [aria-disabled="true"] {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #a1a1aa !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.helpdesk-ticket-form input:-webkit-autofill,
|
|
.helpdesk-ticket-form input:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form input:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form select:-webkit-autofill,
|
|
.helpdesk-ticket-form select:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f4f4f5 !important;
|
|
box-shadow: 0 0 0 1000px #09090b inset !important;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn,
|
|
.hd-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
border-radius: .85rem;
|
|
padding: .62rem 1.05rem;
|
|
font-size: .875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 800;
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
border: 1px solid rgba(255,255,255,.14);
|
|
box-shadow: 0 12px 28px rgba(0,0,0,.22);
|
|
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn:hover,
|
|
.hd-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 16px 34px rgba(0,0,0,.30);
|
|
}
|
|
|
|
.hd-btn-sm {
|
|
border-radius: .65rem;
|
|
padding: .42rem .78rem;
|
|
font-size: .8125rem;
|
|
}
|
|
|
|
.hd-btn-blue { background: #2563eb !important; }
|
|
.hd-btn-blue:hover { background: #1d4ed8 !important; }
|
|
|
|
.hd-btn-green { background: #16a34a !important; }
|
|
.hd-btn-green:hover { background: #15803d !important; }
|
|
|
|
.hd-btn-amber { background: #f59e0b !important; }
|
|
.hd-btn-amber:hover { background: #d97706 !important; }
|
|
|
|
.hd-btn-red { background: #dc2626 !important; }
|
|
.hd-btn-red:hover { background: #b91c1c !important; }
|
|
|
|
.hd-btn-violet { background: #7c3aed !important; }
|
|
.hd-btn-violet:hover { background: #6d28d9 !important; }
|
|
|
|
.hd-helpdesk-surface button[type="submit"],
|
|
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
|
|
background: #16a34a !important;
|
|
color: #fff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[wire\:click^="reset"],
|
|
.hd-helpdesk-surface button[wire\:target^="reset"] {
|
|
background: #f59e0b !important;
|
|
color: #fff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[wire\:click^="edit"],
|
|
.hd-helpdesk-surface button[wire\:target^="edit"] {
|
|
background: #2563eb !important;
|
|
color: #fff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[wire\:click^="delete"],
|
|
.hd-helpdesk-surface button[wire\:target^="delete"] {
|
|
background: #dc2626 !important;
|
|
color: #fff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-select {
|
|
width: 100%;
|
|
min-height: 3.35rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid #3f3f46 !important;
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
padding: .78rem 3rem .78rem 1rem;
|
|
font-weight: 800;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
|
|
}
|
|
|
|
.hd-select:focus {
|
|
border-color: #60a5fa !important;
|
|
box-shadow:
|
|
0 0 0 3px rgba(96,165,250,.38),
|
|
inset 0 1px 0 rgba(255,255,255,.05);
|
|
}
|
|
|
|
.helpdesk-required-star {
|
|
color: #ef4444 !important;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.helpdesk-ticket-form,
|
|
.helpdesk-ticket-form * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.helpdesk-ticket-form input,
|
|
.helpdesk-ticket-form textarea,
|
|
.helpdesk-ticket-form select,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
border-color: #3f3f46 !important;
|
|
caret-color: #f4f4f5 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.helpdesk-ticket-form input:disabled,
|
|
.helpdesk-ticket-form textarea:disabled,
|
|
.helpdesk-ticket-form select:disabled,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple {
|
|
background: #09090b !important;
|
|
color: #a1a1aa !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.helpdesk-ticket-form input:-webkit-autofill,
|
|
.helpdesk-ticket-form input:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form input:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form select:-webkit-autofill,
|
|
.helpdesk-ticket-form select:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f4f4f5 !important;
|
|
box-shadow: 0 0 0 1000px #09090b inset !important;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
position: relative;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
right: 2.25rem !important;
|
|
transform: translateY(-50%);
|
|
color: #f87171 !important;
|
|
font-weight: 800 !important;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Select2 base */
|
|
.helpdesk-ticket-form .select2-container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
|
|
min-height: 3.35rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid #d4d4d8 !important;
|
|
background: #ffffff !important;
|
|
color: #18181b !important;
|
|
box-shadow: 0 10px 22px rgba(24, 24, 27, .08);
|
|
}
|
|
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: #18181b !important;
|
|
line-height: 3.25rem;
|
|
padding-left: 1rem;
|
|
padding-right: 2.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
|
|
align-items: center;
|
|
padding: .4rem .65rem;
|
|
}
|
|
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
border: 1px solid #2563eb !important;
|
|
border-radius: 9999px !important;
|
|
background: #dbeafe !important;
|
|
color: #1e3a8a !important;
|
|
font-weight: 700;
|
|
padding: .2rem .55rem;
|
|
}
|
|
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: #dc2626 !important;
|
|
margin-right: .35rem;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
border: 1px solid #d4d4d8 !important;
|
|
border-radius: .9rem !important;
|
|
background: #ffffff !important;
|
|
color: #18181b !important;
|
|
overflow: hidden;
|
|
box-shadow: 0 18px 42px rgba(24, 24, 27, .18);
|
|
}
|
|
|
|
.select2-search__field {
|
|
border: 1px solid #d4d4d8 !important;
|
|
border-radius: .7rem !important;
|
|
background: #ffffff !important;
|
|
color: #18181b !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option {
|
|
color: #18181b !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background: #2563eb !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option[aria-selected="true"] {
|
|
background: #e0f2fe !important;
|
|
color: #075985 !important;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
|
|
border-color: #3f3f46 !important;
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
|
|
}
|
|
|
|
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: #f4f4f5 !important;
|
|
}
|
|
|
|
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
border-color: #60a5fa !important;
|
|
background: #1d4ed8 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark .select2-dropdown {
|
|
border-color: #3f3f46 !important;
|
|
background: #18181b !important;
|
|
color: #f4f4f5 !important;
|
|
box-shadow: 0 18px 42px rgba(0,0,0,.55);
|
|
}
|
|
|
|
.dark .select2-search__field {
|
|
border-color: #3f3f46 !important;
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
}
|
|
|
|
.dark .select2-container--default .select2-results__option {
|
|
color: #f4f4f5 !important;
|
|
}
|
|
|
|
.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background: #2563eb !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark .select2-container--default .select2-results__option[aria-selected="true"] {
|
|
background: #27272a !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option {
|
|
background: rgb(9 9 11);
|
|
color: rgb(244 244 245);
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected],
|
|
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
|
|
background: rgb(37 99 235) !important;
|
|
color: rgb(255 255 255) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option[aria-selected="true"],
|
|
.select2-container--default .select2-results__option--selected {
|
|
background: rgb(30 64 175) !important;
|
|
color: rgb(255 255 255) !important;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
border-color: rgb(63 63 70) !important;
|
|
background: rgb(9 9 11) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
border: 1px solid rgb(63 63 70) !important;
|
|
background: rgb(9 9 11) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: rgb(244 244 245) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
|
color: rgb(113 113 122) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
|
border-color: rgb(161 161 170) transparent transparent transparent !important;
|
|
}
|
|
|
|
.select2-container--default.select2-container--open .select2-selection--single {
|
|
border-color: rgb(59 130 246) !important;
|
|
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.35);
|
|
}
|
|
|
|
.select2-container--default .select2-selection--multiple {
|
|
border: 1px solid rgb(63 63 70) !important;
|
|
background: rgb(9 9 11) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
border: 1px solid rgb(59 130 246 / 0.45) !important;
|
|
background: rgb(30 64 175 / 0.35) !important;
|
|
color: rgb(219 234 254) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: rgb(191 219 254) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single,
|
|
.select2-container--default .select2-selection--multiple {
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
overflow: hidden;
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.select2-container--open .select2-dropdown--below {
|
|
margin-top: 0.35rem;
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.select2-container--open .select2-dropdown--above {
|
|
margin-bottom: 0.35rem;
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
position: relative;
|
|
padding-right: 3.5rem;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
padding-right: 3.5rem;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 50%;
|
|
z-index: 3;
|
|
margin: 0;
|
|
transform: translateY(-50%);
|
|
color: rgb(161 161 170);
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
|
|
color: rgb(248 113 113);
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
right: 0.75rem;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
position: relative !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 4.25rem !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
|
position: absolute !important;
|
|
right: 2.35rem !important;
|
|
top: 50% !important;
|
|
float: none !important;
|
|
margin: 0 !important;
|
|
transform: translateY(-50%) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear span {
|
|
color: rgb(161 161 170) !important;
|
|
font-size: 1.1rem !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
right: 0.75rem !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
flex: 1 1 auto !important;
|
|
width: 100% !important;
|
|
padding-right: 4.5rem !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
|
position: absolute !important;
|
|
right: 2.25rem !important;
|
|
top: 50% !important;
|
|
z-index: 20 !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 1.25rem !important;
|
|
height: 1.25rem !important;
|
|
float: none !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
transform: translateY(-50%) !important;
|
|
color: rgb(161 161 170) !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
|
|
color: rgb(248 113 113) !important;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
position: absolute !important;
|
|
right: 0.75rem !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
}
|
|
|
|
/* Helpdesk Flatpickr date picker */
|
|
.flatpickr-calendar {
|
|
border: 1px solid rgb(63 63 70);
|
|
background: rgb(24 24 27);
|
|
color: rgb(244 244 245);
|
|
box-shadow: 0 20px 45px rgb(0 0 0 / 0.35);
|
|
}
|
|
|
|
.flatpickr-calendar.arrowTop::before,
|
|
.flatpickr-calendar.arrowTop::after,
|
|
.flatpickr-calendar.arrowBottom::before,
|
|
.flatpickr-calendar.arrowBottom::after {
|
|
border-bottom-color: rgb(24 24 27);
|
|
border-top-color: rgb(24 24 27);
|
|
}
|
|
|
|
.flatpickr-months,
|
|
.flatpickr-months .flatpickr-month,
|
|
.flatpickr-current-month .flatpickr-monthDropdown-months,
|
|
.flatpickr-current-month input.cur-year {
|
|
background: rgb(24 24 27);
|
|
color: rgb(244 244 245);
|
|
}
|
|
|
|
.flatpickr-weekday,
|
|
span.flatpickr-weekday {
|
|
color: rgb(161 161 170);
|
|
}
|
|
|
|
.flatpickr-day {
|
|
color: rgb(228 228 231);
|
|
}
|
|
|
|
.flatpickr-day:hover,
|
|
.flatpickr-day:focus {
|
|
border-color: rgb(59 130 246);
|
|
background: rgb(39 39 42);
|
|
color: rgb(255 255 255);
|
|
}
|
|
|
|
.flatpickr-day.selected,
|
|
.flatpickr-day.startRange,
|
|
.flatpickr-day.endRange {
|
|
border-color: rgb(37 99 235);
|
|
background: rgb(37 99 235);
|
|
color: rgb(255 255 255);
|
|
}
|
|
|
|
.flatpickr-day.today {
|
|
border-color: rgb(34 197 94);
|
|
}
|
|
|
|
.flatpickr-day.flatpickr-disabled,
|
|
.flatpickr-day.prevMonthDay,
|
|
.flatpickr-day.nextMonthDay {
|
|
color: rgb(113 113 122);
|
|
}
|
|
.hd-helpdesk-surface .hd-btn,
|
|
.hd-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
border-radius: .85rem;
|
|
padding: .62rem 1.05rem;
|
|
font-size: .875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 800;
|
|
font-size: .95rem;
|
|
color: #ffffff !important;
|
|
text-decoration: none !important;
|
|
border: 1px solid rgba(255,255,255,.14);
|
|
box-shadow: 0 12px 28px rgba(0,0,0,.22);
|
|
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
|
}
|
|
.hd-helpdesk-surface .hd-btn:hover,
|
|
.hd-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 16px 34px rgba(0,0,0,.30);
|
|
}
|
|
.hd-helpdesk-surface .hd-btn-sm,
|
|
.hd-btn-sm {
|
|
border-radius: .65rem;
|
|
padding: .42rem .78rem;
|
|
font-size: .8125rem;
|
|
}
|
|
.hd-helpdesk-surface .hd-btn-blue,
|
|
.hd-btn-blue { background: #2563eb !important; }
|
|
.hd-helpdesk-surface .hd-btn-blue:hover,
|
|
.hd-btn-blue:hover { background: #1d4ed8 !important; }
|
|
.hd-helpdesk-surface .hd-btn-green,
|
|
.hd-btn-green { background: #16a34a !important; }
|
|
.hd-helpdesk-surface .hd-btn-green:hover,
|
|
.hd-btn-green:hover { background: #15803d !important; }
|
|
.hd-helpdesk-surface .hd-btn-amber,
|
|
.hd-btn-amber { background: #f59e0b !important; }
|
|
.hd-helpdesk-surface .hd-btn-amber:hover,
|
|
.hd-btn-amber:hover { background: #d97706 !important; }
|
|
.hd-helpdesk-surface .hd-btn-red,
|
|
.hd-btn-red { background: #dc2626 !important; }
|
|
.hd-helpdesk-surface .hd-btn-red:hover,
|
|
.hd-btn-red:hover { background: #b91c1c !important; }
|
|
.hd-helpdesk-surface .hd-btn-violet,
|
|
.hd-btn-violet { background: #7c3aed !important; }
|
|
.hd-helpdesk-surface .hd-btn-violet:hover,
|
|
.hd-btn-violet:hover { background: #6d28d9 !important; }
|
|
|
|
.hd-helpdesk-surface button[type="submit"],
|
|
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
|
|
background: #16a34a !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="reset"],
|
|
.hd-helpdesk-surface button[wire\:target^="reset"] {
|
|
background: #f59e0b !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="edit"],
|
|
.hd-helpdesk-surface button[wire\:target^="edit"] {
|
|
background: #2563eb !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="delete"],
|
|
.hd-helpdesk-surface button[wire\:target^="delete"] {
|
|
background: #dc2626 !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-select-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 18rem;
|
|
}
|
|
.hd-select-wrap::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1rem;
|
|
width: .55rem;
|
|
height: .55rem;
|
|
content: "";
|
|
pointer-events: none;
|
|
border-right: 2px solid #93c5fd;
|
|
border-bottom: 2px solid #93c5fd;
|
|
transform: translateY(-65%) rotate(45deg);
|
|
}
|
|
.hd-select {
|
|
width: 100%;
|
|
min-height: 2.75rem;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
border-radius: .9rem;
|
|
border: 1px solid rgba(96, 165, 250, .38) !important;
|
|
background: linear-gradient(135deg, #030712 0%, #111827 54%, #0f172a 100%) !important;
|
|
color: #f8fafc !important;
|
|
padding: .62rem 2.45rem .62rem .9rem;
|
|
font-weight: 800;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
|
|
}
|
|
.hd-select option {
|
|
background: #020617 !important;
|
|
color: #f8fafc !important;
|
|
}
|
|
.hd-select:focus {
|
|
border-color: #60a5fa !important;
|
|
box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
|
|
}
|
|
.hd-ticket-board-select-wrap {
|
|
position: relative;
|
|
max-width: 12.5rem;
|
|
}
|
|
.hd-ticket-board-select-wrap::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: .7rem;
|
|
width: .45rem;
|
|
height: .45rem;
|
|
content: "";
|
|
pointer-events: none;
|
|
border-right: 2px solid #86efac;
|
|
border-bottom: 2px solid #86efac;
|
|
transform: translateY(-65%) rotate(45deg);
|
|
}
|
|
.hd-ticket-board-select {
|
|
width: 100%;
|
|
min-height: 2.35rem;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
border-radius: .85rem;
|
|
border: 1px solid rgba(34,197,94,.35) !important;
|
|
background: linear-gradient(135deg, #052e16 0%, #064e3b 100%) !important;
|
|
color: #ecfdf5 !important;
|
|
padding: .48rem 2rem .48rem .75rem;
|
|
font-size: .75rem;
|
|
font-weight: 800;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.26);
|
|
}
|
|
.hd-ticket-board-select option {
|
|
background: #052e16 !important;
|
|
color: #ecfdf5 !important;
|
|
}
|
|
.hd-ticket-board-select:focus {
|
|
border-color: #86efac !important;
|
|
box-shadow: 0 0 0 3px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.08);
|
|
}
|
|
|
|
.helpdesk-ticket-form,
|
|
.helpdesk-ticket-form * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.helpdesk-ticket-form input,
|
|
.helpdesk-ticket-form textarea,
|
|
.helpdesk-ticket-form select,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
border-color: #3f3f46 !important;
|
|
caret-color: #f4f4f5 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.helpdesk-ticket-form input:disabled,
|
|
.helpdesk-ticket-form textarea:disabled,
|
|
.helpdesk-ticket-form select:disabled,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
|
|
.helpdesk-ticket-form [disabled],
|
|
.helpdesk-ticket-form [aria-disabled="true"] {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #a1a1aa !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.helpdesk-ticket-form input:-webkit-autofill,
|
|
.helpdesk-ticket-form input:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form input:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form select:-webkit-autofill,
|
|
.helpdesk-ticket-form select:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f4f4f5 !important;
|
|
box-shadow: 0 0 0 1000px #09090b inset !important;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn,
|
|
.hd-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
border-radius: .85rem;
|
|
padding: .62rem 1.05rem;
|
|
font-size: .875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 800;
|
|
color: #ffffff !important;
|
|
text-decoration: none !important;
|
|
border: 1px solid rgba(255,255,255,.14);
|
|
box-shadow: 0 12px 28px rgba(0,0,0,.22);
|
|
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
|
}
|
|
.hd-helpdesk-surface .hd-btn:hover,
|
|
.hd-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 16px 34px rgba(0,0,0,.30);
|
|
}
|
|
.hd-helpdesk-surface .hd-btn-sm,
|
|
.hd-btn-sm {
|
|
border-radius: .65rem;
|
|
padding: .42rem .78rem;
|
|
font-size: .8125rem;
|
|
}
|
|
.hd-helpdesk-surface .hd-btn-blue,
|
|
.hd-btn-blue { background: #2563eb !important; }
|
|
.hd-helpdesk-surface .hd-btn-blue:hover,
|
|
.hd-btn-blue:hover { background: #1d4ed8 !important; }
|
|
.hd-helpdesk-surface .hd-btn-green,
|
|
.hd-btn-green { background: #16a34a !important; }
|
|
.hd-helpdesk-surface .hd-btn-green:hover,
|
|
.hd-btn-green:hover { background: #15803d !important; }
|
|
.hd-helpdesk-surface .hd-btn-amber,
|
|
.hd-btn-amber { background: #f59e0b !important; }
|
|
.hd-helpdesk-surface .hd-btn-amber:hover,
|
|
.hd-btn-amber:hover { background: #d97706 !important; }
|
|
.hd-helpdesk-surface .hd-btn-red,
|
|
.hd-btn-red { background: #dc2626 !important; }
|
|
.hd-helpdesk-surface .hd-btn-red:hover,
|
|
.hd-btn-red:hover { background: #b91c1c !important; }
|
|
.hd-helpdesk-surface .hd-btn-violet,
|
|
.hd-btn-violet { background: #7c3aed !important; }
|
|
.hd-helpdesk-surface .hd-btn-violet:hover,
|
|
.hd-btn-violet:hover { background: #6d28d9 !important; }
|
|
|
|
.hd-helpdesk-surface button[type="submit"],
|
|
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
|
|
background: #16a34a !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="reset"],
|
|
.hd-helpdesk-surface button[wire\:target^="reset"] {
|
|
background: #f59e0b !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="edit"],
|
|
.hd-helpdesk-surface button[wire\:target^="edit"] {
|
|
background: #2563eb !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
.hd-helpdesk-surface button[wire\:click^="delete"],
|
|
.hd-helpdesk-surface button[wire\:target^="delete"] {
|
|
background: #dc2626 !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255,255,255,.14) !important;
|
|
}
|
|
|
|
.hd-select {
|
|
width: 100%;
|
|
min-height: 3.35rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid #3f3f46 !important;
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
padding: .78rem 3rem .78rem 1rem;
|
|
font-weight: 800;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
|
|
}
|
|
.hd-select:focus {
|
|
border-color: #60a5fa !important;
|
|
box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
|
|
}
|
|
|
|
.helpdesk-ticket-form,
|
|
.helpdesk-ticket-form * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.helpdesk-ticket-form input,
|
|
.helpdesk-ticket-form textarea,
|
|
.helpdesk-ticket-form select,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
border-color: #3f3f46 !important;
|
|
caret-color: #f4f4f5 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.helpdesk-ticket-form input:disabled,
|
|
.helpdesk-ticket-form textarea:disabled,
|
|
.helpdesk-ticket-form select:disabled,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
|
|
.helpdesk-ticket-form [disabled],
|
|
.helpdesk-ticket-form [aria-disabled="true"] {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #a1a1aa !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.helpdesk-ticket-form input:-webkit-autofill,
|
|
.helpdesk-ticket-form input:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form input:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form select:-webkit-autofill,
|
|
.helpdesk-ticket-form select:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f4f4f5 !important;
|
|
box-shadow: 0 0 0 1000px #09090b inset !important;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
|
|
/* Backend theme integration: keep Core Helpdesk surfaces full-width and dark. */
|
|
.hd-helpdesk-surface {
|
|
width: 100%;
|
|
}
|
|
|
|
.dark .hd-core-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
|
|
.dark .hd-core-settings textarea,
|
|
.dark .hd-core-settings select,
|
|
.dark .hd-core-settings [data-flux-control] {
|
|
background: #2b2b2b !important;
|
|
border-color: #4b4b4b !important;
|
|
color: #f4f4f5 !important;
|
|
}
|
|
|
|
.dark .hd-core-settings input::placeholder,
|
|
.dark .hd-core-settings textarea::placeholder {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
.dark .hd-core-settings [data-flux-field] label,
|
|
.dark .hd-core-settings [data-flux-label] {
|
|
color: #f4f4f5 !important;
|
|
}
|
|
|
|
/* Coloured Settings cards remain cards at all common desktop widths. */
|
|
.hd-core-settings > .grid.md\:grid-cols-4.xl\:grid-cols-7 > a {
|
|
min-height: 4.6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
Helpdesk mobile / tablet responsive layer
|
|
Keeps the Core desktop presentation while making every Helpdesk screen
|
|
usable on touch devices and narrow viewports.
|
|
========================================================================== */
|
|
|
|
.hd-mobile-header {
|
|
min-height: 3.75rem;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.hd-helpdesk-surface {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface > * {
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
html,
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.hd-helpdesk-surface,
|
|
.hd-helpdesk-surface.hd-mobile-ready {
|
|
width: 100%;
|
|
max-width: 100% !important;
|
|
padding-left: .75rem;
|
|
padding-right: .75rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Hero/page headers */
|
|
.hd-helpdesk-surface .rounded-3xl {
|
|
border-radius: 1.15rem;
|
|
}
|
|
|
|
.hd-helpdesk-surface .bg-gradient-to-br {
|
|
padding: 1.1rem !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .bg-gradient-to-br h1 {
|
|
font-size: 1.65rem !important;
|
|
line-height: 1.15 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .bg-gradient-to-br p {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* All action rows become thumb-friendly full-width grids. */
|
|
.hd-helpdesk-surface .hd-btn {
|
|
min-height: 2.75rem;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding-inline: .9rem;
|
|
}
|
|
|
|
.hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
width: 100%;
|
|
gap: .55rem !important;
|
|
}
|
|
|
|
/* Dashboard metrics */
|
|
.hd-helpdesk-surface .grid.md\:grid-cols-2,
|
|
.hd-helpdesk-surface .grid.lg\:grid-cols-4,
|
|
.hd-helpdesk-surface .grid.xl\:grid-cols-4 {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Settings cards: two compact coloured cards per row, one on very small phones. */
|
|
.hd-core-settings > .grid,
|
|
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
|
gap: .55rem !important;
|
|
}
|
|
|
|
.hd-core-settings > .grid > a,
|
|
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a {
|
|
min-width: 0;
|
|
min-height: 4.4rem;
|
|
padding: .75rem !important;
|
|
border-radius: .8rem !important;
|
|
}
|
|
|
|
.hd-core-settings > .grid > a .text-2xl,
|
|
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a .text-2xl {
|
|
font-size: 1.25rem !important;
|
|
}
|
|
|
|
/* Configuration forms */
|
|
.hd-core-settings form .grid,
|
|
.hd-helpdesk-surface form .grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
.hd-core-settings input,
|
|
.hd-core-settings select,
|
|
.hd-core-settings textarea,
|
|
.hd-helpdesk-surface input,
|
|
.hd-helpdesk-surface select,
|
|
.hd-helpdesk-surface textarea {
|
|
min-height: 2.8rem;
|
|
font-size: 16px !important; /* prevents iOS input zoom */
|
|
}
|
|
|
|
.hd-helpdesk-surface textarea {
|
|
min-height: 8rem;
|
|
}
|
|
|
|
/* Search/filter bars */
|
|
.hd-helpdesk-surface .grid.md\:grid-cols-4,
|
|
.hd-helpdesk-surface .grid.lg\:grid-cols-4,
|
|
.hd-helpdesk-surface .grid.xl\:grid-cols-4 {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Tables remain usable rather than crushing columns. */
|
|
.hd-helpdesk-surface .overflow-x-auto,
|
|
.hd-core-settings .overflow-x-auto {
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.hd-helpdesk-surface table,
|
|
.hd-core-settings table {
|
|
min-width: 760px;
|
|
}
|
|
|
|
.hd-helpdesk-surface th,
|
|
.hd-helpdesk-surface td,
|
|
.hd-core-settings th,
|
|
.hd-core-settings td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Ticket list table gets a slightly smaller minimum than config tables. */
|
|
.hd-helpdesk-surface[dusk="helpdesk-ticket-index"] table {
|
|
min-width: 680px;
|
|
}
|
|
|
|
/* Action button groups wrap instead of overflowing. */
|
|
.hd-helpdesk-surface td .flex,
|
|
.hd-core-settings td .flex {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Ticket show page */
|
|
.hd-helpdesk-surface .xl\:grid-cols-\[minmax\(0\,1fr\)_20rem\],
|
|
.hd-helpdesk-surface .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\] {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Attachments/code blocks/content */
|
|
.hd-helpdesk-surface pre,
|
|
.hd-helpdesk-surface code,
|
|
.hd-helpdesk-surface .prose {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Kanban: touch-friendly horizontal lanes with scroll snapping. */
|
|
[data-helpdesk-kanban-board] {
|
|
display: flex !important;
|
|
gap: .75rem !important;
|
|
overflow-x: auto !important;
|
|
overscroll-behavior-inline: contain;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-padding-left: .75rem;
|
|
padding-bottom: 1rem !important;
|
|
margin-inline: -.75rem;
|
|
padding-inline: .75rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
[data-helpdesk-kanban-board] > section {
|
|
width: min(88vw, 330px) !important;
|
|
min-width: min(88vw, 330px) !important;
|
|
min-height: calc(100dvh - 16rem) !important;
|
|
scroll-snap-align: start;
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
[data-helpdesk-kanban-column] {
|
|
min-height: 24rem !important;
|
|
}
|
|
|
|
[data-helpdesk-kanban-ticket] {
|
|
cursor: default !important;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.hd-kanban-mobile-move {
|
|
display: block;
|
|
}
|
|
|
|
/* Board selector */
|
|
.hd-select-wrap,
|
|
.hd-ticket-board-select-wrap {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Modal/dialog safety */
|
|
[role="dialog"],
|
|
[data-flux-modal] {
|
|
max-width: calc(100vw - 1.5rem) !important;
|
|
max-height: calc(100dvh - 1.5rem) !important;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 479px) {
|
|
.hd-helpdesk-surface,
|
|
.hd-helpdesk-surface.hd-mobile-ready {
|
|
padding-left: .55rem;
|
|
padding-right: .55rem;
|
|
}
|
|
|
|
.hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hd-core-settings > .grid,
|
|
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
[data-helpdesk-kanban-board] > section {
|
|
width: 91vw !important;
|
|
min-width: 91vw !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .text-3xl,
|
|
.hd-helpdesk-surface .text-4xl {
|
|
font-size: 1.55rem !important;
|
|
}
|
|
}
|
|
|
|
/* Touch-only devices: rely on mobile status selector instead of requiring DnD. */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
[data-helpdesk-kanban-ticket] {
|
|
-webkit-user-drag: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.hd-kanban-mobile-move {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* ===== Application shell ================================================= */
|
|
:root { --hd-sidebar-width: 284px; --hd-topbar-height: 72px; }
|
|
.hd-app-body { margin:0; min-height:100vh; background:#0b0e13; color:#e5e7eb; overflow-x:hidden; }
|
|
.hd-app-shell { min-height:100vh; }
|
|
.hd-topbar { position:fixed; inset:0 0 auto 0; height:var(--hd-topbar-height); z-index:70; display:grid; grid-template-columns:var(--hd-sidebar-width) minmax(0,1fr); background:linear-gradient(90deg,#10141b,#171d27); border-bottom:1px solid #2a303b; box-shadow:0 8px 24px rgba(0,0,0,.16); }
|
|
.hd-topbar-brand { min-width:0; display:flex; align-items:center; gap:14px; padding:0 18px; border-right:1px solid #29303a; }
|
|
.hd-brand-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; text-transform:uppercase; letter-spacing:-.02em; font-size:1.18rem; font-weight:850; }
|
|
.hd-topbar-main { min-width:0; display:flex; align-items:center; gap:16px; padding:0 24px; }
|
|
.hd-topbar-spacer { flex:1; }
|
|
.hd-icon-button { display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:10px; color:#aab2c0; border:1px solid transparent; background:transparent; }
|
|
.hd-icon-button:hover { color:#fff; background:#232a35; border-color:#343d4a; }
|
|
.hd-mobile-menu-button { display:none; }
|
|
.hd-top-search { width:min(420px,40vw); height:40px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid #303845; border-radius:11px; background:#10151d; color:#8e98a8; }
|
|
.hd-top-search input { width:100%; border:0!important; outline:0!important; background:transparent!important; color:#e5e7eb!important; box-shadow:none!important; min-height:auto!important; }
|
|
.hd-account-button { display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:12px; background:transparent; border:1px solid transparent; color:#fff; }
|
|
.hd-account-button:hover { background:#202732; border-color:#333c49; }
|
|
.hd-account-copy { display:grid; text-align:left; line-height:1.15; }
|
|
.hd-account-copy strong { font-size:.9rem; }
|
|
.hd-account-copy small { margin-top:3px; color:#9aa4b3; font-size:.72rem; }
|
|
.hd-user-avatar { display:inline-flex; width:38px; height:38px; flex:0 0 38px; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(145deg,#3a4351,#252c36); border:1px solid #505a68; color:#fff; font-weight:800; }
|
|
.hd-shell-sidebar { position:fixed; z-index:60; top:var(--hd-topbar-height); left:0; bottom:0; width:var(--hd-sidebar-width); background:linear-gradient(180deg,#151920,#11151b); border-right:1px solid #2d3440; transition:width .08s linear,transform .25s ease; }
|
|
.hd-shell-nav { height:100%; overflow-y:auto; padding:22px 16px 30px; scrollbar-width:thin; }
|
|
.hd-nav-section + .hd-nav-section { margin-top:24px; }
|
|
.hd-nav-heading { margin:0 10px 9px; color:#7f8998; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
|
|
.hd-nav-link { display:flex; align-items:center; gap:12px; min-height:44px; margin:3px 0; padding:0 12px; border-radius:9px; color:#b9c0cb; font-size:.9rem; font-weight:560; transition:.16s ease; }
|
|
.hd-nav-link i { width:18px; text-align:center; color:#8892a2; }
|
|
.hd-nav-link:hover { background:#1d242e; color:#fff; }
|
|
.hd-nav-link.is-active { background:linear-gradient(90deg,#242c38,#1e2631); color:#fff; box-shadow:inset 3px 0 #ef4444; }
|
|
.hd-nav-link.is-active i { color:#fff; }
|
|
.hd-sidebar-resizer { position:absolute; z-index:4; top:0; right:-5px; width:10px; height:100%; cursor:col-resize; display:flex; align-items:center; justify-content:center; }
|
|
.hd-sidebar-resizer span { width:2px; height:42px; opacity:0; border-radius:99px; background:#64748b; transition:.15s; }
|
|
.hd-sidebar-resizer:hover span,.hd-sidebar-resizing .hd-sidebar-resizer span { opacity:1; }
|
|
.hd-sidebar-backdrop { display:none; }
|
|
.hd-shell-main { min-height:100vh; margin-left:var(--hd-sidebar-width); padding:calc(var(--hd-topbar-height) + 28px) 30px 34px; background:radial-gradient(circle at 75% 0,rgba(37,99,235,.07),transparent 35%),#0b0e13; transition:margin-left .08s linear; }
|
|
.hd-sidebar-resizing,.hd-sidebar-resizing * { cursor:col-resize!important; user-select:none!important; }
|
|
|
|
|
|
/* Consistent application icons */
|
|
.hd-svg-icon { width:20px; height:20px; flex:0 0 20px; display:block; fill:currentColor; }
|
|
.hd-icon-outline { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
|
|
.hd-range-select .hd-svg-icon { width:19px; height:19px; flex-basis:19px; color:#94a3b8; }
|
|
.hd-metric-icon .hd-svg-icon { width:25px; height:25px; flex-basis:25px; }
|
|
|
|
/* ===== Dashboard ========================================================= */
|
|
.hd-dashboard { max-width:1600px; margin:0 auto; }
|
|
.hd-dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
|
|
.hd-dashboard-heading h1 { margin:0; font-size:2rem; line-height:1; color:#fff; font-weight:850; letter-spacing:-.03em; }
|
|
.hd-dashboard-heading p { margin:7px 0 0; color:#9ca7b8; }
|
|
.hd-range-select { min-width:220px; display:flex; align-items:center; gap:9px; border:1px solid #303846; border-radius:10px; padding:0 12px; background:#151a22; color:#c8cfda; }
|
|
.hd-range-select select { flex:1; min-height:44px; border:0!important; background:transparent!important; color:#e5e7eb!important; outline:0; }
|
|
.hd-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
|
|
.hd-metric-card { min-height:132px; display:flex; align-items:flex-start; gap:15px; padding:20px; border:1px solid #303845; border-radius:12px; background:linear-gradient(145deg,#1a202a,#151a22); box-shadow:0 8px 20px rgba(0,0,0,.16); }
|
|
.hd-metric-icon { width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:1.35rem; }
|
|
.hd-metric-card div { display:grid; gap:3px; }
|
|
.hd-metric-card small { color:#aeb7c5; font-size:.9rem; }
|
|
.hd-metric-card strong { color:#fff; font-size:2rem; line-height:1.1; }
|
|
.hd-metric-card em { color:#8290a2; font-size:.72rem; font-style:normal; }
|
|
.hd-metric-blue .hd-metric-icon{background:#18365f;color:#60a5fa}.hd-metric-green .hd-metric-icon{background:#123f32;color:#6ee7b7}.hd-metric-amber .hd-metric-icon{background:#4a3518;color:#fbbf24}.hd-metric-red .hd-metric-icon{background:#4b2226;color:#f87171}
|
|
.hd-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(340px,.75fr); gap:16px; }
|
|
.hd-dashboard-card { border:1px solid #303845; border-radius:12px; background:linear-gradient(145deg,#171c25,#131820); overflow:hidden; }
|
|
.hd-dashboard-card>header { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px; border-bottom:1px solid #2b3340; }
|
|
.hd-dashboard-card>header h2 { margin:0; color:#fff; font-size:1rem; font-weight:750; }.hd-dashboard-card>header span,.hd-dashboard-card>header a{color:#a8b1be;font-size:.78rem}.hd-dashboard-card>header a{padding:7px 10px;border:1px solid #3b4451;border-radius:8px}.hd-dashboard-card>header a:hover{color:#fff;background:#242c37}
|
|
.hd-chart-legend { display:flex; gap:18px; padding:15px 20px 0; color:#a7b0bd; font-size:.74rem; }.hd-chart-legend span{display:flex;align-items:center;gap:7px}.hd-chart-legend b{width:9px;height:9px;border-radius:50%}
|
|
.hd-line-chart { height:230px; padding:14px 20px 0; }.hd-line-chart svg{width:100%;height:100%;overflow:visible}.hd-chart-grid-lines line{stroke:#2d3541;stroke-width:.35}.hd-chart-line{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}.hd-chart-line-blue{stroke:#3b82f6}.hd-chart-line-green{stroke:#22c55e}.hd-chart-labels{display:flex;justify-content:space-between;gap:5px;padding:0 20px 17px;color:#8f9aaa;font-size:.68rem;overflow:hidden}
|
|
.hd-priority-body { display:grid; grid-template-columns:170px 1fr; gap:20px; align-items:center; min-height:310px; padding:22px; }.hd-donut{width:150px;height:150px;margin:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.hd-donut:after{content:"";position:absolute;inset:34px;border-radius:50%;background:#171c25}.hd-donut span{position:relative;z-index:1;font-weight:800;font-size:1.25rem;color:#fff}.hd-priority-legend{display:grid;gap:14px}.hd-priority-legend>div{display:flex;justify-content:space-between;gap:12px;color:#b4bdca;font-size:.76rem}.hd-priority-legend span{display:flex;align-items:center;gap:8px}.hd-priority-legend b{width:10px;height:10px;border-radius:50%}.hd-priority-legend strong{color:#e5e7eb}
|
|
.hd-latest-card { min-height:300px; }.hd-latest-list>a{display:grid;grid-template-columns:72px minmax(0,1fr) 88px 94px;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #29313c;color:#dbe2eb}.hd-latest-list>a:hover{background:#1b222c}.hd-latest-list>a:last-child{border-bottom:0}.hd-latest-list div{min-width:0;display:grid}.hd-latest-list strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.86rem}.hd-latest-list small,.hd-latest-list time{color:#8490a1;font-size:.68rem}.hd-priority-mini,.hd-status-mini{justify-self:start;padding:4px 8px;border-radius:6px;background:#423027;color:#fcd9b1;font-size:.61rem;font-weight:750;text-transform:uppercase}.hd-status-mini{background:#1d355b;color:#93c5fd;text-transform:none}
|
|
.hd-requester-list { padding:8px 18px 16px; }.hd-requester-list>div{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:58px;border-bottom:1px solid #29313c}.hd-requester-list>div:last-child{border-bottom:0}.hd-requester-list strong{font-size:.82rem}.hd-requester-list em{color:#9aa5b5;font-size:.72rem;font-style:normal}.hd-empty{padding:28px;text-align:center;color:#7f8a99}
|
|
|
|
/* ===== Common admin/user module ========================================= */
|
|
.hd-page-shell{max-width:1500px;margin:0 auto}.hd-page-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 26px;border:1px solid #2d3849;border-radius:14px;background:linear-gradient(115deg,#091126,#152952);box-shadow:inset 0 1px rgba(255,255,255,.03)}.hd-page-hero h1{margin:3px 0 0;color:#fff;font-size:1.8rem;font-weight:850}.hd-page-hero p{margin:6px 0 0;color:#aebbd0}.hd-eyebrow{color:#b7ccf7;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em}.hd-panel{border:1px solid #343b44;border-radius:13px;background:#16191d;overflow:hidden}.hd-toolbar{display:flex;gap:12px;padding:16px;border-bottom:1px solid #30363e}.hd-search-field{flex:1;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid #454b54;border-radius:9px;background:#272b30;color:#9da5b0}.hd-search-field input{width:100%;min-height:42px;border:0!important;background:transparent!important;color:#fff!important;outline:0!important;box-shadow:none!important}.hd-table-wrap{overflow:auto}.hd-table{width:100%;min-width:760px;border-collapse:collapse}.hd-table th,.hd-table td{padding:14px 16px;border-bottom:1px solid #30353b;text-align:left}.hd-table th{color:#aeb5bf;background:#202326;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.hd-table td{color:#e1e5ea;font-size:.82rem}.hd-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid #404854;border-radius:8px;background:#242a32;color:#e7ebf0;font-weight:700;font-size:.78rem}.hd-action:hover{filter:brightness(1.1)}.hd-action-sm{min-height:32px;padding:0 10px}.hd-action-blue{background:#2563eb;border-color:#3b82f6;color:#fff}.hd-action-green{background:#16a34a;border-color:#22c55e;color:#fff}.hd-action-red{background:#dc2626;border-color:#ef4444;color:#fff}.hd-alert{padding:12px 14px;border-radius:9px;border:1px solid}.hd-alert-success{background:#0d3225;border-color:#1f7a50;color:#86efac}.hd-alert-danger{background:#3e171b;border-color:#8d2f36;color:#fca5a5}.hd-role-pill{padding:5px 8px;border-radius:99px;background:#313844;color:#cbd5e1;font-size:.67rem;font-weight:750}.hd-role-admin{background:#422258;color:#e9d5ff}.hd-role-agent{background:#173d58;color:#bae6fd}.hd-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hd-field{display:grid;gap:7px}.hd-field span{color:#cbd1da;font-size:.75rem;font-weight:650}.hd-field input{min-height:44px;border:1px solid #474d56!important;border-radius:8px!important;background:#292d32!important;color:#fff!important;padding:0 12px!important}.hd-role-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.hd-role-options label{display:flex;gap:11px;align-items:flex-start;padding:15px;border:1px solid #3d444d;border-radius:10px;background:#1e2227}.hd-role-options input{margin-top:3px}.hd-role-options span{display:grid}.hd-role-options small{margin-top:4px;color:#8f99a7;font-size:.7rem}.hd-role-card{display:grid;gap:9px;min-height:210px;padding:24px;border:1px solid #343d49;border-radius:13px;background:linear-gradient(145deg,#191e26,#14181f)}.hd-role-card i{font-size:1.6rem;color:#60a5fa}.hd-role-card h2{margin:0;color:#fff;font-size:1rem}.hd-role-card strong{font-size:2.1rem;color:#fff}.hd-role-card p{margin:0;color:#96a2b2;font-size:.78rem}.hd-role-card-admin{border-color:#6d3a89;background:linear-gradient(145deg,#25152e,#17171d)}.hd-role-card-admin i{color:#c084fc}.hd-role-card-agent{border-color:#255c7d;background:linear-gradient(145deg,#132633,#171b20)}.hd-role-card-agent i{color:#38bdf8}
|
|
|
|
/* ===== Kanban drag quality ============================================== */
|
|
.hd-kanban-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:27px;border:1px solid #3f4854;border-radius:7px;background:#232933;color:#9ba7b5;cursor:grab;user-select:none}.hd-kanban-drag-handle:hover{color:#fff;background:#2d3541}.hd-kanban-drag-handle:active{cursor:grabbing}.hd-is-dragging{opacity:.42!important;transform:scale(.985)!important}.hd-is-saving{opacity:.64;pointer-events:none}.helpdesk-kanban-column[data-drag-over="true"]{outline:2px dashed #3b82f6;outline-offset:-8px;background:rgba(37,99,235,.08)!important}
|
|
|
|
@media(max-width:1100px){.hd-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hd-dashboard-grid{grid-template-columns:1fr}.hd-priority-body{min-height:240px}.hd-top-search{display:none}}
|
|
@media(max-width:1023px){:root{--hd-sidebar-width:300px}.hd-topbar{display:flex}.hd-topbar-brand{width:auto;border-right:0}.hd-topbar-main{flex:1;padding-left:8px}.hd-mobile-menu-button{display:inline-flex}.hd-shell-sidebar{transform:translateX(-102%);width:min(84vw,320px);box-shadow:15px 0 40px rgba(0,0,0,.35)}.hd-sidebar-open .hd-shell-sidebar{transform:translateX(0)}.hd-sidebar-resizer{display:none}.hd-shell-main{margin-left:0;padding:calc(var(--hd-topbar-height) + 20px) 18px 25px}.hd-sidebar-backdrop{position:fixed;z-index:55;inset:var(--hd-topbar-height) 0 0 0;background:rgba(0,0,0,.52);border:0}.hd-sidebar-open .hd-sidebar-backdrop{display:block}}
|
|
@media(max-width:700px){.hd-account-copy{display:none}.hd-topbar-main{padding-right:10px}.hd-topbar-brand{padding-left:10px;padding-right:8px}.hd-brand-name{font-size:.95rem}.hd-shell-main{padding-left:10px;padding-right:10px}.hd-dashboard-heading{align-items:flex-start;flex-direction:column}.hd-range-select{width:100%}.hd-metric-grid{grid-template-columns:1fr}.hd-dashboard-card{border-radius:10px}.hd-priority-body{grid-template-columns:1fr}.hd-latest-list>a{grid-template-columns:65px minmax(0,1fr);gap:10px}.hd-latest-list time,.hd-latest-list .hd-status-mini{display:none}.hd-page-hero{align-items:flex-start;flex-direction:column;padding:18px}.hd-page-hero .hd-action{width:100%}.hd-toolbar{flex-direction:column}.hd-form-grid,.hd-role-options{grid-template-columns:1fr}.hd-action{min-height:44px}}
|
|
|
|
|
|
/* Dark account menu + Gravatar */
|
|
.hd-account-menu {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.hd-account-menu > summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.hd-account-menu > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.hd-account-menu[open] .hd-account-button {
|
|
background: #202732;
|
|
border-color: #3a4554;
|
|
}
|
|
|
|
.hd-account-menu[open] .hd-account-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.hd-account-chevron {
|
|
font-size: .75rem;
|
|
transition: transform .16s ease;
|
|
}
|
|
|
|
.hd-user-avatar--gravatar {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hd-user-avatar--gravatar img {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: inherit;
|
|
object-fit: cover;
|
|
background: #252c36;
|
|
}
|
|
|
|
.hd-user-avatar-fallback {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hd-user-avatar--large {
|
|
width: 46px;
|
|
height: 46px;
|
|
flex-basis: 46px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.hd-account-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
z-index: 120;
|
|
width: min(310px, calc(100vw - 24px));
|
|
overflow: hidden;
|
|
border: 1px solid #333d4a;
|
|
border-radius: 14px;
|
|
background:
|
|
linear-gradient(180deg, rgba(28, 34, 44, .98), rgba(18, 23, 30, .99));
|
|
color: #e5e7eb;
|
|
box-shadow:
|
|
0 24px 60px rgba(0, 0, 0, .48),
|
|
0 8px 22px rgba(0, 0, 0, .28),
|
|
inset 0 1px 0 rgba(255, 255, 255, .035);
|
|
}
|
|
|
|
.hd-account-dropdown-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background: rgba(255, 255, 255, .018);
|
|
}
|
|
|
|
.hd-account-dropdown-copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.hd-account-dropdown-copy strong {
|
|
overflow: hidden;
|
|
color: #f8fafc;
|
|
font-size: .95rem;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hd-account-dropdown-copy span {
|
|
overflow: hidden;
|
|
color: #9ca3af;
|
|
font-size: .78rem;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hd-account-dropdown-copy small {
|
|
margin-top: 2px;
|
|
color: #60a5fa;
|
|
font-size: .7rem;
|
|
font-weight: 700;
|
|
letter-spacing: .055em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hd-account-dropdown-divider {
|
|
height: 1px;
|
|
background: #303846;
|
|
}
|
|
|
|
.hd-account-dropdown-nav {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.hd-account-dropdown-nav a,
|
|
.hd-account-logout {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 9px 11px;
|
|
border: 1px solid transparent;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: #d7dce4;
|
|
font: inherit;
|
|
font-size: .86rem;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition:
|
|
background .14s ease,
|
|
border-color .14s ease,
|
|
color .14s ease;
|
|
}
|
|
|
|
.hd-account-dropdown-nav a i,
|
|
.hd-account-logout i {
|
|
width: 17px;
|
|
color: #8fa0b5;
|
|
text-align: center;
|
|
}
|
|
|
|
.hd-account-dropdown-nav a:hover,
|
|
.hd-account-dropdown-nav a:focus-visible {
|
|
border-color: #35465c;
|
|
background: #263244;
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.hd-account-dropdown-nav a:hover i {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.hd-account-dropdown form {
|
|
padding: 8px;
|
|
}
|
|
|
|
.hd-account-logout:hover,
|
|
.hd-account-logout:focus-visible {
|
|
border-color: rgba(239, 68, 68, .32);
|
|
background: rgba(127, 29, 29, .24);
|
|
color: #fecaca;
|
|
outline: none;
|
|
}
|
|
|
|
.hd-account-logout:hover i,
|
|
.hd-account-logout:focus-visible i {
|
|
color: #f87171;
|
|
}
|
|
|
|
.hd-account-menu--legacy .hd-account-dropdown {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.hd-account-dropdown {
|
|
position: fixed;
|
|
top: calc(var(--hd-topbar-height) - 2px);
|
|
right: 10px;
|
|
width: min(310px, calc(100vw - 20px));
|
|
}
|
|
}
|
|
|
|
|
|
/* Dark authentication + account settings controls */
|
|
:is(.hd-auth-surface, .hd-account-settings) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
|
:is(.hd-auth-surface, .hd-account-settings) textarea,
|
|
:is(.hd-auth-surface, .hd-account-settings) select,
|
|
:is(.hd-auth-surface, .hd-account-settings) [data-flux-input],
|
|
:is(.hd-auth-surface, .hd-account-settings) [data-flux-control],
|
|
:is(.hd-auth-surface, .hd-account-settings) [data-flux-field-control],
|
|
:is(.hd-auth-surface, .hd-account-settings) [data-flux-select] {
|
|
background: #252a31 !important;
|
|
border-color: #424a56 !important;
|
|
color: #f3f4f6 !important;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
|
|
}
|
|
|
|
:is(.hd-auth-surface, .hd-account-settings) input::placeholder,
|
|
:is(.hd-auth-surface, .hd-account-settings) textarea::placeholder {
|
|
color: #8f96a3 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
:is(.hd-auth-surface, .hd-account-settings) input:not([type="checkbox"]):not([type="radio"]):focus,
|
|
:is(.hd-auth-surface, .hd-account-settings) textarea:focus,
|
|
:is(.hd-auth-surface, .hd-account-settings) select:focus {
|
|
border-color: #3b82f6 !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 3px rgba(59,130,246,.16) !important;
|
|
}
|
|
|
|
.hd-account-settings,
|
|
.hd-account-settings label {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.hd-account-settings [data-flux-subheading],
|
|
.hd-account-settings [data-flux-text] {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
COMPLETE APPEARANCE SUPPORT
|
|
Flux owns the root .dark class through @fluxAppearance.
|
|
Light/System-light is therefore html:not(.dark).
|
|
============================================================ */
|
|
|
|
html {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html:not(.dark) .hd-app-body {
|
|
background: #f4f6f8 !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-topbar {
|
|
background: linear-gradient(90deg, #ffffff, #f8fafc) !important;
|
|
border-bottom-color: #d8dee7 !important;
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-topbar-brand {
|
|
border-right-color: #d8dee7 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-brand-name,
|
|
html:not(.dark) .hd-account-button,
|
|
html:not(.dark) .hd-account-copy strong {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-copy small,
|
|
html:not(.dark) .hd-top-search,
|
|
html:not(.dark) .hd-top-search i {
|
|
color: #667085 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-top-search {
|
|
background: #f8fafc !important;
|
|
border-color: #d8dee7 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-top-search input {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-shell-sidebar {
|
|
background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
|
|
border-right-color: #d8dee7 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-nav-heading {
|
|
color: #7a8492 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-nav-link {
|
|
color: #596579 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-nav-link i {
|
|
color: #7a8492 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-nav-link:hover {
|
|
background: #eef2f7 !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-nav-link.is-active {
|
|
background: linear-gradient(90deg, #e7edf6, #eef2f7) !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-nav-link.is-active i {
|
|
color: #2563eb !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-shell-main {
|
|
background:
|
|
radial-gradient(circle at 75% 0, rgba(37, 99, 235, .055), transparent 35%),
|
|
#f4f6f8 !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-menu[open] .hd-account-button,
|
|
html:not(.dark) .hd-account-button:hover {
|
|
background: #eef2f7 !important;
|
|
border-color: #d8dee7 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-dropdown {
|
|
background: #ffffff !important;
|
|
border-color: #d8dee7 !important;
|
|
color: #1f2937 !important;
|
|
box-shadow: 0 24px 60px rgba(15, 23, 42, .16) !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-dropdown-user {
|
|
background: #f8fafc !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-dropdown-copy strong,
|
|
html:not(.dark) .hd-account-dropdown-nav a,
|
|
html:not(.dark) .hd-account-logout {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-dropdown-copy span,
|
|
html:not(.dark) .hd-account-dropdown-copy small,
|
|
html:not(.dark) .hd-account-dropdown-nav a i,
|
|
html:not(.dark) .hd-account-logout i {
|
|
color: #667085 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-dropdown-divider {
|
|
background: #e2e8f0 !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-account-dropdown-nav a:hover,
|
|
html:not(.dark) .hd-account-dropdown-nav a:focus-visible {
|
|
background: #eef2f7 !important;
|
|
border-color: #d8dee7 !important;
|
|
}
|
|
|
|
/* Backend forms, settings and auth controls */
|
|
html:not(.dark) .hd-select,
|
|
html:not(.dark) .helpdesk-ticket-form input,
|
|
html:not(.dark) .helpdesk-ticket-form textarea,
|
|
html:not(.dark) .helpdesk-ticket-form select,
|
|
html:not(.dark) .hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
|
html:not(.dark) .hd-account-settings textarea,
|
|
html:not(.dark) .hd-account-settings select,
|
|
html:not(.dark) .hd-auth-surface input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
|
html:not(.dark) .hd-auth-surface textarea,
|
|
html:not(.dark) .hd-auth-surface select {
|
|
background: #ffffff !important;
|
|
background-color: #ffffff !important;
|
|
color: #1f2937 !important;
|
|
border-color: #c9d1dc !important;
|
|
caret-color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .helpdesk-ticket-form input:disabled,
|
|
html:not(.dark) .helpdesk-ticket-form textarea:disabled,
|
|
html:not(.dark) .helpdesk-ticket-form select:disabled {
|
|
background: #eef2f7 !important;
|
|
color: #667085 !important;
|
|
}
|
|
|
|
html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill,
|
|
html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill,
|
|
html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill {
|
|
-webkit-text-fill-color: #1f2937 !important;
|
|
box-shadow: 0 0 0 1000px #ffffff inset !important;
|
|
}
|
|
|
|
/* Select2 / popovers */
|
|
html:not(.dark) .select2-dropdown,
|
|
html:not(.dark) .flatpickr-calendar {
|
|
background: #ffffff !important;
|
|
color: #1f2937 !important;
|
|
border-color: #cfd6e1 !important;
|
|
}
|
|
|
|
html:not(.dark) .select2-container--default .select2-results__option {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
/* Catch legacy Helpdesk views that still contain dark-only utility classes. */
|
|
html:not(.dark) .bg-zinc-950,
|
|
html:not(.dark) .bg-zinc-950\/80,
|
|
html:not(.dark) .bg-zinc-950\/70,
|
|
html:not(.dark) .bg-zinc-950\/60,
|
|
html:not(.dark) .bg-zinc-950\/55,
|
|
html:not(.dark) .bg-zinc-900,
|
|
html:not(.dark) .bg-zinc-900\/80,
|
|
html:not(.dark) .bg-zinc-900\/70,
|
|
html:not(.dark) .bg-zinc-800 {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
html:not(.dark) .border-zinc-800,
|
|
html:not(.dark) .border-zinc-700,
|
|
html:not(.dark) .border-zinc-600 {
|
|
border-color: #d8dee7 !important;
|
|
}
|
|
|
|
html:not(.dark) .text-zinc-100,
|
|
html:not(.dark) .text-zinc-200 {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html:not(.dark) .text-zinc-300 {
|
|
color: #374151 !important;
|
|
}
|
|
|
|
html:not(.dark) .text-zinc-400,
|
|
html:not(.dark) .text-zinc-500 {
|
|
color: #667085 !important;
|
|
}
|
|
|
|
/* Do not wash out coloured action buttons/hero areas. */
|
|
html:not(.dark) .hd-btn,
|
|
html:not(.dark) [class*="bg-blue-"],
|
|
html:not(.dark) [class*="bg-green-"],
|
|
html:not(.dark) [class*="bg-emerald-"],
|
|
html:not(.dark) [class*="bg-red-"],
|
|
html:not(.dark) [class*="bg-amber-"],
|
|
html:not(.dark) [class*="bg-violet-"] {
|
|
/* their own utility/button colour remains authoritative */
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
Account appearance spacing + authentication control polish
|
|
============================================================ */
|
|
|
|
/* Flux segmented control keeps working, but the options no longer touch. */
|
|
.hd-account-settings .hd-appearance-group {
|
|
display: flex !important;
|
|
gap: 0.75rem !important;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.hd-account-settings .hd-appearance-group > * {
|
|
flex: 1 1 0 !important;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border-radius: 0.85rem !important;
|
|
}
|
|
|
|
/* Dark authentication actions: never allow Flux's light button surface here. */
|
|
html.dark .hd-auth-surface .hd-auth-primary,
|
|
html.dark .hd-auth-surface form .hd-auth-primary,
|
|
html.dark .hd-auth-surface .hd-auth-passkey button,
|
|
html.dark .hd-auth-surface .hd-auth-passkey [role="button"] {
|
|
background: linear-gradient(180deg, #3172f5 0%, #2563eb 100%) !important;
|
|
background-color: #2563eb !important;
|
|
border: 1px solid #4380f5 !important;
|
|
color: #ffffff !important;
|
|
-webkit-text-fill-color: #ffffff !important;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,.16),
|
|
0 8px 18px rgba(37,99,235,.18) !important;
|
|
}
|
|
|
|
html.dark .hd-auth-surface .hd-auth-primary:hover,
|
|
html.dark .hd-auth-surface .hd-auth-primary:focus-visible,
|
|
html.dark .hd-auth-surface .hd-auth-passkey button:hover,
|
|
html.dark .hd-auth-surface .hd-auth-passkey button:focus-visible,
|
|
html.dark .hd-auth-surface .hd-auth-passkey [role="button"]:hover,
|
|
html.dark .hd-auth-surface .hd-auth-passkey [role="button"]:focus-visible {
|
|
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
|
|
border-color: #60a5fa !important;
|
|
color: #ffffff !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Keep the passkey separator itself neutral/dark. */
|
|
html.dark .hd-auth-surface .hd-auth-passkey {
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
html.dark .hd-auth-surface .hd-auth-passkey hr {
|
|
border-color: #3f4652 !important;
|
|
}
|
|
|
|
/* Remember-me checkbox: dark surface with a blue checked state. */
|
|
html.dark .hd-auth-surface .hd-auth-checkbox input[type="checkbox"] {
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
width: 1.05rem !important;
|
|
height: 1.05rem !important;
|
|
display: inline-grid !important;
|
|
place-content: center !important;
|
|
border: 1px solid #596273 !important;
|
|
border-radius: 0.28rem !important;
|
|
background: #252a31 !important;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
html.dark .hd-auth-surface .hd-auth-checkbox input[type="checkbox"]::before {
|
|
content: "";
|
|
width: 0.52rem;
|
|
height: 0.3rem;
|
|
border-left: 2px solid #fff;
|
|
border-bottom: 2px solid #fff;
|
|
transform: rotate(-45deg) scale(0);
|
|
transform-origin: center;
|
|
transition: transform .1s ease;
|
|
}
|
|
|
|
html.dark .hd-auth-surface .hd-auth-checkbox input[type="checkbox"]:checked {
|
|
background: #2563eb !important;
|
|
border-color: #60a5fa !important;
|
|
}
|
|
|
|
html.dark .hd-auth-surface .hd-auth-checkbox input[type="checkbox"]:checked::before {
|
|
transform: rotate(-45deg) scale(1);
|
|
}
|
|
|
|
html.dark .hd-auth-surface .hd-auth-checkbox label,
|
|
html.dark .hd-auth-surface .hd-auth-checkbox span {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
/* Light appearance gets deliberate white controls with readable dark text. */
|
|
html:not(.dark) .hd-auth-surface .hd-auth-primary,
|
|
html:not(.dark) .hd-auth-surface form .hd-auth-primary,
|
|
html:not(.dark) .hd-auth-surface .hd-auth-passkey button,
|
|
html:not(.dark) .hd-auth-surface .hd-auth-passkey [role="button"] {
|
|
background: linear-gradient(180deg, #3172f5 0%, #2563eb 100%) !important;
|
|
background-color: #2563eb !important;
|
|
border-color: #2563eb !important;
|
|
color: #ffffff !important;
|
|
-webkit-text-fill-color: #ffffff !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-auth-surface .hd-auth-checkbox input[type="checkbox"] {
|
|
accent-color: #2563eb;
|
|
}
|
|
|
|
/* Make auth form labels/links readable in dark mode too. */
|
|
html.dark .hd-auth-surface label,
|
|
html.dark .hd-auth-surface [data-flux-label] {
|
|
color: #f4f4f5 !important;
|
|
}
|
|
|
|
html.dark .hd-auth-surface a {
|
|
color: #bfdbfe;
|
|
}
|
|
|
|
html.dark .hd-auth-surface a:hover {
|
|
color: #dbeafe;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hd-account-settings .hd-appearance-group {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Legacy Safari / iOS 12 compatibility layer
|
|
Keep this at the end so it can provide safe fallbacks for the
|
|
modern Tailwind/Flux theme without changing current browsers.
|
|
============================================================ */
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
button,
|
|
a,
|
|
input,
|
|
select,
|
|
textarea {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
/* iOS 12 has no flex/grid gap support. These margins are harmless in
|
|
modern Safari/Chrome and are cancelled where native gap is available. */
|
|
@supports not (gap: 1rem) {
|
|
.hd-btn > * + *,
|
|
.hd-action > * + *,
|
|
.hd-nav-link > * + * { margin-left: .5rem; }
|
|
|
|
.hd-toolbar > * + *,
|
|
.hd-dashboard-heading > * + *,
|
|
.hd-page-hero > * + * { margin-left: .75rem; }
|
|
|
|
@media (max-width: 700px) {
|
|
.hd-toolbar > * + *,
|
|
.hd-dashboard-heading > * + *,
|
|
.hd-page-hero > * + * {
|
|
margin-left: 0;
|
|
margin-top: .75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Safari 12 fallback before min()/max()/clamp() support. */
|
|
@media (max-width: 1023px) {
|
|
.hd-shell-sidebar {
|
|
width: 84vw;
|
|
max-width: 320px;
|
|
}
|
|
}
|
|
|
|
/* Respect iPhone/iPad safe areas in standalone/full-screen Safari. */
|
|
@supports (padding: env(safe-area-inset-left)) {
|
|
.hd-topbar-brand { padding-left: calc(14px + env(safe-area-inset-left)); }
|
|
.hd-shell-sidebar { padding-left: env(safe-area-inset-left); }
|
|
.hd-shell-main {
|
|
padding-left: calc(30px + env(safe-area-inset-left));
|
|
padding-right: calc(30px + env(safe-area-inset-right));
|
|
padding-bottom: calc(34px + env(safe-area-inset-bottom));
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.hd-shell-main {
|
|
padding-left: calc(18px + env(safe-area-inset-left));
|
|
padding-right: calc(18px + env(safe-area-inset-right));
|
|
}
|
|
}
|
|
@media (max-width: 700px) {
|
|
.hd-shell-main {
|
|
padding-left: calc(10px + env(safe-area-inset-left));
|
|
padding-right: calc(10px + env(safe-area-inset-right));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Prevent iOS Safari zooming form controls on focus. */
|
|
@media (max-width: 1023px) {
|
|
input,
|
|
select,
|
|
textarea,
|
|
.helpdesk-ticket-form input,
|
|
.helpdesk-ticket-form select,
|
|
.helpdesk-ticket-form textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* Older WebKit needs explicit scrolling momentum on overflow panes. */
|
|
.hd-shell-nav,
|
|
.hd-shell-main,
|
|
.overflow-auto,
|
|
.overflow-y-auto,
|
|
.overflow-x-auto {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
|
|
/* ========================================================================
|
|
iOS 12 targeted corrections
|
|
======================================================================== */
|
|
|
|
/* Account button belongs at the extreme right of the header. */
|
|
.hd-topbar-main > .hd-account-menu {
|
|
margin-left: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.hd-topbar-main > .hd-topbar-spacer {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Account settings use plain layout primitives that Safari 12 handles. */
|
|
.hd-account-settings {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
.hd-account-settings-nav {
|
|
width: 220px;
|
|
flex: 0 0 220px;
|
|
margin-right: 40px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.hd-account-settings-nav a {
|
|
display: block;
|
|
padding: 9px 11px;
|
|
margin-bottom: 4px;
|
|
border-radius: 8px;
|
|
color: #aeb7c4;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
}
|
|
.hd-account-settings-nav a:hover,
|
|
.hd-account-settings-nav a.is-active {
|
|
background: #242b35;
|
|
color: #fff;
|
|
}
|
|
.hd-account-settings-content {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
align-self: stretch;
|
|
}
|
|
.hd-account-settings-form {
|
|
width: 100%;
|
|
max-width: 32rem;
|
|
margin-top: 20px;
|
|
}
|
|
html:not(.dark) .hd-account-settings-nav a { color: #4b5563; }
|
|
html:not(.dark) .hd-account-settings-nav a:hover,
|
|
html:not(.dark) .hd-account-settings-nav a.is-active { background: #e8eef7; color: #111827; }
|
|
|
|
/* Do not use :is() here: Safari 12 discards selectors containing it. */
|
|
.hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
|
.hd-account-settings textarea,
|
|
.hd-account-settings select,
|
|
.hd-account-settings [data-flux-input],
|
|
.hd-account-settings [data-flux-control],
|
|
.hd-account-settings [data-flux-field-control],
|
|
.hd-account-settings [data-flux-select] {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
}
|
|
html.dark .hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
|
html.dark .hd-account-settings textarea,
|
|
html.dark .hd-account-settings select,
|
|
html.dark .hd-account-settings [data-flux-input],
|
|
html.dark .hd-account-settings [data-flux-control],
|
|
html.dark .hd-account-settings [data-flux-field-control],
|
|
html.dark .hd-account-settings [data-flux-select] {
|
|
background: #252a31 !important;
|
|
border-color: #424a56 !important;
|
|
color: #f3f4f6 !important;
|
|
}
|
|
|
|
/* Reliable appearance control, independent of Flux segmented radio support. */
|
|
.hd-appearance-switch {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
padding: 4px;
|
|
border: 1px solid #3b4350;
|
|
border-radius: 10px;
|
|
background: #1d232c;
|
|
}
|
|
.hd-appearance-choice {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
flex: 1 1 0;
|
|
min-height: 40px;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: #b8c0cc;
|
|
font: inherit;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
}
|
|
.hd-appearance-choice + .hd-appearance-choice { margin-left: 4px; }
|
|
.hd-appearance-choice i { margin-right: 6px; }
|
|
.hd-appearance-choice.is-active { background: #2563eb; color: #fff; }
|
|
html:not(.dark) .hd-appearance-switch { border-color: #d5dbe4; background: #edf1f6; }
|
|
html:not(.dark) .hd-appearance-choice { color: #475569; }
|
|
html:not(.dark) .hd-appearance-choice.is-active { background: #fff; color: #111827; box-shadow: 0 1px 4px rgba(15,23,42,.15); }
|
|
|
|
/* Helpdesk Settings: explicit layout for old WebKit instead of relying on
|
|
Tailwind's generated modern selector/value set. */
|
|
.hd-ios12 .hd-core-settings { display: block !important; }
|
|
.hd-ios12 .hd-settings-hero {
|
|
display: block !important;
|
|
overflow: hidden !important;
|
|
border: 1px solid #d7dde5 !important;
|
|
border-radius: 14px !important;
|
|
background: #fff !important;
|
|
}
|
|
.hd-ios12.dark .hd-settings-hero { border-color: #353d48 !important; background: #151a21 !important; }
|
|
.hd-ios12 .hd-settings-hero-inner {
|
|
display: block !important;
|
|
padding: 20px !important;
|
|
background: #172033 !important;
|
|
color: #fff !important;
|
|
}
|
|
.hd-ios12 .hd-settings-section-grid {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
margin: 8px -4px 0 !important;
|
|
}
|
|
.hd-ios12 .hd-settings-section-card {
|
|
box-sizing: border-box !important;
|
|
display: block !important;
|
|
width: calc(25% - 8px) !important;
|
|
min-width: 150px !important;
|
|
min-height: 76px !important;
|
|
margin: 4px !important;
|
|
padding: 12px !important;
|
|
border-style: solid !important;
|
|
border-width: 1px !important;
|
|
border-radius: 10px !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.hd-ios12 .hd-core-settings form .grid {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
margin-left: -8px !important;
|
|
margin-right: -8px !important;
|
|
}
|
|
.hd-ios12 .hd-core-settings form .grid > * {
|
|
box-sizing: border-box !important;
|
|
flex: 1 1 260px !important;
|
|
min-width: 0 !important;
|
|
margin-left: 8px !important;
|
|
margin-right: 8px !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
.hd-ios12 .hd-core-settings button,
|
|
.hd-ios12 .hd-core-settings [role="button"] {
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.hd-account-settings { display: block; }
|
|
.hd-account-settings-nav {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #d8dee7;
|
|
}
|
|
html.dark .hd-account-settings-nav { border-bottom-color: #343c47; }
|
|
.hd-account-settings-nav a {
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
margin-bottom: 0;
|
|
}
|
|
.hd-account-settings-form { max-width: none; }
|
|
.hd-ios12 .hd-settings-section-card { width: calc(50% - 8px) !important; min-width: 0 !important; }
|
|
}
|
|
|
|
/* Legacy ticket table hover */
|
|
.legacy-tickets-table tbody tr {
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.legacy-tickets-table tbody tr:hover,
|
|
.legacy-tickets-table tbody tr:hover > td {
|
|
background-color: rgba(255, 255, 255, 0.035) !important;
|
|
color: inherit !important;
|
|
}
|
|
|
|
.legacy-tickets-table tbody tr:hover td,
|
|
.legacy-tickets-table tbody tr:hover td:not(:first-child) {
|
|
color: var(--hd-text-primary, #e5e7eb) !important;
|
|
}
|
|
|
|
.legacy-tickets-table tbody tr:hover a {
|
|
color: #3b82f6 !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
LIGHT APPEARANCE — COMPLETE MODULE SURFACE OVERRIDES
|
|
Keep semantic/action colours, but remove hard-coded dark chrome.
|
|
============================================================ */
|
|
html:not(.dark) .hd-page-hero {
|
|
background: linear-gradient(115deg,#ffffff,#eef4ff) !important;
|
|
border-color:#d8dee7 !important;
|
|
box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
|
|
}
|
|
html:not(.dark) .hd-page-hero h1 { color:#111827 !important; }
|
|
html:not(.dark) .hd-page-hero p { color:#667085 !important; }
|
|
html:not(.dark) .hd-eyebrow { color:#41658f !important; }
|
|
html:not(.dark) .hd-panel,
|
|
html:not(.dark) .helpdesk-kanban-column,
|
|
html:not(.dark) .hd-dashboard-card,
|
|
html:not(.dark) .hd-role-card {
|
|
background:#ffffff !important;
|
|
border-color:#d8dee7 !important;
|
|
color:#1f2937 !important;
|
|
}
|
|
html:not(.dark) .hd-toolbar,
|
|
html:not(.dark) .hd-dashboard-card>header,
|
|
html:not(.dark) .hd-latest-list>a,
|
|
html:not(.dark) .hd-requester-list>div,
|
|
html:not(.dark) .hd-table th,
|
|
html:not(.dark) .hd-table td {
|
|
border-color:#e2e8f0 !important;
|
|
}
|
|
html:not(.dark) .hd-toolbar { background:#f8fafc !important; }
|
|
html:not(.dark) .hd-search-field {
|
|
background:#ffffff !important;
|
|
border-color:#cfd6e1 !important;
|
|
color:#667085 !important;
|
|
}
|
|
html:not(.dark) .hd-search-field input { color:#1f2937 !important; }
|
|
html:not(.dark) .hd-table th { background:#f3f5f8 !important; color:#667085 !important; }
|
|
html:not(.dark) .hd-table td { background:#ffffff !important; color:#1f2937 !important; }
|
|
html:not(.dark) .hd-table tbody tr:hover td { background:#f8fafc !important; }
|
|
html:not(.dark) .hd-action:not(.hd-action-blue):not(.hd-action-green):not(.hd-action-red) {
|
|
background:#ffffff !important; border-color:#cfd6e1 !important; color:#1f2937 !important;
|
|
}
|
|
html:not(.dark) .hd-role-card h2,
|
|
html:not(.dark) .hd-role-card strong,
|
|
html:not(.dark) .hd-dashboard-card>header h2 { color:#111827 !important; }
|
|
html:not(.dark) .hd-role-card p,
|
|
html:not(.dark) .hd-dashboard-card>header span,
|
|
html:not(.dark) .hd-dashboard-card>header a,
|
|
html:not(.dark) .hd-requester-list em,
|
|
html:not(.dark) .hd-empty { color:#667085 !important; }
|
|
html:not(.dark) .hd-metric-card {
|
|
background:linear-gradient(145deg,#ffffff,#f8fafc) !important;
|
|
border-color:#d8dee7 !important;
|
|
box-shadow:0 8px 20px rgba(15,23,42,.07) !important;
|
|
}
|
|
html:not(.dark) .hd-donut:after { background:#ffffff !important; }
|
|
html:not(.dark) .hd-donut span,
|
|
html:not(.dark) .hd-priority-legend strong { color:#111827 !important; }
|
|
html:not(.dark) .hd-priority-legend>div,
|
|
html:not(.dark) .hd-latest-list>a { color:#374151 !important; }
|
|
html:not(.dark) .hd-latest-list>a:hover { background:#f8fafc !important; }
|
|
html:not(.dark) .hd-chart-grid-lines line { stroke:#d8dee7 !important; }
|
|
html:not(.dark) .hd-form-grid .hd-field span { color:#374151 !important; }
|
|
html:not(.dark) .hd-field input {
|
|
background:#ffffff !important; color:#1f2937 !important; border-color:#cfd6e1 !important;
|
|
}
|
|
html:not(.dark) .hd-role-options label { background:#ffffff !important; border-color:#d8dee7 !important; }
|
|
html:not(.dark) .hd-role-options small { color:#667085 !important; }
|
|
html:not(.dark) .hd-kanban-drag-handle {
|
|
background:#f3f5f8 !important; border-color:#d8dee7 !important; color:#667085 !important;
|
|
}
|
|
html:not(.dark) .hd-kanban-drag-handle:hover { background:#e9eef5 !important; color:#111827 !important; }
|
|
|
|
/* Tailwind utility surfaces used directly by Helpdesk Blade views. */
|
|
html:not(.dark) .bg-black,
|
|
html:not(.dark) .bg-slate-950,
|
|
html:not(.dark) .bg-slate-900,
|
|
html:not(.dark) .bg-slate-800,
|
|
html:not(.dark) .bg-slate-700,
|
|
html:not(.dark) .bg-slate-600,
|
|
html:not(.dark) .bg-neutral-950,
|
|
html:not(.dark) .bg-neutral-900,
|
|
html:not(.dark) .bg-neutral-800 {
|
|
background-color:#ffffff !important;
|
|
}
|
|
html:not(.dark) [class*="bg-slate-950/"],
|
|
html:not(.dark) [class*="bg-slate-900/"],
|
|
html:not(.dark) [class*="bg-black/"] { background-color:#ffffff !important; }
|
|
html:not(.dark) [class*="border-slate-"],
|
|
html:not(.dark) [class*="border-neutral-"] { border-color:#d8dee7 !important; }
|
|
html:not(.dark) [class*="text-slate-100"],
|
|
html:not(.dark) [class*="text-slate-200"],
|
|
html:not(.dark) [class*="text-neutral-100"],
|
|
html:not(.dark) [class*="text-neutral-200"] { color:#1f2937 !important; }
|
|
html:not(.dark) [class*="text-slate-300"],
|
|
html:not(.dark) [class*="text-neutral-300"] { color:#374151 !important; }
|
|
html:not(.dark) [class*="text-slate-400"],
|
|
html:not(.dark) [class*="text-slate-500"],
|
|
html:not(.dark) [class*="text-neutral-400"],
|
|
html:not(.dark) [class*="text-neutral-500"] { color:#667085 !important; }
|