From 38916259363026a40b92e0960b433549d2efc4e9 Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 6 May 2024 14:54:31 -0400 Subject: [PATCH] overhaul color innerworkings- add manual toggle --- tdx-enhanced.js | 1488 ++++++++++++++++++++++++++--------------------- 1 file changed, 837 insertions(+), 651 deletions(-) diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 0622e55..59005f0 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1,7 +1,7 @@ // ==UserScript== // @name tdx-enhanced // @namespace ecn -// @version 2024-05-03-05 +// @version 2024-05-06-01 // @description enhanced tdx coloring & formatting. follows system color scheme. // @author Purdue STEM IT - it@purdue.edu // @match https://service.purdue.edu/TDNext/* @@ -338,6 +338,8 @@ //check for existing style block if (!frame.querySelector("#customStyles")) { let head = frame.querySelector("head") + let html = frame.querySelector("html") + html.classList.add(getColorMode()) let s = document.createElement("style") s.id = "customStyles" s.innerText = customStyles @@ -381,855 +383,1039 @@ if (title) { title.innerText = "Purdue University - STEM IT" } + + injectModeToggle() } - parseTicket() - changeTitle() + function toggleColorMode() { + let mode = getColorMode() == "darkMode" ? "lightMode" : "darkMode" + setColorMode(mode) + } - const customStyles = ` + function setColorMode(mode) { + console.log("Set color mode to",mode) + var storageMode = mode - /* Root Styles */ - :root { - - --light-txt-1: #000; - --light-txt-4: #0000008c; - --light-col-1: #897043; - --light-col-2: #635130; - --light-bg-2: #ddd; - --light-bg-3: #eee; - - --dark-bg-0: #111; - --dark-bg-1: #222; - --dark-bg-2: #333; - --dark-bg-3: #444; - --dark-bg-4: #555; - --dark-col-1: #CFB991; - --dark-col-2: #9a835a; - --dark-col-link: #d1dbff; - --dark-txt-0: #bbb; - --dark-txt-1: #fff; - --dark-txt-2: #ececec; - --dark-txt-3: #929292; - --dark-txt-4: #ffffff8c; - --dark-border-0: #2b2b2b; - } + let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + if (autoScheme == mode) { + storageMode = "auto" + } - /* Global */ + localStorage.setItem("styles",mode) - .qBox { - margin-left: 10px; - padding: 5px; - font-size: 20px; - border-radius: 7px; + let remove = mode=="darkMode" ? "lightMode" : "darkMode" + document.documentElement.classList.add(mode) + document.documentElement.classList.remove(remove) } - .qHighlight { - padding: 4px; - border-radius: 8px; - } + function getColorMode() { + let localScheme = localStorage.getItem("styles") + let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + let scheme - .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { - border-color: var(--dark-col-1); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--dark-col-1); - } + if (localScheme == "auto") { + scheme = autoScheme + } else { + scheme = localScheme + } - .panel-title { - display: flex; - align-items: baseline; - gap: 4px; + return scheme } - .subtitle { - font-size: 14px; - cursor: unset !important; + function checkColorMode() { + let localScheme = localStorage.getItem("styles") + let autoScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + + if (localScheme != autoScheme && localScheme != "auto") { + setColorMode(localScheme) + } else { + setColorMode(autoScheme,"auto") + } + + addEventListener("storage", (event) => { + console.log("Storage event:",event) + setColorMode(event.newValue) + }); } - @media (prefers-color-scheme: light) { + function injectModeToggle() { + let iconBar = document.querySelector(".tdbar-settings .pull-right") - :root { - --col-reply: #d3f2ff; - --col-highlight-1: #fff3c4; - --col-highlight-2: #e3c4ff; - --col-currentuser: #5de2ad; - --col-modified: #ffe8d1; - } + let buttonHTML = ` + + + + ` - .light { - color: var(--dark-txt-1) !important; - } + let button = document.createElement("span") + button.innerHTML = buttonHTML - .subtitle { - color: var(--light-txt-4) !important; + if (iconBar) { + iconBar.prepend(button) + button.querySelector("#colorMode").onclick = toggleColorMode } + } - /* Colors */ - a, a.noHover, .blue { - color: var(--light-col-1) !important; - } + parseTicket() + changeTitle() + checkColorMode() - a:hover { - color: var(--light-col-2); - } + const customStyles = ` - .btn-default, .pagination>li>a { - color: var(--light-col-1); - } +/* Root Styles */ + +:root { + --dark-bg-0: #111; + --dark-bg-1: #222; + --dark-bg-2: #333; + --dark-bg-3: #444; + --dark-bg-4: #555; + --dark-col-0: #ab9266; + --dark-col-1: #CFB991; + --dark-col-2: #8d7c5d; + --dark-col-link: #d1dbff; + --dark-txt-0: #bbb; + --dark-txt-1: #fff; + --dark-txt-2: #ececec; + --dark-txt-3: #929292; + --dark-txt-4: #ffffff8c; + --dark-border-0: #2b2b2b; + --dark-col-reply: #1e3438; + --dark-col-highlight-1: #625714; + --dark-col-highlight-2: #311462; + --dark-col-currentuser: #09482f; + --dark-col-modified: #30241c; + --dark-txt-invert: 1; + --dark-txt-hue: 180deg; + + --light-txt-1: #000; + --light-txt-2: #222; + --light-txt-3: #333; + --light-txt-4: #0000008c; + --light-col-0: #ccb387; + --light-col-1: #836836; + --light-col-2: #ba7600; + --light-bg-0: #fff; + --light-bg-1: #f5f5f5; + --light-bg-2: #fff; + --light-bg-3: #eee; + --light-bg-4: #ddd; + --light-border-0: #dfdfdf; + --light-col-reply: #d3f2ff; + --light-col-highlight-1: #fff3c4; + --light-col-highlight-2: #e3c4ff; + --light-col-currentuser: #5de2ad; + --light-col-modified: #ffe8d1; + --light-txt-invert: 0; + --light-txt-hue: 0deg; +} - .btn-primary { - background-color: var(--light-col-1) !important; - color: var(--dark-txt-1) !important; - } +@media (prefers-color-scheme: light) { + :root { + color-scheme: light; + --bg-0: var(--light-bg-0); + --bg-1: var(--light-bg-1); + --bg-2: var(--light-bg-2); + --bg-3: var(--light-bg-3); + --bg-4: var(--light-bg-4); + --col-0: var(--light-col-0); + --col-1: var(--light-col-1); + --col-2: var(--light-col-2); + --col-link: var(--light-col-link); + --txt-0: var(--light-txt-0); + --txt-1: var(--light-txt-1); + --txt-2: var(--light-txt-2); + --txt-3: var(--light-txt-3); + --txt-4: var(--light-txt-4); + --txt-invert: var(--light-txt-invert); + --txt-hue: var(--light-txt-hue); + --border-0: var(--light-border-0); + --col-reply: var(--light-col-reply); + --col-highlight-1: var(--light-col-highlight-1); + --col-highlight-2: var(--light-col-highlight-2); + --col-currentuser: var(--light-col-currentuser); + --col-modified: var(--light-col-modified); + } +} - .btn:hover { - background-color: var(--light-col-2) !important; - } +@media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --bg-0: var(--dark-bg-0); + --bg-1: var(--dark-bg-1); + --bg-2: var(--dark-bg-2); + --bg-3: var(--dark-bg-3); + --bg-4: var(--dark-bg-4); + --col-0: var(--dark-col-0); + --col-1: var(--dark-col-1); + --col-2: var(--dark-col-2); + --col-link: var(--dark-col-link); + --txt-0: var(--dark-txt-0); + --txt-1: var(--dark-txt-1); + --txt-2: var(--dark-txt-2); + --txt-3: var(--dark-txt-3); + --txt-4: var(--dark-txt-4); + --txt-invert: var(--dark-txt-invert); + --txt-hue: var(--dark-txt-hue); + --border-0: var(--dark-border-0); + --col-reply: var(--dark-col-reply); + --col-highlight-1: var(--dark-col-highlight-1); + --col-highlight-2: var(--dark-col-highlight-2); + --col-currentuser: var(--dark-col-currentuser); + --col-modified: var(--dark-col-modified); + } +} - .btn-link:hover { - background-color: var(--light-bg-2) !important; - } +:root.darkMode { + color-scheme: dark; + --bg-0: var(--dark-bg-0); + --bg-1: var(--dark-bg-1); + --bg-2: var(--dark-bg-2); + --bg-3: var(--dark-bg-3); + --bg-4: var(--dark-bg-4); + --col-0: var(--dark-col-0); + --col-1: var(--dark-col-1); + --col-2: var(--dark-col-2); + --col-link: var(--dark-col-link); + --txt-0: var(--dark-txt-0); + --txt-1: var(--dark-txt-1); + --txt-2: var(--dark-txt-2); + --txt-3: var(--dark-txt-3); + --txt-4: var(--dark-txt-4); + --txt-invert: var(--dark-txt-invert); + --txt-hue: var(--dark-txt-hue); + --border-0: var(--dark-border-0); + --col-reply: var(--dark-col-reply); + --col-highlight-1: var(--dark-col-highlight-1); + --col-highlight-2: var(--dark-col-highlight-2); + --col-currentuser: var(--dark-col-currentuser); + --col-modified: var(--dark-col-modified); +} - .apps-tab { - background-color: var(--dark-col-2) !important; - } +:root.lightMode { + color-scheme: light; + --bg-0: var(--light-bg-0); + --bg-1: var(--light-bg-1); + --bg-2: var(--light-bg-2); + --bg-3: var(--light-bg-3); + --bg-4: var(--light-bg-4); + --col-0: var(--light-col-0); + --col-1: var(--light-col-1); + --col-2: var(--light-col-2); + --col-link: var(--light-col-link); + --txt-0: var(--light-txt-0); + --txt-1: var(--light-txt-1); + --txt-2: var(--light-txt-2); + --txt-3: var(--light-txt-3); + --txt-4: var(--light-txt-4); + --txt-invert: var(--light-txt-invert); + --txt-hue: var(--light-txt-hue); + --border-0: var(--light-border-0); + --col-reply: var(--light-col-reply); + --col-highlight-1: var(--light-col-highlight-1); + --col-highlight-2: var(--light-col-highlight-2); + --col-currentuser: var(--light-col-currentuser); + --col-modified: var(--light-col-modified); +} - .hilite, .hilite .btn-link, .hilite a, .hilite td, .table>tbody>tr.hilite label, .table>tbody>tr.hilite.active, .table>tbody>tr.hilite.danger, .table>tbody>tr.hilite.info, .table>tbody>tr.hilite.success, .table>tbody>tr.hilite.warning, .table>tbody>tr.hilite>td.active, .table>tbody>tr.hilite>td.danger, .table>tbody>tr.hilite>td.info, .table>tbody>tr.hilite>td.success, .table>tbody>tr.hilite>td.warning { - background-color: var(--light-bg-2) !important; - color: initial; - } +::selection { + background: var(--bg-3); +} - .select2-results .select2-highlighted { - background-color: var(--light-col-1); - } - } +/* Global */ +.qBox { + margin-left: 10px; + padding: 5px; + font-size: 20px; + border-radius: 7px; +} +.qHighlight { + padding: 4px; + border-radius: 8px; +} - @media (prefers-color-scheme: dark) { +.select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { + border-color: var(--col-1); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--col-1); +} - :root { - color-scheme: dark; - --col-reply: #1e3438; - --col-highlight-1: #625714; - --col-highlight-2: #311462; - --col-currentuser: #09482f; - --col-modified: #30241c; - } +.panel-title { + display: flex; + align-items: baseline; + gap: 4px; +} - ::selection { - background: var(--dark-bg-3); - } +.subtitle { + font-size: 14px; + cursor: unset !important; +} - .dark { - color: var(--dark-txt-1) !important; - } +.light { + color: var(--txt-1) !important; +} - .subtitle { - color: var(--dark-txt-4) !important; - } +.dark { + color: var(--txt-1) !important; +} - /* Body */ - html, body { - background-color: var(--dark-bg-0) !important; - color: var(--dark-txt-2) !important; - } +.subtitle { + color: var(--txt-4) !important; +} - .white-bg { - background-color: var(--dark-bg-0) !important; - } +.lightMode #colorMode > .fa-sun { + display: none; +} - /* Colors */ - a, a.noHover, .blue { - color: var(--dark-col-1); - } +.darkMode #colorMode > .fa-moon { + display: none; +} - .blue, .blue-hover:hover { - color: var(--dark-col-1) !important; - } +/* Body */ +body { + background-color: var(--bg-0) !important; + color: var(--txt-2) !important; +} - a:focus, a:hover { - color: var(--dark-col-2) !important; - } +.white-bg { + background-color: var(--bg-0) !important; +} - .gray, .gray-hover:hover { - color: var(--dark-txt-3) !important; - } +/* Colors */ +a, a.noHover, .blue { + color: var(--col-1); +} - .alert-info { - color: var(--dark-txt-2); - background-color: var(--dark-col-2); - border-color: var(--dark-border-0); - } +.blue, .blue-hover:hover { + color: var(--col-1) !important; +} - .alert-warning { - color: var(--dark-txt-2); - background-color: var(--dark-col-2); - border-color: var(--dark-border-0); - } +a:focus, a:hover { + color: var(--col-2) !important; +} - .label-success { - background-color: var(--dark-col-2); - /*color: var(--dark-txt-0);*/ - } +.gray, .gray-hover:hover { + color: var(--txt-3) !important; +} - .green, .green-hover:hover { - color: var(--dark-col-1) !important; - } +.alert-info { + color: var(--txt-2); + background-color: var(--col-0); + border-color: var(--border-0); +} - /* Other Elements */ - .black { - color: var(--dark-txt-1) !important; - } +.alert-warning { + color: var(--txt-2); + background-color: var(--col-0); + border-color: var(--border-0); +} - #ApplicationsMenu { - background-color: var(--dark-bg-1); - } +.list-group-item-warning { + color: var(--txt-2); +} - .apps-tab { - background-color: var(--dark-col-1) !important; - } +.label-success { + background-color: var(--col-0); + /*color: var(--txt-0);*/ +} - #tabs li>a:hover { - color: var(--dark-txt-0); - } +.green, .green-hover:hover { + color: var(--col-1) !important; +} - .form-control { - background-color: var(--dark-bg-2); - color: var(--dark-txt-2); - } +/* Other Elements */ +.black { + color: var(--txt-1) !important; +} - .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: var(--dark-bg-1); - } +#ApplicationsMenu { + background-color: var(--bg-1); +} - .select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input { - background-color: var(--dark-bg-1); - color: var(--dark-txt-2); - } +.apps-tab { + background-color: var(--col-0) !important; +} - .select2-container-multi .select2-choices .select2-search-choice { - background-color: var(--dark-bg-4); - color: var(--dark-txt-2); - } +#tabs li>a:hover { + color: var(--txt-0); +} - .select2-drop, .select2-dropdown-open.select2-drop-above [class^=select2-choice] { - background-color: var(--dark-bg-1); - color: var(--dark-txt-2); - } +.form-control { + background-color: var(--bg-2); + color: var(--txt-2); +} - .select2-container-multi .select2-choices .select2-search-field input.select2-active { - background: var(--dark-bg-2) !important; - } +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + background-color: var(--bg-1); +} - .select2-results .select2-highlighted { - background-color: var(--dark-bg-3); - } +.select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input { + background-color: var(--bg-1); + color: var(--txt-2); +} - .talu_holder .bit-input input { - background: none; - } +.select2-search input { + background: var(--bg-4); + color: var(--txt-2); +} - .comment-options { - background-color: var(--dark-bg-1); - color: var(--dark-txt-2); - } +.select2-container-multi .select2-choices .select2-search-choice { + background-color: var(--bg-4); + color: var(--txt-2); +} - .cke_bottom, .cke_top, .cke_chrome { - background-color: var(--dark-bg-1) !important; - color: var(--dark-txt-2) !important; - } +.select2-drop, .select2-dropdown-open.select2-drop-above [class^=select2-choice] { + background-color: var(--bg-1); + color: var(--txt-2); +} - div.comment { - background-color: var(--dark-bg-0) !important; - color: var(--dark-txt-2) !important; - } +.select2-search input.select2-active { + background: var(--bg-1); + color: var(--txt-2); +} - .ms-choice { - background-color: var(--dark-bg-1) !important; - color: var(--dark-txt-2) !important; - } +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + background: var(--bg-2) !important; +} - .ms-drop { - background-color: var(--dark-bg-2); - } +.select2-results .select2-no-results,.select2-results .select2-searching,.select2-results .select2-selection-limit { + background-color: var(--col-2); + color: var(--txt-2); +} - .breadcrumb { - background-color: var(--dark-bg-0); - } +.select2-results .select2-highlighted { + background-color: var(--bg-3); +} - .breadcrumb>.active { - color: var(--dark-txt-2); - } +.talu_holder .bit-input input { + background: none; +} - div.feed-child-box { - background-color: var(--dark-bg-2) !important; - } +.comment-options { + background-color: var(--bg-1); + color: var(--txt-2); +} - .modal-content { - background-color: var(--dark-bg-2); - } +.cke_bottom, .cke_top, .cke_chrome { + background-color: var(--bg-1) !important; + color: var(--txt-2) !important; +} - .block-actions { - background-color: var(--dark-bg-1); - } +div.comment { + background-color: var(--bg-0) !important; + color: var(--txt-2) !important; +} - .dropdown-menu { - background-color: var(--dark-bg-1); - color: var(--dark-txt-1); - } +.ms-choice { + background-color: var(--bg-1) !important; + color: var(--txt-2) !important; +} - .dropdown-menu>li>a, .dropdown-menu>span>li>a { - color: var(--dark-txt-1); - } +.ms-drop { + background-color: var(--bg-2); +} - .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>span>li>a:hover { - background-color: var(--dark-bg-2); - color: var(--dark-txt-2); - } +.breadcrumb { + background-color: var(--bg-0); +} - .popover, .list-group-item { - background-color: var(--dark-bg-2); - } +.breadcrumb>.active { + color: var(--txt-2); +} - .popover.right>.arrow:after { - border-right-color: var(--dark-bg-2); - } +div.feed-child-box { + background-color: var(--bg-3) !important; +} - .Module { - background-color: var(--dark-bg-2); - color: var(--dark-txt-2); - } +.modal-content { + background-color: var(--bg-2); +} - .modal-overlay { - background-color: var(--dark-bg-2); - color: var(--dark-txt-2); - } +.block-actions { + background-color: var(--bg-1); +} - .layout-container .layout-entry { - background-color: var(--dark-bg-1); - color: var(--dark-txt-2); - } +.dropdown-menu { + background-color: var(--bg-1); + color: var(--txt-1); +} - .ui-widget-content, .ui-widget.ui-widget-content { - background: var(--dark-bg-1); - color: var(--dark-txt-2); - } +.dropdown-menu>li>a, .dropdown-menu>span>li>a { + color: var(--txt-1) !important; +} - .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - background: var(--dark-bg-2); - color: var(--dark-txt-2); - } +.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>span>li>a:hover { + background-color: var(--bg-2); + color: var(--txt-2); +} - .ui-datepicker-calendar { - color: var(--dark-txt-2); - } +.popover, .list-group-item { + background-color: var(--bg-2); +} - .input-group-addon { - background: var(--dark-bg-2); - color: var(--dark-txt-2); - } +.popover.right>.arrow:after { + border-right-color: var(--bg-2); +} - .lu_tdac-auto, .lu_tdac-auto ul { - background-color: var(--dark-bg-2) !important; - color: var(--dark-txt-2); - } +.Module { + background-color: var(--bg-2); + color: var(--txt-2); +} - .lu_tdac-auto ul li div.talu_subcaption { - color: var(--dark-txt-2); - } +.modal-overlay { + background-color: var(--bg-2); + color: var(--txt-2); +} - .talu_holder .bit-box { - background-color: var(--dark-bg-4) !important; - color: var(--dark-txt-2); - } +.layout-container .layout-entry { + background-color: var(--bg-1); + color: var(--txt-2); +} - .lu_tdac-auto ul .auto-focus { - background-color: var(--dark-bg-3) !important; - color: var(--dark-txt-2); - } +.ui-widget-content, .ui-widget.ui-widget-content { + background: var(--bg-1); + color: var(--txt-2); +} - /* Replies */ - #ttDescription, .feed-item-text { - color: #000; - filter: invert(1) hue-rotate(180deg); - } +.ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { + background: var(--bg-2); + color: var(--txt-2); +} - #ttDescription img, .feed-item-text img { - filter: invert(1) hue-rotate(180deg); - } +.ui-datepicker-calendar { + color: var(--txt-2); +} - .moreToggle button, .lessToggle button { - background-color: var(--dark-col-2); - } +.input-group-addon { + background: var(--bg-2); + color: var(--txt-2); +} - #ttDescription a, .feed-item-text a { - color: var(--light-col-2); - } +.lu_tdac-auto, .lu_tdac-auto ul { + background-color: var(--bg-2) !important; + color: var(--txt-2); +} - .cke_editable { - color: var(--dark-txt-1); - background-color: var(--dark-bg-4); - } +.lu_tdac-auto ul li div.talu_subcaption { + color: var(--txt-2); +} - .cke_combo_button, .cke_toolgroup { - background: var(--dark-bg-3) !important; - } +.talu_holder .bit-box { + background-color: var(--bg-4) !important; + color: var(--txt-2); +} - .cke_button_icon { - opacity: 1 !important; - filter: invert(1) !important; - } +.lu_tdac-auto ul .auto-focus { + background-color: var(--bg-3) !important; + color: var(--txt-2); +} - .cke_combo_text { - color: var(--dark-txt-2) !important; - } +/* Replies */ +#ttDescription, .feed-item-text { + color: #000; + filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue)); +} - .cke_panel_grouptitle { - background: var(--dark-bg-2) !important; - color: var(--dark-txt-1); - } +#ttDescription img, .feed-item-text img { + filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue)); +} - .cke_panel_listItem a:active, .cke_panel_listItem a:focus, .cke_panel_listItem a:hover { - background: var(--dark-bg-2) !important; - } +.moreToggle button, .lessToggle button { + background-color: var(--col-0); + filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue)); +} - a.cke_button_disabled:active, a.cke_button_disabled:focus, a.cke_button_disabled:hover, a.cke_button_off:active, a.cke_button_off:focus, a.cke_button_off:hover { - background: var(--dark-bg-2) !important; - } +#ttDescription a, .feed-item-text a { + filter: invert(var(--txt-invert)) hue-rotate(var(--txt-hue)); +} - .cke_colorblock, .cke_colorblock a { - color: var(--dark-txt-1); - } +.cke_editable { + color: var(--txt-1); + background-color: var(--bg-4); +} - a:active.cke_colorauto, a:active.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:hover.cke_colorauto, a:hover.cke_colormore { - background: var(--dark-bg-2) !important; - } +.cke_combo_button, .cke_toolgroup { + background: var(--bg-3) !important; +} - a:active.cke_colorbox, a:focus.cke_colorbox, a:hover.cke_colorbox { - background: var(--dark-bg-3) !important; - } +.cke_button_icon { + opacity: 1 !important; + filter: invert(var(--txt-invert)) !important; +} - .cke_dialog_contents, .cke_dialog_body { - color: var(--dark-txt-1) !important; - background: var(--dark-bg-2) !important; - } +.cke_combo_text { + color: var(--txt-2) !important; +} - .cke_dialog_footer, .cke_dialog_title { - background: var(--dark-bg-1) !important; - } +.cke_panel_grouptitle { + background: var(--bg-2) !important; + color: var(--txt-1); +} - .cke_reset_all, .cke_reset_all * { - color: var(--dark-txt-1) !important; - } +.cke_panel_listItem a:active, .cke_panel_listItem a:focus, .cke_panel_listItem a:hover { + background: var(--bg-3) !important; +} - .cke_dialog_page_contents a.cke_dialog_ui_button, a.cke_dialog_ui_button_cancel { - background: var(--dark-bg-3) !important; - } +a.cke_button_disabled:active, a.cke_button_disabled:focus, a.cke_button_disabled:hover, a.cke_button_off:active, a.cke_button_off:focus, a.cke_button_off:hover { + background: var(--bg-3) !important; +} - input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_text, textarea.cke_dialog_ui_input_textarea { - background: var(--dark-bg-3) !important; - } +.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { + background: var(--col-2) !important; +} - a.cke_dialog_tab_selected { - background: var(--dark-bg-2) !important; - } +.cke_colorblock, .cke_colorblock a { + color: var(--txt-1); +} - a.cke_dialog_tab { - background: var(--dark-bg-3) !important; - } +a:active.cke_colorauto, a:active.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:hover.cke_colorauto, a:hover.cke_colormore { + background: var(--bg-3) !important; +} - select.cke_dialog_ui_input_select { - background-color: var(--dark-bg-4) !important; - } +a:active.cke_colorbox, a:focus.cke_colorbox, a:hover.cke_colorbox { + background: var(--bg-3) !important; +} - .cke_button_on { - background: var(--dark-bg-2) !important; - } +.cke_dialog_contents, .cke_dialog_body { + color: var(--txt-1) !important; + background: var(--bg-2) !important; +} - /* Big header */ - #tabsList { - background-color: var(--dark-bg-0); - } +.cke_dialog_footer, .cke_dialog_title { + background: var(--bg-1) !important; +} - nav#divTabHeader, nav.tab-header { - background-color: var(--dark-bg-1); - } +.cke_reset_all, .cke_reset_all * { + color: var(--txt-1) !important; +} - li.ui-state-active { - background-color: var(--dark-bg-1) !important; - } +.cke_dialog_page_contents a.cke_dialog_ui_button, a.cke_dialog_ui_button_cancel { + background: var(--bg-3) !important; +} - .ui-state-default { - color: var(--dark-txt-1) !important; - } +input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_text, textarea.cke_dialog_ui_input_textarea { + background: var(--bg-3) !important; +} - .panel-app { - color: var(--dark-txt-2); - } +a.cke_dialog_tab_selected { + background: var(--bg-2) !important; +} - .tab-row { - background-color: var(--dark-bg-1) !important; - } +a.cke_dialog_tab { + background: var(--bg-3) !important; +} - .panel-app:hover { - background-color: var(--dark-bg-1) !important; - } +select.cke_dialog_ui_input_select { + background-color: var(--bg-4) !important; +} - .btn-default, .pagination>li>a, .nav-tabs>li.active>a, .copyButton { - background-color: var(--dark-bg-1) !important; - color: var(--dark-col-1); - } +.cke_button_on { + background: var(--bg-2) !important; +} - .btn { - color: var(--dark-txt-2) !important; - } +/* Big header */ +#tabsList { + background-color: var(--bg-0); +} - .btn:hover, .nav>li>a:hover { - background-color: var(--dark-bg-2) !important; - } +nav#divTabHeader, nav.tab-header { + background-color: var(--bg-1); +} - .btn-link { - color: var(--dark-col-1); - } +li.ui-state-active { + background-color: var(--bg-1) !important; +} - .btn-primary { - background-color: var(--dark-col-2); - } +.ui-state-default { + color: var(--txt-1) !important; +} - .module-header span { - color: var(--dark-col-1); - } +.panel-app { + color: var(--txt-2); +} - .pagination>li>a:hover { - color: var(--dark-txt-2); - background-color: var(--dark-bg-2) !important; - } +.tab-row { + background-color: var(--bg-1) !important; +} - .pagination>.active>a { - background-color: var(--dark-bg-2) !important; - } +.panel-app:hover { + background-color: var(--bg-1) !important; +} - .ButtonCell, .ButtonCellBottom, .ButtonCellTop, .TabButtonCell { - background-color: var(--dark-bg-1); - } +.btn-default, .pagination>li>a, .nav-tabs>li.active>a, .copyButton { + background-color: var(--bg-1) !important; + color: var(--col-1); +} - /* Oddly grouped headers */ - .h3, h3 { - color: var(--dark-txt-2); - } +.btn { + color: var(--txt-2) !important; +} - /* Panels */ - .panel { - background-color: var(--dark-bg-0); +.btn:hover, .nav>li>a:hover { + background-color: var(--bg-2); +} - } +.btn-link { + color: var(--col-1); +} - .panel-default>.panel-heading { - background-color: var(--dark-bg-1); - } +.btn-danger { - .panel-title { - color: var(--dark-txt-2); - } +} - h1, h2, h3, h4, label, .control-label { - color: var(--dark-txt-2); - } +.btn-primary { + background-color: var(--col-0); +} - h1.panel-title, h2.panel-title, h3.panel-title, h4.panel-title, h5.panel-title, h6.panel-title { - color: var(--dark-txt-1); - } +.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover { + background-color: var(--col-2); + color: var(--txt-4) !important; +} - /* Navigation */ - .ui-layout-west { - background-color: var(--dark-bg-1) !important; - } +.module-header span { + color: var(--col-1); +} - /* Tables */ - tr.TDGridHeader, .table-header>div { - background-color: var(--dark-bg-1); - } +.pagination>li>a:hover { + color: var(--txt-2); + background-color: var(--bg-2) !important; +} - .table-striped>tbody>tr:nth-of-type(odd) { - background-color: var(--dark-bg-1); - } +.pagination>.active>a { + background-color: var(--bg-2) !important; +} - .hilite, .hilite .btn-link, .hilite a, .hilite td, .table>tbody>tr.hilite label, .table>tbody>tr.hilite.active, .table>tbody>tr.hilite.danger, .table>tbody>tr.hilite.info, .table>tbody>tr.hilite.success, .table>tbody>tr.hilite.warning, .table>tbody>tr.hilite>td.active, .table>tbody>tr.hilite>td.danger, .table>tbody>tr.hilite>td.info, .table>tbody>tr.hilite>td.success, .table>tbody>tr.hilite>td.warning { - background-color: var(--dark-bg-2) !important; - color: initial; - } +.ButtonCell, .ButtonCellBottom, .ButtonCellTop, .TabButtonCell { + background-color: var(--bg-1); +} - table>thead>tr.TDGridHeader>th, tr.TDGridHeader td, .table-header>div { - color: var(--dark-txt-2); - } +/* Oddly grouped headers */ +.h3, h3 { + color: var(--txt-2); +} - .TDFooterRow { - background-color: var(--dark-bg-1); - } +/* Panels */ +.panel { + background-color: var(--bg-0); - .nav1, .nav2, .nav3 { - background-color: var(--dark-bg-2); - } +} - .nav1 { - color: var(--dark-col-1); - } +.panel-default>.panel-heading { + background-color: var(--bg-1); +} - .nav2, .nav3 { - color: var(--dark-txt-2); - } +.panel-title { + color: var(--txt-2); +} - .text:active, .text:hover, .nav1:active, .nav1:hover, .nav2:active, .nav2:hover, .nav3:active, .nav3:hover { - background-color: var(--dark-bg-1); - } +h1, h2, h3, h4, label, .control-label { + color: var(--txt-2); +} - .nav2:hover, .nav3:hover, .report-text:hover, report-text:active { - color: var(--dark-txt-1); - background-color: var(--dark-bg-1); - } +h1.panel-title, h2.panel-title, h3.panel-title, h4.panel-title, h5.panel-title, h6.panel-title { + color: var(--txt-1); +} - .ui-layout-resizer-west { - background-color: var(--dark-bg-4); - } +/* Navigation */ +.ui-layout-west { + background-color: var(--bg-1) !important; +} - /* Charts & Graphs */ - path[fill="rgb(255, 255, 255)"] { - fill: var(--dark-bg-0); - } +/* Tables */ +tr.TDGridHeader, .table-header>div { + background-color: var(--bg-1); +} - path[stroke="rgba(0, 0, 0, 0.08)"] { - stroke: var(--dark-border-0); - } +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: var(--bg-1); +} - text[fill="rgb(66, 66, 66)"] { - fill: var(--dark-txt-0); - } +.hilite, .hilite .btn-link, .hilite a, .hilite td, .table>tbody>tr.hilite label, .table>tbody>tr.hilite.active, .table>tbody>tr.hilite.danger, .table>tbody>tr.hilite.info, .table>tbody>tr.hilite.success, .table>tbody>tr.hilite.warning, .table>tbody>tr.hilite>td.active, .table>tbody>tr.hilite>td.danger, .table>tbody>tr.hilite>td.info, .table>tbody>tr.hilite>td.success, .table>tbody>tr.hilite>td.warning { + background-color: var(--bg-2) !important; + color: initial; +} - path[fill="rgb(0, 96, 138)"] { - fill: var(--dark-col-1); - } +table>thead>tr.TDGridHeader>th, tr.TDGridHeader td, .table-header>div { + color: var(--txt-2); +} - path[stroke="#004d6e"] { - stroke: var(--dark-col-2); - } +.TDFooterRow { + background-color: var(--bg-1); +} - path[stroke="black"] { - stroke: var(--dark-col-2); - } +.nav1, .nav2, .nav3 { + background-color: var(--bg-2); +} - .k-tooltip { - background-color: var(--dark-col-2) !important; - color: var(--dark-txt-1); - border-color: var(--dark-border-0) !important; - } +.nav1 { + color: var(--col-1); +} - /* Borders */ - .ui-tabs .ui-tabs-nav li.ui-state-active { - border-left: 1px solid var(--dark-border-0); - border-right: 1px solid var(--dark-border-0); - border-top: 1px solid var(--dark-border-0); - } +.nav2, .nav3 { + color: var(--txt-2); +} - .ui-widget-header, .tab-row { - border-bottom: 1px solid var(--dark-border-0); - } +.text:active, .text:hover, .nav1:active, .nav1:hover, .nav2:active, .nav2:hover, .nav3:active, .nav3:hover { + background-color: var(--bg-1); +} - .panel-default, .panel-default>.panel-heading { - border-color: var(--dark-border-0) !important; - } +.nav2:hover, .nav3:hover, .report-text:hover, report-text:active { + color: var(--txt-1); + background-color: var(--bg-1); +} - .border-bottom, .table, table>thead>tr.TDGridHeader>th, .table>tbody>tr>td, .nav-tabs { - border-bottom: 1px solid var(--dark-border-0); - } +.ui-layout-resizer-west { + background-color: var(--bg-4); +} - .table, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { - border-bottom: 1px solid var(--dark-border-0); - } +/* Charts & Graphs */ +path[fill="rgb(255, 255, 255)"] { + fill: var(--bg-0); +} - .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th { - border: 1px solid var(--dark-border-0); - } +path[stroke="rgba(0, 0, 0, 0.08)"] { + stroke: var(--border-0); +} - .table-bordered { - border: 1px solid var(--dark-border-0); - } +text[fill="rgb(66, 66, 66)"] { + fill: var(--txt-0); +} - .table-header>div, .table-header>div:last-child { - border-color: var(--dark-border-0); - } +path[fill="rgb(0, 96, 138)"] { + fill: var(--col-0); +} - .border-top, tr.TDGridHeader { - border-top: 1px solid var(--dark-border-0); - } +path[stroke="#004d6e"] { + stroke: var(--col-0); +} - .shadow-box { - border: 1px solid var(--dark-border-0); - } +path[stroke="black"] { + stroke: var(--col-0); +} - .form-control { - border: 1px solid var(--dark-border-0); - } +.k-tooltip { + background-color: var(--col-0) !important; + color: var(--txt-1); + border-color: var(--border-0) !important; +} - .form-control:focus { - border-color: var(--dark-col-1); - } +/* Borders */ +.ui-tabs .ui-tabs-nav li.ui-state-active { + border-left: 1px solid var(--border-0); + border-right: 1px solid var(--border-0); + border-top: 1px solid var(--border-0); +} - input.lu_lookupbox, input.lu_lookupbox:hover { - border: 1px solid var(--dark-border-0); - } +.ui-widget-header, .tab-row { + border-bottom: 1px solid var(--border-0); +} - .select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input { - border-color: var(--dark-border-0); - } +.panel-default, .panel-default>.panel-heading { + border-color: var(--border-0) !important; +} - .select2-container-multi .select2-choices .select2-search-choice { - border: 1px solid var(--dark-border-0); - } +.border-bottom, .table, table>thead>tr.TDGridHeader>th, .table>tbody>tr>td, .nav-tabs { + border-bottom: 1px solid var(--border-0); +} - .select2-drop-active, .select2-dropdown-open.select2-drop-above [class^=select2-choice] { - border-color: var(--dark-col-1); - } +.table, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { + border-bottom: 1px solid var(--border-0); +} - .talu_holder.holder-focused { - outline: 2px solid var(--dark-col-1); - } +.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th { + border: 1px solid var(--border-0); +} - .talu_holder .bit-box { - border: 1px solid var(--dark-border-0); - } +.table-bordered { + border: 1px solid var(--border-0); +} - .comment-options { - border: 1px solid var(--dark-border-0); - } +.table-header>div, .table-header>div:last-child { + border-color: var(--border-0); +} - .cke_chrome { - border: 1px solid var(--dark-border-0) !important; - } +.border-top, tr.TDGridHeader { + border-top: 1px solid var(--border-0); +} - .cke_contents { - border: 1px solid var(--dark-border-0) !important; - } +.shadow-box { + border: 1px solid var(--border-0); +} - .cke_combo_button, .cke_toolgroup { - border-color: var(--dark-border-0) !important; - } +.form-control { + border: 1px solid var(--border-0); +} - .cke_combo_arrow { - border-top: 3px solid var(--dark-txt-2) !important; - } +.form-control:focus { + border-color: var(--col-1); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--col-1); +} - .cke_panel_listItem a { - border: 0; - } +input.lu_lookupbox, input.lu_lookupbox:hover { + border: 1px solid var(--border-0); +} - .cke_panel_grouptitle { - border-bottom: 1px solid var(--dark-border-0) !important; - } +.select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input { + border-color: var(--border-0); +} - .cke_panel_block { - outline: 0; - } +.select2-container-multi .select2-choices .select2-search-choice { + border: 1px solid var(--border-0); +} - .cke_panel { - border: 1px solid var(--dark-border-0) !important; - } +.select2-search input { + border: 1px solid var(--border-0); +} - a.cke_colorbox, a.cke_colorauto, a.cke_colormore { - border: 1px solid var(--dark-border-0) !important; - } +.select2-drop-active, .select2-dropdown-open.select2-drop-above [class^=select2-choice] { + border-color: var(--col-1); +} - .cke_dialog_footer, .cke_dialog_title, .cke_dialog_contents, .cke_dialog_body { - border: 1px solid var(--dark-border-0) !important; - } +.talu_holder.holder-focused { + outline: 2px solid var(--col-1); +} - a.cke_dialog_ui_button { - border: 1px solid var(--dark-border-0) !important; - } +.talu_holder .bit-box { + border: 1px solid var(--border-0); +} - a.cke_dialog_tab { - border-color: var(--dark-border-0) !important; - } +.comment-options { + border: 1px solid var(--border-0); +} - select.cke_dialog_ui_input_select { - border: 1px solid var(--dark-border-0) !important; - } +.cke_chrome { + border: 1px solid var(--border-0) !important; +} - input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_text, textarea.cke_dialog_ui_input_textarea { - border: 1px solid var(--dark-border-0) !important; - } +.cke_contents { + border: 1px solid var(--border-0) !important; +} - .nav-tabs>li>a:hover { - border-color: var(--dark-border-0); - } +.cke_combo_button, .cke_toolgroup { + border-color: var(--border-0) !important; +} - .btn-default, .pagination>li>a, .nav-tabs>li.active>a { - border: 1px solid var(--dark-border-0) !important; - } +.cke_combo_arrow { + border-top: 3px solid var(--txt-2) !important; +} - .ButtonCell, .ButtonCellBottom, .ButtonCellTop, .TabButtonCell { - border-bottom: 1px solid var(--dark-border-0); - } +.cke_panel_listItem a { + border: 0; +} - .btn-primary { - border-color: var(--dark-border-0); - } +.cke_panel_grouptitle { + border-bottom: 1px solid var(--border-0) !important; +} - .dropdown-menu { - border: 1px solid var(--dark-border-0); - } +.cke_panel_block { + outline: 0; +} - .dropdown-menu .divider { - background-color: var(--dark-border-0); - } +.cke_panel { + border: 1px solid var(--border-0) !important; +} - .Module-rpt { - border-color: var(--dark-col-1); - } +a.cke_colorbox, a.cke_colorauto, a.cke_colormore { + border: 1px solid var(--border-0) !important; +} - .colContainer { - border-color: var(--dark-border-0); - } +.cke_dialog_footer, .cke_dialog_title, .cke_dialog_contents, .cke_dialog_body { + border: 1px solid var(--border-0) !important; +} - .layout-panel { - border-color: var(--dark-border-0); - } +a.cke_dialog_ui_button { + border: 1px solid var(--border-0) !important; +} - .layout-container .layout-entry { - border-color: var(--dark-border-0); - } +a.cke_dialog_tab { + border-color: var(--border-0) !important; +} - div.comment { - border-color: var(--dark-border-0); - } +select.cke_dialog_ui_input_select { + border: 1px solid var(--border-0) !important; +} - .ms-choice { - border: 1px solid var(--dark-border-0) !important; - } +input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_text, textarea.cke_dialog_ui_input_textarea { + border: 1px solid var(--border-0) !important; +} - .ms-drop { - border: 1px solid var(--dark-border-0); - } +.nav-tabs>li>a:hover { + border-color: var(--border-0); +} - .list-group-item { - border: 1px solid var(--dark-border-0); - } +.btn-default, .pagination>li>a, .nav-tabs>li.active>a { + border: 1px solid var(--border-0) !important; +} - .ui-widget-content, .ui-widget.ui-widget-content { - border: 1px solid var(--dark-border-0); - } +.ButtonCell, .ButtonCellBottom, .ButtonCellTop, .TabButtonCell { + border-bottom: 1px solid var(--border-0); +} - .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - border: 1px solid var(--dark-border-0); - } +.btn-primary { + border-color: var(--border-0); +} - .input-group-addon { - border: 1px solid var(--dark-border-0); - } +.dropdown-menu { + border: 1px solid var(--border-0); +} + +.dropdown-menu .divider { + background-color: var(--border-0); +} + +.Module-rpt { + border-color: var(--col-1); +} + +.colContainer { + border-color: var(--border-0); +} + +.layout-panel { + border-color: var(--border-0); +} + +.layout-container .layout-entry { + border-color: var(--border-0); +} + +div.comment { + border-color: var(--border-0); +} + +.ms-choice { + border: 1px solid var(--border-0) !important; +} + +.ms-drop { + border: 1px solid var(--border-0); +} + +.list-group-item { + border: 1px solid var(--border-0); +} + +.ui-widget-content, .ui-widget.ui-widget-content { + border: 1px solid var(--border-0); +} + +.ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { + border: 1px solid var(--border-0); +} + +.input-group-addon { + border: 1px solid var(--border-0); +} + +.lu_tdac-auto, .lu_tdac-auto ul { + border: 1px solid var(--border-0); +} - .lu_tdac-auto, .lu_tdac-auto ul { - border: 1px solid var(--dark-border-0); - } - } ` GM.addStyle(customStyles)