/* ==========================================================================
Aeropict Aviation — osTicket 1.18.4 theme
aeropict-core.css — design tokens + shared primitives (client, staff, admin)
Dark is the default. Light is opt-in via [data-ap-theme="light"] on .
Nothing here depends on a web font or an external host.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens — DARK (default: instrument panel at night)
-------------------------------------------------------------------------- */
:root {
/* Brand */
--ap-red: #E01B1B; /* logo red, lifted for dark surfaces */
--ap-red-deep: #CC0000; /* the exact logo red */
--ap-red-hover: #F23A3A;
--ap-red-dim: rgba(224, 27, 27, 0.16);
--ap-blue: #4C9BEA; /* informational — bright PFD blue on dark */
--ap-blue-hover: #6FB2F2;
--ap-blue-dim: rgba(76, 155, 234, 0.15);
/* Surfaces */
--ap-bg: #0A0D11; /* page ground */
--ap-panel: #12171D; /* main content panel */
--ap-panel-2: #171E26; /* raised: table heads, wells, tabs */
--ap-panel-3: #1D262F; /* hover / active */
--ap-inset: #0D1116; /* inputs, code, thread bodies */
/* Lines */
--ap-line: #242D37;
--ap-line-soft: #1B222A;
--ap-line-strong: #38454F;
/* Type */
--ap-text: #E6EBEF;
--ap-text-dim: #9DAAB6;
--ap-text-faint: #6C7A87;
--ap-heading: #F3F6F8;
/* Annunciator lamps */
--ap-amber: #E9A426;
--ap-amber-dim: rgba(233, 164, 38, 0.14);
--ap-green: #35B37E;
--ap-green-dim: rgba(53, 179, 126, 0.14);
--ap-grey-lamp: #7C8B99;
--ap-grey-lamp-dim: rgba(124, 139, 153, 0.14);
/* Chart line work */
--ap-chart: url("../img/sectional-dark.svg");
--ap-chart-opacity: 1;
/* Type stack — system only, no web fonts */
--ap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif;
--ap-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
/* Shape */
--ap-radius: 4px;
--ap-radius-lg: 6px;
--ap-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 28px rgba(0,0,0,0.45);
--ap-shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
--ap-focus: 0 0 0 2px rgba(224, 27, 27, 0.45);
color-scheme: dark;
}
/* --------------------------------------------------------------------------
2. Tokens — LIGHT (sectional chart on paper)
-------------------------------------------------------------------------- */
[data-ap-theme="light"] {
--ap-red: #CC0000;
--ap-red-deep: #A80000;
--ap-red-hover: #A80000;
--ap-red-dim: rgba(204, 0, 0, 0.10);
--ap-blue: #0C4F87; /* Diamond blue — from the deck system */
--ap-blue-hover: #093E6B;
--ap-blue-dim: rgba(12, 79, 135, 0.10);
--ap-bg: #EDE8DD; /* chart paper */
--ap-panel: #FBF8F2;
--ap-panel-2: #F2ECE0;
--ap-panel-3: #E7DFCF;
--ap-inset: #FFFDF8;
--ap-line: #D8CFBC;
--ap-line-soft: #E6DFD0;
--ap-line-strong: #B8AC94;
--ap-text: #16191C;
--ap-text-dim: #4E5761;
--ap-text-faint: #7C858F;
--ap-heading: #0B0D0F;
--ap-amber: #A96D07;
--ap-amber-dim: rgba(169, 109, 7, 0.12);
--ap-green: #1D7A50;
--ap-green-dim: rgba(29, 122, 80, 0.12);
--ap-grey-lamp: #5E6873;
--ap-grey-lamp-dim: rgba(94, 104, 115, 0.12);
--ap-chart: url("../img/sectional-light.svg");
--ap-chart-opacity: 1;
--ap-shadow: 0 1px 2px rgba(37, 30, 16, 0.06), 0 10px 30px rgba(37, 30, 16, 0.10);
--ap-shadow-sm: 0 1px 3px rgba(37, 30, 16, 0.10);
--ap-focus: 0 0 0 2px rgba(204, 0, 0, 0.30);
color-scheme: light;
}
/* --------------------------------------------------------------------------
3. Page ground
-------------------------------------------------------------------------- */
html {
background: var(--ap-bg);
}
body {
background: var(--ap-bg) var(--ap-chart) repeat !important;
background-size: 760px 760px !important;
color: var(--ap-text) !important;
font-family: var(--ap-font) !important;
font-size: 13.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
color: var(--ap-heading) !important;
font-family: var(--ap-font) !important;
letter-spacing: -0.01em;
}
a, a:link, a:visited {
color: var(--ap-blue);
text-decoration: none;
}
a:hover, a:focus { color: var(--ap-blue-hover); text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--ap-line); }
::selection { background: var(--ap-red-dim); color: var(--ap-text); }
/* Scrollbars — including the ones osTicket puts inside thread bodies and
overflowing tables, which otherwise render in the browser default light grey. */
* { scrollbar-width: thin; scrollbar-color: var(--ap-line-strong) var(--ap-inset); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: var(--ap-inset) !important; }
::-webkit-scrollbar-thumb {
background: var(--ap-line-strong) !important;
border-radius: 6px;
border: 2px solid var(--ap-inset);
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ap-text-faint) !important; }
/* --------------------------------------------------------------------------
4. Form controls
-------------------------------------------------------------------------- */
/* `input:not([type])` matters: osTicket ships bare fields
(the date pickers in System Logs, among others) with no type attribute, and
an `input[type="text"]` selector never reaches them. */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
input:not([type]), input[type=""],
textarea, select {
background: var(--ap-inset) !important;
color: var(--ap-text) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius) !important;
padding: 7px 9px !important;
font-family: var(--ap-font) !important;
font-size: 13px !important;
box-shadow: none !important;
outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
/* osTicket ships fixed heights on selects; with our padding the text clips. */
select {
padding: 6px 8px !important;
height: auto !important;
min-height: 32px;
line-height: 1.3 !important;
max-width: 100%;
vertical-align: middle;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {
height: auto !important;
vertical-align: middle;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input:not([type]):focus,
textarea:focus, select:focus {
border-color: var(--ap-red) !important;
box-shadow: var(--ap-focus) !important;
}
::placeholder { color: var(--ap-text-faint); opacity: 1; }
input[type="checkbox"], input[type="radio"] {
accent-color: var(--ap-red);
width: 14px; height: 14px;
vertical-align: -2px;
}
label { color: var(--ap-text); }
/* Buttons — flat, square-shouldered, panel-switch feel */
.btn, .button, button, input[type="submit"], input[type="button"], input[type="reset"],
a.button, a.btn, .action-button, .green.button, .blue.button, .red.button {
font-family: var(--ap-font) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
border-radius: var(--ap-radius) !important;
border: 1px solid var(--ap-line-strong) !important;
background: var(--ap-panel-2) !important;
background-image: none !important;
color: var(--ap-text) !important;
padding: 7px 14px !important;
text-shadow: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
height: auto !important;
line-height: 1.4 !important;
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover,
input[type="button"]:hover, a.button:hover, .action-button:hover {
background: var(--ap-panel-3) !important;
border-color: var(--ap-line-strong) !important;
color: var(--ap-text) !important;
}
/* Search fields that osTicket renders as an input + attached icon button */
.attached.input {
background: var(--ap-inset) !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius) !important;
display: inline-flex;
align-items: stretch;
overflow: hidden;
padding: 0 !important;
}
.attached.input.focus, .attached.input:focus-within {
border-color: var(--ap-red) !important;
box-shadow: var(--ap-focus) !important;
}
.attached.input input[type="text"] {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
}
.attached.input input[type="text"]:focus { box-shadow: none !important; }
button.attached.button, .attached .button, .attached button {
background: transparent !important;
border: 0 !important;
border-left: 1px solid var(--ap-line) !important;
border-radius: 0 !important;
color: var(--ap-text-dim) !important;
padding: 0 12px !important;
}
button.attached.button:hover, .attached button:hover {
background: var(--ap-panel-2) !important;
color: var(--ap-text) !important;
}
/* Primary action — the red one */
input[type="submit"], .btn.button.primary, button[type="submit"]:not(.attached),
a.green.button, .green.button, input.button[value*="Post"], .btn_sec {
background: var(--ap-red) !important;
border-color: var(--ap-red) !important;
color: #FFFFFF !important;
}
input[type="submit"]:hover, button[type="submit"]:not(.attached):hover,
a.green.button:hover, .green.button:hover {
background: var(--ap-red-hover) !important;
border-color: var(--ap-red-hover) !important;
color: #FFFFFF !important;
}
/* Secondary "blue" osTicket buttons become informational blue */
a.blue.button, .blue.button {
background: transparent !important;
border-color: var(--ap-blue) !important;
color: var(--ap-blue) !important;
}
a.blue.button:hover, .blue.button:hover {
background: var(--ap-blue-dim) !important;
color: var(--ap-blue-hover) !important;
}
/* Anything that backs out stays neutral, even where osTicket marks it up as a
`red button` (its profile Cancel does) — only the committing action is red. */
input[type="reset"], button[type="reset"],
input[value="Reset"], input[value="Cancel"],
[name="cancel"], button[name="cancel"], .red.button[name="cancel"],
input[type="button"].close, a.cancel {
background: transparent !important;
border-color: var(--ap-line-strong) !important;
color: var(--ap-text-dim) !important;
}
[name="cancel"]:hover, input[type="button"].close:hover, a.cancel:hover {
background: var(--ap-panel-2) !important;
color: var(--ap-text) !important;
}
:focus-visible { outline: 2px solid var(--ap-red); outline-offset: 1px; }
/* --------------------------------------------------------------------------
5. Tables
-------------------------------------------------------------------------- */
table { border-collapse: collapse; background: transparent; }
table.list, #ticketTable, table.form_table, table.ticket_info, table.custom-info {
background: transparent !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius) !important;
width: 100%;
}
table.list th, #ticketTable th, table.list thead td {
background: var(--ap-panel-2) !important;
color: var(--ap-text-dim) !important;
border-bottom: 1px solid var(--ap-line-strong) !important;
border-right: 0 !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 9px 10px !important;
text-align: left;
text-shadow: none !important;
}
table.list th a, #ticketTable th a { color: var(--ap-text-dim) !important; }
table.list th a:hover, #ticketTable th a:hover { color: var(--ap-red) !important; }
/* the active sort column: scp.css flags it with a #cfe6ff fill and a GIF arrow */
table.list thead th a.asc, table.list thead th a.desc {
background-color: transparent !important;
color: var(--ap-text) !important;
}
table.list thead th a.asc::after, table.list thead th a.desc::after {
content: "";
display: inline-block;
margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
vertical-align: middle;
}
table.list thead th a.asc::after { border-bottom: 5px solid var(--ap-red); }
table.list thead th a.desc::after { border-top: 5px solid var(--ap-red); }
table.list thead th a.asc, table.list thead th a.desc { background-image: none !important; }
table.list td, #ticketTable td {
background: transparent !important;
border-bottom: 1px solid var(--ap-line-soft) !important;
border-right: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
color: var(--ap-text) !important;
padding: 9px 10px !important;
vertical-align: middle;
}
/* quiet zebra banding, replacing osTicket's #f0faff stripes */
table.list tbody tr:nth-child(odd) td, #ticketTable tbody tr:nth-child(odd) td {
background-color: rgba(255, 255, 255, 0.022) !important;
}
[data-ap-theme="light"] table.list tbody tr:nth-child(odd) td,
[data-ap-theme="light"] #ticketTable tbody tr:nth-child(odd) td {
background-color: rgba(0, 0, 0, 0.022) !important;
}
table.list tbody tr:hover td, #ticketTable tbody tr:hover td {
background: var(--ap-panel-2) !important;
background-color: var(--ap-panel-2) !important;
}
table.list tbody tr:last-child td, #ticketTable tbody tr:last-child td {
border-bottom: 0 !important;
}
/* osTicket paints priority cells and dashboard rows with inline background
colours picked for a white page — neutralise them and let the annunciator
classes (added by aeropict-theme.js) carry the signal instead. */
#content table td[bgcolor],
#content table tr[bgcolor],
#content table td[style*="background"],
#content table tr[style*="background"],
#content table th[style*="background"],
#content table td[style*="background"] > div,
table.list td[style*="background-color"],
table.list td[style*="background-color"] > div {
background: transparent !important;
background-color: transparent !important;
}
/* Legacy osTicket sprites that assume a white page */
img[src*="lock.png"], img[src*="/images/lock"] {
opacity: .35;
filter: grayscale(1);
}
caption {
background: transparent !important;
background-image: none !important;
border: 0 !important;
color: var(--ap-text-faint) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
text-align: left;
padding: 0 0 8px 2px !important;
caption-side: top;
}
table.list th, #ticketTable th { border-left: 0 !important; border-right: 0 !important; }
/* --------------------------------------------------------------------------
6. Annunciator chips (applied by aeropict-theme.js)
Flat, backlit, caps — reads like a cockpit annunciator panel.
-------------------------------------------------------------------------- */
.ap-ann {
display: inline-block;
font-family: var(--ap-font);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
padding: 5px 9px 4px;
border-radius: 3px;
border: 1px solid transparent;
white-space: nowrap;
vertical-align: baseline;
}
.ap-ann::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
margin-right: 7px;
vertical-align: 1px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.ap-ann-open { color: var(--ap-amber); background: var(--ap-amber-dim); border-color: var(--ap-amber-dim); }
.ap-ann-progress { color: var(--ap-blue); background: var(--ap-blue-dim); border-color: var(--ap-blue-dim); }
.ap-ann-resolved { color: var(--ap-green); background: var(--ap-green-dim); border-color: var(--ap-green-dim); }
.ap-ann-closed { color: var(--ap-grey-lamp); background: var(--ap-grey-lamp-dim); border-color: var(--ap-grey-lamp-dim); }
.ap-ann-archived { color: var(--ap-grey-lamp); background: transparent; border-color: var(--ap-line); }
.ap-ann-overdue { color: var(--ap-red); background: var(--ap-red-dim); border-color: var(--ap-red-dim); }
.ap-ann-deleted { color: var(--ap-red); background: transparent; border-color: var(--ap-red-dim); }
/* Priority lamps — same panel language, no dot */
.ap-pri { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
text-transform: uppercase; padding: 4px 8px 3px; border-radius: 3px; line-height: 1; }
.ap-pri-low { color: var(--ap-text-faint); border: 1px solid var(--ap-line); }
.ap-pri-normal { color: var(--ap-text-dim); border: 1px solid var(--ap-line-strong); }
.ap-pri-high { color: var(--ap-amber); background: var(--ap-amber-dim); border: 1px solid var(--ap-amber-dim); }
.ap-pri-emergency { color: #fff; background: var(--ap-red); border: 1px solid var(--ap-red); }
/* --------------------------------------------------------------------------
7. Mode toggle
-------------------------------------------------------------------------- */
.ap-mode-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ap-panel-2) !important;
border: 1px solid var(--ap-line) !important;
color: var(--ap-text-dim) !important;
border-radius: 999px !important;
padding: 5px 12px 5px 10px !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.11em;
text-transform: uppercase;
cursor: pointer;
line-height: 1 !important;
vertical-align: middle;
transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.ap-mode-toggle:hover {
border-color: var(--ap-red) !important;
color: var(--ap-text) !important;
background: var(--ap-panel-3) !important;
}
.ap-mode-toggle .ap-lamp {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ap-amber);
box-shadow: 0 0 7px var(--ap-amber);
flex: 0 0 auto;
}
[data-ap-theme="light"] .ap-mode-toggle .ap-lamp {
background: var(--ap-blue);
box-shadow: none;
}
/* --------------------------------------------------------------------------
8. System messages
-------------------------------------------------------------------------- */
#msg_notice, #msg_error, #msg_warning, .msg_notice, .msg_error, .msg_warning,
#error_bar, #warning_bar, #notice_bar {
border-radius: var(--ap-radius) !important;
border: 1px solid transparent !important;
background-image: none !important;
padding: 11px 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
box-shadow: none !important;
text-shadow: none !important;
}
#msg_notice, .msg_notice, #notice_bar {
background: var(--ap-green-dim) !important;
border-color: var(--ap-green-dim) !important;
color: var(--ap-green) !important;
}
#msg_warning, .msg_warning, #warning_bar {
background: var(--ap-amber-dim) !important;
border-color: var(--ap-amber-dim) !important;
color: var(--ap-amber) !important;
}
#msg_error, .msg_error, #error_bar {
background: var(--ap-red-dim) !important;
border-color: var(--ap-red-dim) !important;
color: var(--ap-red) !important;
}
.error, font.error, .form_error {
color: var(--ap-red) !important;
font-size: 11.5px !important;
}
/* the required-field asterisk is a sitting inline beside the
field — it must never become a block, or it pushes the help tip onto its own line */
font.error, span.error { display: inline !important; }
/* --------------------------------------------------------------------------
9. Rich text editor (redactor) + thread bodies
-------------------------------------------------------------------------- */
.redactor-box {
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius) !important;
background: var(--ap-inset) !important;
overflow: hidden;
}
.redactor-toolbar {
background: var(--ap-panel-2) !important;
border-bottom: 1px solid var(--ap-line) !important;
box-shadow: none !important;
padding: 4px 6px !important;
}
.redactor-toolbar li a, .redactor-toolbar a, .redactor-toolbar li a i {
color: var(--ap-text-dim) !important;
background: transparent !important;
border-radius: 3px !important;
text-shadow: none !important;
}
.redactor-toolbar li a:hover, .redactor-toolbar a:hover {
background: var(--ap-panel-3) !important;
color: var(--ap-text) !important;
}
.redactor-toolbar li a.redactor-act, .redactor-toolbar a.redactor-act {
background: var(--ap-red-dim) !important;
color: var(--ap-red) !important;
}
.redactor-editor, .redactor-box textarea {
background: var(--ap-inset) !important;
color: var(--ap-text) !important;
font-family: var(--ap-font) !important;
font-size: 13.5px !important;
}
.redactor-placeholder:after, .redactor-editor:empty:before { color: var(--ap-text-faint) !important; }
.thread-body, .thread-entry .thread-body {
background: var(--ap-inset) !important;
color: var(--ap-text) !important;
}
/* osTicket marks a truncated thread body with a light grey rule; recolour it */
.thread-body, .thread-entry .thread-body, .thread-body.no-pjax {
border-color: var(--ap-line-strong) !important;
}
.thread-entry, .thread-entry * { border-color: var(--ap-line) !important; }
/* theme.css masks the timeline behind each entry with 2px white pseudo-rules,
and puts a 16px white square behind each event icon. They have to match the
panel they sit on, not the page they were designed for. */
.thread-entry::before, .thread-entry::after,
.thread-event .type-icon::after {
border-color: var(--ap-panel) !important;
}
.thread-event, .thread-event * { border-color: var(--ap-line) !important; }
.thread-event .type-icon {
background: var(--ap-panel-2) !important;
border-radius: 4px;
color: var(--ap-text-dim) !important;
}
.tab_content .thread-event .type-icon { background: var(--ap-panel-3) !important; }
/* avatars come from gravatar; if one fails to load, don't show its alt text */
img.avatar, .avatar img { border-radius: 5px; font-size: 0; color: transparent; }
#ticketThread::before, .thread-event::before {
border-left-color: var(--ap-line-strong) !important;
border-bottom-color: var(--ap-line) !important;
}
.thread-entry.message { border-left-color: var(--ap-blue) !important; }
.thread-entry.response { border-left-color: var(--ap-green) !important; }
.thread-entry.note { border-left-color: var(--ap-amber) !important; }
/* File drop zones */
.filedrop, .dropzone, .file_drop, .files {
background: var(--ap-inset) !important;
border: 1px dashed var(--ap-line-strong) !important;
border-radius: var(--ap-radius) !important;
color: var(--ap-text-faint) !important;
}
/* --------------------------------------------------------------------------
10. Third-party widgets: select2, jQuery UI, tooltips, dropdowns
-------------------------------------------------------------------------- */
.select2-container .select2-choice,
.select2-container .select2-selection,
.select2-container--default .select2-selection--single {
background: var(--ap-inset) !important;
background-image: none !important;
border: 1px solid var(--ap-line) !important;
border-radius: var(--ap-radius) !important;
color: var(--ap-text) !important;
}
.select2-container .select2-choice > .select2-chosen,
.select2-container--default .select2-selection__rendered { color: var(--ap-text) !important; }
.select2-drop, .select2-dropdown, .select2-results {
background: var(--ap-panel-2) !important;
border: 1px solid var(--ap-line-strong) !important;
color: var(--ap-text) !important;
box-shadow: var(--ap-shadow) !important;
}
.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--ap-red) !important;
color: #fff !important;
}
.select2-search input, .select2-search__field {
background: var(--ap-inset) !important;
border: 1px solid var(--ap-line) !important;
color: var(--ap-text) !important;
}
.ui-widget-content, .ui-datepicker, .ui-autocomplete, .ui-menu {
background: var(--ap-panel-2) !important;
border: 1px solid var(--ap-line-strong) !important;
color: var(--ap-text) !important;
box-shadow: var(--ap-shadow) !important;
}
.ui-widget-header, .ui-datepicker-header {
background: var(--ap-panel-3) !important;
border: 0 !important;
color: var(--ap-text) !important;
background-image: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default {
background: var(--ap-panel) !important;
border: 1px solid var(--ap-line) !important;
color: var(--ap-text) !important;
background-image: none !important;
}
.ui-state-hover, .ui-state-active, .ui-widget-content .ui-state-active {
background: var(--ap-red) !important;
border-color: var(--ap-red) !important;
color: #fff !important;
}
/* --------------------------------------------------------------------------
10a. Dropdown panels
osTicket paints the *list*, not the wrapper: dropdown.css sets the white
background on `.action-dropdown ul`, so styling only the container leaves the
menu white. Cover both, in every dropdown flavour the SCP uses.
-------------------------------------------------------------------------- */
.action-dropdown, .noclick-dropdown, .customQ-dropdown { background: transparent !important; }
.action-dropdown ul, .noclick-dropdown ul, .customQ-dropdown ul,
.action-dropdown ul.bleed-left, #actions {
background: var(--ap-panel-2) !important;
border: 1px solid var(--ap-line-strong) !important;
border-radius: var(--ap-radius) !important;
box-shadow: var(--ap-shadow) !important;
color: var(--ap-text) !important;
padding: 5px 0 !important;
}
.action-dropdown ul li > a, .noclick-dropdown ul li > a, .customQ-dropdown ul li > a,
#actions li > a {
color: var(--ap-text) !important;
padding: 7px 14px !important;
line-height: 1.4 !important;
}
.action-dropdown ul li > a:hover, .noclick-dropdown ul li > a:hover,
.customQ-dropdown ul li > a:hover, #actions li > a:hover,
.action-dropdown ul li.active > a:hover {
background-color: var(--ap-red) !important;
color: #fff !important;
}
.action-dropdown ul li.active > a {
background-color: var(--ap-red-dim) !important;
color: var(--ap-red) !important;
}
.action-dropdown ul li.positive > a:hover, .customQ-dropdown ul li.positive > a:hover,
.noclick-dropdown ul li.positive > a:hover { background-color: var(--ap-green) !important; }
.action-dropdown ul li.danger > a:hover, .customQ-dropdown ul li.danger > a:hover,
.noclick-dropdown ul li.danger > a:hover { background-color: var(--ap-red) !important; }
/* an item with nothing selected to act on */
.action-dropdown ul li > a.disabled, .customQ-dropdown ul li > a.disabled,
.noclick-dropdown ul li.disabled > a, #actions li > a.disabled {
color: var(--ap-text-faint) !important;
opacity: .55;
}
.action-dropdown hr, .customQ-dropdown hr, #actions hr {
background: var(--ap-line) !important;
border: 0 !important;
height: 1px;
}
/* --------------------------------------------------------------------------
10b. Dialogs and popups
scp.css gives .dialog an #f8f8f8 body and a blue border, and forces
`.dialog .table td:not(:empty)` to #f8f8f8 with !important.
-------------------------------------------------------------------------- */
.dialog, .dialog#popup, #popup {
background: var(--ap-panel) !important;
border: 1px solid var(--ap-line-strong) !important;
border-radius: var(--ap-radius-lg) !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
color: var(--ap-text) !important;
}
[data-ap-theme="light"] .dialog,
[data-ap-theme="light"] .dialog#popup,
[data-ap-theme="light"] #popup {
box-shadow: 0 24px 60px rgba(37, 30, 16, 0.28) !important;
}
.dialog h1, .dialog h2, .dialog h3, .dialog h4 {
color: var(--ap-heading) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
margin: 0 0 4px !important;
}
.dialog p, .dialog div, .dialog td, .dialog th, .dialog label, .dialog li {
color: var(--ap-text) !important;
}
.dialog .faded, .dialog small, .dialog .help-block { color: var(--ap-text-dim) !important; }
.dialog hr { border-top: 1px solid var(--ap-line) !important; margin: 12px 0 !important; }
.dialog a.close, .dialog .close i {
color: var(--ap-text-faint) !important;
background: transparent !important;
}
.dialog a.close:hover, .dialog a.close:hover i { color: var(--ap-red) !important; }
/* the !IMPORTANT white cell fill inside dialog tables */
.dialog .table td:not(:empty),
.dialog table td, .dialog table th {
background-color: transparent !important;
}
.dialog font[color="red"], .dialog font[color="red"] strong { color: var(--ap-red) !important; }
.dialog .buttons { display: inline-flex; gap: 8px; align-items: center; }
/* the confirm button is sometimes type=submit.red.button and sometimes
type=button.confirm — both mean "do the destructive thing" */
.dialog input.red.button, .dialog input[type="submit"],
.dialog input.confirm, .dialog button.confirm, .red.button {
background: var(--ap-red) !important;
border-color: var(--ap-red) !important;
color: #fff !important;
}
.dialog input[type="button"].close, .dialog input[name="cancel"] {
background: transparent !important;
border: 1px solid var(--ap-line-strong) !important;
color: var(--ap-text-dim) !important;
}
.dialog input[type="button"].close:hover, .dialog input[name="cancel"]:hover {
background: var(--ap-panel-2) !important;
color: var(--ap-text) !important;
}
.dropdown-menu, .tip_box, .popover, .ui-tooltip {
background: var(--ap-panel-2) !important;
border: 1px solid var(--ap-line-strong) !important;
border-radius: var(--ap-radius) !important;
box-shadow: var(--ap-shadow) !important;
color: var(--ap-text) !important;
}
.dropdown-menu li a, .dropdown-menu a {
color: var(--ap-text) !important;
padding: 7px 14px !important;
}
.dropdown-menu li a:hover, .dropdown-menu a:hover {
background: var(--ap-red) !important;
color: #fff !important;
}
.dropdown-menu .divider { background: var(--ap-line) !important; height: 1px; }
/* Loading overlay */
#overlay { background: rgba(5, 7, 9, 0.72) !important; }
#loading {
background: var(--ap-panel-2) !important;
border: 1px solid var(--ap-line-strong) !important;
border-radius: var(--ap-radius-lg) !important;
color: var(--ap-text) !important;
box-shadow: var(--ap-shadow) !important;
}
#loading h4 { color: var(--ap-heading) !important; }
/* Font-awesome icon colour inherits by default; keep help bubbles legible */
.icon-question-sign, .faded, .faint { color: var(--ap-text-faint) !important; }
/* --------------------------------------------------------------------------
11. Legibility odds and ends (each of these failed a 3:1 contrast check)
-------------------------------------------------------------------------- */
a.manual, .filedrop a, .files a, .dropzone a { color: var(--ap-blue) !important; }
a.manual:hover, .filedrop a:hover { color: var(--ap-blue-hover) !important; }
/* small badge chips (dashboard counts, "overdue", visibility flags) */
span.label, .label, .label-bare {
background: var(--ap-panel-3) !important;
color: var(--ap-text-dim) !important;
border-radius: 3px;
padding: 2px 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-shadow: none !important;
}
.label.label-danger, .label-important, .label.overdue {
background: var(--ap-red-dim) !important;
color: var(--ap-red) !important;
}
.label.label-success { background: var(--ap-green-dim) !important; color: var(--ap-green) !important; }
.label.label-warning { background: var(--ap-amber-dim) !important; color: var(--ap-amber) !important; }
.select2-container--default .select2-selection__placeholder,
.select2-container .select2-chosen .placeholder { color: var(--ap-text-dim) !important; }
#kb li span, #kb li .faded, .faq .faded { color: var(--ap-text-dim) !important; }
/* Instrument-style hairline used for section breaks */
.ap-rule {
border: 0;
border-top: 1px solid var(--ap-line-strong);
border-bottom: 1px solid var(--ap-line-soft);
height: 2px;
margin: 18px 0;
}
/* Print: always the paper palette */
@media print {
html { background: #fff; }
body { background: #fff !important; color: #000 !important; }
.ap-mode-toggle { display: none !important; }
}