/* Local Logic IT — theme overrides. Consumes ll-tokens.css. Loaded last in . */ /* ---- Base typography & color ---- */ body, input, select, textarea, button, table, td, th, .thread-body, #content { font-family: var(--ll-font); } body { color: var(--ll-white); font-size: var(--ll-fs-base); } a { color: var(--ll-blue); } a:hover { color: var(--ll-orange); } h1, h2, h3, h4 { color: var(--ll-white); font-weight: var(--ll-fw-semibold); } hr { border-color: var(--ll-border); } /* ---- Shared shell ---- */ #header { background: var(--ll-surface); border-bottom: 1px solid var(--ll-border); box-shadow: 0 1px 0 rgba(0,102,255,0.25); } #header #info, #header p, #header a { color: var(--ll-gray); } #header a:hover { color: var(--ll-white); } /* Constrain the bundled cloud mark (large source PNG) in nav headers */ #header #logo img { height: 40px; width: auto; object-fit: contain; } #nav { background: rgba(11,15,25,0.6); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-sm); backdrop-filter: blur(8px); } #nav a { color: var(--ll-gray); } #nav a:hover { color: var(--ll-white); } #nav a.active, #nav li.active a { color: var(--ll-white); box-shadow: inset 0 -2px 0 var(--ll-blue); } #content { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-lg); box-shadow: var(--ll-shadow); } #footer { color: var(--ll-gray); border-top: 1px solid var(--ll-border); } /* ---- Message bars ---- */ #msg_error, .error_bar, #error_bar { background: rgba(255,77,79,0.15); color: #ffb3b4; border: 1px solid rgba(255,77,79,0.4); border-radius: var(--ll-radius-sm); } #msg_notice, .notice_bar { background: rgba(46,204,113,0.15); color: #9be7bd; border: 1px solid rgba(46,204,113,0.4); border-radius: var(--ll-radius-sm); } #msg_warning, .warning_bar { background: rgba(255,138,0,0.15); color: #ffd199; border: 1px solid rgba(255,138,0,0.4); border-radius: var(--ll-radius-sm); } /* ---- Buttons ---- */ .btn, button.button, input[type=submit], input[type=button].button { background: var(--ll-blue); color: var(--ll-white); border: none; border-radius: var(--ll-radius-sm); font-weight: var(--ll-fw-medium); } .btn:hover, button.button:hover, input[type=submit]:hover { background: var(--ll-blue-600); } .greybutton, .button.cancel, input[type=button] { background: var(--ll-surface-2); color: var(--ll-white); border: 1px solid var(--ll-border); } /* ---- Focus rings (accessibility) ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ll-focus); } /* ---- Disabled states stay distinguishable ---- */ :disabled, .disabled { opacity: 0.5; cursor: not-allowed; } /* ---- Staff login ---- */ #loginBody { background-color: var(--ll-base); } #loginBox { background: var(--ll-surface-2) !important; /* overrides the inline JS white fallback */ border: 1px solid var(--ll-border-strong); border-radius: var(--ll-radius-lg); box-shadow: var(--ll-shadow); backdrop-filter: blur(10px); } #loginBox #logo img { max-width: 240px; height: auto; } #loginBox input[type=text], #loginBox input[type=password] { background: rgba(0,0,0,0.25); color: var(--ll-white); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-sm); } #loginBox input::placeholder { color: var(--ll-gray); } #loginBox button.submit, #loginBox .button { background: var(--ll-blue); border-radius: var(--ll-radius-sm); } #loginBox #login-message { color: #ffb3b4; } #company .content, #poweredBy { color: var(--ll-gray); } /* ---- Queues & list tables ---- */ table.list, table.list.queue { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; } table.list thead th, table.list tr.header th { background: rgba(0,0,0,0.30); color: var(--ll-gray); font-weight: var(--ll-fw-semibold); border-bottom: 1px solid var(--ll-border); } table.list tbody td { border-top: 1px solid var(--ll-border); color: var(--ll-white); } table.list tbody tr:hover td { background: var(--ll-surface-2); } /* Branded status/priority badges (osTicket renders priority via inline bg; these add a consistent shape and let our tokens tint common status text labels). */ .priority, .badge, span.label { border-radius: 999px; padding: 2px 10px; font-size: var(--ll-fs-sm); font-weight: var(--ll-fw-medium); } /* Mobile overflow: let wide queue tables scroll instead of squashing */ @media (max-width: 767px) { #content { overflow-x: auto; } table.list { min-width: 720px; } } /* ---- Ticket detail ---- */ .sidebar, #ticket .infoTable, .ticket_info { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-radius); color: var(--ll-white); } h1.ticket-title, #content h2 { font-size: var(--ll-fs-2xl); } /* ---- Thread entries (alternating agent/user) ---- */ .thread-entry { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow-sm); margin-bottom: var(--ll-sp-4); } /* Accent convention (matches header tints below): message=blue, response=orange, note=yellow */ .thread-entry.message { border-left: 3px solid var(--ll-blue); } /* user/client message */ .thread-entry.response { border-left: 3px solid var(--ll-orange); } /* agent reply */ .thread-entry.note { border-left: 3px solid #ffd24f; } /* internal note */ .thread-entry .header { background: rgba(0,0,0,0.25); color: var(--ll-gray); } /* ---- Reply / editor area ---- */ .redactor-box, .redactor-editor, textarea.richtext { background: rgba(0,0,0,0.25) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; border-radius: var(--ll-radius-sm); } .redactor-toolbar { background: var(--ll-surface-solid) !important; border-color: var(--ll-border) !important; } .redactor-toolbar a { color: var(--ll-gray) !important; } /* ---- Dashboard ---- */ #dashboard .dashboard-stats, #dashboard .stats-box, #dashboard table.dashboard-stats td { background: var(--ll-surface-2); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-lg); box-shadow: var(--ll-shadow); backdrop-filter: blur(8px); } #dashboard .stats-box .number, #dashboard td .number { color: var(--ll-white); font-weight: var(--ll-fw-bold); font-size: var(--ll-fs-2xl); } #dashboard .stats-box .text, #dashboard td .desc { color: var(--ll-gray); } #dashboard .stats-box.blue { box-shadow: inset 0 -3px 0 var(--ll-blue), var(--ll-shadow); } #dashboard .stats-box.orange { box-shadow: inset 0 -3px 0 var(--ll-orange), var(--ll-shadow); } /* ---- Client portal ---- */ #clientLogin .login-box, #content .login-box { background: var(--ll-surface-2); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-lg); padding: var(--ll-sp-5); box-shadow: var(--ll-shadow); } #clientLogin input[type=text], #clientLogin input[type=password], #content form input[type=text], #content form input[type=email], #content form textarea, #content form select { background: rgba(0,0,0,0.25); color: var(--ll-white); border: 1px solid var(--ll-border); border-radius: var(--ll-radius-sm); } #content form input::placeholder { color: var(--ll-gray); } /* New Ticket / open form emphasis */ #content .pull-left h1, #landing_page h1 { color: var(--ll-white); } /* Knowledge base cards/links */ #kb .category, .kb-category, #content .faq { background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-radius); } /* ---- Third-party widget overrides ---- */ /* jQuery UI */ .ui-widget-content, .ui-dialog, .ui-datepicker { background: var(--ll-surface-solid) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; border-radius: var(--ll-radius) !important; } .ui-widget-header, .ui-dialog-titlebar { background: rgba(0,0,0,0.3) !important; color: var(--ll-white) !important; border: none !important; } .ui-datepicker td a, .ui-state-default { background: var(--ll-surface-2) !important; color: var(--ll-white) !important; border-color: var(--ll-border) !important; } .ui-state-active, .ui-state-highlight { background: var(--ll-blue) !important; color: var(--ll-white) !important; } /* Select2 */ .select2-container .select2-choice, .select2-selection, .select2-container--default .select2-selection--single { background: rgba(0,0,0,0.25) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; border-radius: var(--ll-radius-sm) !important; } .select2-drop, .select2-dropdown { background: var(--ll-surface-solid) !important; border: 1px solid var(--ll-border) !important; color: var(--ll-white) !important; } .select2-results .select2-highlighted, .select2-results__option--highlighted { background: var(--ll-blue) !important; color: var(--ll-white) !important; } /* osTicket dropdown menus & tips */ .dropdown, .tip_box, #overlay + .dialog, .dialog { background: var(--ll-surface-solid) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; border-radius: var(--ll-radius) !important; box-shadow: var(--ll-shadow) !important; } .dropdown a, .tip_box a { color: var(--ll-blue) !important; } /* ---- Responsive polish ---- */ @media (max-width: 767px) { #nav { display: flex; flex-wrap: wrap; } .sidebar { width: 100% !important; float: none !important; margin-bottom: var(--ll-sp-4); } .pull-right .buttons, .ticket-actions { display: flex; flex-wrap: wrap; gap: var(--ll-sp-2); } } @media (min-width: 768px) and (max-width: 1023px) { #content { padding: var(--ll-sp-4); } } /* ===================================================================== Specificity fixes — osTicket hardcodes light backgrounds with selectors that out-specify the base rules above. These target the exact offenders. ===================================================================== */ /* ---- Top nav active/inactive tab (scp.css: #nav li.active{background:#f7f7f7}) ---- */ #nav li.active { background-color: var(--ll-surface-2) !important; border-color: var(--ll-border) !important; box-shadow: 4px -3px 6px -3px rgba(0,0,0,0.4) !important; } #nav li.inactive:hover { background-color: var(--ll-surface) !important; } #nav li.active a, #nav .active a { color: var(--ll-white) !important; } #nav .inactive a { color: var(--ll-gray) !important; } /* ---- Sub navigation bar (scp.css: #sub_nav{background:#f7f7f7}) ---- */ #sub_nav, nav#customQ_nav, #customQ_nav { background: rgba(0,0,0,0.25) !important; border-bottom: 1px solid var(--ll-border) !important; } #sub_nav > li > a, #customQ_nav .jb-overflowmenu-menu-primary li.item > a { color: var(--ll-gray) !important; } #sub_nav > li > a:hover, #customQ_nav .jb-overflowmenu-menu-primary li.item:hover { background-color: var(--ll-surface-2) !important; color: var(--ll-orange) !important; border-color: var(--ll-border) !important; } #sub_nav a.active, #sub_nav li.active > a, #sub_nav li.child.active > a { color: var(--ll-white) !important; } /* ---- Search / sort sticky bar (scp.css: .sticky.bar.opaque{background:white}) ---- */ .sticky.bar.opaque, .sticky.bar { background-color: rgba(0,0,0,0.25) !important; } .basic-search input[type=text], .search input[type=text] { background: rgba(0,0,0,0.30) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; } .basic-search input::placeholder, .search input::placeholder { color: var(--ll-gray) !important; } /* ---- List tables: dark rows + readable text (scp.css hardcodes #fff/#f0faff/#ffe) ---- */ table.list tbody td { background: transparent !important; color: var(--ll-white) !important; } table.list tbody tr:nth-child(2n+1) td { background-color: rgba(255,255,255,0.03) !important; } table.list tbody tr:hover td, table.list tbody tr:nth-child(2n+1):hover td, table.list tbody tr.highlight td { background: var(--ll-surface-2) !important; } table.list thead th { background: rgba(0,0,0,0.35) !important; } table.list thead th, table.list thead th a, table.list th a { color: var(--ll-gray) !important; } table.list tfoot td, table.list tfoot td a { background: rgba(0,0,0,0.25) !important; color: var(--ll-gray) !important; } /* "Select: All None Toggle" / "Page:" / "Showing" footer rows often sit outside the table */ .pagenav, .pagenav a, #content .tableheader, .selected-tickets, .actions { color: var(--ll-gray) !important; } /* ---- Tab bars (ul.tabs): Ticket Thread/Tasks, Post Reply/Post Internal Note ---- */ ul.tabs { background: transparent !important; border-bottom: 1px solid var(--ll-border) !important; } ul.tabs li a { color: var(--ll-gray) !important; } ul.tabs li:not(.active) { background: transparent !important; } ul.tabs li.active, ul.tabs.clean li.active { background-color: var(--ll-surface-2) !important; border-color: var(--ll-border) !important; } ul.tabs li.active a { color: var(--ll-white) !important; } .tab_content { background: var(--ll-surface) !important; border-color: var(--ll-border) !important; color: var(--ll-white) !important; } /* ---- Thread entry headers: keep type accent but dark bg + light text (scp.css: message #C3D9FF, response #FFE0B3, note #FFE, system #f4f4f4) ---- */ .thread-entry.message .header { background: rgba(0,102,255,0.22) !important; } .thread-entry.response .header { background: rgba(255,138,0,0.22) !important; } .thread-entry.note .header { background: rgba(255,210,80,0.18) !important; } .thread-entry.system .header { background: var(--ll-surface-2) !important; } .thread-entry .header, .thread-entry .header a, .thread-entry .header .title, .thread-entry .header .subject, .thread-entry .header .time { color: var(--ll-white) !important; } /* Message body forced dark. It renders arbitrary email HTML whose colors assume a light background, so we neutralize child colors/backgrounds to keep it legible. Tradeoff: emails relying on their own text colors get recolored to the theme. */ .thread-body { background: var(--ll-surface-solid) !important; color: var(--ll-white) !important; border-radius: 0 0 var(--ll-radius-sm) var(--ll-radius-sm); } .thread-body *:not(a) { background-color: transparent !important; color: inherit !important; border-color: var(--ll-border) !important; } .thread-body a { color: #4d9bff !important; } /* "Created by ... / posted ..." event lines below an entry (dark-on-dark) */ .thread-event, .thread-event *, .thread-entry .text.faded, .faded { color: var(--ll-gray) !important; } /* ---- Reply / Internal Note form panel (scp.css #response_options is light) ---- */ #response_options, #response_options > form, #response_options > form > table, #response_options > table td { background: transparent !important; color: var(--ll-white) !important; } #response_options > table td, #response_options label, #content form label { color: var(--ll-gray) !important; } #response_options input[type=text], #response_options textarea:not(.richtext) { background: rgba(0,0,0,0.30) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; } /* Native select dropdowns inside content (From / Reply To) */ #content select, #response_options select { background: rgba(0,0,0,0.30) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; } #content select option { background: var(--ll-surface-solid); color: var(--ll-white); } /* ---- Dashboard: report bar, activity chart, statistics table ---- */ /* Report timeframe bar (scp.css: #basic_search{background:#f4f4f4}) */ #basic_search { background-color: rgba(0,0,0,0.25) !important; border-bottom: 1px solid var(--ll-border) !important; box-shadow: none !important; } #basic_search label { color: var(--ll-gray) !important; } #basic_search input[type=text], #basic_search .dp { background: rgba(0,0,0,0.30) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-border) !important; } /* Ticket Activity chart (dashboard.css: #line-chart-here light gradient) */ #line-chart-here { background: var(--ll-surface) !important; border: 1px solid var(--ll-border) !important; } #line-chart-here text, #line-chart-here tspan { fill: var(--ll-gray) !important; } /* Statistics table (.table td{background:#fff}; table.dashboard-stats alt/hover) */ .table td { background-color: transparent !important; color: var(--ll-white) !important; } .table tr.header td, .table tr.header th, .table > thead th { color: var(--ll-gray) !important; } table.dashboard-stats, table.dashboard-stats tbody:first-child th { border-color: var(--ll-border) !important; } table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) { background-color: rgba(255,255,255,0.03) !important; } table.dashboard-stats tbody:nth-child(2) th { color: var(--ll-gray) !important; border-right-color: var(--ll-border) !important; } table.dashboard-stats tbody:nth-child(2) td { border-right-color: var(--ll-border) !important; color: var(--ll-white) !important; } table.dashboard-stats tbody:nth-child(2) tr:hover { background-color: var(--ll-surface-2) !important; } table.dashboard-stats tbody:nth-child(2) tr:hover th { color: var(--ll-white) !important; } /* ---- Admin settings section header bars (scp.css: .form_table th{background:#eee}) ---- */ .form_table th, div.section-break { background-color: rgba(0,0,0,0.30) !important; border-color: var(--ll-border) !important; } .form_table th, .form_table th em, .form_table th b, .form_table th h4, div.section-break h3 { color: var(--ll-white) !important; } .form_table th h4 { background-color: transparent !important; } .form_table, .settings_table { border-color: var(--ll-border) !important; } .form_table td, .settings_table td { border-bottom-color: var(--ll-border) !important; } .form_table td:not(:empty) { background-color: transparent !important; } /* ---- Message bars by ID + banner classes (scp.css uses light bg + icon shorthand; override background-color only so the alert/error/ok icons survive) ---- */ #warning_bar, .warning-banner { background-color: rgba(255,138,0,0.18) !important; color: #ffd199 !important; border: 1px solid rgba(255,138,0,0.45) !important; } #error_bar, .error-banner { background-color: rgba(255,77,79,0.18) !important; color: #ffb3b4 !important; border: 1px solid rgba(255,77,79,0.45) !important; } #notice_bar { background-color: rgba(46,204,113,0.18) !important; color: #9be7bd !important; border: 1px solid rgba(46,204,113,0.45) !important; } .info-banner { background-color: rgba(0,102,255,0.15) !important; color: #9cc2ff !important; border: 1px solid rgba(0,102,255,0.4) !important; } /* ---- Client portal shell (theme.css: #container{background:#fff}, #nav grey image) ---- The client nav