1511 lines
48 KiB
CSS
Executable File
1511 lines
48 KiB
CSS
Executable File
@import "tailwindcss";
|
|
|
|
/*
|
|
* Helpdesk owns its Tailwind build. Do not rely on the host application's
|
|
* Tailwind scanner to discover module Blade classes.
|
|
*/
|
|
@source "../../views/**/*.blade.php";
|
|
@source "../../../../../resources/themes/backend/views/modules/helpdesk/**/*.blade.php";
|
|
@source "../../../Livewire/**/*.php";
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
/* Helpdesk settings modal presentation */
|
|
.hd-settings-modal {
|
|
text-align: left;
|
|
}
|
|
|
|
.hd-settings-modal form {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.hd-settings-modal form > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.hd-settings-modal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
|
|
.hd-settings-modal select,
|
|
.hd-settings-modal textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.hd-settings-modal textarea {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hd-settings-modal label {
|
|
text-align: left;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.hd-settings-modal {
|
|
padding-inline: 0.25rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Professional coloured headers for Helpdesk settings modals */
|
|
.hd-settings-modal-header {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 1.35rem;
|
|
padding: 1.05rem 1.2rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 0.9rem;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
0 12px 30px rgba(0, 0, 0, 0.14);
|
|
}
|
|
|
|
.hd-settings-modal-header::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -3.5rem;
|
|
right: -2rem;
|
|
width: 11rem;
|
|
height: 11rem;
|
|
border-radius: 9999px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
filter: blur(1px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hd-settings-modal-header [data-flux-heading],
|
|
.hd-settings-modal-header h1,
|
|
.hd-settings-modal-header h2,
|
|
.hd-settings-modal-header h3 {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: #fff !important;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.hd-settings-modal-header [data-flux-subheading],
|
|
.hd-settings-modal-header p {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: rgba(255, 255, 255, 0.74) !important;
|
|
}
|
|
|
|
.hd-settings-modal-header--status {
|
|
background: linear-gradient(135deg, #075985 0%, #0369a1 48%, #0e7490 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--priority {
|
|
background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 48%, #c2410c 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--category {
|
|
background: linear-gradient(135deg, #3730a3 0%, #4f46e5 48%, #7c3aed 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--team {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 48%, #0369a1 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--project {
|
|
background: linear-gradient(135deg, #155e75 0%, #0e7490 48%, #0f766e 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--board {
|
|
background: linear-gradient(135deg, #78350f 0%, #b45309 48%, #d97706 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--git {
|
|
background: linear-gradient(135deg, #1f2937 0%, #374151 52%, #475569 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--workflow {
|
|
background: linear-gradient(135deg, #115e59 0%, #0f766e 48%, #047857 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--canned {
|
|
background: linear-gradient(135deg, #164e63 0%, #0891b2 48%, #0284c7 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--sla {
|
|
background: linear-gradient(135deg, #7c2d12 0%, #c2410c 48%, #ea580c 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--automation {
|
|
background: linear-gradient(135deg, #581c87 0%, #7e22ce 48%, #9333ea 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--checklist {
|
|
background: linear-gradient(135deg, #365314 0%, #4d7c0f 48%, #65a30d 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--tag {
|
|
background: linear-gradient(135deg, #831843 0%, #be185d 48%, #db2777 100%);
|
|
}
|
|
|
|
.hd-settings-modal-header--product {
|
|
background: linear-gradient(135deg, #312e81 0%, #4338ca 48%, #6366f1 100%);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hd-settings-modal-header {
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 0.8rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Settings modal shell alignment + typography */
|
|
.hd-settings-modal,
|
|
.hd-settings-modal * {
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
|
|
}
|
|
|
|
.hd-settings-modal {
|
|
text-align: left;
|
|
}
|
|
|
|
/*
|
|
* Flux supplies the modal body padding. Pull the coloured banner back over
|
|
* that padding so it visually becomes the modal's own top header rather than
|
|
* looking like a card floating inside the dialog.
|
|
*/
|
|
.hd-settings-modal .hd-settings-modal-header {
|
|
margin-top: -1.5rem;
|
|
margin-right: -1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
margin-left: -1.5rem;
|
|
padding: 1.35rem 1.5rem 1.3rem;
|
|
border-top: 0;
|
|
border-right: 0;
|
|
border-left: 0;
|
|
border-radius: 1rem 1rem 0 0;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
0 10px 26px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.hd-settings-modal .hd-settings-modal-header [data-flux-heading],
|
|
.hd-settings-modal .hd-settings-modal-header h1,
|
|
.hd-settings-modal .hd-settings-modal-header h2,
|
|
.hd-settings-modal .hd-settings-modal-header h3 {
|
|
margin: 0;
|
|
font-family: inherit !important;
|
|
font-size: 1.25rem !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.35 !important;
|
|
letter-spacing: -0.02em !important;
|
|
}
|
|
|
|
.hd-settings-modal .hd-settings-modal-header [data-flux-subheading],
|
|
.hd-settings-modal .hd-settings-modal-header p {
|
|
margin-top: 0.45rem !important;
|
|
margin-bottom: 0 !important;
|
|
font-family: inherit !important;
|
|
font-size: 0.95rem !important;
|
|
font-weight: 400 !important;
|
|
line-height: 1.5 !important;
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
.hd-settings-modal input,
|
|
.hd-settings-modal select,
|
|
.hd-settings-modal textarea,
|
|
.hd-settings-modal button {
|
|
font-family: inherit !important;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hd-settings-modal .hd-settings-modal-header {
|
|
margin-top: -1rem;
|
|
margin-right: -1rem;
|
|
margin-left: -1rem;
|
|
padding: 1.1rem 1rem;
|
|
border-radius: 0.85rem 0.85rem 0 0;
|
|
}
|
|
}
|
|
|
|
/* Kanban-style settings form rhythm */
|
|
.hd-settings-modal {
|
|
color: rgb(244 244 245);
|
|
}
|
|
|
|
.hd-settings-modal :is(label, [data-flux-label]) {
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
|
|
font-size: 0.95rem !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.35 !important;
|
|
letter-spacing: -0.01em !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.hd-settings-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
|
|
min-height: 3rem;
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
|
|
font-size: 1rem !important;
|
|
font-weight: 500 !important;
|
|
line-height: 1.4 !important;
|
|
letter-spacing: -0.01em !important;
|
|
color: rgb(244 244 245) !important;
|
|
background: rgb(39 39 42) !important;
|
|
border-color: rgb(82 82 91) !important;
|
|
border-radius: 0.75rem !important;
|
|
}
|
|
|
|
.hd-settings-modal :is(input, select, textarea):focus {
|
|
border-color: rgb(59 130 246) !important;
|
|
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.16) !important;
|
|
}
|
|
|
|
.hd-settings-modal textarea {
|
|
min-height: 7.5rem;
|
|
padding-top: 0.85rem !important;
|
|
padding-bottom: 0.85rem !important;
|
|
}
|
|
|
|
.hd-settings-modal button,
|
|
.hd-settings-modal [role="button"] {
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
|
|
font-weight: 650 !important;
|
|
letter-spacing: -0.01em !important;
|
|
}
|
|
|
|
/* Shared horizontal colour control for Status, Priority, Category, Team, Project and Tag editors. */
|
|
.hd-colour-control {
|
|
width: 100%;
|
|
padding: 1rem 1.1rem;
|
|
border: 1px solid rgb(63 63 70);
|
|
border-radius: 0.9rem;
|
|
background: rgb(24 24 27 / 0.78);
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.025);
|
|
}
|
|
|
|
.hd-colour-control__label {
|
|
margin-bottom: 0.65rem;
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 650;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.01em;
|
|
color: rgb(228 228 231);
|
|
text-transform: none;
|
|
}
|
|
|
|
.hd-colour-control__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(18rem, 1fr) minmax(7.5rem, auto) auto 3.25rem minmax(8rem, 10rem);
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.hd-colour-control__select,
|
|
.hd-colour-control__value {
|
|
height: 3rem;
|
|
min-width: 0;
|
|
border: 1px solid rgb(82 82 91);
|
|
border-radius: 0.75rem;
|
|
background: rgb(39 39 42);
|
|
color: rgb(244 244 245);
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
outline: none;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.hd-colour-control__select {
|
|
width: 100%;
|
|
padding: 0 0.95rem;
|
|
}
|
|
|
|
.hd-colour-control__value {
|
|
width: 100%;
|
|
padding: 0 0.9rem;
|
|
}
|
|
|
|
.hd-colour-control__select:focus,
|
|
.hd-colour-control__value:focus {
|
|
border-color: rgb(59 130 246);
|
|
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.16);
|
|
}
|
|
|
|
.hd-colour-control__badge {
|
|
display: inline-flex;
|
|
height: 3rem;
|
|
min-width: 7.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 1rem;
|
|
border-radius: 0.75rem;
|
|
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
|
|
}
|
|
|
|
.hd-colour-control__swatches {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.hd-colour-control__swatch {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
flex: 0 0 auto;
|
|
border: 2px solid rgb(228 228 231 / 0.86);
|
|
border-radius: 9999px;
|
|
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.28);
|
|
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
|
|
.hd-colour-control__swatch:hover {
|
|
transform: translateY(-1px) scale(1.06);
|
|
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.14);
|
|
}
|
|
|
|
.hd-colour-control__picker {
|
|
width: 3.25rem;
|
|
height: 3rem;
|
|
padding: 0.35rem;
|
|
cursor: pointer;
|
|
border: 1px solid rgb(82 82 91);
|
|
border-radius: 0.75rem;
|
|
background: rgb(39 39 42);
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.hd-colour-control__row {
|
|
grid-template-columns: minmax(16rem, 1fr) minmax(7rem, auto) auto;
|
|
}
|
|
|
|
.hd-colour-control__picker,
|
|
.hd-colour-control__value {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.hd-colour-control__value {
|
|
grid-column: 2 / 4;
|
|
max-width: 13rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.hd-colour-control {
|
|
padding: 0.9rem;
|
|
}
|
|
|
|
.hd-colour-control__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hd-colour-control__select {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.hd-colour-control__badge {
|
|
flex: 1 1 8rem;
|
|
}
|
|
|
|
.hd-colour-control__swatches {
|
|
order: 5;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding-top: 0.15rem;
|
|
}
|
|
|
|
.hd-colour-control__value {
|
|
flex: 1 1 8rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Complete light-mode counterpart to the module's dark control rules. */
|
|
html:not(.dark) .hd-helpdesk-surface .hd-select,
|
|
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) .helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
|
html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
|
|
html:not(.dark) .helpdesk-ticket-form .select2-container--default .select2-selection__choice {
|
|
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,
|
|
html:not(.dark) .helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
|
|
html:not(.dark) .helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
|
|
html:not(.dark) .helpdesk-ticket-form [disabled],
|
|
html:not(.dark) .helpdesk-ticket-form [aria-disabled="true"] {
|
|
background: #eef2f7 !important;
|
|
background-color: #eef2f7 !important;
|
|
color: #667085 !important;
|
|
}
|
|
|
|
html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill,
|
|
html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill:hover,
|
|
html:not(.dark) .helpdesk-ticket-form input:-webkit-autofill:focus,
|
|
html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill,
|
|
html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill:hover,
|
|
html:not(.dark) .helpdesk-ticket-form textarea:-webkit-autofill:focus,
|
|
html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill,
|
|
html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill:hover,
|
|
html:not(.dark) .helpdesk-ticket-form select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #1f2937 !important;
|
|
box-shadow: 0 0 0 1000px #ffffff inset !important;
|
|
}
|
|
|
|
html:not(.dark) .hd-helpdesk-surface {
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* Professional theme contract: readable contrast in both application modes. */
|
|
html:not(.dark) .hd-helpdesk-surface {
|
|
color: #18181b !important;
|
|
}
|
|
html:not(.dark) .hd-helpdesk-surface :is(.text-zinc-100,.text-zinc-200,.text-zinc-300,.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700,.text-zinc-900) {
|
|
color: #3f3f46 !important;
|
|
}
|
|
html:not(.dark) .hd-helpdesk-surface :is(h1,h2,h3,h4,.font-semibold,.font-bold,.font-black):not(.hd-btn):not([class*="text-white"]) {
|
|
color: #18181b;
|
|
}
|
|
html:not(.dark) .hd-helpdesk-surface .text-blue-100\/90,
|
|
html:not(.dark) .hd-helpdesk-surface .text-blue-100,
|
|
html:not(.dark) .hd-helpdesk-surface .text-blue-200,
|
|
html:not(.dark) .hd-helpdesk-surface .text-amber-100\/85,
|
|
html:not(.dark) .hd-helpdesk-surface .text-amber-100,
|
|
html:not(.dark) .hd-helpdesk-surface .text-amber-200 {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
/* Heroes are light in light mode and intentionally dark in dark mode. */
|
|
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) {
|
|
background: linear-gradient(135deg,#ffffff 0%,#f8fafc 55%,#eef4ff 100%) !important;
|
|
color: #18181b !important;
|
|
}
|
|
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) {
|
|
background: linear-gradient(135deg,#020617 0%,#0f172a 55%,#172554 100%) !important;
|
|
color: #f8fafc !important;
|
|
}
|
|
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) :is(h1,h2,h3) { color:#18181b !important; }
|
|
html:not(.dark) .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) p { color:#475569 !important; }
|
|
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) :is(h1,h2,h3) { color:#f8fafc !important; }
|
|
html.dark .hd-helpdesk-surface :is(.hd-page-hero,.hd-settings-hero-inner) p { color:#cbd5e1 !important; }
|
|
|
|
/* Search/filter surface follows the switch instead of remaining black. */
|
|
html:not(.dark) .hd-helpdesk-surface .hd-filter-panel {
|
|
background:#ffffff !important; border-color:#d4d4d8 !important; color:#18181b !important;
|
|
}
|
|
html.dark .hd-helpdesk-surface .hd-filter-panel {
|
|
background:#18181b !important; border-color:#3f3f46 !important; color:#f4f4f5 !important;
|
|
}
|
|
html:not(.dark) .hd-ticket-search,
|
|
html:not(.dark) .hd-ticket-search-wrap { background:#fff !important; color:#18181b !important; border-color:#cbd5e1 !important; }
|
|
html:not(.dark) .hd-ticket-search::placeholder { color:#71717a !important; opacity:1; }
|
|
html:not(.dark) .hd-ticket-search-icon { color:#52525b !important; }
|
|
html.dark .hd-ticket-search,
|
|
html.dark .hd-ticket-search-wrap { background:#09090b !important; color:#f4f4f5 !important; border-color:#3f3f46 !important; }
|
|
html.dark .hd-ticket-search::placeholder { color:#a1a1aa !important; opacity:1; }
|
|
html.dark .hd-ticket-search-icon { color:#a1a1aa !important; }
|
|
|
|
/* Tables: body copy must never fade into its background. */
|
|
html:not(.dark) .hd-helpdesk-surface table tbody { color:#27272a !important; }
|
|
html:not(.dark) .hd-helpdesk-surface table tbody :is(.text-zinc-500,.text-zinc-600,.text-zinc-700) { color:#52525b !important; }
|
|
html:not(.dark) .hd-helpdesk-surface table tbody :is(.font-medium,.font-semibold) { color:#18181b !important; }
|
|
html.dark .hd-helpdesk-surface table tbody { color:#e4e4e7 !important; }
|
|
html.dark .hd-helpdesk-surface table tbody :is(.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-zinc-700) { color:#a1a1aa !important; }
|
|
html.dark .hd-helpdesk-surface table tbody :is(.font-medium,.font-semibold) { color:#f4f4f5 !important; }
|
|
|
|
/* Settings navigation cards use dark copy on translucent pastel cards in light mode. */
|
|
.hd-settings-section-card { border-color:var(--hd-card-border) !important; background:var(--hd-card-bg) !important; }
|
|
html:not(.dark) .hd-settings-section-card { color:#18181b !important; box-shadow:0 8px 20px rgba(15,23,42,.08) !important; }
|
|
html:not(.dark) .hd-settings-section-card.is-active { color:#fff !important; background:var(--hd-card-active) !important; }
|
|
html.dark .hd-settings-section-card { color:#f8fafc !important; }
|
|
html.dark .hd-settings-section-card.is-active { background:var(--hd-card-active) !important; }
|
|
.hd-settings-section-card > div:first-child { opacity:.82 !important; }
|
|
|
|
/* Muted text remains secondary, but readable. */
|
|
html:not(.dark) .hd-helpdesk-surface .hd-muted { color:#52525b !important; }
|
|
html.dark .hd-helpdesk-surface .hd-muted { color:#a1a1aa !important; }
|