From 26db015cab4b8943fb6634ad2a37497c110797f2 Mon Sep 17 00:00:00 2001 From: Ling Zheng Date: Wed, 5 Nov 2025 14:25:34 -0500 Subject: [PATCH] updated --- content/content.js | 47 + content/modules/color.js | 346 +++ content/modules/config.js | 65 + content/modules/highlighting.js | 118 + content/modules/links.js | 64 + content/modules/observer.js | 57 + content/modules/parsing.js | 478 ++++ content/modules/settings.js | 96 + content/modules/ui.js | 284 +++ content/modules/utils.js | 89 + content/styles.css | 2329 ++++++++++++++++++ lib/moment.min.js | 2 + lib/tinycolor.min.js | 1 + manifest.json | 58 + userscript.js | 4010 +++++++++++++++++++++++++++++++ 15 files changed, 8044 insertions(+) create mode 100644 content/content.js create mode 100644 content/modules/color.js create mode 100644 content/modules/config.js create mode 100644 content/modules/highlighting.js create mode 100644 content/modules/links.js create mode 100644 content/modules/observer.js create mode 100644 content/modules/parsing.js create mode 100644 content/modules/settings.js create mode 100644 content/modules/ui.js create mode 100644 content/modules/utils.js create mode 100644 content/styles.css create mode 100644 lib/moment.min.js create mode 100644 lib/tinycolor.min.js create mode 100644 manifest.json create mode 100644 userscript.js diff --git a/content/content.js b/content/content.js new file mode 100644 index 0000000..2bd2c1e --- /dev/null +++ b/content/content.js @@ -0,0 +1,47 @@ +// Main content script entry point + +(function() { + 'use strict'; + + // Initialize the extension + async function init() { + await changeTitle() + settings("apply") + parseTicket() + checkPath() + } + + // Wait for DOM to be ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + + // Listen for storage changes + addEventListener("storage", (event) => { + if (event.key == "userSettings") { + settings("apply") + } + }); + + // Listen for messages from popup windows (color editor) + window.addEventListener("message", (event) => { + let data = event.data + let origin = event.origin + console.log("Message from:", origin, data, event) + + if (data.colorsReady) { + let colors = settings('get', 'customHighlights') + event.source.postMessage({ customColors: colors }, "*") + } + if (data.colorData) { + let element = document.getElementById("customHighlights") + if (element) { + let strData = JSON.stringify(data.colorData) + element.value = strData + settings('update') + } + } + }, false); +})(); diff --git a/content/modules/color.js b/content/modules/color.js new file mode 100644 index 0000000..230061c --- /dev/null +++ b/content/modules/color.js @@ -0,0 +1,346 @@ +//color manipulation via css filters: https://github.com/angel-rs/css-color-filter-generator +//modified to return an object instead of filter string + +class Color { + constructor(r, g, b) { + this.set(r, g, b); + } + + toString() { + return `rgb(${Math.round( + this.r + )}, ${Math.round(this.g)}, ${Math.round(this.b)})`; + } + + set(r, g, b) { + this.r = this.clamp(r); + this.g = this.clamp(g); + this.b = this.clamp(b); + } + + hueRotate(angle = 0) { + angle = (angle / 180) * Math.PI; + const sin = Math.sin(angle); + const cos = Math.cos(angle); + + this.multiply([ + 0.213 + cos * 0.787 - sin * 0.213, + 0.715 - cos * 0.715 - sin * 0.715, + 0.072 - cos * 0.072 + sin * 0.928, + 0.213 - cos * 0.213 + sin * 0.143, + 0.715 + cos * 0.285 + sin * 0.14, + 0.072 - cos * 0.072 - sin * 0.283, + 0.213 - cos * 0.213 - sin * 0.787, + 0.715 - cos * 0.715 + sin * 0.715, + 0.072 + cos * 0.928 + sin * 0.072 + ]); + } + + grayscale(value = 1) { + this.multiply([ + 0.2126 + 0.7874 * (1 - value), + 0.7152 - 0.7152 * (1 - value), + 0.0722 - 0.0722 * (1 - value), + 0.2126 - 0.2126 * (1 - value), + 0.7152 + 0.2848 * (1 - value), + 0.0722 - 0.0722 * (1 - value), + 0.2126 - 0.2126 * (1 - value), + 0.7152 - 0.7152 * (1 - value), + 0.0722 + 0.9278 * (1 - value) + ]); + } + + sepia(value = 1) { + this.multiply([ + 0.393 + 0.607 * (1 - value), + 0.769 - 0.769 * (1 - value), + 0.189 - 0.189 * (1 - value), + 0.349 - 0.349 * (1 - value), + 0.686 + 0.314 * (1 - value), + 0.168 - 0.168 * (1 - value), + 0.272 - 0.272 * (1 - value), + 0.534 - 0.534 * (1 - value), + 0.131 + 0.869 * (1 - value) + ]); + } + + saturate(value = 1) { + this.multiply([ + 0.213 + 0.787 * value, + 0.715 - 0.715 * value, + 0.072 - 0.072 * value, + 0.213 - 0.213 * value, + 0.715 + 0.285 * value, + 0.072 - 0.072 * value, + 0.213 - 0.213 * value, + 0.715 - 0.715 * value, + 0.072 + 0.928 * value + ]); + } + + multiply(matrix) { + const newR = this.clamp( + this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2] + ); + const newG = this.clamp( + this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5] + ); + const newB = this.clamp( + this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8] + ); + this.r = newR; + this.g = newG; + this.b = newB; + } + + brightness(value = 1) { + this.linear(value); + } + contrast(value = 1) { + this.linear(value, -(0.5 * value) + 0.5); + } + + linear(slope = 1, intercept = 0) { + this.r = this.clamp(this.r * slope + intercept * 255); + this.g = this.clamp(this.g * slope + intercept * 255); + this.b = this.clamp(this.b * slope + intercept * 255); + } + + invert(value = 1) { + this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255); + this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255); + this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255); + } + + hsl() { + // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA. + const r = this.r / 255; + const g = this.g / 255; + const b = this.b / 255; + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + let h, + s, + l = (max + min) / 2; + + if (max === min) { + h = s = 0; + } else { + const d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + + case g: + h = (b - r) / d + 2; + break; + + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + + return { + h: h * 100, + s: s * 100, + l: l * 100 + }; + } + + clamp(value) { + if (value > 255) { + value = 255; + } else if (value < 0) { + value = 0; + } + return value; + } + } + +class Solver { + constructor(target, baseColor) { + this.target = target; + this.targetHSL = target.hsl(); + this.reusedColor = new Color(0, 0, 0); + } + + solve() { + const result = this.solveNarrow(this.solveWide()); + return { + values: result.values, + loss: result.loss, + filter: this.css(result.values) + }; + } + + solveWide() { + const A = 5; + const c = 15; + const a = [60, 180, 18000, 600, 1.2, 1.2]; + + let best = { loss: Infinity }; + for (let i = 0; best.loss > 25 && i < 3; i++) { + const initial = [50, 20, 3750, 50, 100, 100]; + const result = this.spsa(A, a, c, initial, 1000); + if (result.loss < best.loss) { + best = result; + } + } + return best; + } + + solveNarrow(wide) { + const A = wide.loss; + const c = 2; + const A1 = A + 1; + const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; + return this.spsa(A, a, c, wide.values, 500); + } + + spsa(A, a, c, values, iters) { + const alpha = 1; + const gamma = 0.16666666666666666; + + let best = null; + let bestLoss = Infinity; + const deltas = new Array(6); + const highArgs = new Array(6); + const lowArgs = new Array(6); + + for (let k = 0; k < iters; k++) { + const ck = c / Math.pow(k + 1, gamma); + for (let i = 0; i < 6; i++) { + deltas[i] = Math.random() > 0.5 ? 1 : -1; + highArgs[i] = values[i] + ck * deltas[i]; + lowArgs[i] = values[i] - ck * deltas[i]; + } + + const lossDiff = this.loss(highArgs) - this.loss(lowArgs); + + for (let i = 0; i < 6; i++) { + const g = (lossDiff / (2 * ck)) * deltas[i]; + const ak = a[i] / Math.pow(A + k + 1, alpha); + values[i] = fix(values[i] - ak * g, i); + } + + const loss = this.loss(values); + if (loss < bestLoss) { + best = values.slice(0); + bestLoss = loss; + } + } + return { values: best, loss: bestLoss }; + + function fix(value, idx) { + let max = 100; + if (idx === 2 /* saturate */) { + max = 7500; + } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { + max = 200; + } + + if (idx === 3 /* hue-rotate */) { + if (value > max) { + value %= max; + } else if (value < 0) { + value = max + (value % max); + } + } else if (value < 0) { + value = 0; + } else if (value > max) { + value = max; + } + return value; + } + } + + loss(filters) { + // Argument is array of percentages. + const color = this.reusedColor; + color.set(0, 0, 0); + + color.invert(filters[0] / 100); + color.sepia(filters[1] / 100); + color.saturate(filters[2] / 100); + color.hueRotate(filters[3] * 3.6); + color.brightness(filters[4] / 100); + color.contrast(filters[5] / 100); + + const colorHSL = color.hsl(); + return ( + Math.abs(color.r - this.target.r) + + Math.abs(color.g - this.target.g) + + Math.abs(color.b - this.target.b) + + Math.abs(colorHSL.h - this.targetHSL.h) + + Math.abs(colorHSL.s - this.targetHSL.s) + + Math.abs(colorHSL.l - this.targetHSL.l) + ); + } + + css(filters) { + function fmt(idx, multiplier = 1) { + return Math.round(filters[idx] * multiplier); + } + + //modified here + return { + invert: `${fmt(0)}%`, + sepia: `${fmt(1)}%`, + saturate: `${fmt(2)}%`, + hue_rotate: `${fmt(3, 3.6)}deg`, + brightness: `${fmt(4)}%`, + contrast: `${fmt(5)}%` + } + + //return `filter: invert(${fmt( + // 0 + //)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`; + } +} + +function hexToRgb(hex) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, (m, r, g, b) => { + return r + r + g + g + b + b; + }); + + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? [ + parseInt(result[1], 16), + parseInt(result[2], 16), + parseInt(result[3], 16) + ] + : null; +} + +function getFilterForColor(rgbColor) { + let bestResult = null; + let iterationCount = 0; // Initialize a counter for iterations + + for (let i = 0; i < 200; i++) { + iterationCount++; // Increment the counter for each iteration + const color = new Color(rgbColor[0], rgbColor[1], rgbColor[2]); + const solver = new Solver(color); + const result = solver.solve(); + + if (!bestResult || result.loss < bestResult.loss) { + bestResult = result; + if (bestResult.loss <= 0.01) { + // exit early if good result is found + break; + } + } + } + + console.log("Total iterations: ", iterationCount); // Log the total iterations + return bestResult; +} + +//end color manipulation + diff --git a/content/modules/config.js b/content/modules/config.js new file mode 100644 index 0000000..bff9e85 --- /dev/null +++ b/content/modules/config.js @@ -0,0 +1,65 @@ +// Configuration constants + +const primaryTitle = "Purdue University IT" + +/* QUEUE COLORS */ + +//from main webqueue script +var colorsByQueue = { + 'aae': {'bg' : '#7030A0', 'txt' : 'white' }, + 'abe' : {'bg' : '#256f78', 'txt' : 'white'}, + 'bidc' : {'bg' : '#C5FFC5', 'txt' : 'black'}, + 'biology' : {'bg' : '#67c1ee', 'txt' : 'black'}, + 'bme' : {'bg' : '#0D69FF', 'txt' : 'white'}, + 'ce' : {'bg' : '#008000', 'txt' : 'white' }, + 'che' : {'bg' : '#00FF00', 'txt' : 'black'}, + 'chem' : {'bg' : '#ffb1b7', 'txt' : 'black'}, + 'coea' : {'bg' : '#00D6BD', 'txt' : 'black'}, + 'coep' : {'bg' : '#FFDDB7', 'txt' : 'black'}, + 'comp.sci.' : {'bg' : '#772212', 'txt' : 'white'}, + 'dp' : {'bg' : '#0070A8', 'txt' : 'white'}, + 'doe': {'bg' : 'red', 'txt' : 'white'}, + 'ece' : {'bg' : '#FF6600', 'txt' : 'white'}, + 'ecnaccts' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'students' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'eaps' : {'bg' : '#629454', 'txt': 'white'}, + 'eee' : {'bg' : '#F66A6A', 'txt' : 'white'}, + 'ene': {'bg' : '#A45CD0', 'txt': 'white' }, + 'epics': {'bg' : '#E399E3', 'txt' : 'black'}, + 'flex' : {'bg' : '#A7ECFF', 'txt' : 'black'}, + 'helpdesk' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'ie' : {'bg' : '#FFB7B7', 'txt' : 'black'}, + 'imi' : {'bg' : '#FFB96D', 'txt' : 'black'}, + 'apple' : {'bg' : '#666666', 'txt' : 'white'}, + 'mailman' : {'bg' : 'white', 'txt' : 'black'}, + 'math' : {'bg' : '#f7977a', 'txt' : 'black'}, + 'me' : {'bg' : '#b30000', 'txt' : 'white'}, + 'mse': {'bg' : '#EFD3F5', 'txt' : 'black'}, + 'ne': {'bg' : '#af6377', 'txt' : 'white'}, + 'pari' : {'bg' : '#3f5c8a', 'txt': 'white'}, + 'physics' : {'bg' : '#07622f', 'txt': 'white'}, + //'potr' : {'bg' : '#663300', 'txt' : 'white'}, + 'president' : {'bg' : '#cfb991', 'txt' : 'black'}, + 'sitemgrs' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'stat' : {'bg' : '#ff6f44', 'txt' : 'white'}, + 'swt' : {'bg' : '#000ED6', 'txt' : '#FFEE00'}, + 'polytechnic' : {'bg' : 'black', 'txt' : 'white'}, + 'cnit' : {'bg' : '#434343', 'txt' : 'white'}, + 'uds' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'udsprojects': {'bg' : '#98A4AE', 'txt' : 'white'}, + //'wang' : {'bg' : '#000099', 'txt' : 'white'}, + 'web' : {'bg' : '#B46086', 'txt' : 'white'}, + 'windows' : {'bg' : '#b77729', 'txt' : 'white'}, + 'zsite' : {'bg' : '#98A4AE', 'txt' : 'white'}, +}; + +var tdxtoolsUrl = "https://engineering.purdue.edu" + +//regex for matching inline highlights +var colorsByStatus = { + '!!': {style: {background: 'var(--col-highlight-1)'}, type: 'highlight', re: new RegExp("\!! (.*) \!!","g")}, + '~~': {style: {background: 'var(--col-highlight-2)'}, type: 'highlight', re: new RegExp("\~~ (.*) \~~","g")}, +} + +var colorScheme + diff --git a/content/modules/highlighting.js b/content/modules/highlighting.js new file mode 100644 index 0000000..d88e68c --- /dev/null +++ b/content/modules/highlighting.js @@ -0,0 +1,118 @@ +// Highlighting functions + +function createHighlightBubble(element, bgColor, txtColor) { + //create new element to highlight + let newSpan = document.createElement("span") + newSpan.innerText = element.innerText + newSpan.style.backgroundColor = bgColor + newSpan.style.color = txtColor + newSpan.classList.add("qHighlight") + + //replace cell with new span + element.replaceChildren(newSpan) + return newSpan +} + +function handleHighlight(type, txt, element) { + let behavior = settings('get', 'highlightBehavior') + + var re + var style = null + + for (const [key, color] of Object.entries(colorsByStatus)) { + re = color.re.exec(txt) + if (re) { + style = color.style + break + } + } + + const customHighlights = settings('get', 'customHighlights') || [] + for (const customHighlight of customHighlights) { + let customType = customHighlight.type + if (customType == "highlight") { + let char = customHighlight.value + let reg = new RegExp(`\\${char} (.*) \\${char}`, "g") + re = reg.exec(txt) + if (re) { + style = customHighlight.style + break + } + } + + if (type == "reply" && customType == "reply") { + style = customHighlight.style + } + + if (type == "dateModified" && customType == "dateModified") { + style = customHighlight.style + if (style.background) { + let a = Math.floor(txt * 255).toString(16); + style.background = style.background + a + } + } + + if (type == "userModified" && customType == "userModified") { + style = customHighlight.style + } + + if (type == "report" && customType == "report") { + if (customHighlight.value == txt) { + element.classList.add("reportTitle") + style = customHighlight.style + } + } + + if (type == "report" && customType == "report-regex") { + if ((new RegExp(customHighlight.value).exec(txt))) { + element.classList.add("reportTitle") + style = customHighlight.style + } + } + + if (type == "person" && customType == "person") { + if (customHighlight.value == txt) { + element = createHighlightBubble(element) + style = customHighlight.style + } + } + } + + if (style) { + let link = element.querySelector("a") + if (behavior === "block") { + if (re && link) { + let newTitle = re[1] + link.innerText = newTitle + //reset regex + re.lastIndex = 0 + } + } else { + if (re && link) { + let text = link.innerText + link.innerText = "" + element = link.appendChild(document.createElement("span")) + element.innerText = text + element.style.lineHeight = "1.4" + //reset regex + re.lastIndex = 0 + } + } + + for (const [attr, val] of Object.entries(style)) { + element.style[attr] = val + } + + } else { + //apply defaults + if (type == "reply") { + element.style.backgroundColor = "var(--col-reply)"; + } + if (type == "userModified") { + element.style.backgroundColor = "var(--col-modified)"; + } + if (type == "dateModified") { + element.style.backgroundColor = `rgba(255,0,0,${txt}`; + } + } +} diff --git a/content/modules/links.js b/content/modules/links.js new file mode 100644 index 0000000..c1d6e20 --- /dev/null +++ b/content/modules/links.js @@ -0,0 +1,64 @@ +// Link handling functions + +function handleLink(source, link) { + let behavior = settings('get', 'linkBehavior') + + let relL = window.screenLeft != undefined ? window.screenLeft : screen.left + let relT = window.screenTop != undefined ? window.screenTop : screen.top + + if (behavior == "tabs") { + switch(source) { + case 'report': { + // Check if we've already processed this link + if (link.dataset.tdxLinkProcessed) { + return + } + + // Mark as processed + link.dataset.tdxLinkProcessed = 'true' + + // Remove any existing onclick handler + link.onclick = null + // Set target to open in new tab + link.target = "_blank" + + // Add our own click handler to ensure it works even if TDX adds event listeners + // Use capture phase to run before other handlers + link.addEventListener('click', function(event) { + // Only handle left clicks (not middle/right clicks) + if (event.button === 0 || !event.button) { + event.preventDefault() + event.stopPropagation() + window.open(link.href, '_blank') + } + }, true) // Use capture phase + break + } + + case 'Update': + case 'TicketTaskNew': + case 'TicketAddTaskTemplate': { + link.onclick = (event) => { + event.preventDefault() + let w = (window.screen.width / 1.75) + let h = (window.screen.height / 1.25) + let l = ((window.screen.width / 2) - (w/2)) + relL + let t = ((window.screen.height / 2) - (h/2)) + relT + + //restructure url for updating + let location = window.location.pathname + let baseHref = location.substr(0, location.lastIndexOf('/')) + let href = `${baseHref}/${source}${window.location.search}` + + let params = `width=${w}px,height=${h}px,left=${l}px,top=${t}px` + return window.open(href, '_blank', params) + } + break + } + } + + } else { + return + //leave default + } +} diff --git a/content/modules/observer.js b/content/modules/observer.js new file mode 100644 index 0000000..917f9ef --- /dev/null +++ b/content/modules/observer.js @@ -0,0 +1,57 @@ +// MutationObserver setup + +//setup observer to watch report/table changes/refreshes +let observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + let t = mutation.target + + // Only process Element nodes (skip text nodes, comment nodes, etc.) + if (!(t instanceof Element)) { + return + } + + if (t.querySelector("div > table")) { + parseTable(t) + } + + //parse the feed if it updates + if (t.classList && t.classList.contains("feed")) { + parseTicket(mutation.addedNodes) + } else if (t.classList && t.classList.contains("feed-body")) { + parseTicket(t.querySelectorAll(".feed-reply")) + } + + //parse dashboard widgets + if (t.id == "tdx-workmgmt-container-collection") { + parseOtherElements() + } + + //parse side panels + if (t.classList && t.classList.contains("tdx-right-side-panel")) { + parseOtherElements() + } + + let module = t.querySelector("div > .tdx-dashboard__widget-container") + if (module) { + updateHeading(t) + } + + //search whole document, frames may reset when reopened + let frames = document.querySelectorAll("iframe:not(.customEmbed)") + if (frames) { + [...frames].forEach(frame => { + injectOtherStyles(frame) + }); + } + }); +}); + +if (true) { + console.log("Observing...") + observer.observe(document.body, { + characterDataOldValue: true, + subtree: true, + childList: true, + characterData: true + }); +} diff --git a/content/modules/parsing.js b/content/modules/parsing.js new file mode 100644 index 0000000..f677d90 --- /dev/null +++ b/content/modules/parsing.js @@ -0,0 +1,478 @@ +// Parsing functions for tickets, tables, and other elements + +function updateHeading(mutation) { + let headings = mutation.querySelectorAll(".tdx-control-bar__title") + + for (const heading of headings) { + //color the header if queue name is found + let headingTxt = heading.innerText + let headingFirst = headingTxt.split(" ")[0] + headingFirst = headingFirst.toLowerCase() + + handleHighlight("report", headingTxt, heading) + + //try embedding + if (headingTxt.startsWith("{")) { + try { + let embedData = JSON.parse(headingTxt) + + let title = document.createElement("h4") + title.classList = heading.classList + title.innerText = embedData.name + let moduleBody = heading.parentNode.parentNode.parentNode.querySelector(".tdx-widget") + let embed = document.createElement("iframe") + embed.classList = "customEmbed" + embed.src = embedData.url + heading.replaceWith(title) + moduleBody.replaceWith(embed) + } catch { + } + } + } +} + +function parseTicket(mutation = null) { + let qBlock = document.querySelector("#ctlAttribute2285") + //ticket or task + let header = document.getElementById("thTicket_spnTitle") || document.querySelector("#upTaskHeader>div>h1") + + //find calendar inputs when editing tickets/tasks + let calendars = document.querySelectorAll("#txtStartDate, #txtEndDate") //tasks for now, will add more as found + if (calendars) { + let originalFormat = "M/D/YYYY h:mm A"; + let newFormat = "YYYY-MM-DDTHH:mm"; + [...calendars].forEach(calendar => { + let date = window.moment(calendar.value, originalFormat) + + let newCal = document.createElement("input") + newCal.id = `${calendar.id}-new` + newCal.classList = calendar.classList + newCal.type = "datetime-local" + + function updateDate() { + //update old tdx calendar + let parsedFormat = date.format(originalFormat) + calendar.value = parsedFormat + + //update new calendar + let iso = date.format(newFormat) + newCal.value = iso + calTxt.innerText = date.calendar() + + console.log("Cal update!", date) + } + + //convert to original format + newCal.addEventListener("input", event => { + let parsedValue = window.moment(event.target.value, newFormat) + date = parsedValue + updateDate() + }) + + //date modifier shortcuts + let calBox = document.createElement("div") + calBox.classList = ["calBox"] + let calTxt = document.createElement("span") + calTxt.innerText = date.format('dddd') + + //modify date + function btnModify(btn) { + console.log("Modify date:", btn) + if ('add' in btn) { + date.add(btn.add) + } else if ('set' in btn) { + date.set(btn.set) + } + + //check business days + let day = date.isoWeekday() + let hour = date.hour() + let min = date.minute() + let wkday = date.weekday() + + console.log("WkDay:", wkday, "Day:", day, "hour:", hour, "min:", min) + + //if Friday after 5pm + if (day >= 5 && (hour > 17 || (hour == 17 && min > 0))) { + date.set({ + h: 8, + d: 1 + 7, + m: 0 + }) + } else if (day > 5) { + //if sat/sun + date.set({ + d: 1 + 7 + }) + } + + updateDate() + } + + let buttons = [ + { name: "+1 day", add: { days: 1 } }, + { name: "+1 week", add: { weeks: 1 } }, + { name: "+1 month", add: { months: 1 } }, + { name: "12PM", set: { h: 12, m: 0 } }, + { name: "5PM", set: { h: 17, m: 0 } } + ] + + for (const btn of buttons) { + let button = document.createElement("button") + button.classList = "btn btn-calendar" + button.innerText = btn.name + button.addEventListener("click", (event) => { + event.preventDefault() + btnModify(btn) + }) + calBox.appendChild(button) + } + + updateDate() + + //old input still needs to exist for proper format conversion + calendar.style.display = "none" + calendar.parentElement.append(newCal) + calendar.parentElement.append(calTxt) + calendar.parentElement.append(calBox) + }); + } + + //change tab title + if (header) { + let ticketTitle = header.childNodes[0].textContent + document.title = ticketTitle + } else { + return + } + + //add queue tag to ticket title + if (qBlock && !document.querySelector(".qBox")) { + let qElement = qBlock.querySelector("span.wrap-text") + let qTxt = qElement.innerText + + let newBox = document.createElement("span") + newBox.innerText = qTxt + newBox.classList.add("qBox") + + for (const qK of Object.keys(colorsByQueue)) { + let q = colorsByQueue[qK] + if (qTxt.toLowerCase() == qK) { + newBox.style.color = q.txt + newBox.style.backgroundColor = q.bg + } + } + + header.appendChild(newBox) + } + + //handle button links - updates/tasks for now + //update buttons + [...document.querySelectorAll("#btnUpdateTicket, #divUpdateFromActions")].forEach(button => { + handleLink("Update", button) + }); + + //task button + [...document.querySelectorAll("#liAddTicketTask>a")].forEach(button => { + handleLink("TicketTaskNew", button) + }); + + //task template button + [...document.querySelectorAll("#divAddTaskTemplate>a")].forEach(button => { + handleLink("TicketAddTaskTemplate", button) + }); + + //color the feed if darkmode + var feedItems + + if (mutation) { + feedItems = mutation + } else { + feedItems = document.querySelectorAll("#ttDescription") + } + + if (feedItems) { + for (const feedItem of feedItems) { + [...feedItem.querySelectorAll("*[style*='color']")].forEach(feedElement => { + let color = window.tinycolor(feedElement.style.color) + let brightness = color.getBrightness() + + //if color is too dark + if (brightness < 100 && colorScheme == "darkMode") { + var newColor + var isGrey = true + let rgb = color.toRgb() + + if (rgb.r == rgb.b && rgb.r == rgb.g) { + isGrey = true + } else { + isGrey = false + } + + //if color is shade of grey + if (isGrey) { + let flippedColor = window.tinycolor(invertHex(color.spin(180).toHex())) + newColor = flippedColor + } else { + let threshold = 50 + let diff = (threshold - brightness) + brightness + newColor = color.brighten(diff) + } + + feedElement.style.color = newColor.toHexString() + } + }); + } + } +} + +function parseOtherElements() { + //inject styles into search bar + [...document.querySelectorAll("tdx-search-bar, .js_sidePanelX")].forEach(searchBar => { + let shadow = searchBar.shadowRoot + if (shadow) { + injectOtherStyles(shadow); + + //check nested shadows + [...shadow.querySelectorAll("tdx-close-x")].forEach(nested => { + let nestedShadow = nested.shadowRoot + if (nestedShadow) { + injectOtherStyles(nestedShadow) + } + }) + } + }) + + let desktopLayout = settings('get', 'layout') + let desktop = document.querySelector("#divContent") + if (desktop && desktopLayout) { + let col1 = desktop.querySelector("#Column1") + let col2 = desktop.querySelector("#Column2") + let col3 = desktop.querySelector("#Column3") + + //100% / 33-66% + if (desktopLayout == "1_100-66-33" && col2 && col3) { + console.log("Applying layout:", desktopLayout) + + //define width classes + let col2WidthClass = "col-md-8" + let col3WidthClass = "col-md-4" + + //resize column 2 + for (const cls of col2.classList) { + if (cls.startsWith("col-md")) { + console.log("Found col2 width class:", cls) + col2.classList.remove(cls) + col2.classList.add(col2WidthClass) + break + } + } + + //resize column 3 + for (const cls of col3.classList) { + if (cls.startsWith("col-md")) { + col3.classList.remove(cls) + col3.classList.add(col3WidthClass) + break + } + } + } + } + + //apply sticky columns + let stickyColumns = settings('get', 'stickyColumns') + if (stickyColumns) { + [...document.querySelectorAll(".tdx-dashboard__column")].forEach(column => { + column.style.position = "sticky" + column.style.alignSelf = "flex-start" + column.style.top = "4px" + }); + } +} + +function parseTable(element) { + let table = element.querySelector("table") + let items = []; + + if (table) { + let headers = []; + + //get headers of the tables + [...table.querySelectorAll("th")].forEach((header) => { + var txt = header.querySelector("span") + if (txt) { + headers.push(txt.textContent) + } + }); + + //parse rows + [...table.querySelectorAll("tr:has(td)")].forEach((row) => { + let item = {}; + //parse each cell + let i = 0; + [...row.querySelectorAll("td:not(:has(input))")].forEach((cell) => { + let txt = cell.textContent; + txt = txt.trim() + + item[headers[i]] = { txt: txt, cell: cell } + i++ + }) + + item.row = row + items.push(item) + + //begin coloring + parseItem(item) + }) + } +} + +//modify/color the cells +function parseItem(item) { + //color queue names + if ('CSS Support' in item) { + let qCell = item["CSS Support"].cell + let qTxt = item["CSS Support"].txt.toLowerCase() + if (qTxt in colorsByQueue) { + let q = colorsByQueue[qTxt] + createHighlightBubble(qCell, q.bg, q.txt) + } + } + + //change date modified + let relativeDates = ['Modified', 'Created'] + for (const dType of relativeDates) { + if (dType in item) { + let dTxt = item[dType].txt + let dCell = item[dType].cell + + // Try parsing with common formats first + let date = window.moment(dTxt, [ + "ddd M/D/YY h:mm A", + "ddd MM/DD/YYYY h:mm A", + "M/D/YY h:mm A", + "MM/DD/YYYY h:mm A", + "YYYY-MM-DD HH:mm:ss", + "YYYY-MM-DDTHH:mm:ss" + ], true) + + // If parsing fails, try without strict mode + if (!date.isValid()) { + date = window.moment(dTxt) + } + + let dTxtNew = date.fromNow() + + if (dTxtNew == "Invalid date" || !date.isValid()) { + } else { + dCell.innerText = dTxtNew + } + } + } + + let detailedDates = ['Date Due', 'Due', 'Created', 'Start'] + for (const dType of detailedDates) { + if (dType in item) { + let dTxt = item[dType].txt + let dCell = item[dType].cell + + // Try parsing with common formats first + let date = window.moment(dTxt, [ + "ddd M/D/YY h:mm A", + "ddd MM/DD/YYYY h:mm A", + "M/D/YY h:mm A", + "MM/DD/YYYY h:mm A", + "YYYY-MM-DD HH:mm:ss", + "YYYY-MM-DDTHH:mm:ss" + ], true) + + // If parsing fails, try without strict mode + if (!date.isValid()) { + date = window.moment(dTxt) + } + + let dTxtNew = date.calendar() + + if (dTxtNew == "Invalid date" || !date.isValid()) { + } else { + dCell.innerText = dTxtNew + } + } + } + + //highlight modified/age red + let modifiedDates = ['Modified'] + for (const dType of modifiedDates) { + if (dType in item) { + let modDate = item[dType] + const ageThreshold = 336 + + // Try parsing with common formats first + let date = window.moment(modDate.txt, [ + "ddd M/D/YY h:mm A", + "ddd MM/DD/YYYY h:mm A", + "M/D/YY h:mm A", + "MM/DD/YYYY h:mm A", + "YYYY-MM-DD HH:mm:ss", + "YYYY-MM-DDTHH:mm:ss" + ], true) + + // If parsing fails, try without strict mode + if (!date.isValid()) { + date = window.moment(modDate.txt) + } + + let duration = window.moment.duration(window.moment().diff(date)) + let hours = duration.asHours() + + let alpha = hours / ageThreshold + alpha = alpha > 1 ? 1 : alpha + + let cell = modDate.cell + handleHighlight("dateModified", alpha, cell) + cell.classList.add(alpha > 0.5 ? "light" : "dark") + } + } + + //find user replies & last modified by internal + if ('Requestor' in item && 'Modified By' in item && 'Prim Resp' in item) { + let fromUser = item["Requestor"] + let lastModified = item["Modified By"] + let assignedTo = item["Prim Resp"] + + //reply from user + if (fromUser.txt == lastModified.txt && fromUser.txt != assignedTo.txt && assignedTo.txt != "Unassigned") { + handleHighlight("reply", null, item.row) + } + + //modified by internal + if (lastModified.txt != fromUser.txt && lastModified.txt != assignedTo.txt) { + let cell = lastModified.cell + handleHighlight("userModified", null, cell) + } + } + + //find internal users and highlight them + if ('Prim Resp' in item) { + handleHighlight("person", item['Prim Resp'].txt, item['Prim Resp'].cell) + } else if ('Responsibility' in item) { + handleHighlight("person", item.Responsibility.txt, item.Responsibility.cell) + } + + //find inline highlights for tasks + if ('Title' in item) { + let title = item.Title + handleHighlight("title", title.txt, title.cell) + } + + //find links & open in new tab, if configured + let linkTypes = ['Title', 'TicketID', 'TicketTitle'] + for (const linkType of linkTypes) { + if (linkType in item) { + let link = item[linkType].cell.querySelector("a") + if (link) { + handleLink("report", link) + } + } + } +} diff --git a/content/modules/settings.js b/content/modules/settings.js new file mode 100644 index 0000000..9abd0ee --- /dev/null +++ b/content/modules/settings.js @@ -0,0 +1,96 @@ +// Settings management functions + +function settings(action, value = null) { + var data + var menu + try { + data = JSON.parse(localStorage.getItem("userSettings")) + + if (!data) { + throw "Data is null" + } else { + //resolve stringified objects + if ('customHighlights' in data) { + data.customHighlights = JSON.parse(data.customHighlights) + } + } + } catch(e) { + //set defaults + data = { + colorMode: getColorMode(), + linkBehavior: "tabs", + highlightBehavior: "block", + customHighlights: [], + } + } + + switch(action) { + case 'apply': { + for (const setting in data) { + let form = document.forms.settingsForm + let value = data[setting] + + if (typeof value == "object") { + value = JSON.stringify(value) + } + + console.log("Apply setting:", setting, value) + try { + if (form) { + let elements = form.elements + form[setting].value = value + if (form[setting].type == "checkbox") { + form[setting].checked = value == "enabled" ? true : false + } + } + } catch {} + } + + if ('colorMode' in data) { + setColorMode(data.colorMode) + } + + if ('theme' in data) { + if (data.theme == "custom") { + setColors('primaryColor', data.primaryColor) + setColors('backgroundColor', data.backgroundColor) + } else { + setColors('theme', data.theme) + } + } + break + } + + case 'get': { + if (value) { + return value in data ? data[value] : null + } else { + return data + } + break + } + + case 'toggle': { + let menu = document.querySelector("#settingsMenu") + let newState = menu.classList.contains("show") ? "hide" : "show" + let oldState = newState == "show" ? "hide" : "show" + menu.classList.add(newState) + menu.classList.remove(oldState) + break + } + + case 'update': { + let form = document.querySelector("#settingsForm") + let formData = new FormData(form) + data = Object.fromEntries([...formData]) + console.log("Settings update!", data) + localStorage.setItem("userSettings", JSON.stringify(data)) + settings("apply") + setCssFilters() + } + } +} + +function parseCustomHighlights(data) { + console.log("Custom highlights:", data) +} diff --git a/content/modules/ui.js b/content/modules/ui.js new file mode 100644 index 0000000..ce0223e --- /dev/null +++ b/content/modules/ui.js @@ -0,0 +1,284 @@ +// UI functions - toolbar, status, styles injection + +async function injectToolbar() { + let iconBar = document.querySelector("#globalSearchBar") + + let statusHTML = ` +
+ + +
+ ` + + let toolsHTML = ` +
+ +
+ ` + + let buttonHTML = ` +
+ +
+ ` + + let settingsHTML = ` + + + ` + + let settingsButton = document.createElement("span") + settingsButton.innerHTML = buttonHTML + + let settingsPage = document.createElement("div") + settingsPage.innerHTML = settingsHTML + + let statusLink = document.createElement("span") + statusLink.innerHTML = statusHTML + + let toolsLink = document.createElement("span") + toolsLink.innerHTML = toolsHTML + + if (iconBar) { + iconBar.after(settingsButton) + + settingsButton.querySelector("#settingsButton").addEventListener("click", () => { + settings("toggle", settingsPage) + }) + settingsButton.appendChild(settingsPage) + + //form changes + let form = settingsPage.querySelector("form") + form.addEventListener("change", (event) => { + settings("update", form) + }); + form.addEventListener("submit", (event) => { + event.preventDefault() + }); + + //send/receive data from popup + let customColorButton = settingsPage.querySelector("#colorPopup") + customColorButton.addEventListener("click", (event) => { + let url = `${tdxtoolsUrl}/ecnuds/tdx/userscript/coloreditor` + let colorWindow = window.open(url, "TDX Color Editor", "popup=true") + colorWindow.onload = function() { + colorWindow.postMessage({ msg: "here's the data" }, "*") + } + }); + + //links + let parent = iconBar.parentElement + + //tools + parent.prepend(toolsLink) + + //status + parent.prepend(statusLink) + let statusData = await getITStatus() + let statusIcon = statusLink.querySelector("#statusIcon") + let statusTime = statusLink.querySelector("#statusTime") + let statusText = statusLink.querySelector("#statusText") + + let operationalText = "All systems operational." + let operationalRegex = /^(?=(?:\w+\s){0,5}?(?:operational|green)\b(?!-))(\w+(?:\s\w+){0,5})/gm + + if (statusData) { + if (statusData.msg.length == 0) { + statusData.msg = operationalText + } + } else { + statusData = { + msg: operationalText + } + } + + if (!operationalRegex.test(statusData.msg)) { + statusIcon.classList = ("fa-solid fa-triangle-exclamation") + } else { + statusIcon.classList = ("fa-solid fa-check") + } + + if (statusData.time) { + // Try to parse the time - it might be a date string or already a relative time + let statusTimeParsed = window.moment(statusData.time) + if (statusTimeParsed.isValid()) { + statusTime.innerText = statusTimeParsed.fromNow() + } else { + // If it's not a valid date, it might already be a relative time string + // Just display it as-is + statusTime.innerText = statusData.time + } + } + statusText.innerText = statusData.msg + } +} + +async function getITStatus() { + let url = "https://it.purdue.edu/api-status/messages.php" + let res = await fetch(url) + let data = await res.json() + + let msg = {} + + let msgs = data.Results + if (msgs.length > 0) { + msg = { + time: msgs[0], + msg: msgs[1] + } + console.warn("IT Message:", msg) + } else { + msg = null + } + + return msg +} + +async function changeTitle() { + let title = document.querySelector(".tdx-headerbar-headline a") + if (title) { + title.innerText = primaryTitle + } + + await injectToolbar() +} + +function injectOtherStyles(element) { + // Load CSS from the stylesheet + // For shadow DOM and iframes, we need to inject the CSS manually + let s = document.createElement("style") + s.id = "customStyles" + + // CSS is injected via manifest, so we need to fetch it from extension resources + // Check if we already have it cached + if (window._tdxCustomStyles) { + s.innerText = window._tdxCustomStyles + injectStyleElement(s, element) + } else { + // Fetch from extension resources + const cssUrl = chrome.runtime.getURL("content/styles.css") + fetch(cssUrl) + .then(response => response.text()) + .then(css => { + // Cache the CSS for future use + window._tdxCustomStyles = css + s.innerText = css + injectStyleElement(s, element) + }) + .catch(e => { + console.warn("Could not load CSS for injection:", e) + // Still try to inject an empty style tag to avoid errors + injectStyleElement(s, element) + }) + } +} + +function injectStyleElement(s, element) { + //find iframes - likely text editors + if (element.tagName == "IFRAME") { + let frame = element.contentWindow.document; + + //check for existing style block + if (!frame.querySelector("#customStyles")) { + let head = frame.querySelector("head") + let html = frame.querySelector("html") + html.classList.add(settings("get", "colorMode")) + head.appendChild(s.cloneNode(true)) + } + } else { + if (!element.querySelector("#customStyles")) { + setCssFilters(s) + element.appendChild(s) + } + } +} + +function checkPath() { + let path = document.location.pathname + if (path == "/TDWebApi/api/auth/loginsso") { + let pre = document.querySelector("pre") + if (pre) { + console.log("Got key!", pre.innerText) + let key = pre.innerText + window.opener.postMessage({ tdxkey: key }, tdxtoolsUrl) + window.close() + } + } +} diff --git a/content/modules/utils.js b/content/modules/utils.js new file mode 100644 index 0000000..d71c13e --- /dev/null +++ b/content/modules/utils.js @@ -0,0 +1,89 @@ +// Utility functions + +function invertHex(hex) { + return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase() +} + +function getColorMode() { + let mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + return mode +} + +function setColorMode(mode, store = true) { + if (!mode) { + mode = "auto" + } + console.log("Set color mode to", mode) + colorScheme = mode + var storageMode = mode + + let autoScheme = getColorMode() + if (autoScheme == mode) { + storageMode = "auto" + } + + if (mode == "auto" || storageMode == "auto") { + mode = autoScheme + document.documentElement.classList.remove("lightMode") + document.documentElement.classList.remove("darkMode") + } else { + document.documentElement.classList.add(mode) + } + + if (store) { + localStorage.setItem("styles", storageMode) + } +} + +function setColors(color, value) { + console.log("Setting", color, "to", value) + let col = value + let style = document.documentElement.style + + switch(color) { + case 'primaryColor': + style.setProperty('--dark-col-primary', col); + style.setProperty('--light-col-primary', col); + break + + case 'backgroundColor': + style.setProperty('--dark-bg-primary', col); + style.setProperty('--light-bg-primary', col); + break + + case 'theme': { + for (const col of ["dark","light"]) { + let accent = `var(--${col}-${value}-accent)` + let bg = `var(--${col}-${value}-bg)` + style.setProperty(`--${col}-col-primary`, accent) + style.setProperty(`--${col}-bg-primary`, `var(--${col}-bg-default)`) + } + break + } + } +} + +function setCssFilters(element = null) { + let style = element ? element.style : document.documentElement.style + //quick test for filter generation + let mode = getColorMode().split("Mode")[0] + let priCol = window.getComputedStyle(document.body).getPropertyValue("--dark-col-primary") + let rgb = hexToRgb(priCol) + + if (!rgb) { + console.warn("Could not parse primary color:", priCol) + return + } + + const color = new Color(rgb[0], rgb[1], rgb[2]); + const solver = new Solver(color); + const result = solver.solve(); + let filters = result.filter + + style.setProperty("--filter-brightness", filters.brightness) + style.setProperty("--filter-contrast", filters.contrast) + style.setProperty("--filter-hue-rotate", filters.hue_rotate) + style.setProperty("--filter-invert", filters.invert) + style.setProperty("--filter-saturate", filters.saturate) + style.setProperty("--filter-sepia", filters.sepia) +} diff --git a/content/styles.css b/content/styles.css new file mode 100644 index 0000000..d4c1a99 --- /dev/null +++ b/content/styles.css @@ -0,0 +1,2329 @@ +/* Root Styles */ + +:root { + +--dark-bg-default: #000; +--light-bg-default: #fff; + +--dark-col-default: #ab9266; +--light-col-default: #cbb080; + +--dark-col-primary: var(--dark-col-default); +--light-col-primary: var(--light-col-default); + +--dark-bg-primary: var(--dark-bg-default); +--light-bg-primary: var(--light-bg-default); + +--dark-gold-accent: #ab9266; +--light-gold-accent: #c3aa7f; + +--dark-col-green: #295f29; +--dark-col-red: #912c2c; +--dark-col-blue: #32577a; +--dark-col-yellow: #654a24; + +--light-col-green: #e3fcea; +--light-col-red: #ff6190; +--light-col-blue: #e1f5fc; +--light-col-yellow: #ffefd8; + +/* Original TDX blue */ +--dark-blue-accent: #4c778d; +--light-blue-accent: #4b3bb9; + +--dark-green-accent: #559170; +--light-green-accent: var(--dark-green-accent); + +--filter-invert: 0; +--filter-sepia: 0; +--filter-saturate: 0; +--filter-hue-rotate: 0; +--filter-brightness: 0; +--filter-contrast: 0; + +--dark-bg-0: color-mix(in srgb,var(--dark-bg-primary),#fff 5%); +--dark-bg-1: color-mix(in srgb,var(--dark-bg-primary),#fff 12%); +--dark-bg-2: color-mix(in srgb,var(--dark-bg-primary),#fff 20%); +--dark-bg-3: color-mix(in srgb,var(--dark-bg-primary),#fff 25%); +--dark-bg-4: color-mix(in srgb,var(--dark-bg-primary),#fff 30%); +--dark-col-100: color-mix(in srgb,var(--dark-col-primary),#000 70%); +--dark-col-200: color-mix(in srgb,var(--dark-col-primary),#000 60%); +--dark-col-300: color-mix(in srgb,var(--dark-col-primary),#000 50%); +--dark-col-400: var(--dark-col-primary); +--dark-col-500: color-mix(in srgb, var(--dark-col-primary), #aaa 50%); +--dark-col-600: color-mix(in srgb,var(--dark-col-primary),#fff 35%); +--dark-col-700: color-mix(in srgb,var(--dark-col-primary),#fff 25%); +--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-txt-5: var(--light-txt-1); +--dark-border-0: color-mix(in srgb,var(--dark-bg-primary),#fff 18%); +--dark-border-1: color-mix(in srgb,var(--dark-bg-primary),#fff 30%); +--dark-col-reply: #1e3438; +--dark-col-highlight-1: #ffdb0059; +--dark-col-highlight-2: #5f00ff5e; +--dark-col-currentuser: #09482f; +--dark-col-modified: #ff660012; +--dark-txt-invert: 1; +--dark-txt-hue: 180deg; +--dark-shadow-1: rgba(200, 200, 200, 0.1); +--dark-shadow-2: rgba(200, 200, 200, 0.06); + +--light-txt-1: #000; +--light-txt-2: #222; +--light-txt-3: #333; +--light-txt-4: #0000008c; +--light-txt-5: var(--dark-txt-1); +--light-col-100: color-mix(in srgb,var(--light-col-primary),#fff 85%); +--light-col-200: color-mix(in srgb,var(--light-col-primary),#fff 75%); +--light-col-300: color-mix(in srgb,var(--light-col-primary),#fff 65%); +--light-col-400: var(--light-col-primary); +--light-col-500: color-mix(in srgb, var(--light-col-primary), #aaa 50%); +--light-col-600: color-mix(in srgb,var(--light-col-primary),#111 70%); +--light-col-700: color-mix(in srgb,var(--light-col-primary),#000 75%); +--light-bg-0: color-mix(in srgb,var(--light-bg-primary),#000 0%); +--light-bg-1: color-mix(in srgb,var(--light-bg-primary),#000 7%); +--light-bg-2: color-mix(in srgb,var(--light-bg-primary),#000 13%); +--light-bg-3: color-mix(in srgb,var(--light-bg-primary),#000 20%); +--light-bg-4: color-mix(in srgb,var(--light-bg-primary),#000 25%); +--light-bg-5: color-mix(in srgb,var(--light-col-primary),#ffffffd7 75%); +--light-border-0: color-mix(in srgb,var(--light-bg-primary),#000 18%); +--light-border-1: color-mix(in srgb,var(--light-bg-primary),#000 30%); +--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; +--light-shadow-1: rgba(50, 50, 50, 0.1); +--light-shadow-2: rgba(50, 50, 50, 0.06); +} + +@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); + --bg-5: var(--light-bg-5); + --col-100: var(--light-col-100); + --col-200: var(--light-col-200); + --col-300: var(--light-col-300); + --col-400: var(--light-col-400); + --col-500: var(--light-col-500); + --col-600: var(--light-col-600); + --col-700: var(--light-col-700); + --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-5: var(--light-txt-5); + --txt-invert: var(--light-txt-invert); + --txt-hue: var(--light-txt-hue); + --border-0: var(--light-border-0); + --border-1: var(--light-border-1); + --col-reply: var(--light-col-reply); + --col-highlight-1: var(--dark-col-highlight-1); + --col-highlight-2: var(--dark-col-highlight-2); + --col-currentuser: var(--light-col-currentuser); + --col-modified: var(--dark-col-modified); + --shadow-1: var(--light-shadow-1); + --shadow-2: var(--light-shadow-2); + --filter-brightness: var(--light-filter-brightness); + --filter-invert: var(--light-filter-invert); + } +} + +@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); + --bg-5: var(--dark-bg-5); + --col-100: var(--dark-col-100); + --col-200: var(--dark-col-200); + --col-300: var(--dark-col-300); + --col-400: var(--dark-col-400); + --col-500: var(--dark-col-500); + --col-600: var(--dark-col-600); + --col-700: var(--dark-col-700); + --col-red: var(--dark-col-red); + --col-green: var(--dark-col-green); + --col-blue: var(--dark-col-blue); + --col-yellow: var(--dark-col-yellow); + --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-5: var(--dark-txt-5); + --txt-invert: var(--dark-txt-invert); + --txt-hue: var(--dark-txt-hue); + --border-0: var(--dark-border-0); + --border-1: var(--dark-border-1); + --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); + --shadow-1: var(--dark-shadow-1); + --shadow-2: var(--dark-shadow-2); + --filter-brightness: var(--dark-filter-brightness); + --filter-invert: var(--dark-filter-invert); + } +} + +: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); +--bg-5: var(--dark-bg-5); +--col-100: var(--dark-col-100); +--col-200: var(--dark-col-200); +--col-300: var(--dark-col-300); +--col-400: var(--dark-col-400); +--col-500: var(--dark-col-500); +--col-600: var(--dark-col-600); +--col-700: var(--dark-col-700); +--col-red: var(--dark-col-red); +--col-green: var(--dark-col-green); +--col-blue: var(--dark-col-blue); +--col-yellow: var(--dark-col-yellow); +--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-5: var(--dark-txt-5); +--txt-invert: var(--dark-txt-invert); +--txt-hue: var(--dark-txt-hue); +--border-0: var(--dark-border-0); +--border-1: var(--dark-border-1); +--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); +--shadow-1: var(--dark-shadow-1); +--shadow-2: var(--dark-shadow-2); +--filter-brightness: var(--dark-filter-brightness); +--filter-invert: var(--dark-filter-invert); +} + +: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); +--bg-5: var(--light-bg-5); +--col-100: var(--light-col-100); +--col-200: var(--light-col-200); +--col-300: var(--light-col-300); +--col-400: var(--light-col-400); +--col-500: var(--light-col-500); +--col-600: var(--light-col-600); +--col-700: var(--light-col-700); +--col-red: var(--light-col-red); +--col-green: var(--light-col-green); +--col-blue: var(--light-col-blue); +--col-yellow: var(--light-col-yellow); +--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-5: var(--light-txt-5); +--txt-invert: var(--light-txt-invert); +--txt-hue: var(--light-txt-hue); +--border-0: var(--light-border-0); +--border-1: var(--light-border-1); +--col-reply: var(--light-col-reply); +--col-highlight-1: var(--dark-col-highlight-1); +--col-highlight-2: var(--dark-col-highlight-2); +--col-currentuser: var(--light-col-currentuser); +--col-modified: var(--dark-col-modified); +--shadow-1: var(--light-shadow-1); +--shadow-2: var(--light-shadow-2); +--filter-brightness: var(--light-filter-brightness); +--filter-invert: var(--light-filter-invert); +} + +/* Body */ + +body { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +} + +::-webkit-scrollbar-track { +background: var(--bg-0) !important; +} + +::-webkit-scrollbar-thumb { +background: var(--col-400) !important; +border: 5px solid var(--bg-0) !important; +} + +::-webkit-scrollbar-thumb:hover { +border: 3px solid var(--bg-0) !important; +background: var(--col-400) !important; +} + +::-webkit-scrollbar-corner { +background-color: var(--bg-0) !important; + } + +.tdx-overlay { +background-color: color-mix(in srgb,var(--col-400),#00000000 25%) !important; +} + +.tdx-overlay__item { +background-color: var(--bg-0) !important; +color: var(--col-400) !important; +} + +.tdx-overlay__item:hover, .tdx-overlay__item:focus-visible { +background-color: var(--col-400) !important; +color: var(--col-100) !important; +} + +.tdx-navigation-tab-bar { +background-color: initial !important; +} + +.tdx-leftnav__container { +background-color: var(--bg-0) !important; +border-color: var(--border-0) !important; +box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2) !important; +} + +.tdx-leftnav__item { +color: var(--txt-1) !important; +} + +.tdx-leftnav__item--active .tdx-leftnav__link { +background-color: var(--col-100) !important; +color: var(--col-400) !important; +} + +.tdx-leftnav__link:hover, .tdx-leftnav__link:focus-visible { +background-color: var(--col-100) !important; +} + +.tdx-main-container { +background-color: var(--bg-0) !important; +} + +.tdx-layout-option__layout-preview { +background-color: var(--col-100) !important; +} + +.tdx-layout-option__column { +background-color: var(--bg-0) !important; +} + +.tdx-layout-selector__layout-option:hover, .tdx-layout-selector__layout-option:focus, .tdx-layout-selector__layout-option--selected { +background-color: var(--col-400) !important; +} + +.tdx-list__section { +color: var(--txt-2); +} + +/* Script-Specific Additions */ +#settingsMenu { +right: 50px; +padding: 10px; +width: 250px; +background: var(--bg-1); +} + +#settingsMenu.hide { +visibility: hidden; +} + +#settingsMenu h5 { +margin-bottom: 2px; +} + +#settingsMenu h3 { +padding-top: 10px; +font-weight: 500; +font-size: 18px; +} + +#settingsForm .flex { +display: flex; +gap: 24px; +align-items: baseline; +} + +#settingsForm .textBox { +display: flex; +flex-direction: column; +gap: 8px; +} + +.customEmbed { +border: 0; +width: 100%; +height: 400px; +} + +.calBox { +display: flex; +justify-content: space-around; +flex-wrap: wrap; +padding-top: 4px; +gap: 4px; +max-width: 220px; +} + +#statusBox:hover #statusMsg { +display: block; +width: 400px; +line-height: 22px; +padding: 8px; +right: 390px; +} + +#statusTime, #statusText { +margin: 6px; +} + +#statusTime { +font-size: 12px; +} + +#statusBox .fa-triangle-exclamation { +color: #ff8c4c; +} + +#statusBox .fa-check { +color: #0dbb28; +} + +.qBox { + margin-left: 10px; + padding: 5px; + font-size: 20px; + border-radius: 7px; +} + +.qHighlight { + padding: 4px; + border-radius: 8px; +white-space: nowrap; +} + +.btn-calendar { +flex-grow: 1; +padding: 2px; +background-color: var(--col-500); +color: var(--txt-5); +} + +.btn-calendar:hover { +background-color: var(--col-400); +color: var(--txt-5) +} + +.reportTitle { +border-radius: 12px; +padding-left: 10px !important; +padding-right: 10px !important; +} + +/* Others */ +.tdx-loading-animation { +color: var(--col-400) !important; +} + +.refresh-indicator { +background: linear-gradient(180deg,var(--bg-0),hsla(0,0%,100%,0)) !important; +} + +.breadcrumb { +background-color: var(--bg-0); +} + +.breadcrumb>.active { +color: var(--txt-3); +} + +p.row { +gap: 8px; +} + +/* Headers */ + +h1, h2, h3, h4, h5 { +color: var(--txt-1) !important; +} + +.tdx-header-container { +background-color: var(--col-100) !important; +} + +.tdx-headerbar-headline, .tdx-headerbar-headline a { +color: var(--col-1) !important; +} + +.tdx-headline { +color: var(--txt-1) !important; +} + +.tdx-headline--underline { +border-color: var(--border-0); +} + +.tdx-navigation-tabs__tab { +color: var(--col-600) !important; +} + +.tdx-navigation-tabs__home-tab--active, .tdx-navigation-tabs__tab--active { +background-color: var(--bg-0) !important; +color: var(--col-400) !important; +} + +.tdx-navigation-tabs__tab:hover:not(.tdx-navigation-tabs__tab--active) { +background-color: var(--col-200) !important; +} + +.tdx-navigation-tabs__home-tab:hover { +background-color: var(--col-200) !important; +} + +.tdx-navigation-tabs__home-tab--active:hover { +background-color: var(--bg-0) !important; +} + +.tdx-dropdown--headline { +color: var(--txt-1) !important; +} + +.tdx-dropdown:hover { +background-color: var(--col-200) !important; +} + +.tdx-dropdown.active { +background-color: var(--col-300) !important; +} + +.tdx-dropdown-popout, +.tdx-dropdown-popout__menu { +background-color: var(--bg-0) !important; +} + +.tdx-dropdown-popout__menu-item { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +} + +.tdx-dropdown-popout__menu-item:hover, .tdx-dropdown-popout__menu-item:focus { +color: var(--txt-1) !important; +background-color: var(--col-300) !important; +} + +.tdx-dropdown-popout__menu-item--selected { +color: var(--col-400) !important; +} + +.tdx-dropdown-popout__header { +background-color: var(--bg-0) !important; +color: var(--col-600) !important; +} + +.tdx-dropdown-popout__break { +border-color: var(--border-0) !important; +} + +.tdx-dropdown__divider { +background-color: var(--bg-0) !important; +} + +.tdx-dropdown__divider::before { +background: linear-gradient(90deg,var(--bg-0),var(--border-0),var(--border-0),var(--border-0),var(--bg-0)) !important; +} + +.tdx-label { +color: var(--txt-1) !important; +} + +/* Inputs */ + +.tdx-dropdown--dark, +.tdx-searchbar__textbox--dark { +background-color: var(--col-200) !important; +color: var(--txt-1) !important; +} + +.tdx-dropdown--dark:hover, .tdx-dropdown--dark:focus-visible { +background-color: var(--col-300) !important; +} + +.tdx-searchbar__textbox:not(.tdx-searchbar__textbox--dark) { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +} + +.tdx-searchbar__textbox:hover:not(:focus), .tdx-searchbar:hover .tdx-searchbar__textbox:not(:focus) { +background-color: var(--col-200) !important; +} + +.tdx-searchbar__textbox:focus, .tdx-searchbar__textbox:active, .tdx-searchbar__textbox:focus-within { +border-color: var(--col-400) !important; +} + +.tdx-searchbar__textbox::placeholder { +color: var(--col-400) !important; +} + +.tdx-searchbar__textbox--dark:hover:not(:focus)::placeholder, .tdx-searchbar:hover .tdx-searchbar__textbox--dark:not(:focus)::placeholder, +.tdx-searchbar__textbox:hover:not(:focus)::placeholder, .tdx-searchbar:hover .tdx-searchbar__textbox:not(:focus)::placeholder { +color: var(--col-400) !important; +} + +input[type=checkbox], input[type=radio] { +accent-color: var(--col-400) !important; +} + +.tdx-checkbox { +background-color: var(--bg-0) !important; +border-color: var(--border-0) !important; +} + +.tdx-checkbox:checked { +background-color: var(--col-400) !important; +} + +.tdx-checkbox:checked:disabled { +background-color: var(--col-200) !important; +} + +.control-label, label { +color: var(--txt-2) !important; +} + +.form-control { + background-color: var(--bg-0); + color: var(--txt-2); +border-color: var(--border-0); +} + +.form-control:hover { +border-color: var(--border-0); +} + +.form-control:focus { +border-color: var(--col-400); +} + +.talu_holder .luac_default { +color: var(--col-500); +} + +.talu_holder .bit-input input { +background-color: var(--bg-0); +} + +.talu_holder .bit-box { +background-color: var(--col-100); +color: var(--col-600); +} + +.talu_holder .bit-box:hover, .talu_holder .bit-box:active { +background-color: var(--col-300); +color: var(--col-500); +} + +.talu_holder .bit-box a.closebutton { +color: var(--col-600); +} + +.lu_tdac-auto ul { +background: var(--bg-0) !important; +box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2) !important; +} + +.lu_tdac-auto ul li { +color: var(--txt-1) !important; +} + +.lu_tdac-auto ul .auto-focus { +background-color: var(--col-300); +color: var(--col-500); +} + +.lu_tdac-auto ul .auto-focus div.talu_subcaption { +color: var(--col-400); +} + +div.WhiteOut { +background-color: var(--bg-0) !important; +} + +[role=status]:has(div>div>.tdx-loading-animation) { +background-color: var(--bg-0) !important; +} + +.ms-drop .ms-search input::placeholder { +color: var(--txt-3); +} + +.ms-choice { +background-color: var(--bg-0); +color: var(--txt-3); +} + +.ms-drop { +background-color: var(--bg-0); +border-color: var(--border-0); +} + +button.ms-choice { +border-color: var(--border-0) !important; +} + +button.ms-choice:hover { +border-color: var(--border-0) !important; +} + +button.ms-choice:focus { +border-color: var(--col-400) !important; +} + +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + background-color: var(--bg-1); +} + +.tdx-lookup-group div.select2-container.form-control a.select2-choices, .input-group div.select2-container.form-control a.select2-choice { +border-color: var(--border-0) !important; +} + +.input-group:not(:has(.input-group-section)):not(.input-group--no-border) { +border-color: var(--border-0); +} + +.input-group:focus, .input-group:active, .input-group:focus-within { +border-color: var(--col-400) !important; +} + +div.input-group .input-group-btn .btn-file:last-child { +color: var(--txt-3); +} + +.tdx-lookup-group { +background-color: var(--bg-0); +border-color: var(--border-0); +} + +.tdx-lookup-group:hover { +border-color: var(--border-0); +} + +.tdx-lookup-group .k-input:hover, .tdx-lookup-group .k-input:focus, .tdx-lookup-group .k-input:focus-within, .tdx-lookup-group.input-group:hover, .tdx-lookup-group.input-group:focus, .tdx-lookup-group.input-group:focus-within, .tdx-lookup-group select:hover, .tdx-lookup-group select:focus, .tdx-lookup-group select:focus-within, .tdx-lookup-group input:hover, .tdx-lookup-group input:focus, .tdx-lookup-group input:focus-within, .tdx-lookup-group input.form-control:hover, .tdx-lookup-group input.form-control:focus, .tdx-lookup-group input.form-control:focus-within { +border-color: var(--border-0); +} + +.tdx-lookup-group .k-input, .tdx-lookup-group.input-group, .tdx-lookup-group select, .tdx-lookup-group input, .tdx-lookup-group input.form-control { +border-color: var(--border-0); +} + +.tdx-lookup-group .k-svg-icon.k-svg-i-caret-alt-down::after { +color: var(--txt-1); +} + +.tdx-lookup-group:focus, .tdx-lookup-group:active, .tdx-lookup-group:focus-within { +border-color: var(--col-400); +} + +.tdx-lookup-group .k-input .k-input-inner::selection, .tdx-lookup-group.input-group .k-input-inner::selection, .tdx-lookup-group select .k-input-inner::selection, .tdx-lookup-group input .k-input-inner::selection, .tdx-lookup-group input.form-control .k-input-inner::selection { +background-color: var(--bg-2); +} + +.tdx-lookup-group>.select2-container-multi .select2-choices:not(div.attributeValue .select2-container-multi .select2-choices) { +border-color: var(--border-0) !important; +} + +.tdx-searchbar__textbox--border { +border-color: var(--border-0) !important; +} + +.tdx-lookup-group__input { +border-color: var(--border-0) !important; +} + +.tdx-input-group__textbox, +.tdx-input-group__textarea { +color: var(--txt-1) !important; +background-color: var(--bg-0) !important; +border-color: var(--border-0) !important; +} + +.k-input-solid { +background-color: var(--bg-0); +} + +.k-list { +background-color: var(--bg-0); +color: var(--txt-1); +} + +.k-list-container.k-popup { +background-color: var(--bg-0); +} + +.k-list-content .k-list-item:hover, .k-list-content .k-list-item:focus, .k-list-content .k-list-item.k-focus { +background-color: var(--col-300); +color: var(--txt-1); +} + +.k-list-content .k-list-item { +color: var(--txt-1); +background-color: var(--bg-0); +} + +.k-popup { +color: var(--txt-1); +} + +.k-popup:has(.k-list) { +box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2); +} + +.tdx-lookup-group .k-input, .tdx-lookup-group.input-group, .tdx-lookup-group select, .tdx-lookup-group input, .tdx-lookup-group input.form-control { +color: var(--txt-1); +} + +.tdx-lookup-group .k-input .k-button-solid-base, .tdx-lookup-group.input-group .k-button-solid-base, .tdx-lookup-group select .k-button-solid-base, .tdx-lookup-group input .k-button-solid-base, .tdx-lookup-group input.form-control .k-button-solid-base { +background-color: var(--bg-0); +} + +.k-input-md .k-input-inner::placeholder, +.form-control::placeholder { +color: var(--txt-3) !important; +} + +.select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input { +background: var(--bg-0) !important; +} + +div.select2-container.form-control .select2-choice.select2-default { +border-color: var(--border-0); +} + +.select2-container .select2-choice>.select2-chosen { +color: var(--txt-1) !important; +} + +.select2-container .select2-choice.select2-default>.select2-chosen { +color: var(--txt-3) !important; +} + +.tdx-lookup-group>.select2-container-multi .select2-choices:not(div.attributeValue .select2-container-multi .select2-choices) .select2-search-field input.select2-default { +color: var(--txt-3) !important; +} + +.select2-results .select2-no-results, .select2-results .select2-selection-limit { +background: var(--bg-1) !important; +} + +.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit { +color: var(--txt-1) !important; +} + +.select2-drop { +background: var(--bg-0); +color: var(--txt-1); +} + +.select2-drop { +color: var(--txt-1) !important; +background-color: var(--bg-0); +} + +.select2-drop .select2-search input { +background-color: var(--bg-0); +border-color: var(--border-0); +} + +.select2-search input { +color: var(--txt-1); +} + +div.select2-drop.select2-drop-active, div.select2-drop.select2-drop-above.select2-drop-active { +box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2); +} + +.select2-drop .select2-results .select2-highlighted { +color: var(--txt-1) !important; +background-color: var(--col-300); +} + +.select2-results div.select2-result-label { +color: var(--txt-1); +} + +.select2-container:focus-within, .select2-container:focus-within a { +border-color: var(--col-400) !important; +} + +.form-group:has(select:not([multiple]):not([size])):hover::after { +color: var(--col-400) !important; +} + +div.select2-container.form-control .select2-choice, div.js-tagformfield .select2-container-multi .select2-choices, div.js-tags-inlineedit .select2-container-multi .select2-choices, div.attributeValue .select2-container-multi .select2-choices, div.select2-listbox .select2-container-multi .select2-choices, div.select2-container.form-control.select2-container-multi .select2-choices { +border-color: var(--border-0); +} + +div.select2-container.form-control .select2-choice:hover, div.js-tagformfield .select2-container-multi .select2-choices:hover, div.js-tags-inlineedit .select2-container-multi .select2-choices:hover, div.attributeValue .select2-container-multi .select2-choices:hover, div.select2-listbox .select2-container-multi .select2-choices:hover, div.select2-container.form-control.select2-container-multi .select2-choices:hover { +border-color: var(--border-0); +} + +div.select2-container-multi .select2-choices .select2-search-choice { +background-color: var(--col-100); +color: var(--col-600); +} + +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close { +color: var(--col-600) !important; +} + +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus-visible, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:hover { +color: var(--col-400) !important; +} + +div.select2-container-multi .select2-choices .select2-search-choice:hover, div.select2-container-multi .select2-choices .select2-search-choice:active { +background-color: var(--col-300); +color: var(--col-500); +} + +select.form-control:hover:not(:focus), +select.form-control { +border-color: var(--border-0); +} + +.k-chip-solid-base { +background-color: var(--col-100) !important; +color: var(--col-600) !important; +} + +.k-chip-action { +color: var(--col-600) !important; +} + +.k-chip-action:hover, .k-chip-action:focus-visible, .k-chip-action:active, .k-chip-action:active:hover, .k-chip-action:focus:active, .k-chip-action:focus:hover { +color: var(--col-400) !important; +} + +.tooltip-inner { +background-color: var(--bg-0); +color: var(--txt-1); +box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2); +} + +div#ui-datepicker-div .ui-datepicker-title select, div#ui-datepicker-div .ui-timepicker-div.ui-timepicker-oneLine select, div.ui-datepicker .ui-datepicker-title select, div.ui-datepicker .ui-timepicker-div.ui-timepicker-oneLine select { +color: var(--txt-1); +border-color: var(--bg-0); +background-color: var(--bg-0); +} + +div#ui-datepicker-div .ui-datepicker-title select:hover, div#ui-datepicker-div .ui-timepicker-div.ui-timepicker-oneLine select:hover, div.ui-datepicker .ui-datepicker-title select:hover, div.ui-datepicker .ui-timepicker-div.ui-timepicker-oneLine select:hover { +border-color: var(--border-0); +} + +div#ui-datepicker-div .ui-state-default, div#ui-datepicker-div .ui-state-default:hover, div.ui-datepicker .ui-state-default, div.ui-datepicker .ui-state-default:hover { +border-color: var(--bg-0) !important; +} + +div#ui-datepicker-div .ui-datepicker-header, div.ui-datepicker .ui-datepicker-header { +background: var(--col-100) !important; +} + +div#ui-datepicker-div th, div#ui-datepicker-div td, div.ui-datepicker th, div.ui-datepicker td { +color: var(--txt-1); +} + +div#ui-datepicker-div .ui-state-highlight, div#ui-datepicker-div .ui-widget-content .ui-state-highlight, div#ui-datepicker-div .ui-widget-header .ui-state-highlight, div.ui-datepicker .ui-state-highlight, div.ui-datepicker .ui-widget-content .ui-state-highlight, div.ui-datepicker .ui-widget-header .ui-state-highlight { +background: var(--col-100) !important; +color: var(--col-400) !important; +} + +button:has(>.ui-icon-circle-triangle-e), span:has(>.ui-icon-circle-triangle-e), a:has(>.ui-icon-circle-triangle-e), button:has(>.fa-chevron-circle-right), span:has(>.fa-chevron-circle-right), a:has(>.fa-chevron-circle-right), +button:has(>.ui-icon-circle-triangle-w), span:has(>.ui-icon-circle-triangle-w), a:has(>.ui-icon-circle-triangle-w), button:has(>.fa-chevron-circle-left), span:has(>.fa-chevron-circle-left), a:has(>.fa-chevron-circle-left) { +color: var(--col-400); +} + +/* Links */ + +.tdx-dashboard__widget-container a:not(.btn):not(.k-icon) { +color: var(--col-400) !important; +} + +.tdx-dashboard__widget-container a:not(.btn):not(.k-icon):hover, .tdx-dashboard__widget-container a:not(.btn):not(.k-icon):focus-visible { +color: var(--col-500) !important; +} + +a { +color: var(--col-400); +background-color: initial !important; +} + +a:hover, a:focus-visible, +.tdworkmgmt td a.visited-link:hover, .tdworkmgmt td a.visited-link:focus-visible { +color: var(--col-500) !important; +} + +a:visited, +.tdworkmgmt td a.visited-link, +.tdworkmgmt td a:visited, .tdworkmgmt.table .hilite a:visited { +color: var(--col-400); +} + +.tdworkmgmt.table-contents div.row > div > a { +color: var(--col-400); +} + +.tdworkmgmt.table-striped > tbody > tr.tdx-grid__group-header > td, .tdworkmgmt.table-bordered > tbody > tr.tdx-grid__group-header > td { +background-color: var(--col-100); +} + +.tdx-time-panel, .tdx-time-panel__heading { + color: var(--txt-1) !important; + background-color: var(--bg-1) !important; + border: 1px solid var(--border-0) !important; +} + +.tdx-leftnav__badge { + color: var(--txt-1) !important; + background-color: var(--col-300) !important; +} + +body .tdworkmgmt.table.table--vertical-lines > tbody > tr > td:not(:last-of-type) { + border-right: 1px solid var(--border-0); +} + +.TDGroupingRow { + color: var(--txt-1); +} + +a.disabledLink { +color: var(--txt-1) !important; +} + +.k-grid a.tdx-link { +color: var(--col-400) !important; +} + +.tdx-link:visited { +color: var(--col-400) !important; +} + +.tdx-btn--link { +color: var(--col-400) !important; +} + +/* Buttons */ +.tdx-btn--secondary { +background-color: var(--col-200) !important; +color: var(--col-400) !important; +border: none !important; +} + +.tdx-btn--secondary > a { +color: var(--col-400) !important; +} + +.tdx-btn--secondary:hover, .tdx-btn--secondary:hover:focus, .tdx-btn--secondary:focus-visible { +background-color: var(--col-300) !important; +color: var(--col-600) !important; +} + +.tdx-action-menu-dropdown__popout { +background-color: var(--bg-0) !important; +box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2) !important; +} + +.tdx-action-menu-dropdown-popout__menu-item:not(.tdx-dropdown-popout__header) { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +} + +.tdx-action-menu-dropdown-popout__menu-item:hover, .tdx-action-menu-dropdown-popout__menu-item:focus { +background-color: var(--col-300) !important; +} + +.tdx-action-menu__item--primary { +color: var(--txt-5) !important; +background: var(--col-600) !important; +border-color: var(--col-600) !important; +} + +.tdx-action-menu__item--primary:hover, .tdx-action-menu__item--primary:hover:focus, .tdx-action-menu__item--primary:focus-visible { +color: var(--txt-5) !important; +background: var(--col-400) !important; +border-color: var(--col-400) !important; +} + +.tdx-action-menu__item:not(.tdx-action-menu__item--primary) { +color: var(--txt-1) !important; +background: var(--bg-0) !important; +} + +.tdx-action-menu__item:not(.tdx-action-menu__item--primary):hover, .tdx-action-menu__item.tdx-action-menu__item:not(.tdx-action-menu__item--primary):hover:focus, .tdx-action-menu__item.tdx-action-menu__item:not(.tdx-action-menu__item--primary):focus-visible { +background: var(--col-200) !important; +color: var(--txt-2) !important; +} + +.tdx-primary-button-override { +background-color: var(--col-600) !important; +color: var(--txt-5) !important; +border-color: var(--col-600) !important; +} + +.tdx-primary-button-override:hover, .tdx-primary-button-override:hover:focus, .tdx-primary-button-override:focus-visible { +background: var(--col-400) !important; +border-color: var(--col-400) !important; +color: var(--txt-5) !important; +} + +.tdx-primary-button-override.active, .tdx-primary-button-override.active:hover, .tdx-primary-button-override.active:focus, .tdx-primary-button-override:active, .tdx-primary-button-override:active:hover, .tdx-primary-button-override:active:focus, +.tdx-primary-button-override:focus:not(:focus-visible,.active,:active,:hover) { +background-color: var(--col-600) !important; +color: var(--txt-5) !important; +border-color: var(--col-600) !important; +} + +span.input-group-btn .btn-default { +color: var(--txt-3); +} + +span.input-group-btn .btn-default:hover, span.input-group-btn .btn-default:focus-visible, span.input-group-btn .btn-default:active, span.input-group-btn .btn-default:active:hover, span.input-group-btn .btn-default:focus:active, span.input-group-btn .btn-default:focus:hover { +color: var(--txt-2); +} + +div.input-group .input-group-btn .btn-file:last-child:hover, div.input-group .input-group-btn .btn-file:last-child:hover:focus, div.input-group .input-group-btn .btn-file:last-child:focus-visible { +background-color: var(--col-100); +color: var(--txt-2); +} + +.btn.active, .btn.active:hover, .btn.active:focus, .btn:active, .btn:active:hover, .btn:active:focus { +background: var(--col-300); +color: var(--txt-5); +} + +.btn-default { +color: var(--txt-1); +} + +.btn-default:hover, .btn-default:hover:focus, .btn-default:focus-visible { +background: var(--col-200); +color: var(--txt-1); +} + +.tdx-btn--tertiary { +color: var(--txt-1); +} + +.tdx-btn--tertiary:hover { +background: var(--col-200); +color: var(--txt-2); +} + +.tdx-btn--primary { +background-color: var(--col-600) !important; +color: var(--txt-5) !important; +border-color: var(--col-600) !important; +} + +.tdx-btn--primary:hover, .tdx-btn--primary:hover:focus, .tdx-btn--primary:focus-visible { +background: var(--col-400) !important; +border-color: var(--col-400) !important; +color: var(--txt-5) !important; +} + +.feed-button-group .btn-primary:hover, .feed-button-group .btn-primary:hover:focus, .feed-button-group .btn-primary:focus-visible { +background: var(--col-200); +} + +.feed-button-group .btn-primary.active, .feed-button-group .btn-primary.active:hover, .feed-button-group .btn-primary.active:focus, .feed-button-group .btn-primary:active, .feed-button-group .btn-primary:active:hover, .feed-button-group .btn-primary:active:focus { +background: var(--col-300); +} + +#btnSave.btn-primary, #btnClientSave.btn-primary, #btnRunReport.btn-primary, #btnApply.btn-primary, #btnAddSelected.btn-primary, #btnSubmit.btn-primary { +color: var(--txt-5) !important; +background-color: var(--col-500) !important; +border-color: var(--col-500) !important; +} + +#btnSave.btn-primary:hover, #btnSave.btn-primary:hover:focus, #btnSave.btn-primary:focus-visible, #btnClientSave.btn-primary:hover, #btnClientSave.btn-primary:hover:focus, #btnClientSave.btn-primary:focus-visible, #btnRunReport.btn-primary:hover, #btnRunReport.btn-primary:hover:focus, #btnRunReport.btn-primary:focus-visible, #btnApply.btn-primary:hover, #btnApply.btn-primary:hover:focus, #btnApply.btn-primary:focus-visible, #btnAddSelected.btn-primary:hover, #btnAddSelected.btn-primary:hover:focus, #btnAddSelected.btn-primary:focus-visible, #btnSubmit.btn-primary:hover, #btnSubmit.btn-primary:hover:focus, #btnSubmit.btn-primary:focus-visible { +background: var(--col-400) !important; +border-color: var(--col-400) !important; +color: var(--txt-5) !important; +} + +#btnSave.btn-primary.active, #btnSave.btn-primary.active:hover, #btnSave.btn-primary.active:focus, #btnSave.btn-primary:active, #btnSave.btn-primary:active:hover, #btnSave.btn-primary:active:focus, #btnClientSave.btn-primary.active, #btnClientSave.btn-primary.active:hover, #btnClientSave.btn-primary.active:focus, #btnClientSave.btn-primary:active, #btnClientSave.btn-primary:active:hover, #btnClientSave.btn-primary:active:focus, #btnRunReport.btn-primary.active, #btnRunReport.btn-primary.active:hover, #btnRunReport.btn-primary.active:focus, #btnRunReport.btn-primary:active, #btnRunReport.btn-primary:active:hover, #btnRunReport.btn-primary:active:focus, #btnApply.btn-primary.active, #btnApply.btn-primary.active:hover, #btnApply.btn-primary.active:focus, #btnApply.btn-primary:active, #btnApply.btn-primary:active:hover, #btnApply.btn-primary:active:focus, #btnAddSelected.btn-primary.active, #btnAddSelected.btn-primary.active:hover, #btnAddSelected.btn-primary.active:focus, #btnAddSelected.btn-primary:active, #btnAddSelected.btn-primary:active:hover, #btnAddSelected.btn-primary:active:focus, #btnSubmit.btn-primary.active, #btnSubmit.btn-primary.active:hover, #btnSubmit.btn-primary.active:focus, #btnSubmit.btn-primary:active, #btnSubmit.btn-primary:active:hover, #btnSubmit.btn-primary:active:focus { +background: var(--col-600) !important; +border-color: var(--col-600) !important; +color: var(--txt-5) !important; +} + +#btnSave.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnClientSave.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnRunReport.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnApply.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnAddSelected.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnSubmit.btn-primary:focus:not(:focus-visible,.active,:active,:hover) { +background: var(--col-400) !important; +border-color: var(--col-400) !important; +color: var(--txt-5) !important; +} + +.btn-tertiary, .btn-info, .ButtonCellTopPadding .ButtonCellTop .btn-primary { +color: var(--txt-1); +background-color: var(--col-100); +} + +.btn-tertiary:hover, .btn-tertiary:hover:focus, .btn-tertiary:focus-visible, .btn-info:hover, .btn-info:hover:focus, .btn-info:focus-visible, .ButtonCellTopPadding .ButtonCellTop .btn-primary:hover, .ButtonCellTopPadding .ButtonCellTop .btn-primary:hover:focus, .ButtonCellTopPadding .ButtonCellTop .btn-primary:focus-visible { +background-color: var(--col-200); +color: var(--txt-1); +} + +.modal-footer .btn-default { +background-color: var(--col-200) !important; +color: var(--col-400) !important; +border: none !important; +} + +.modal-footer .btn-default:hover, .modal-footer .btn-default:hover:focus, .modal-footer .btn-default:focus-visible { +background-color: var(--col-300) !important; +color: var(--col-600) !important; +} + +/* .btn.btn-primary:not(.btn-sm) { +color: var(--txt-1); +background-color: var(--bg-5); +border-color: var(--bg-5); +} */ + +.TabButtonCell .btn-primary, .TabButtonCell .btn-info, .tab-row .btn-primary, #divViewButtons, .TabButtonCell .btn-primary:active, .tab-row .btn-primary:active { +color: var(--txt-2); +} + +.TabButtonCell .btn-primary:hover, .TabButtonCell .btn-primary:hover:focus, .TabButtonCell .btn-primary:focus-visible, .TabButtonCell .btn-info:hover, .TabButtonCell .btn-info:hover:focus, .TabButtonCell .btn-info:focus-visible, .tab-row .btn-primary:hover, .tab-row .btn-primary:hover:focus, .tab-row .btn-primary:focus-visible, #divViewButtons:hover, #divViewButtons:hover:focus, #divViewButtons:focus-visible, .TabButtonCell .btn-primary:active:hover, .TabButtonCell .btn-primary:active:hover:focus, .TabButtonCell .btn-primary:active:focus-visible, .tab-row .btn-primary:active:hover, .tab-row .btn-primary:active:hover:focus, .tab-row .btn-primary:active:focus-visible { +background: var(--col-200); +color: var(--txt-2); +} + +.TabButtonCell .btn-danger, .tab-row .btn-danger { +background: var(--bg-5); +color: var(--txt-2); +} + +.TabButtonCell .btn-danger:hover, .TabButtonCell .btn-danger:hover:focus, .TabButtonCell .btn-danger:focus-visible, .tab-row .btn-danger:hover, .tab-row .btn-danger:hover:focus, .tab-row .btn-danger:focus-visible { +background: var(--col-0); +color: var(--txt-2); +} + +.ButtonCellTop { +background: var(--bg-0); +} + +.feed-button-group .btn-primary { +color: var(--txt-2) !important; +} + +.btn-secondary { +background-color: var(--col-200); +color: var(--col-400); +border-color: var(--col-200); +} + +.btn-secondary:hover, .btn-secondary:hover:focus, .btn-secondary:focus-visible { +background-color: var(--col-300) !important; +color: var(--col-500) !important; +border-color: var(--col-300) !important; +} + +.btn-danger { +background-color: var(--col-200); +color: var(--col-400); +border-color: var(--col-200); +} + +.btn-danger:hover, .btn-danger:hover:focus, .btn-danger:focus-visible { +background-color: var(--col-300); +color: var(--col-500); +border-color: var(--col-300); +} + +.tdx-button-bar .btn-primary { +color: var(--txt-1); +background-color: var(--col-100); +border-color: var(--col-100); +} + +.tdx-button-bar .btn-primary:hover, .tdx-button-bar .btn-primary:hover:focus, .tdx-button-bar .btn-primary:focus-visible { +background-color: var(--col-300); +background: var(--col-300); +color: var(--txt-2); +border-color: var(--col-300); +} + +.tdx-button-bar .btn-primary:visited { +color: var(--txt-1); +} + +.tdx-button-bar .btn-danger { +color: var(--col-400); +} + +.tdx-button-bar .btn-danger:hover, .tdx-button-bar .btn-danger:hover:focus, .tdx-button-bar .btn-danger:focus-visible { +background-color: var(--col-300); +color: var(--col-500); +border-color: var(--col-300); +} + +.tdx-tile-list__item-container, +.tdx-tile-list__item-container:visited { +background-color: var(--col-100) !important; +color: var(--col-400) !important; +} + +.tdx-tile-list__item-container:hover, .tdx-tile-list__item-container:focus { +background-color: var(--col-400) !important; +color: var(--col-100) !important; +} + +a.btn.btn-primary { +background-color: var(--col-600) !important; +color: var(--txt-5) !important; +border-color: var(--col-600) !important; +} + +a.btn.btn-primary:hover { +background-color: var(--col-400) !important; +color: var(--txt-5) !important; +border-color: var(--col-400) !important; +} + +.btn-primary { +background-color: var(--col-600); +color: var(--txt-5); +border-color: var(--col-600); +} + +.btn-primary:hover, .btn-primary:hover:focus, .btn-primary:focus-visible { +background: var(--col-400); +color: var(--txt-5); +border-color: var(--col-400); +} + +td > a.btn.btn-primary { +background-color: var(--col-400) !important; +color: var(--txt-5) !important; +border-color: var(--col-400); +} + +td > a.btn.btn-primary:hover { +background-color: var(--col-500) !important; +color: var(--txt-5) !important; +border-color: var(--col-500); +} + +.btn-default.active, .btn-default.active:hover, .btn-default.active:focus, .btn-default:active, .btn-default:active:hover, .btn-default:active:focus { +background: var(--col-100) !important; +color: var(--txt-1) !important; +border-color: var(--col-100) !important; +} + +a.btn.btn-link.tdx-primary-button-override { +color: var(--txt-5) !important; +} + +.btn-link, .btn.btn-link, .sidebar-btn.btn-link { +color: var(--col-400) !important; +} + +.btn-link:hover, .btn.btn-link:hover, .sidebar-btn.btn-link:hover { +color: var(--col-400) !important; +} + +.btn-link[role=button]:hover, .btn.btn-link[role=button]:hover, .sidebar-btn.btn-link[role=button]:hover, +a.btn.btn-link.tdx-tertiary-button-override:hover { +background-color: var(--col-200) !important; +} + +.tdx-calendar .cal-views { +border-color: var(--col-400) !important; +} + +.tdx-calendar .cal-view { +color: var(--txt-2) !important; +} + +.tdx-calendar .cal-view.light-blue-bg { +background-color: var(--col-400) !important; +color: var(--txt-2) !important; +} + +.tdx-calendar .cal-view:not(.cal-view.light-blue-bg):hover, .tdx-calendar .cal-view:hover:focus, .tdx-calendar .cal-view:focus-visible { +background-color: var(--col-200) !important; +} + +.tdx-calendar #btnDatePicker { +background-color: var(--bg-0) !important; +color: var(--col-400) !important; +} + +.tdx-calendar #btnDatePicker:hover, .tdx-calendar #btnDatePicker:focus-visible, .tdx-calendar #btnDatePicker:active, .tdx-calendar #btnDatePicker:active:hover, .tdx-calendar #btnDatePicker:focus:active, .tdx-calendar #btnDatePicker:focus:hover { +color: var(--col-600) !important; +} + +button:has(.ui-icon-circle-triangle-w), span:has(.ui-icon-circle-triangle-w), +button:has(.ui-icon-circle-triangle-e), span:has(.ui-icon-circle-triangle-e) { +color: var(--col-400) !important; +} + +button:has(.ui-icon-circle-triangle-e):hover, button:has(.ui-icon-circle-triangle-e):focus-visible, button:has(.ui-icon-circle-triangle-e):active, button:has(.ui-icon-circle-triangle-e):active:hover, button:has(.ui-icon-circle-triangle-e):focus:active, button:has(.ui-icon-circle-triangle-e):focus:hover, span:has(.ui-icon-circle-triangle-e):hover, span:has(.ui-icon-circle-triangle-e):focus-visible, span:has(.ui-icon-circle-triangle-e):active, span:has(.ui-icon-circle-triangle-e):active:hover, span:has(.ui-icon-circle-triangle-e):focus:active, span:has(.ui-icon-circle-triangle-e):focus:hover, +button:has(.ui-icon-circle-triangle-w):hover, button:has(.ui-icon-circle-triangle-w):focus-visible, button:has(.ui-icon-circle-triangle-w):active, button:has(.ui-icon-circle-triangle-w):active:hover, button:has(.ui-icon-circle-triangle-w):focus:active, button:has(.ui-icon-circle-triangle-w):focus:hover, span:has(.ui-icon-circle-triangle-w):hover, span:has(.ui-icon-circle-triangle-w):focus-visible, span:has(.ui-icon-circle-triangle-w):active, span:has(.ui-icon-circle-triangle-w):active:hover, span:has(.ui-icon-circle-triangle-w):focus:active, span:has(.ui-icon-circle-triangle-w):focus:hover { +color: var(--col-600) !important; +} + +.ui-widget-header { +background: var(--bg-0) !important; +} + +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, +.ui-widget-content, .ui-widget.ui-widget-content { +background: var(--bg-0) !important; +border-color: var(--border-0) !important; +} + +.tdx-calendar .fc-day-header { +color: var(--col-400) !important; +} + +.tdx-calendar .fc-day-number.fc-other-month a:first-child { +color: var(--col-200) !important; +} + +.tdx-calendar .fc-day-number a { +color: var(--col-600) !important; +} + +.tdx-calendar .ui-state-highlight a, .tdx-calendar .ui-widget-content .ui-state-highlight a, .tdx-calendar .ui-widget-header .ui-state-highlight a { +color: var(--col-400) !important; +} + +.tdx-calendar .ui-state-highlight { +background: var(--col-100) !important; +} + +.td-day-off { +background: var(--bg-2) !important; +} + +.label-primary, .tdworkmgmt.table .hilite .label.label-primary { +background-color: var(--col-300); +} + +.label-info, .label-success, .label-default { +color: var(--col-200); +background-color: var(--col-500); +} + +.tdTilemd, +.tdTilesm { +background-color: var(--col-300); +border-color: var(--col-300); +} + +.tdTilemd.secondary, +.tdTilesm.secondary { +background-color: var(--col-300); +border-color: var(--col-300); +} + +.tdTilesm.tertiary { +background-color: var(--col-300); +border-color: var(--col-300); +} + +.block-actions .btn.btn-link { +color: var(--txt-1); +} + +.block-actions .btn.btn-link:hover, .block-actions .btn.btn-link:hover:focus, .block-actions .btn.btn-link:focus-visible { +background: var(--bg-5); +color: var(--txt-1); +} + +.btn-link:hover, .btn-link:focus-visible, .btn.btn-link:hover, .btn.btn-link:focus-visible, .sidebar-btn.btn-link:hover, .sidebar-btn.btn-link:focus-visible { +color: var(--col-500); +} + +ul.dropdown-menu .btn.btn-link[data-v-775a00fa] { +color: var(--txt-1) !important; +} + +ul.dropdown-menu .btn.btn.btn-link[data-v-775a00fa]:hover { +background-color: var(--col-300) !important; +color: var(--txt-1) !important; +} + +.copyButton { +color: var(--txt-2) !important; +background-color: var(--bg-0) !important; +border-color: var(--border-0) !important; +} + +.copyButton:hover { +background-color: var(--bg-2) !important; +} + +.js-open-monitor .btn { +color: var(--col-1); +} + +.js-open-monitor .btn:hover { +color: var(--col-2); +} + +/* .btn:hover, .btn:hover:focus, .btn:focus-visible { +background: var(--bg-1); +} */ + +.btn:focus:not(:focus-visible,.active,:active,:hover) { +color: var(--txt-5); +background-color: var(--col-400); +} + +.btn:hover, .btn:hover:focus, .btn:focus-visible { +color: var(--txt-5); +background-color: var(--col-600); +} + +.popover { + background-color: var(--bg-0); +box-shadow: 0 5px 10px var(--shadow-1); +border-color: var(--border-0); +} + +.popover.right > .arrow { + border-right-color: var(--border-0); +} + +.popover.right > .arrow::after { +border-right-color: var(--bg-0); +} + +/* Tables */ + +table.table { +color: var(--txt-1) !important; +border-color: var(--border-0); +} + +.tdx-table__th { +background-color: var(--bg-0) !important; +color: var(--col-600) !important; +} + +.tdx-table__td { +color: var(--txt-2) !important; +} + +.tdx-table-fade-right { +background: linear-gradient(to right,transparent,var(--bg-0)) !important; +} + +thead, tbody, tfoot, tr, td, th { +border-color: var(--border-0); +} + +.tdx-pagination-bar { +background-color: var(--bg-0) !important; +} + +.tdx-pagination-bar__item-count { +color: var(--txt-2) !important; +} + +.tdx-dashboard__widget-container { +box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-1) !important; +} + +.tdx-widget-selector__widget-option { +box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.tdx-widget-selector__widget-name { +color: var(--txt-1) !important; +} + +.tdx-widget-selector__category { +color: var(--col-600) !important; +} + +.tdx-widget-selector__widget-option:hover, .tdx-widget-selector__widget-option:focus { +outline-color: var(--col-400) !important; +} + +.tdx-dashboard-row-editor { +background-color: var(--col-100) !important; +box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.tdx-dashboard-row-editor__column { +background-color: var(--bg-0) !important; +} + +.tdx-dashboard-row-editor__selected-widget { +background-color: var(--bg-0) !important; +outline-color: var(--border-0) !important; +} + +.tdx-dashboard-row-editor__selected-widget-category-text { +color: var(--col-600) !important; +} + +.tdx-dashboard-editor__add-widget { +color: var(--txt-3) !important; +} + +.tdx-dashboard-editor__add-widget:hover, .tdx-dashboard-editor__add-widget:focus-visible { +box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.tdx-control-bar { +background-color: var(--bg-0) !important; +} + +.tdx-control-bar__title { +color: var(--txt-1) !important; +} + +.tdx-confirmation-dialog { +background-color: var(--bg-0); +color: var(--col-600); +} + +.tdx-confirmation-dialog__text-area { +color: var(--col-600); +} + +.k-grid, .k-pager, .k-table { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +} + +.k-table-tbody>.k-table-row:not(.k-table-group-row):first-child>.k-table-td, +.k-table-tbody>.k-table-row:not(.k-table-group-row)>.k-table-td { +border-color: var(--border-0) !important; +} + +.k-grid-header, .k-grid-pager { +background-color: var(--bg-0) !important; +color: var(--txt-0) !important; +} + +.k-grid .k-table-row.k-table-alt-row { +background-color: var(--bg-0); +} + +.k-grid .k-table-row { +background-color: var(--bg-1); /* can change to 0 for non-striped rows */ +} + +td.k-table-td { +/* background-color: var(--bg-1); */ +} + +tr.k-alt td.k-table-td { +background-color: var(--bg-0) +} + +.k-table-th { +background-color: var(--bg-0) !important; +} + +.k-grid .k-grid-header .k-table-th { +color: var(--txt-4) !important; +} + +.k-grid .k-grid-header .k-table-th, .k-table-tbody .k-group-cell { +background-color: unset; +} + +.k-table-th, .k-table-td, +td.k-table-td { +background-color: unset; +} + +.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):not([style]):hover, .k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover { +background-color: var(--bg-1) !important; +} + +.k-grid .k-table-tbody>.k-table-alt-row:not(.k-detail-row):not([style]):hover, .k-grid .k-table-tbody>.k-table-alt-row:not(.k-detail-row).k-hover:not([style]) { +background-color: var(--bg-0) !important; +} + +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-button-md { +background-color: var(--bg-0) !important; +color: var(--col-400) !important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button.k-pager-nav.k-disabled, +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-pager-last.k-button-md { +background-color: var(--bg-0) !important; +color: var(--col-400) !important; +} + +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-pager-last.k-button-md.k-disabled, +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-button-md.k-disabled { +color: var(--bg-2) !important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button.k-pager-nav:hover { +color: var(--col-600) !important; +} + +#lookupIframeWrapper { +background-color: var(--bg-0); +} + +.k-window, .k-window:focus { +background: var(--bg-0); +box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2); +} + +.k-window-titlebar { +background-color: var(--bg-0) !important; +} + +.k-window-content { +background-color: var(--bg-0) !important; +} + +.k-window-title { +color: var(--col-500) !important; +} + +.k-button .k-svg-i-window { +color: var(--col-500); +} + +.k-button .k-svg-i-x { +color: var(--col-500); +} + +button.k-button.k-button-md.k-button-flat.k-button-flat-primary.k-selected { +background-color: var(--col-100) !important; +} + +button.k-selected { +background-color: var(--col-1) !important; +color: var(--col-400) !important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button { +color: var(--col-400) !important; +} + +button.k-button.k-button-md.k-button-flat.k-button-flat-primary:hover { +color: var(--col-500); +background-color: var(--col-100)!important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button.k-pager-nav { +background-color: var(--bg-0) !important; +} + +.tdx-pagination-bar { +background-color: var(--bg-0); +} + +.tdx-pagination-bar__active-page-item { +color: var(--col-400); +background-color: var(--col-200); +} + +.tdx-pagination-bar__page-item:hover:not(.tdx-pagination-bar__active-page-item,.tdx-pagination-bar__separator) { +color: var(--col-500); +background-color: var(--col-100); +} + +.tdx-pagination-bar .fa, .tdx-pagination-bar a { +color: var(--col-400); +} + +.tdx-pager-button .fa-chevron-right, .tdx-pager-button .fa-chevron-left { +-webkit-text-stroke-color: var(--bg-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 { +color: var(--txt-5); +background-color: var(--bg-5) !important; +} + +.tdworkmgmt.table-header > div { +background-color: var(--bg-1); +color: var(--col-400); +} + +/* Side Panels */ + +.tdx-right-side-panel { +background-color: var(--bg-0) !important; +box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2) !important; +} + +.white-bg, .white-hover-bg:hover { +background-color: var(--bg-0) !important; +} + +.tdx-right-side-panel__drag-border { +background: linear-gradient(var(--col-400),var(--col-400)) no-repeat left/1px 10% !important; +} + +.tdx-right-side-panel__drag-border:hover { +border-color: var(--col-400) !important; +} + +.tdx-right-side-panel__header-title { +color: var(--txt-2) !important; +} + +.tdx-right-side-panel__drag-border:focus-visible, .tdx-right-side-panel__drag-border.active { +border-color: var(--col-500) !important; +} + + +.tdx-right-side-panel__home-button { +color: var(--col-400) !important; +border-color: var(--col-500) !important; +} + +.tdx-right-side-panel__home-button:hover { +color: var(--col-200) !important; +border-color: var(--col-300) !important; +} + +.tdx-leftnav-drag-handle { +background: linear-gradient(var(--col-400),var(--col-400)) no-repeat right/1px 10% !important; +} + +.tdx-leftnav-drag-handle:hover { +background-color: var(--col-400) !important; +} + +.tdx-leftnav-drag-handle:focus-visible, .tdx-leftnav-drag-handle.active { +background-color: var(--col-500) !important;; +} + +/* Tickets */ + +.control-label, label.control-label, span.control-label { +color: var(--txt-3) !important; +} + +.control-label~* { +color: var(--txt-1) !important; +} + +.black { +color: var(--txt-1) !important; +} + +nav#divTabHeader, +.TabButtonCell, .tab-row, +.tdx-button-bar { +background-color: var(--col-100) !important; +} + +.panel-default>.panel-heading { +background-color: var(--bg-0) !important; +border-color: var(--border-0) !important; +} + +.panel-body, .panel-footer { +background-color: var(--bg-0) !important; +border-color: var(--border-0) !important; +} + +.panel { +background-color: var(--bg-0) !important; +} + +.panel-body, .panel-footer { +color: var(--txt-3) !important; +} + +.h2, h2, h2.h3, .panel-title { +color: var(--txt-1) !important; +border-color: var(--border-0) !important; +} + +.alert-info, div.alert-info { +color: var(--txt-1) !important; +background-color: var(--col-blue) !important; +} + +.alert-warning, div.alert-warning { +color: var(--txt-1) !important; +background-color: var(--col-yellow) !important; +} + +.nav-tabs>li.active>a, .nav-tabs>li.active>button, .nav-pills>li.active>a, .nav-pills>li.active>button { +color: var(--col-600) !important; +background-color: var(--bg-0) !important; +border-color: var(--border-0); +box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>button, .nav-tabs>li>button:hover, .nav-pills>li>a, .nav-pills>li>a:hover { +color: var(--txt-3); +} + +.nav-tabs>li>a:hover, .nav-tabs>li>a:hover:hover { +color: var(--txt-2); +border-color: var(--border-0); +} + +.nav-tabs>li>a:hover { +color: var(--col-600); +} + +a.btn.btn-link.tdx-tertiary-button-override { +background-color: var(--col-100) !important; +color: var(--txt-1) !important; +} + +.gray, .gray-hover:hover { +color: var(--txt-3) !important; +} + +.dropdown-menu { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2); +} + +.dropdown-menu li { +color: var(--txt-1); +background-color: var(--bg-0); +} + +.dropdown-menu>span>li>a:hover, .dropdown-menu>span>li>a:focus, .dropdown-menu>span>li:hover, .dropdown-menu>span>li:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>span>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>span>a:focus, +.dropdown-menu li:hover { +color: var(--txt-1); +background-color: var(--col-300); +} + +.TabButtonCell .btn-primary.active, .TabButtonCell .btn-primary.active:hover, .TabButtonCell .btn-primary.active:focus, .TabButtonCell .btn-primary:active, .TabButtonCell .btn-primary:active:hover, .TabButtonCell .btn-primary:active:focus, .TabButtonCell .btn-info.active, .TabButtonCell .btn-info.active:hover, .TabButtonCell .btn-info.active:focus, .TabButtonCell .btn-info:active, .TabButtonCell .btn-info:active:hover, .TabButtonCell .btn-info:active:focus, .tab-row .btn-primary.active, .tab-row .btn-primary.active:hover, .tab-row .btn-primary.active:focus, .tab-row .btn-primary:active, .tab-row .btn-primary:active:hover, .tab-row .btn-primary:active:focus, #divViewButtons.active, #divViewButtons.active:hover, #divViewButtons.active:focus, #divViewButtons:active, #divViewButtons:active:hover, #divViewButtons:active:focus, .TabButtonCell .btn-primary:active.active, .TabButtonCell .btn-primary:active.active:hover, .TabButtonCell .btn-primary:active.active:focus, .TabButtonCell .btn-primary:active:active, .TabButtonCell .btn-primary:active:active:hover, .TabButtonCell .btn-primary:active:active:focus, .tab-row .btn-primary:active.active, .tab-row .btn-primary:active.active:hover, .tab-row .btn-primary:active.active:focus, .tab-row .btn-primary:active:active, .tab-row .btn-primary:active:active:hover, .tab-row .btn-primary:active:active:focus { +background: var(--col-600); +color: var(--txt-1); +} + +div.btn-group.open>.dropdown-toggle.btn-primary, .open>.dropdown-toggle.btn-primary, .open>.dropdown-toggle.btn-primary:hover, .open>.dropdown-toggle.btn-primary:focus { +background: var(--col-100); +color: var(--txt-1); +} + +.TabButtonCell .btn-primary:focus:not(:focus-visible,.active,:active,:hover), .TabButtonCell .btn-info:focus:not(:focus-visible,.active,:active,:hover), .tab-row .btn-primary:focus:not(:focus-visible,.active,:active,:hover), #divViewButtons:focus:not(:focus-visible,.active,:active,:hover), .TabButtonCell .btn-primary:active:focus:not(:focus-visible,.active,:active,:hover), .tab-row .btn-primary:active:focus:not(:focus-visible,.active,:active,:hover) { +background: var(--col-100); +color: var(--txt-1); +} + +.btn-primary--tertiary { +background-color: var(--bg-0) !important; +color: var(--txt-1) !important; +border-color: var(--bg-0) !important; +} + +.btn-primary--tertiary:hover, .btn-primary--tertiary:hover:focus, .btn-primary--tertiary:focus-visible { +background-color: var(--col-200) !important; +color: var(--col-400) !important; +} + +.time-cell-approved { +background-color: var(--col-green); +} + +.time-cell-rejected { +background-color: var(--col-red); +} + +[class^=fa-].red, [class^=fa-].red:hover { +color: var(--col-red) !important; +} + +[class^=fa-].green, [class^=fa-].green:hover { +color: var(--col-green) !important; +} + +.tdx-error-text, span.tdx-error-text, +.tdx-error-text:hover, span.tdx-error-text:hover { +/* color: var(--col-red) !important; */ +color: var(--col-600) !important; +} + +.red-bg, +.status.red, .status-danger, .pri-hi { +background-color: var(--col-red) !important; +color: var(--txt-1) !important; +} + +.status.blue, .status.gray, .status-primary, .status-default { +background-color: var(--col-blue); +color: var(--txt-1) !important; +} + +.status-warning { +background-color: var(--col-yellow); +color: var(--txt-1) !important; +} + +.status.green, .status-success, +.js-open-monitor .btn .label-success { +background-color: var(--col-green); +color: var(--txt-1) !important; +} + +div.feed-body>div.feed-child-box { +background-color: var(--col-100); +color: var(--txt-1); +} + +.modal-content { +background-color: var(--bg-0); +} + +.modal-dialog { +box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2); +} + +.modal-title { +color: var(--txt-1); +} + +.tdx-modal { +background-color: var(--bg-0) !important; +box-shadow: 0 0 8px var(--shadow-1),0 5px 12px var(--shadow-1),0 15px 35px var(--shadow-2); +} + +.tdx-modal .modal-content { +color: var(--txt-1) !important; +} + +.tdx-modal__iframe-header, +.tdx-modal__iframe-footer { +background-color: var(--bg-0) !important; +} + +.modal-content { +background-color: var(--bg-0) !important; +} + +hr { +background-color: var(--col-300); +} + +blockquote { +border-color: var(--border-0); +} + +.code, code, pre { +background-color: var(--bg-1); +color: var(--txt-1); +border-color: var(--border-0); +} + +div.comment { +background-color: var(--col-100); +} + +.block-actions { +background-color: var(--bg-0); +} + +body .tdworkmgmt.table>thead>tr>th, body .tdworkmgmt.table>tbody>tr>th, body .tdworkmgmt.table>tfoot>tr>th, body .tdworkmgmt.table>tbody>tr.TDGridHeader>td, body .tdworkmgmt.table>thead>tr.TDGridHeader>td { +background-color: var(--bg-0); +color: var(--txt-1); +} + +body .tdworkmgmt.table>tbody>tr:not(.tdx-grid__group-header):not(.TDGridHeader)>td { +color: var(--txt-1); +border-color: var(--border-0); +} + +body .tdworkmgmt.table>tbody>tr:not(.tdx-grid__group-header):not(.TDGridHeader):last-child:not(.TDPagerRow) th, body .tdworkmgmt.table>tbody>tr:not(.tdx-grid__group-header):not(.TDGridHeader):last-child:not(.TDPagerRow) td { +border-color: var(--border-0); +} + +.tdworkmgmt td a, .tdworkmgmt.table .hilite a { +color: var(--col-400); +} + +.tdworkmgmt td a:hover, .tdworkmgmt td a:focus-visible, .tdworkmgmt.table .hilite a:hover, .tdworkmgmt.table .hilite a:focus-visible { +color: var(--col-0); +} + +.input-group-addon { +background-color: var(--bg-5); +color: var(--txt-1); +} + +.list-group-item { +background-color: var(--bg-0); +border-color: var(--border-0); +} + +/* Text Editor */ +.cke_editable { + color: var(--txt-1); + background-color: var(--bg-4); +} + +.cke_wysiwyg_div, .cke_wysiwyg_frame { +background: var(--bg-0) !important; +} + +.cke_combo_button, .cke_toolgroup { + background: var(--bg-0) !important; +} + +.cke_button_icon { + opacity: 1 !important; +filter: invert(var(--txt-invert)) !important; +} + +.cke_combo_text { + color: var(--txt-2) !important; +} + +.cke_panel_grouptitle { + background: var(--bg-2) !important; + color: var(--txt-1); +} + +.cke_panel_listItem a:active, .cke_panel_listItem a:focus, .cke_panel_listItem a:hover { + background: var(--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; +} + +.cke_bottom, .cke_top, .cke_chrome { + background-color: var(--bg-1) !important; + color: var(--txt-2) !important; +} + +.cke_combo_button, +.cke_toolgroup, +.cke_contents { +border-color: var(--border-0) !important; +} + +div .cke_top, div .cke_bottom, div .comment-options, div .cke_chrome { +background-color: var(--col-100) !important; +} + +.cke_panel_listItem a { +border: none; +} + +.cke_panel, +.cke_panel_grouptitle { +border-color: var(--border-0) !important; +} + +a.cke_colorbox, +a.cke_colorauto, a.cke_colormore { +border-color: var(--border-0) !important; +} + +.cke_colorblock, .cke_colorblock a { + color: var(--txt-1); +} + +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; +} + +a:active.cke_colorbox, a:focus.cke_colorbox, a:hover.cke_colorbox { + background: var(--bg-3) !important; +} + +.cke_dialog_contents, .cke_dialog_body { + color: var(--txt-1) !important; + background: var(--bg-2) !important; +} + +.cke_dialog_footer, .cke_dialog_title { + background: var(--bg-1) !important; +} + +.cke_reset_all, .cke_reset_all * { + color: var(--txt-2) !important; +} + +.cke_dialog_page_contents a.cke_dialog_ui_button, a.cke_dialog_ui_button_cancel { + 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(--bg-3) !important; +} + +a.cke_dialog_tab_selected { + background: var(--bg-2) !important; +} + +a.cke_dialog_tab { + background: var(--bg-3) !important; +} + +select.cke_dialog_ui_input_select { + background-color: var(--bg-4) !important; +} + +.cke_button_on { + background: var(--bg-2) !important; +} + +.dropdown-menu>li>a, .dropdown-menu>span>li>a, .dropdown-menu>li>span>a { +color: var(--txt-1) !important; +} + +/* Icons */ +.js-help a, .js-help .fa-solid, .js-default-help a, .js-default-help .fa-solid, +.disp-group .control-label>a>span { +color: var(--col-400); +} + +.js-help a:hover, .js-help a:focus-visible, .js-help a:active, .js-help a:active:hover, .js-help a:focus:active, .js-help a:focus:hover, .js-help .fa-solid:hover, .js-help .fa-solid:focus-visible, .js-help .fa-solid:active, .js-help .fa-solid:active:hover, .js-help .fa-solid:focus:active, .js-help .fa-solid:focus:hover, .js-default-help a:hover, .js-default-help a:focus-visible, .js-default-help a:active, .js-default-help a:active:hover, .js-default-help a:focus:active, .js-default-help a:focus:hover, .js-default-help .fa-solid:hover, .js-default-help .fa-solid:focus-visible, .js-default-help .fa-solid:active, .js-default-help .fa-solid:active:hover, .js-default-help .fa-solid:focus:active, .js-default-help .fa-solid:focus:hover, +.disp-group .control-label>a>span:hover, .disp-group .control-label>a>span:focus-visible, .disp-group .control-label>a>span:active, .disp-group .control-label>a>span:active:hover, .disp-group .control-label>a>span:focus:active, .disp-group .control-label>a>span:focus:hover { +color: var(--col-500); +} + +.tdx-lookup-button-group a, .tdx-lookup-button-group button, .input-btn-group a, .input-btn-group button, +div.select2-container.select2-allowclear .select2-choice abbr { +color: var(--col-400); +} + +.tdx-lookup-button-group a:hover, .tdx-lookup-button-group a:focus-visible, .tdx-lookup-button-group a:active, .tdx-lookup-button-group a:active:hover, .tdx-lookup-button-group a:focus:active, .tdx-lookup-button-group a:focus:hover, .tdx-lookup-button-group button:hover, .tdx-lookup-button-group button:focus-visible, .tdx-lookup-button-group button:active, .tdx-lookup-button-group button:active:hover, .tdx-lookup-button-group button:focus:active, .tdx-lookup-button-group button:focus:hover, .input-btn-group a:hover, .input-btn-group a:focus-visible, .input-btn-group a:active, .input-btn-group a:active:hover, .input-btn-group a:focus:active, .input-btn-group a:focus:hover, .input-btn-group button:hover, .input-btn-group button:focus-visible, .input-btn-group button:active, .input-btn-group button:active:hover, .input-btn-group button:focus:active, .input-btn-group button:focus:hover { +color: var(--col-500); +} + +.tdx-icon__encircled--active { +background-color: var(--col-200) !important; +} + +.tdx-icon__encircled--active:hover { +background-color: var(--col-300) !important; +} + +.tdx-icon__encircled:not(.tdx-icon__encircled--active) { +background-color: var(--bg-0) !important; +} + +.tdx-icon__encircled:not(.tdx-icon__encircled--active):hover { +background-color: var(--col-200) !important; +} + +.tdx-user-icon, .tdx-multiuser-icon, +div.profile-image.red-bg, div.profile-image.green-bg, div.profile-image.red-bg, div.profile-image.blue-bg, div.profile-image.yellow-bg, div.profile-image.gray-bg, div.profile-image.initials.red-bg, div.profile-image.initials.green-bg, div.profile-image.initials.red-bg, div.profile-image.initials.blue-bg, div.profile-image.initials.yellow-bg, div.profile-image.initials.gray-bg { +background-color: var(--col-400) !important; +color: var(--col-100) !important; +} + +.tdx-widget-indicator-icon { +color: var(--col-600) !important; +} + +.tdx-dirty-indicator { +color: var(--col-400) !important; +} + +.tdx-hover-darken { +color: var(--col-400); +} + +.tdx-hover-darken:hover { +color: var(--col-300); +} + +.form-group>a, .form-group>.checkbox>a, .disp-group>a, .form-group>.control-label>a, .checkbox>label>a { +color: var(--col-400) !important; +} + +.form-group>a:hover, .form-group>.checkbox>a:hover, .disp-group>a:hover, .form-group>.control-label>a:hover, .checkbox>label>a:hover { +color: var(--col-500) !important; +} + +.k-table-th[data-role=columnsorter] .k-link:not(:has(>.k-sort-icon)):after { +color: var(--col-400) !important; +} + +.k-table-th[data-role=columnsorter] .k-link:not(:has(>.k-sort-icon)):hover:after { +color: var(--col-500) !important; +} + +.tdx-calendar .fa-plus { +color: var(--col-300) !important; +} + +/* Icons + Filters */ +.tdx-dropdown__menu-icon, +.tdx-dropdown--headline:after, +.tdx-dropdown:after, +.tdx-icon--search, +.k-icon +{ +filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)); +} + +/* Same but with !important */ +.tdx-icon__encircled--active .tdx-icon, +.tdx-icon--filter-purple, +.tdx-navigation-tabs__tab--active .tdx-close-x, +.tdx-icon--new-browser, +.tdx-close-x, button.tdx-close-x, +.tdx-action-menu__item--primary:after, +.tdx-action-menu-dropdown:after, +.tdx-icon.tdx-icon--hover-darken, .tdx-icon--hover-darken>.tdx-icon, +.tdx-dropdown__menu-icon, .tdx-dropdown--headline:after, .tdx-dropdown:after, .tdx-icon--search, .tdx-icon:not(.label), +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus-visible, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:hover +{ +filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)) !important; +} + +/* Hover + !important */ +.tdx-icon__encircled:hover .tdx-icon, +.tdx-close-x:hover, button.tdx-close-x:hover, +.tdx-icon.tdx-icon--hover-darken:hover, .tdx-icon.tdx-icon--hover-darken:focus, .tdx-icon--hover-darken>.tdx-icon:hover, .tdx-icon--hover-darken>.tdx-icon:focus, +.tdx-leftnav__item-expander:hover .tdx-icon, .tdx-leftnav__item-expander:focus .tdx-icon, +.tdx-action-menu-dropdown--no-arrow:hover .tdx-icon, .tdx-action-menu-dropdown--no-arrow.active .tdx-icon, +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close +{ +filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)) brightness(125%) !important; +} + diff --git a/lib/moment.min.js b/lib/moment.min.js new file mode 100644 index 0000000..8b80f20 --- /dev/null +++ b/lib/moment.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.moment=t()}(this,function(){"use strict";var H;function _(){return H.apply(null,arguments)}function y(e){return e instanceof Array||"[object Array]"===Object.prototype.toString.call(e)}function F(e){return null!=e&&"[object Object]"===Object.prototype.toString.call(e)}function c(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function L(e){if(Object.getOwnPropertyNames)return 0===Object.getOwnPropertyNames(e).length;for(var t in e)if(c(e,t))return;return 1}function g(e){return void 0===e}function w(e){return"number"==typeof e||"[object Number]"===Object.prototype.toString.call(e)}function V(e){return e instanceof Date||"[object Date]"===Object.prototype.toString.call(e)}function G(e,t){for(var n=[],s=e.length,i=0;i>>0,s=0;sWe(e)?(r=e+1,t-We(e)):(r=e,t);return{year:r,dayOfYear:n}}function Be(e,t,n){var s,i,r=qe(e.year(),t,n),r=Math.floor((e.dayOfYear()-r-1)/7)+1;return r<1?s=r+N(i=e.year()-1,t,n):r>N(e.year(),t,n)?(s=r-N(e.year(),t,n),i=e.year()+1):(i=e.year(),s=r),{week:s,year:i}}function N(e,t,n){var s=qe(e,t,n),t=qe(e+1,t,n);return(We(e)-s+t)/7}s("w",["ww",2],"wo","week"),s("W",["WW",2],"Wo","isoWeek"),h("w",n,u),h("ww",n,t),h("W",n,u),h("WW",n,t),Oe(["w","ww","W","WW"],function(e,t,n,s){t[s.substr(0,1)]=M(e)});function Je(e,t){return e.slice(t,7).concat(e.slice(0,t))}s("d",0,"do","day"),s("dd",0,0,function(e){return this.localeData().weekdaysMin(this,e)}),s("ddd",0,0,function(e){return this.localeData().weekdaysShort(this,e)}),s("dddd",0,0,function(e){return this.localeData().weekdays(this,e)}),s("e",0,0,"weekday"),s("E",0,0,"isoWeekday"),h("d",n),h("e",n),h("E",n),h("dd",function(e,t){return t.weekdaysMinRegex(e)}),h("ddd",function(e,t){return t.weekdaysShortRegex(e)}),h("dddd",function(e,t){return t.weekdaysRegex(e)}),Oe(["dd","ddd","dddd"],function(e,t,n,s){s=n._locale.weekdaysParse(e,s,n._strict);null!=s?t.d=s:p(n).invalidWeekday=e}),Oe(["d","e","E"],function(e,t,n,s){t[s]=M(e)});var Qe="Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),Xe="Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),Ke="Su_Mo_Tu_We_Th_Fr_Sa".split("_"),et=i,tt=i,nt=i;function st(){function e(e,t){return t.length-e.length}for(var t,n,s,i=[],r=[],a=[],o=[],u=0;u<7;u++)s=l([2e3,1]).day(u),t=f(this.weekdaysMin(s,"")),n=f(this.weekdaysShort(s,"")),s=f(this.weekdays(s,"")),i.push(t),r.push(n),a.push(s),o.push(t),o.push(n),o.push(s);i.sort(e),r.sort(e),a.sort(e),o.sort(e),this._weekdaysRegex=new RegExp("^("+o.join("|")+")","i"),this._weekdaysShortRegex=this._weekdaysRegex,this._weekdaysMinRegex=this._weekdaysRegex,this._weekdaysStrictRegex=new RegExp("^("+a.join("|")+")","i"),this._weekdaysShortStrictRegex=new RegExp("^("+r.join("|")+")","i"),this._weekdaysMinStrictRegex=new RegExp("^("+i.join("|")+")","i")}function it(){return this.hours()%12||12}function rt(e,t){s(e,0,0,function(){return this.localeData().meridiem(this.hours(),this.minutes(),t)})}function at(e,t){return t._meridiemParse}s("H",["HH",2],0,"hour"),s("h",["hh",2],0,it),s("k",["kk",2],0,function(){return this.hours()||24}),s("hmm",0,0,function(){return""+it.apply(this)+r(this.minutes(),2)}),s("hmmss",0,0,function(){return""+it.apply(this)+r(this.minutes(),2)+r(this.seconds(),2)}),s("Hmm",0,0,function(){return""+this.hours()+r(this.minutes(),2)}),s("Hmmss",0,0,function(){return""+this.hours()+r(this.minutes(),2)+r(this.seconds(),2)}),rt("a",!0),rt("A",!1),h("a",at),h("A",at),h("H",n,d),h("h",n,u),h("k",n,u),h("HH",n,t),h("hh",n,t),h("kk",n,t),h("hmm",me),h("hmmss",_e),h("Hmm",me),h("Hmmss",_e),v(["H","HH"],O),v(["k","kk"],function(e,t,n){e=M(e);t[O]=24===e?0:e}),v(["a","A"],function(e,t,n){n._isPm=n._locale.isPM(e),n._meridiem=e}),v(["h","hh"],function(e,t,n){t[O]=M(e),p(n).bigHour=!0}),v("hmm",function(e,t,n){var s=e.length-2;t[O]=M(e.substr(0,s)),t[b]=M(e.substr(s)),p(n).bigHour=!0}),v("hmmss",function(e,t,n){var s=e.length-4,i=e.length-2;t[O]=M(e.substr(0,s)),t[b]=M(e.substr(s,2)),t[T]=M(e.substr(i)),p(n).bigHour=!0}),v("Hmm",function(e,t,n){var s=e.length-2;t[O]=M(e.substr(0,s)),t[b]=M(e.substr(s))}),v("Hmmss",function(e,t,n){var s=e.length-4,i=e.length-2;t[O]=M(e.substr(0,s)),t[b]=M(e.substr(s,2)),t[T]=M(e.substr(i))});i=Re("Hours",!0);var ot,ut={calendar:{sameDay:"[Today at] LT",nextDay:"[Tomorrow at] LT",nextWeek:"dddd [at] LT",lastDay:"[Yesterday at] LT",lastWeek:"[Last] dddd [at] LT",sameElse:"L"},longDateFormat:{LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},invalidDate:"Invalid date",ordinal:"%d",dayOfMonthOrdinalParse:/\d{1,2}/,relativeTime:{future:"in %s",past:"%s ago",s:"a few seconds",ss:"%d seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",w:"a week",ww:"%d weeks",M:"a month",MM:"%d months",y:"a year",yy:"%d years"},months:Fe,monthsShort:Le,week:{dow:0,doy:6},weekdays:Qe,weekdaysMin:Ke,weekdaysShort:Xe,meridiemParse:/[ap]\.?m?\.?/i},W={},lt={};function dt(e){return e&&e.toLowerCase().replace("_","-")}function ht(e){for(var t,n,s,i,r=0;r=t&&function(e,t){for(var n=Math.min(e.length,t.length),s=0;s=t-1)break;t--}r++}return ot}function ct(t){var e,n;if(void 0===W[t]&&"undefined"!=typeof module&&module&&module.exports&&(n=t)&&n.match("^[^/\\\\]*$"))try{e=ot._abbr,require("./locale/"+t),ft(e)}catch(e){W[t]=null}return W[t]}function ft(e,t){return e&&((t=g(t)?P(e):mt(e,t))?ot=t:"undefined"!=typeof console&&console.warn&&console.warn("Locale "+e+" not found. Did you forget to load it?")),ot._abbr}function mt(e,t){if(null===t)return delete W[e],null;var n,s=ut;if(t.abbr=e,null!=W[e])Q("defineLocaleOverride","use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info."),s=W[e]._config;else if(null!=t.parentLocale)if(null!=W[t.parentLocale])s=W[t.parentLocale]._config;else{if(null==(n=ct(t.parentLocale)))return lt[t.parentLocale]||(lt[t.parentLocale]=[]),lt[t.parentLocale].push({name:e,config:t}),null;s=n._config}return W[e]=new K(X(s,t)),lt[e]&<[e].forEach(function(e){mt(e.name,e.config)}),ft(e),W[e]}function P(e){var t;if(!(e=e&&e._locale&&e._locale._abbr?e._locale._abbr:e))return ot;if(!y(e)){if(t=ct(e))return t;e=[e]}return ht(e)}function _t(e){var t=e._a;return t&&-2===p(e).overflow&&(t=t[Y]<0||11He(t[D],t[Y])?S:t[O]<0||24N(r,u,l)?p(s)._overflowWeeks=!0:null!=d?p(s)._overflowWeekday=!0:(h=$e(r,a,o,u,l),s._a[D]=h.year,s._dayOfYear=h.dayOfYear)),null!=e._dayOfYear&&(i=bt(e._a[D],n[D]),(e._dayOfYear>We(i)||0===e._dayOfYear)&&(p(e)._overflowDayOfYear=!0),d=ze(i,0,e._dayOfYear),e._a[Y]=d.getUTCMonth(),e._a[S]=d.getUTCDate()),t=0;t<3&&null==e._a[t];++t)e._a[t]=c[t]=n[t];for(;t<7;t++)e._a[t]=c[t]=null==e._a[t]?2===t?1:0:e._a[t];24===e._a[O]&&0===e._a[b]&&0===e._a[T]&&0===e._a[Te]&&(e._nextDay=!0,e._a[O]=0),e._d=(e._useUTC?ze:Ze).apply(null,c),r=e._useUTC?e._d.getUTCDay():e._d.getDay(),null!=e._tzm&&e._d.setUTCMinutes(e._d.getUTCMinutes()-e._tzm),e._nextDay&&(e._a[O]=24),e._w&&void 0!==e._w.d&&e._w.d!==r&&(p(e).weekdayMismatch=!0)}}function xt(e){if(e._f===_.ISO_8601)Yt(e);else if(e._f===_.RFC_2822)Ot(e);else{e._a=[],p(e).empty=!0;for(var t,n,s,i,r,a=""+e._i,o=a.length,u=0,l=ae(e._f,e._locale).match(te)||[],d=l.length,h=0;he.valueOf():e.valueOf()"}),u.toJSON=function(){return this.isValid()?this.toISOString():null},u.toString=function(){return this.clone().locale("en").format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},u.unix=function(){return Math.floor(this.valueOf()/1e3)},u.valueOf=function(){return this._d.valueOf()-6e4*(this._offset||0)},u.creationData=function(){return{input:this._i,format:this._f,locale:this._locale,isUTC:this._isUTC,strict:this._strict}},u.eraName=function(){for(var e,t=this.localeData().eras(),n=0,s=t.length;nthis.clone().month(0).utcOffset()||this.utcOffset()>this.clone().month(5).utcOffset()},u.isLocal=function(){return!!this.isValid()&&!this._isUTC},u.isUtcOffset=function(){return!!this.isValid()&&this._isUTC},u.isUtc=At,u.isUTC=At,u.zoneAbbr=function(){return this._isUTC?"UTC":""},u.zoneName=function(){return this._isUTC?"Coordinated Universal Time":""},u.dates=e("dates accessor is deprecated. Use date instead.",ge),u.months=e("months accessor is deprecated. Use month instead",Ie),u.years=e("years accessor is deprecated. Use year instead",Pe),u.zone=e("moment().zone is deprecated, use moment().utcOffset instead. http://momentjs.com/guides/#/warnings/zone/",function(e,t){return null!=e?(this.utcOffset(e="string"!=typeof e?-e:e,t),this):-this.utcOffset()}),u.isDSTShifted=e("isDSTShifted is deprecated. See http://momentjs.com/guides/#/warnings/dst-shifted/ for more information",function(){var e,t;return g(this._isDSTShifted)&&(q(e={},this),(e=Nt(e))._a?(t=(e._isUTC?l:R)(e._a),this._isDSTShifted=this.isValid()&&0>1)+720)%360;--r;)n.h=(n.h+a)%360,i.push(l(n));return i}function y(t,r){r=r||6;for(var t=l(t).toHsv(),e=t.h,n=t.s,a=t.v,i=[],o=1/r;r--;)i.push(l({h:e,s:n,v:a})),a=(a+o)%1;return i}l.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var t=this.toRgb();return(299*t.r+587*t.g+114*t.b)/1e3},getLuminance:function(){var t=this.toRgb(),r=t.r/255,e=t.g/255,t=t.b/255,r=r<=.03928?r/12.92:Math.pow((.055+r)/1.055,2.4),e=e<=.03928?e/12.92:Math.pow((.055+e)/1.055,2.4),t=t<=.03928?t/12.92:Math.pow((.055+t)/1.055,2.4);return.2126*r+.7152*e+.0722*t},setAlpha:function(t){return this._a=x(t),this._roundA=Math.round(100*this._a)/100,this},toHsv:function(){var t=a(this._r,this._g,this._b);return{h:360*t.h,s:t.s,v:t.v,a:this._a}},toHsvString:function(){var t=a(this._r,this._g,this._b),r=Math.round(360*t.h),e=Math.round(100*t.s),t=Math.round(100*t.v);return 1==this._a?"hsv("+r+", "+e+"%, "+t+"%)":"hsva("+r+", "+e+"%, "+t+"%, "+this._roundA+")"},toHsl:function(){var t=n(this._r,this._g,this._b);return{h:360*t.h,s:t.s,l:t.l,a:this._a}},toHslString:function(){var t=n(this._r,this._g,this._b),r=Math.round(360*t.h),e=Math.round(100*t.s),t=Math.round(100*t.l);return 1==this._a?"hsl("+r+", "+e+"%, "+t+"%)":"hsla("+r+", "+e+"%, "+t+"%, "+this._roundA+")"},toHex:function(t){return r(this._r,this._g,this._b,t)},toHexString:function(t){return"#"+this.toHex(t)},toHex8:function(t){var r=this._r,e=this._g,n=this._b,a=this._a;return r=[S(Math.round(r).toString(16)),S(Math.round(e).toString(16)),S(Math.round(n).toString(16)),S(R(a))],t&&r[0].charAt(0)==r[0].charAt(1)&&r[1].charAt(0)==r[1].charAt(1)&&r[2].charAt(0)==r[2].charAt(1)&&r[3].charAt(0)==r[3].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0)+r[3].charAt(0):r.join("")},toHex8String:function(t){return"#"+this.toHex8(t)},toRgb:function(){return{r:Math.round(this._r),g:Math.round(this._g),b:Math.round(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+Math.round(this._r)+", "+Math.round(this._g)+", "+Math.round(this._b)+")":"rgba("+Math.round(this._r)+", "+Math.round(this._g)+", "+Math.round(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:Math.round(100*A(this._r,255))+"%",g:Math.round(100*A(this._g,255))+"%",b:Math.round(100*A(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+Math.round(100*A(this._r,255))+"%, "+Math.round(100*A(this._g,255))+"%, "+Math.round(100*A(this._b,255))+"%)":"rgba("+Math.round(100*A(this._r,255))+"%, "+Math.round(100*A(this._g,255))+"%, "+Math.round(100*A(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&v[r(this._r,this._g,this._b,!0)]||!1},toFilter:function(t){var r="#"+i(this._r,this._g,this._b,this._a),e=r;return"progid:DXImageTransform.Microsoft.gradient("+(this._gradientType?"GradientType = 1, ":"")+"startColorstr="+r+",endColorstr="+(e=t?"#"+i((r=l(t))._r,r._g,r._b,r._a):e)+")"},toString:function(t){var r=!!t,e=(t=t||this._format,!1),n=this._a<1&&0<=this._a;return r||!n||"hex"!==t&&"hex6"!==t&&"hex3"!==t&&"hex4"!==t&&"hex8"!==t&&"name"!==t?("rgb"===t&&(e=this.toRgbString()),"prgb"===t&&(e=this.toPercentageRgbString()),"hex"!==t&&"hex6"!==t||(e=this.toHexString()),"hex3"===t&&(e=this.toHexString(!0)),"hex4"===t&&(e=this.toHex8String(!0)),"hex8"===t&&(e=this.toHex8String()),"name"===t&&(e=this.toName()),"hsl"===t&&(e=this.toHslString()),(e="hsv"===t?this.toHsvString():e)||this.toHexString()):"name"===t&&0===this._a?this.toName():this.toRgbString()},clone:function(){return l(this.toString())},_applyModification:function(t,r){t=t.apply(null,[this].concat([].slice.call(r)));return this._r=t._r,this._g=t._g,this._b=t._b,this.setAlpha(t._a),this},lighten:function(){return this._applyModification(h,arguments)},brighten:function(){return this._applyModification(c,arguments)},darken:function(){return this._applyModification(d,arguments)},desaturate:function(){return this._applyModification(t,arguments)},saturate:function(){return this._applyModification(e,arguments)},greyscale:function(){return this._applyModification(o,arguments)},spin:function(){return this._applyModification(g,arguments)},_applyCombination:function(t,r){return t.apply(null,[this].concat([].slice.call(r)))},analogous:function(){return this._applyCombination(_,arguments)},complement:function(){return this._applyCombination(b,arguments)},monochromatic:function(){return this._applyCombination(y,arguments)},splitcomplement:function(){return this._applyCombination(p,arguments)},triad:function(){return this._applyCombination(m,[3])},tetrad:function(){return this._applyCombination(m,[4])}},l.fromRatio=function(t,r){if("object"==s(t)){var e,n={};for(e in t)t.hasOwnProperty(e)&&(n[e]="a"===e?t[e]:H(t[e]));t=n}return l(t,r)},l.equals=function(t,r){return!(!t||!r)&&l(t).toRgbString()==l(r).toRgbString()},l.random=function(){return l.fromRatio({r:Math.random(),g:Math.random(),b:Math.random()})},l.mix=function(t,r,e){e=0===e?0:e||50;t=l(t).toRgb(),r=l(r).toRgb(),e/=100;return l({r:(r.r-t.r)*e+t.r,g:(r.g-t.g)*e+t.g,b:(r.b-t.b)*e+t.b,a:(r.a-t.a)*e+t.a})},l.readability=function(t,r){t=l(t),r=l(r);return(Math.max(t.getLuminance(),r.getLuminance())+.05)/(Math.min(t.getLuminance(),r.getLuminance())+.05)},l.isReadable=function(t,r,e){var n=l.readability(t,r),a=!1,t=function(t){var r;r=((t=t||{level:"AA",size:"small"}).level||"AA").toUpperCase(),t=(t.size||"small").toLowerCase(),"AA"!==r&&"AAA"!==r&&(r="AA");"small"!==t&&"large"!==t&&(t="small");return{level:r,size:t}}(e);switch(t.level+t.size){case"AAsmall":case"AAAlarge":a=4.5<=n;break;case"AAlarge":a=3<=n;break;case"AAAsmall":a=7<=n}return a},l.mostReadable=function(t,r,e){for(var n,a=null,i=0,o=(e=e||{}).includeFallbackColors,h=e.level,s=e.size,f=0;f 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + + case g: + h = (b - r) / d + 2; + break; + + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + + return { + h: h * 100, + s: s * 100, + l: l * 100 + }; + } + + clamp(value) { + if (value > 255) { + value = 255; + } else if (value < 0) { + value = 0; + } + return value; + } + } + + class Solver { + constructor(target, baseColor) { + this.target = target; + this.targetHSL = target.hsl(); + this.reusedColor = new Color(0, 0, 0); + } + + solve() { + const result = this.solveNarrow(this.solveWide()); + return { + values: result.values, + loss: result.loss, + filter: this.css(result.values) + }; + } + + solveWide() { + const A = 5; + const c = 15; + const a = [60, 180, 18000, 600, 1.2, 1.2]; + + let best = { loss: Infinity }; + for (let i = 0; best.loss > 25 && i < 3; i++) { + const initial = [50, 20, 3750, 50, 100, 100]; + const result = this.spsa(A, a, c, initial, 1000); + if (result.loss < best.loss) { + best = result; + } + } + return best; + } + + solveNarrow(wide) { + const A = wide.loss; + const c = 2; + const A1 = A + 1; + const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1]; + return this.spsa(A, a, c, wide.values, 500); + } + + spsa(A, a, c, values, iters) { + const alpha = 1; + const gamma = 0.16666666666666666; + + let best = null; + let bestLoss = Infinity; + const deltas = new Array(6); + const highArgs = new Array(6); + const lowArgs = new Array(6); + + for (let k = 0; k < iters; k++) { + const ck = c / Math.pow(k + 1, gamma); + for (let i = 0; i < 6; i++) { + deltas[i] = Math.random() > 0.5 ? 1 : -1; + highArgs[i] = values[i] + ck * deltas[i]; + lowArgs[i] = values[i] - ck * deltas[i]; + } + + const lossDiff = this.loss(highArgs) - this.loss(lowArgs); + + for (let i = 0; i < 6; i++) { + const g = (lossDiff / (2 * ck)) * deltas[i]; + const ak = a[i] / Math.pow(A + k + 1, alpha); + values[i] = fix(values[i] - ak * g, i); + } + + const loss = this.loss(values); + if (loss < bestLoss) { + best = values.slice(0); + bestLoss = loss; + } + } + return { values: best, loss: bestLoss }; + + function fix(value, idx) { + let max = 100; + if (idx === 2 /* saturate */) { + max = 7500; + } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { + max = 200; + } + + if (idx === 3 /* hue-rotate */) { + if (value > max) { + value %= max; + } else if (value < 0) { + value = max + (value % max); + } + } else if (value < 0) { + value = 0; + } else if (value > max) { + value = max; + } + return value; + } + } + + loss(filters) { + // Argument is array of percentages. + const color = this.reusedColor; + color.set(0, 0, 0); + + color.invert(filters[0] / 100); + color.sepia(filters[1] / 100); + color.saturate(filters[2] / 100); + color.hueRotate(filters[3] * 3.6); + color.brightness(filters[4] / 100); + color.contrast(filters[5] / 100); + + const colorHSL = color.hsl(); + return ( + Math.abs(color.r - this.target.r) + + Math.abs(color.g - this.target.g) + + Math.abs(color.b - this.target.b) + + Math.abs(colorHSL.h - this.targetHSL.h) + + Math.abs(colorHSL.s - this.targetHSL.s) + + Math.abs(colorHSL.l - this.targetHSL.l) + ); + } + + css(filters) { + function fmt(idx, multiplier = 1) { + return Math.round(filters[idx] * multiplier); + } + + //modified here + return { + invert: `${fmt(0)}%`, + sepia: `${fmt(1)}%`, + saturate: `${fmt(2)}%`, + hue_rotate: `${fmt(3, 3.6)}deg`, + brightness: `${fmt(4)}%`, + contrast: `${fmt(5)}%` + } + + //return `filter: invert(${fmt( + // 0 + //)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`; + } + } + + function hexToRgb(hex) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, (m, r, g, b) => { + return r + r + g + g + b + b; + }); + + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? [ + parseInt(result[1], 16), + parseInt(result[2], 16), + parseInt(result[3], 16) + ] + : null; + } + + function getFilterForColor(rgbColor) { + let bestResult = null; + let iterationCount = 0; // Initialize a counter for iterations + + for (let i = 0; i < 200; i++) { + iterationCount++; // Increment the counter for each iteration + const color = new Color(rgbColor[0], rgbColor[1], rgbColor[2]); + const solver = new Solver(color); + const result = solver.solve(); + + if (!bestResult || result.loss < bestResult.loss) { + bestResult = result; + if (bestResult.loss <= 0.01) { + // exit early if good result is found + break; + } + } + } + + console.log("Total iterations: ", iterationCount); // Log the total iterations + return bestResult; + } + + //end color manipulation + + function updateHeading(mutation) { + let headings = mutation.querySelectorAll(".tdx-control-bar__title") + + for (const heading of headings) { + //color the header if queue name is found + let headingTxt = heading.innerText + let headingFirst = headingTxt.split(" ")[0] + headingFirst = headingFirst.toLowerCase() + + let parent = heading.parentElement + + handleHighlight("report",headingTxt,heading) + + //try embedding + if (headingTxt.startsWith("{")) { + try { + let embedData = JSON.parse(headingTxt) + + let title = document.createElement("h4") + title.classList = heading.classList + title.innerText = embedData.name + let moduleBody = heading.parentNode.parentNode.parentNode.querySelector(".tdx-widget") + let embed = document.createElement("iframe") + embed.classList = "customEmbed" + embed.src = embedData.url + heading.replaceWith(title) + moduleBody.replaceWith(embed) + } catch { + } + } + } + } + + function parseTicket(mutation=null) { + + let qBlock = document.querySelector("#ctlAttribute2285") + //ticket or task + let header = document.getElementById("thTicket_spnTitle") || document.querySelector("#upTaskHeader>div>h1") + + //find calendar inputs when editing tickets/tasks + //let calendars = document.querySelectorAll("input.hasDatepicker") + let calendars = document.querySelectorAll("#txtStartDate, #txtEndDate") //tasks for now, will add more as found + if (calendars) { + let originalFormat = "M/D/YYYY h:mm A"; + let newFormat = "YYYY-MM-DDTHH:mm"; + [...calendars].forEach(calendar=>{ + let date = moment(calendar.value,originalFormat) + + let newCal = document.createElement("input") + newCal.id = `${calendar.id}-new` + newCal.classList = calendar.classList + newCal.type = "datetime-local" + + function updateDate() { + //update old tdx calendar + let parsedFormat = date.format(originalFormat) + calendar.value = parsedFormat + + //update new calendar + let iso = date.format(newFormat) + newCal.value = iso + calTxt.innerText = date.calendar() + + console.log("Cal update!",date) + } + + //convert to original format + newCal.addEventListener("input",event=>{ + let parsedValue = moment(event.target.value,newFormat) + date = parsedValue + updateDate() + }) + + //date modifier shortcuts + let calBox = document.createElement("div") + calBox.classList = ["calBox"] + let calTxt = document.createElement("span") + calTxt.innerText = date.format('dddd') + + //modify date + function btnModify(btn) { + console.log("Modify date:",btn) + if ('add' in btn) { + date.add(btn.add) + } else if ('set' in btn) { + date.set(btn.set) + } + + //check business days + let day = date.isoWeekday() + let hour = date.hour() + let min = date.minute() + let wkday = date.weekday() + + console.log("WkDay:",wkday,"Day:",day,"hour:",hour,"min:",min) + + //if Friday after 5pm + if (day>=5 && (hour>17 || (hour==17 && min>0))) { + date.set({ + h: 8, + d: 1+7, + m: 0 + }) + } else if (day>5) { + //if sat/sun + date.set({ + d: 1+7 + }) + } + + + updateDate() + } + + let buttons = [ + {name:"+1 day",add: {days:1}}, + {name:"+1 week",add: {weeks:1}}, + {name:"+1 month",add: {months:1}}, + {name:"12PM",set: {h:12,m:0}}, + {name:"5PM",set: {h:17,m:0}} + ] + + for (const btn of buttons) { + let button = document.createElement("button") + button.classList = "btn btn-calendar" + button.innerText = btn.name + button.addEventListener("click",(event)=>{ + event.preventDefault() + btnModify(btn) + }) + calBox.appendChild(button) + } + + updateDate() + + //old input still needs to exist for proper format conversion + calendar.style.display = "none" + calendar.parentElement.append(newCal) + calendar.parentElement.append(calTxt) + calendar.parentElement.append(calBox) + }); + } + + //change tab title + if (header) { + let ticketTitle = header.childNodes[0].textContent + document.title = ticketTitle + } else { + return + } + + //add queue tag to ticket title + if (qBlock && !document.querySelector(".qBox")) { + let qElement = qBlock.querySelector("span.wrap-text") + let qTxt = qElement.innerText + + //console.log("GOT QUEUE:",qTxt) + + let newBox = document.createElement("span") + newBox.innerText = qTxt + newBox.classList.add("qBox") + + for (const qK of Object.keys(colorsByQueue)) { + let q = colorsByQueue[qK] + if (qTxt.toLowerCase() == qK) { + newBox.style.color = q.txt + newBox.style.backgroundColor = q.bg + } + + } + + header.appendChild(newBox) + } + + //handle button links - updates/tasks for now + //update buttons + [...document.querySelectorAll("#btnUpdateTicket, #divUpdateFromActions")].forEach(button=>{ + handleLink("Update",button) + }); + + //task button + [...document.querySelectorAll("#liAddTicketTask>a")].forEach(button=>{ + handleLink("TicketTaskNew",button) + }); + + //task template button + [...document.querySelectorAll("#divAddTaskTemplate>a")].forEach(button=>{ + handleLink("TicketAddTaskTemplate",button) + }); + + //color the feed if darkmode + var feedItems + + if (mutation) { + feedItems = mutation + } else { + feedItems = document.querySelectorAll("#ttDescription") + } + + //console.log("Feed items:",feedItems) + + if (feedItems) { + for (const feedItem of feedItems) { + [...feedItem.querySelectorAll("*[style*='color']")].forEach(feedElement=>{ + let color = tinycolor(feedElement.style.color) + let brightness = color.getBrightness() + //console.warn("ELEMENT:",feedElement) + //console.log("Brightness:",brightness) + + //if color is too dark + if (brightness < 100 && colorScheme == "darkMode") { + + var newColor + var isGrey = true + let rgb = color.toRgb() + + if (rgb.r == rgb.b && rgb.r == rgb.g) { + isGrey = true + } else { + isGrey = false + } + + //if color is shade of grey + if (isGrey) { + let flippedColor = tinycolor(invertHex(color.spin(180).toHex())) + newColor = flippedColor + //console.log(feedElement.innerText,"is grey") + } else { + let threshold = 50 + let diff = (threshold - brightness) + brightness + newColor = color.brighten(diff) + //console.log(feedElement.innerText,"is a color") + } + //console.log("oldColor:",color.toHex(),"newColor:",newColor.toHex()) + + feedElement.style.color = newColor.toHexString() + } + }); + } + } + } + + function parseOtherElements() { + let path = document.location.pathname; + + //inject styles into search bar + [...document.querySelectorAll("tdx-search-bar, .js_sidePanelX")].forEach(searchBar=>{ + //console.log("SEARCH BAR:",searchBar) + let shadow = searchBar.shadowRoot + if (shadow) { + + injectOtherStyles(shadow); + + //check nested shadows + [...shadow.querySelectorAll("tdx-close-x")].forEach(nested=>{ + let nestedShadow = nested.shadowRoot + //console.log("NESTED:",nestedShadow) + if (nestedShadow) { + injectOtherStyles(nestedShadow) + } + }) + } + }) + + let desktopLayout = settings('get','layout') + let desktop = document.querySelector("#divContent") + if (desktop && desktopLayout) { + let col1 = desktop.querySelector("#Column1") + let col2 = desktop.querySelector("#Column2") + let col3 = desktop.querySelector("#Column3") + + //100% / 33-66% + if (desktopLayout=="1_100-66-33" && col2 && col3) { + console.log("Applying layout:",desktopLayout) + + //define width classes + let col2WidthClass = "col-md-8" + let col3WidthClass = "col-md-4" + + //resize column 2 + for (const cls of col2.classList) { + if (cls.startsWith("col-md")) { + console.log("Found col2 width class:",cls) + col2.classList.remove(cls) + col2.classList.add(col2WidthClass) + break + } + } + + //resize column 3 + for (const cls of col3.classList) { + if (cls.startsWith("col-md")) { + col3.classList.remove(cls) + col3.classList.add(col3WidthClass) + break + } + } + } + } + + //apply sticky columns + let stickyColumns = settings('get','stickyColumns') + if (stickyColumns) { + [...document.querySelectorAll(".tdx-dashboard__column")].forEach(column=>{ + column.style.position = "sticky" + column.style.alignSelf = "flex-start" + column.style.top = "4px" + }); + } + } + + function invertHex(hex) { + return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase() + } + + function parseTable(element) { + //let t = mutation.target; + //console.error("BEGIN MUTATION",t) + let table = element.querySelector("table") + let items = []; + + if (table) { + let headers = []; + //console.log("Table",table); + + //get headers of the tables + [...table.querySelectorAll("th")].forEach((header)=>{ + var txt = header.querySelector("span") + //txt = txt.dataset.sort + //txt = txt.split(" ")[0] + if (txt) { + headers.push(txt.textContent) + } + //console.log("i:",header.cellIndex,txt) + }); + + //console.log("Headers:",headers); + + //parse rows + [...table.querySelectorAll("tr:has(td)")].forEach((row)=>{ + //console.log("row:",row); + let item = {}; + //parse each cell + let i = 0; + [...row.querySelectorAll("td:not(:has(input))")].forEach((cell)=>{ + //let i = cell.cellIndex; //can't use cellindex if there's a checkbox in the table + let txt = cell.textContent; + txt = txt.trim() + + //console.log("Cell:",i,cell); + + item[headers[i]] = {txt:txt,cell:cell} + i++ + }) + + item.row = row + items.push(item) + //console.log("ITEM:",item) + + //being coloring + parseItem(item) + }) + } + + //updateHeading(element) + } + + function createHighlightBubble(element,bgColor,txtColor) { + + //should the bubble carry links over? + //let copy = element.cloneNode(true) + + //create new element to highlight + let newSpan = document.createElement("span") + newSpan.innerText = element.innerText //item["2285"].txt + newSpan.style.backgroundColor = bgColor + newSpan.style.color = txtColor + newSpan.classList.add("qHighlight") + + //if we use the copy method + //newSpan.appendChild(copy) + + //replace cell with new span + element.replaceChildren(newSpan) + return newSpan + } + + //modify/color the cells + function parseItem(item) { + + //console.log("Parse item:",item) + + //color queue names + if ('CSS Support' in item) { + let qCell = item["CSS Support"].cell + let qTxt = item["CSS Support"].txt.toLowerCase() + if (qTxt in colorsByQueue) { + let q = colorsByQueue[qTxt] + + createHighlightBubble(qCell,q.bg,q.txt) + } + } + + //change date modified + let relativeDates = ['Modified','Created'] + for (const dType of relativeDates) { + if (dType in item) { + let dTxt = item[dType].txt + let dCell = item[dType].cell + + let date = moment(dTxt) + let dTxtNew = date.fromNow() + + if (dTxtNew == "Invalid date") { + //console.warn("Failed date:",dTxt,item) + } else { + dCell.innerText = dTxtNew + } + } + } + + let detailedDates = ['Date Due','Due','Created','Start'] + for (const dType of detailedDates) { + if (dType in item) { + let dTxt = item[dType].txt + let dCell = item[dType].cell + + let date = moment(dTxt) + let dTxtNew = date.calendar() + + if (dTxtNew == "Invalid date") { + //console.warn("Failed date:",dTxt,item) + } else { + dCell.innerText = dTxtNew + } + } + } + + //highlight modified/age red + let modifiedDates = ['Modified'] + for (const dType of modifiedDates) { + if (dType in item) { + let modDate = item[dType] + const ageThreshold = 336 + + let date = moment(modDate.txt) + let duration = moment.duration(moment().diff(date)) + let hours = duration.asHours() + + let alpha = hours / ageThreshold + alpha = alpha > 1 ? 1 : alpha + + let cell = modDate.cell + handleHighlight("dateModified",alpha,cell) + cell.classList.add(alpha > 0.5 ? "light" : "dark") + } + } + + //find user replies & last modified by internal + if ('Requestor' in item && 'Modified By' in item && 'Prim Resp' in item) { + let fromUser = item["Requestor"] + let lastModified = item["Modified By"] + let assignedTo = item["Prim Resp"] + + //reply from user + if (fromUser.txt == lastModified.txt && fromUser.txt != assignedTo.txt && assignedTo.txt != "Unassigned") { + //item.row.style.backgroundColor = "var(--col-reply)"; + handleHighlight("reply",null,item.row) + } + + //modified by internal + if (lastModified.txt != fromUser.txt && lastModified.txt != assignedTo.txt) { + let cell = lastModified.cell + //cell.style.backgroundColor = "var(--col-modified)" + handleHighlight("userModified",null,cell) + } + } + + //find internal users and highlight them + if ('Prim Resp' in item) { + handleHighlight("person",item['Prim Resp'].txt,item['Prim Resp'].cell) + } else if ('Responsibility' in item) { + handleHighlight("person",item.Responsibility.txt,item.Responsibility.cell) + } + + //find inline highlights for tasks + if ('Title' in item) { + let title = item.Title + handleHighlight("title",title.txt,title.cell) + } + + //find links & open in new tab, if configured + //let linkTypes = ['Title','TicketID','CustomerName','ResponsibleFullName','LastModifiedByFullName'] //open people in new tabs + let linkTypes = ['Title','TicketID','TicketTitle'] + for (const linkType of linkTypes) { + if (linkType in item) { + let link = item[linkType].cell.querySelector("a") + if (link) { + //override function that opens in windows + handleLink("report",link) + } + } + } + } + + function handleLink(source,link) { + let behavior = settings('get','linkBehavior') + + let relL = window.screenLeft != undefined ? window.screenLeft : screen.left + let relT = window.screenTop != undefined ? window.screenTop : screen.top + + if (behavior=="tabs") { + + switch(source) { + case 'report': { + link.onclick = null + link.target = "_blank" + break + } + + case 'Update': + case 'TicketTaskNew': + case 'TicketAddTaskTemplate': { + link.onclick = (event)=>{ + event.preventDefault() + let w = (window.screen.width / 1.75) + let h = (window.screen.height / 1.25) + let l = ((window.screen.width / 2) - (w/2)) + relL + let t = ((window.screen.height / 2) - (h/2)) + relT + + //restructure url for updating + let location = window.location.pathname + let baseHref = location.substr(0, location.lastIndexOf('/')) + let href = `${baseHref}/${source}${window.location.search}` + + let params = `width=${w}px,height=${h}px,left=${l}px,top=${t}px` + return window.open(href,'_blank',params) + } + break + } + } + + } else { + return + //leave default + link.onclick = (event)=>{ + event.preventDefault() + var params + var href + let w = (window.screen.width / 2.1) + let h = (window.screen.height / 1.25) + let l = 20 + relL + let t = 50 + relT + + switch(source) { + case 'report': { + href = link.href + break + } + + case 'Update': + case 'TicketTaskNew': + case 'TicketAddTaskTemplate': { + l = (window.screen.width / 2) + l + + //restructure url for updating + let location = window.location.pathname + let baseHref = location.substr(0, location.lastIndexOf('/')) + href = `${baseHref}/${source}${window.location.search}` + break + } + } + + params = `width=${w}px,height=${h}px,left=${l}px,top=${t}px` + return window.open(href,'_blank',params) + } + } + + } + + function handleHighlight(type, txt, element) { + let behavior = settings('get','highlightBehavior') + + var re + var style = null + + for (const [key,color] of Object.entries(colorsByStatus)) { + re = color.re.exec(txt) + if (re) { + style = color.style + break + } + } + + const customHighlights = settings('get','customHighlights') || [] + for (const customHighlight of customHighlights) { + let customType = customHighlight.type + if (customType=="highlight") { + let char = customHighlight.value + let reg = new RegExp(`\\${char} (.*) \\${char}`,"g") + re = reg.exec(txt) + if (re) { + style = customHighlight.style + break + } + } + + if (type=="reply" && customType=="reply") { + style = customHighlight.style + } + + if (type=="dateModified" && customType=="dateModified") { + style = customHighlight.style + if (style.background) { + let a = Math.floor(txt * 255).toString(16); + style.background = style.background + a + } + } + + if (type=="userModified" && customType=="userModified") { + style = customHighlight.style + } + + if (type=="report" && customType=="report") { + if (customHighlight.value==txt) { + element.classList.add("reportTitle") + style = customHighlight.style + } + } + + if (type=="report" && customType=="report-regex") { + if ((new RegExp(customHighlight.value).exec(txt))) { + element.classList.add("reportTitle") + style = customHighlight.style + } + } + + if (type=="person" && customType=="person") { + if (customHighlight.value==txt) { + element = createHighlightBubble(element) + style = customHighlight.style + } + } + } + + if (style) { + //console.log("Apply custom highlight:",txt) + + let link = element.querySelector("a") + if (behavior==="block") { + if (re && link) { + let newTitle = re[1] + link.innerText = newTitle + //reset regex + re.lastIndex = 0 + } + } else { + if (re && link) { + let text = link.innerText + link.innerText = "" + element = link.appendChild(document.createElement("span")) + element.innerText = text + element.style.lineHeight = "1.4" + //reset regex + re.lastIndex = 0 + } + } + + for (const [attr,val] of Object.entries(style)) { + element.style[attr] = val + } + //element.style.backgroundColor = style.background + + } else { + //apply defaults + if (type=="reply") { + element.style.backgroundColor = "var(--col-reply)"; + } + if (type=="userModified") { + element.style.backgroundColor = "var(--col-modified)"; + } + if (type=="dateModified") { + element.style.backgroundColor = `rgba(255,0,0,${txt}`; + } + } + } + + function generatePopup(href,w,h,l,t,source) { + + } + + function injectOtherStyles(element) { + + let s = document.createElement("style") + s.id = "customStyles" + s.innerText = customStyles + + //find iframes - likely text editors + if (element.tagName == "IFRAME") { + let frame = element.contentWindow.document; + + //attempt color coded tables on non-desktop pages + /*let tables = frame.querySelectorAll("table"); + [...tables].forEach(table=>{ + parseTable(table.parentElement) + })*/ + + //console.log("Found iFrame:",frame) + + //check for existing style block + if (!frame.querySelector("#customStyles")) { + let head = frame.querySelector("head") + let html = frame.querySelector("html") + html.classList.add(settings("get","colorMode")) + head.appendChild(s) + } + } else { + if (!element.querySelector("#customStyles")) { + setCssFilters(s) + element.appendChild(s) + } + } + } + + //setup observer to watch report/table changes/refreshes + let observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + let t = mutation.target + //console.error("Mutation:",t) + if (t.querySelector("div > table")) { + //let table = t.firstElementChild.querySelector("table") + //console.log("Matched table",t) + parseTable(t) + } + + //parse the feed if it updates + if (t.classList.contains("feed")) { + parseTicket(mutation.addedNodes) + } else if (t.classList.contains("feed-body")) { + parseTicket(t.querySelectorAll(".feed-reply")) + } + + //parse dashboard widgets + if (t.id=="tdx-workmgmt-container-collection") { + parseOtherElements() + } + + //parse side panels + if (t.classList.contains("tdx-right-side-panel")) { + parseOtherElements() + } + + let module = t.querySelector("div > .tdx-dashboard__widget-container") + if (module) { + updateHeading(t) + } + + //search whole document, frames may reset when reopened + let frames = document.querySelectorAll("iframe:not(.customEmbed)") + if (frames) { + [...frames].forEach(frame=>{ + injectOtherStyles(frame) + }); + } + }); + }); + + if (true) { + console.log("Observing...") + observer.observe(document.body, { + characterDataOldValue: true, + subtree: true, + childList: true, + characterData: true + }); + } + + async function changeTitle() { + let title = document.querySelector(".tdx-headerbar-headline a") + if (title) { + title.innerText = primaryTitle + } + + await injectToolbar() + } + + function colorChange(color) { + localStorage.setItem("colors",color) + setColors(color) + } + + function setColors(color,value) { + console.log("Setting",color,"to",value) + //let col = tinycolor(value).toRgbString() + let col = value + let style = document.documentElement.style + + switch(color) { + case 'primaryColor': + style.setProperty('--dark-col-primary', col); + style.setProperty('--light-col-primary', col); + break + + case 'backgroundColor': + style.setProperty('--dark-bg-primary', col); + style.setProperty('--light-bg-primary', col); + break + + case 'theme': { + + for (const col of ["dark","light"]) { + let accent = `var(--${col}-${value}-accent)` + let bg = `var(--${col}-${value}-bg)` + style.setProperty(`--${col}-col-primary`, accent) + style.setProperty(`--${col}-bg-primary`, `var(--${col}-bg-default)`) + + } + + break + } + } + } + + function setCssFilters(element=null) { + let style = element ? element.style : document.documentElement.style + //quick test for filter generation + let mode = getColorMode().split("Mode")[0] + let priCol = window.getComputedStyle(document.body).getPropertyValue("--dark-col-primary") + let rgb = hexToRgb(priCol) + //let filters = getFilterForColor(rgb) + + const color = new Color(rgb[0], rgb[1], rgb[2]); + const solver = new Solver(color); + const result = solver.solve(); + let filters = result.filter + + //console.log("STYLES:",priCol) + //console.log("FILTERS:",priCol,rgb,filters) + + style.setProperty("--filter-brightness",filters.brightness) + style.setProperty("--filter-contrast",filters.contrast) + style.setProperty("--filter-hue-rotate",filters.hue_rotate) + style.setProperty("--filter-invert",filters.invert) + style.setProperty("--filter-saturate",filters.saturate) + style.setProperty("--filter-sepia",filters.sepia) +} + + /* + function toggleColorMode() { + let mode = getColorMode() == "darkMode" ? "lightMode" : "darkMode" + setColorMode(mode) + } + + */ + + function getColorMode() { + let mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode" + return mode + } + + function setColorMode(mode,store=true) { + if (!mode) { + mode = "auto" + } + console.log("Set color mode to",mode) + colorScheme = mode + var storageMode = mode + + let autoScheme = getColorMode() + if (autoScheme == mode) { + storageMode = "auto" + } + + if (mode == "auto" || storageMode == "auto") { + mode = autoScheme + document.documentElement.classList.remove("lightMode") + document.documentElement.classList.remove("darkMode") + } else { + document.documentElement.classList.add(mode) + } + + if (store) { + localStorage.setItem("styles",storageMode) + } + + } + + async function injectToolbar() { + let iconBar = document.querySelector("#globalSearchBar") + + let statusHTML = ` +
+ + +
+ ` + + let toolsHTML = ` +
+ +
+ ` + + let buttonHTML = ` +
+ +
+ ` + + let settingsHTML = ` + + + ` + + let settingsButton = document.createElement("span") + settingsButton.innerHTML = buttonHTML + + let settingsPage = document.createElement("div") + settingsPage.innerHTML = settingsHTML + + let statusLink = document.createElement("span") + statusLink.innerHTML = statusHTML + + let toolsLink = document.createElement("span") + toolsLink.innerHTML = toolsHTML + + if (iconBar) { + iconBar.after(settingsButton) + + //settings + //settingsPage.querySelector("#colorMode").onclick = toggleColorMode + settingsButton.querySelector("#settingsButton").addEventListener("click",()=>{ + settings("toggle",settingsPage) + }) + settingsButton.appendChild(settingsPage) + + //form changes + let form = settingsPage.querySelector("form") + form.addEventListener("change", (event)=>{ + settings("update",form) + }); + form.addEventListener("submit", (event)=>{ + event.preventDefault() + }); + + //send/recieve data from popup + let customColorButton = settingsPage.querySelector("#colorPopup") + customColorButton.addEventListener("click", (event)=>{ + let url = `${tdxtoolsUrl}/ecnuds/tdx/userscript/coloreditor` + let colorWindow = window.open(url,"TDX Color Editor","popup=true") + colorWindow.onload = function() { + colorWindow.postMessage({msg:"here's the data"},"*") + } + }); + + //links + let parent = iconBar.parentElement + + //tools + parent.prepend(toolsLink) + + //status + parent.prepend(statusLink) + let statusData = await getITStatus() + let statusIcon = statusLink.querySelector("#statusIcon") + let statusTime = statusLink.querySelector("#statusTime") + let statusText = statusLink.querySelector("#statusText") + + let operationalText = "All systems operational." + //check the first 5 words. do they contain operational or green? + //since the default message can vary sometimes + let operationalRegex = /^(?=(?:\w+\s){0,5}?(?:operational|green)\b(?!-))(\w+(?:\s\w+){0,5})/gm + + if (statusData) { + if (statusData.msg.length==0) { + statusData.msg = operationalText + } + } else { + statusData = { + msg: operationalText + } + } + + if (!operationalRegex.test(statusData.msg)) { + statusIcon.classList = ("fa-solid fa-triangle-exclamation") + } else { + statusIcon.classList = ("fa-solid fa-check") + } + + let statusTimeParsed = moment(statusData.time) + statusTime.innerText = statusTimeParsed.fromNow() + statusText.innerText = statusData.msg + } + } + + async function getITStatus() { + let url = "https://it.purdue.edu/api-status/messages.php" + let res = await fetch(url) + let data = await res.json() + + let msg = {} + + let msgs = data.Results + if (msgs.length>0) { + msg = { + time: msgs[0], + msg: msgs[1] + } + console.warn("IT Message:",msg) + } else { + msg = null + } + + return msg + } + + /* SETTINGS */ + + function settings(action,value=null) { + var data + var menu + try { + data = JSON.parse(localStorage.getItem("userSettings")) + + if (!data) { + throw "Data is null" + } else { + //resolve stringified objects + if ('customHighlights' in data) { + data.customHighlights = JSON.parse(data.customHighlights) + } + } + } catch(e) { + //console.error("Couldn't grab settings!",e) + //set defaults + data = { + colorMode: getColorMode(), + linkBehavior: "tabs", + highlightBehavior: "block", + customHighlights: [], + } + } + + switch(action) { + case 'apply': { + for (const setting in data) { + let form = document.forms.settingsForm + let value = data[setting] + + if (typeof value == "object") { + value = JSON.stringify(value) + } + + console.log("Apply setting:",setting,value) + try { + if (form) { + let elements = form.elements + form[setting].value = value + if (form[setting].type=="checkbox") { + form[setting].checked = value=="enabled" ? true : false + } + } + } catch {} + } + + if ('colorMode' in data) { + setColorMode(data.colorMode) + } + + if ('theme' in data) { + if (data.theme=="custom") { + setColors('primaryColor',data.primaryColor) + setColors('backgroundColor',data.backgroundColor) + } else { + setColors('theme',data.theme) + } + } + break + } + + case 'get': { + if (value) { + return value in data ? data[value] : null + } else { + return data + } + break + } + + case 'toggle': { + let menu = document.querySelector("#settingsMenu") + let newState = menu.classList.contains("show") ? "hide" : "show" + let oldState = newState=="show" ? "hide" : "show" + menu.classList.add(newState) + menu.classList.remove(oldState) + break + } + + case 'update': { + let form = document.querySelector("#settingsForm") + let formData = new FormData(form) + data = Object.fromEntries([...formData]) + console.log("Settings update!",data) + localStorage.setItem("userSettings",JSON.stringify(data)) + settings("apply") + setCssFilters() + } + } + } + + function parseCustomHighlights(data) { + console.log("Custom highlights:",data) + } + + /* TDX TOOLS */ + function checkPath() { + let path = document.location.pathname + if (path=="/TDWebApi/api/auth/loginsso") { + let pre = document.querySelector("pre") + if (pre) { + console.log("Got key!",pre.innerText) + let key = pre.innerText + window.opener.postMessage({tdxkey:key},tdxtoolsUrl) + window.close() + } + } + } + + window.addEventListener("message",(event) => { + let data = event.data + let origin = event.origin + let trgt = event.currentTarget + console.log("Message from:",origin,data,event) + + if (data.colorsReady) { + let colors = settings('get','customHighlights') + event.source.postMessage({ customColors: colors }, "*") + } + if (data.colorData) { + let element = document.getElementById("customHighlights") + let strData = JSON.stringify(data.colorData) + element.value = strData + settings('update') + } + },false); + + changeTitle() + //checkColorMode() + settings("apply") + parseTicket() + checkPath() + + addEventListener("storage", (event) => { + //console.log("Storage event:",event) + if (event.key == "userSettings") { + settings("apply") + } + }); + + var customStyles = ` + +/* Root Styles */ + +:root { + + --dark-bg-default: #000; + --light-bg-default: #fff; + + --dark-col-default: #ab9266; + --light-col-default: #cbb080; + + --dark-col-primary: var(--dark-col-default); + --light-col-primary: var(--light-col-default); + + --dark-bg-primary: var(--dark-bg-default); + --light-bg-primary: var(--light-bg-default); + + --dark-gold-accent: #ab9266; + --light-gold-accent: #c3aa7f; + + --dark-col-green: #295f29; + --dark-col-red: #912c2c; + --dark-col-blue: #32577a; + --dark-col-yellow: #654a24; + + --light-col-green: #e3fcea; + --light-col-red: #ff6190; + --light-col-blue: #e1f5fc; + --light-col-yellow: #ffefd8; + + /* Original TDX blue */ + --dark-blue-accent: #4c778d; + --light-blue-accent: #4b3bb9; + + --dark-green-accent: #559170; + --light-green-accent: var(--dark-green-accent); + + --filter-invert: 0; + --filter-sepia: 0; + --filter-saturate: 0; + --filter-hue-rotate: 0; + --filter-brightness: 0; + --filter-contrast: 0; + + --dark-bg-0: color-mix(in srgb,var(--dark-bg-primary),#fff 5%); + --dark-bg-1: color-mix(in srgb,var(--dark-bg-primary),#fff 12%); + --dark-bg-2: color-mix(in srgb,var(--dark-bg-primary),#fff 20%); + --dark-bg-3: color-mix(in srgb,var(--dark-bg-primary),#fff 25%); + --dark-bg-4: color-mix(in srgb,var(--dark-bg-primary),#fff 30%); + --dark-col-100: color-mix(in srgb,var(--dark-col-primary),#000 70%); + --dark-col-200: color-mix(in srgb,var(--dark-col-primary),#000 60%); + --dark-col-300: color-mix(in srgb,var(--dark-col-primary),#000 50%); + --dark-col-400: var(--dark-col-primary); + --dark-col-500: color-mix(in srgb, var(--dark-col-primary), #aaa 50%); + --dark-col-600: color-mix(in srgb,var(--dark-col-primary),#fff 35%); + --dark-col-700: color-mix(in srgb,var(--dark-col-primary),#fff 25%); + --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-txt-5: var(--light-txt-1); + --dark-border-0: color-mix(in srgb,var(--dark-bg-primary),#fff 18%); + --dark-border-1: color-mix(in srgb,var(--dark-bg-primary),#fff 30%); + --dark-col-reply: #1e3438; + --dark-col-highlight-1: #ffdb0059; + --dark-col-highlight-2: #5f00ff5e; + --dark-col-currentuser: #09482f; + --dark-col-modified: #ff660012; + --dark-txt-invert: 1; + --dark-txt-hue: 180deg; + --dark-shadow-1: rgba(200, 200, 200, 0.1); + --dark-shadow-2: rgba(200, 200, 200, 0.06); + + --light-txt-1: #000; + --light-txt-2: #222; + --light-txt-3: #333; + --light-txt-4: #0000008c; + --light-txt-5: var(--dark-txt-1); + --light-col-100: color-mix(in srgb,var(--light-col-primary),#fff 85%); + --light-col-200: color-mix(in srgb,var(--light-col-primary),#fff 75%); + --light-col-300: color-mix(in srgb,var(--light-col-primary),#fff 65%); + --light-col-400: var(--light-col-primary); + --light-col-500: color-mix(in srgb, var(--light-col-primary), #aaa 50%); + --light-col-600: color-mix(in srgb,var(--light-col-primary),#111 70%); + --light-col-700: color-mix(in srgb,var(--light-col-primary),#000 75%); + --light-bg-0: color-mix(in srgb,var(--light-bg-primary),#000 0%); + --light-bg-1: color-mix(in srgb,var(--light-bg-primary),#000 7%); + --light-bg-2: color-mix(in srgb,var(--light-bg-primary),#000 13%); + --light-bg-3: color-mix(in srgb,var(--light-bg-primary),#000 20%); + --light-bg-4: color-mix(in srgb,var(--light-bg-primary),#000 25%); + --light-bg-5: color-mix(in srgb,var(--light-col-primary),#ffffffd7 75%); + --light-border-0: color-mix(in srgb,var(--light-bg-primary),#000 18%); + --light-border-1: color-mix(in srgb,var(--light-bg-primary),#000 30%); + --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; + --light-shadow-1: rgba(50, 50, 50, 0.1); + --light-shadow-2: rgba(50, 50, 50, 0.06); +} + +@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); + --bg-5: var(--light-bg-5); + --col-100: var(--light-col-100); + --col-200: var(--light-col-200); + --col-300: var(--light-col-300); + --col-400: var(--light-col-400); + --col-500: var(--light-col-500); + --col-600: var(--light-col-600); + --col-700: var(--light-col-700); + --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-5: var(--light-txt-5); + --txt-invert: var(--light-txt-invert); + --txt-hue: var(--light-txt-hue); + --border-0: var(--light-border-0); + --border-1: var(--light-border-1); + --col-reply: var(--light-col-reply); + --col-highlight-1: var(--dark-col-highlight-1); + --col-highlight-2: var(--dark-col-highlight-2); + --col-currentuser: var(--light-col-currentuser); + --col-modified: var(--dark-col-modified); + --shadow-1: var(--light-shadow-1); + --shadow-2: var(--light-shadow-2); + --filter-brightness: var(--light-filter-brightness); + --filter-invert: var(--light-filter-invert); + } +} + +@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); + --bg-5: var(--dark-bg-5); + --col-100: var(--dark-col-100); + --col-200: var(--dark-col-200); + --col-300: var(--dark-col-300); + --col-400: var(--dark-col-400); + --col-500: var(--dark-col-500); + --col-600: var(--dark-col-600); + --col-700: var(--dark-col-700); + --col-red: var(--dark-col-red); + --col-green: var(--dark-col-green); + --col-blue: var(--dark-col-blue); + --col-yellow: var(--dark-col-yellow); + --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-5: var(--dark-txt-5); + --txt-invert: var(--dark-txt-invert); + --txt-hue: var(--dark-txt-hue); + --border-0: var(--dark-border-0); + --border-1: var(--dark-border-1); + --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); + --shadow-1: var(--dark-shadow-1); + --shadow-2: var(--dark-shadow-2); + --filter-brightness: var(--dark-filter-brightness); + --filter-invert: var(--dark-filter-invert); + } +} + +: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); + --bg-5: var(--dark-bg-5); + --col-100: var(--dark-col-100); + --col-200: var(--dark-col-200); + --col-300: var(--dark-col-300); + --col-400: var(--dark-col-400); + --col-500: var(--dark-col-500); + --col-600: var(--dark-col-600); + --col-700: var(--dark-col-700); + --col-red: var(--dark-col-red); + --col-green: var(--dark-col-green); + --col-blue: var(--dark-col-blue); + --col-yellow: var(--dark-col-yellow); + --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-5: var(--dark-txt-5); + --txt-invert: var(--dark-txt-invert); + --txt-hue: var(--dark-txt-hue); + --border-0: var(--dark-border-0); + --border-1: var(--dark-border-1); + --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); + --shadow-1: var(--dark-shadow-1); + --shadow-2: var(--dark-shadow-2); + --filter-brightness: var(--dark-filter-brightness); + --filter-invert: var(--dark-filter-invert); +} + +: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); + --bg-5: var(--light-bg-5); + --col-100: var(--light-col-100); + --col-200: var(--light-col-200); + --col-300: var(--light-col-300); + --col-400: var(--light-col-400); + --col-500: var(--light-col-500); + --col-600: var(--light-col-600); + --col-700: var(--light-col-700); + --col-red: var(--light-col-red); + --col-green: var(--light-col-green); + --col-blue: var(--light-col-blue); + --col-yellow: var(--light-col-yellow); + --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-5: var(--light-txt-5); + --txt-invert: var(--light-txt-invert); + --txt-hue: var(--light-txt-hue); + --border-0: var(--light-border-0); + --border-1: var(--light-border-1); + --col-reply: var(--light-col-reply); + --col-highlight-1: var(--dark-col-highlight-1); + --col-highlight-2: var(--dark-col-highlight-2); + --col-currentuser: var(--light-col-currentuser); + --col-modified: var(--dark-col-modified); + --shadow-1: var(--light-shadow-1); + --shadow-2: var(--light-shadow-2); + --filter-brightness: var(--light-filter-brightness); + --filter-invert: var(--light-filter-invert); +} + +/* Body */ + +body { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; +} + +::-webkit-scrollbar-track { + background: var(--bg-0) !important; +} + +::-webkit-scrollbar-thumb { + background: var(--col-400) !important; + border: 5px solid var(--bg-0) !important; +} + +::-webkit-scrollbar-thumb:hover { + border: 3px solid var(--bg-0) !important; + background: var(--col-400) !important; +} + +::-webkit-scrollbar-corner { + background-color: var(--bg-0) !important; + } + +.tdx-overlay { + background-color: color-mix(in srgb,var(--col-400),#00000000 25%) !important; +} + +.tdx-overlay__item { + background-color: var(--bg-0) !important; + color: var(--col-400) !important; +} + +.tdx-overlay__item:hover, .tdx-overlay__item:focus-visible { + background-color: var(--col-400) !important; + color: var(--col-100) !important; +} + +.tdx-navigation-tab-bar { + background-color: initial !important; +} + +.tdx-leftnav__container { + background-color: var(--bg-0) !important; + border-color: var(--border-0) !important; + box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2) !important; +} + +.tdx-leftnav__item { + color: var(--txt-1) !important; +} + +.tdx-leftnav__item--active .tdx-leftnav__link { + background-color: var(--col-100) !important; + color: var(--col-400) !important; +} + +.tdx-leftnav__link:hover, .tdx-leftnav__link:focus-visible { + background-color: var(--col-100) !important; +} + +.tdx-main-container { + background-color: var(--bg-0) !important; +} + +.tdx-layout-option__layout-preview { + background-color: var(--col-100) !important; +} + +.tdx-layout-option__column { + background-color: var(--bg-0) !important; +} + +.tdx-layout-selector__layout-option:hover, .tdx-layout-selector__layout-option:focus, .tdx-layout-selector__layout-option--selected { + background-color: var(--col-400) !important; +} + +.tdx-list__section { + color: var(--txt-2); +} + +/* Script-Specific Additions */ +#settingsMenu { + right: 50px; + padding: 10px; + width: 250px; + background: var(--bg-1); +} + +#settingsMenu.hide { + visibility: hidden; +} + +#settingsMenu h5 { + margin-bottom: 2px; +} + +#settingsMenu h3 { + padding-top: 10px; + font-weight: 500; + font-size: 18px; +} + +#settingsForm .flex { + display: flex; + gap: 24px; + align-items: baseline; +} + +#settingsForm .textBox { + display: flex; + flex-direction: column; + gap: 8px; +} + +.customEmbed { + border: 0; + width: 100%; + height: 400px; +} + +.calBox { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding-top: 4px; + gap: 4px; + max-width: 220px; +} + +#statusBox:hover #statusMsg { + display: block; + width: 400px; + line-height: 22px; + padding: 8px; + right: 390px; +} + +#statusTime, #statusText { + margin: 6px; +} + +#statusTime { + font-size: 12px; +} + +#statusBox .fa-triangle-exclamation { + color: #ff8c4c; +} + +#statusBox .fa-check { + color: #0dbb28; +} + +.qBox { + margin-left: 10px; + padding: 5px; + font-size: 20px; + border-radius: 7px; +} + +.qHighlight { + padding: 4px; + border-radius: 8px; + white-space: nowrap; +} + +.btn-calendar { + flex-grow: 1; + padding: 2px; + background-color: var(--col-500); + color: var(--txt-5); +} + +.btn-calendar:hover { + background-color: var(--col-400); + color: var(--txt-5) +} + +.reportTitle { + border-radius: 12px; + padding-left: 10px !important; + padding-right: 10px !important; +} + +/* Others */ +.tdx-loading-animation { + color: var(--col-400) !important; +} + +.refresh-indicator { + background: linear-gradient(180deg,var(--bg-0),hsla(0,0%,100%,0)) !important; +} + +.breadcrumb { + background-color: var(--bg-0); +} + +.breadcrumb>.active { + color: var(--txt-3); +} + +p.row { + gap: 8px; +} + +/* Headers */ + +h1, h2, h3, h4, h5 { + color: var(--txt-1) !important; +} + +.tdx-header-container { + background-color: var(--col-100) !important; +} + +.tdx-headerbar-headline, .tdx-headerbar-headline a { + color: var(--col-1) !important; +} + +.tdx-headline { + color: var(--txt-1) !important; +} + +.tdx-headline--underline { + border-color: var(--border-0); +} + +.tdx-navigation-tabs__tab { + color: var(--col-600) !important; +} + +.tdx-navigation-tabs__home-tab--active, .tdx-navigation-tabs__tab--active { + background-color: var(--bg-0) !important; + color: var(--col-400) !important; +} + +.tdx-navigation-tabs__tab:hover:not(.tdx-navigation-tabs__tab--active) { + background-color: var(--col-200) !important; +} + +.tdx-navigation-tabs__home-tab:hover { + background-color: var(--col-200) !important; +} + +.tdx-navigation-tabs__home-tab--active:hover { + background-color: var(--bg-0) !important; +} + +.tdx-dropdown--headline { + color: var(--txt-1) !important; +} + +.tdx-dropdown:hover { + background-color: var(--col-200) !important; +} + +.tdx-dropdown.active { + background-color: var(--col-300) !important; +} + +.tdx-dropdown-popout, +.tdx-dropdown-popout__menu { + background-color: var(--bg-0) !important; +} + +.tdx-dropdown-popout__menu-item { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; +} + +.tdx-dropdown-popout__menu-item:hover, .tdx-dropdown-popout__menu-item:focus { + color: var(--txt-1) !important; + background-color: var(--col-300) !important; +} + +.tdx-dropdown-popout__menu-item--selected { + color: var(--col-400) !important; +} + +.tdx-dropdown-popout__header { + background-color: var(--bg-0) !important; + color: var(--col-600) !important; +} + +.tdx-dropdown-popout__break { + border-color: var(--border-0) !important; +} + +.tdx-dropdown__divider { + background-color: var(--bg-0) !important; +} + +.tdx-dropdown__divider::before { + background: linear-gradient(90deg,var(--bg-0),var(--border-0),var(--border-0),var(--border-0),var(--bg-0)) !important; +} + +.tdx-label { + color: var(--txt-1) !important; +} + +/* Inputs */ + +.tdx-dropdown--dark, +.tdx-searchbar__textbox--dark { + background-color: var(--col-200) !important; + color: var(--txt-1) !important; +} + +.tdx-dropdown--dark:hover, .tdx-dropdown--dark:focus-visible { + background-color: var(--col-300) !important; +} + +.tdx-searchbar__textbox:not(.tdx-searchbar__textbox--dark) { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; +} + +.tdx-searchbar__textbox:hover:not(:focus), .tdx-searchbar:hover .tdx-searchbar__textbox:not(:focus) { + background-color: var(--col-200) !important; +} + +.tdx-searchbar__textbox:focus, .tdx-searchbar__textbox:active, .tdx-searchbar__textbox:focus-within { + border-color: var(--col-400) !important; +} + +.tdx-searchbar__textbox::placeholder { + color: var(--col-400) !important; +} + +.tdx-searchbar__textbox--dark:hover:not(:focus)::placeholder, .tdx-searchbar:hover .tdx-searchbar__textbox--dark:not(:focus)::placeholder, +.tdx-searchbar__textbox:hover:not(:focus)::placeholder, .tdx-searchbar:hover .tdx-searchbar__textbox:not(:focus)::placeholder { + color: var(--col-400) !important; +} + +input[type=checkbox], input[type=radio] { + accent-color: var(--col-400) !important; +} + +.tdx-checkbox { + background-color: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.tdx-checkbox:checked { + background-color: var(--col-400) !important; +} + +.tdx-checkbox:checked:disabled { + background-color: var(--col-200) !important; +} + +.control-label, label { + color: var(--txt-2) !important; +} + +.form-control { + background-color: var(--bg-0); + color: var(--txt-2); + border-color: var(--border-0); +} + +.form-control:hover { + border-color: var(--border-0); +} + +.form-control:focus { + border-color: var(--col-400); +} + +.talu_holder .luac_default { + color: var(--col-500); +} + +.talu_holder .bit-input input { + background-color: var(--bg-0); +} + +.talu_holder .bit-box { + background-color: var(--col-100); + color: var(--col-600); +} + +.talu_holder .bit-box:hover, .talu_holder .bit-box:active { + background-color: var(--col-300); + color: var(--col-500); +} + +.talu_holder .bit-box a.closebutton { + color: var(--col-600); +} + +.lu_tdac-auto ul { + background: var(--bg-0) !important; + box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2) !important; +} + +.lu_tdac-auto ul li { + color: var(--txt-1) !important; +} + +.lu_tdac-auto ul .auto-focus { + background-color: var(--col-300); + color: var(--col-500); +} + +.lu_tdac-auto ul .auto-focus div.talu_subcaption { + color: var(--col-400); +} + +div.WhiteOut { + background-color: var(--bg-0) !important; +} + +[role=status]:has(div>div>.tdx-loading-animation) { + background-color: var(--bg-0) !important; +} + +.ms-drop .ms-search input::placeholder { + color: var(--txt-3); +} + +.ms-choice { + background-color: var(--bg-0); + color: var(--txt-3); +} + +.ms-drop { + background-color: var(--bg-0); + border-color: var(--border-0); +} + +button.ms-choice { + border-color: var(--border-0) !important; +} + +button.ms-choice:hover { + border-color: var(--border-0) !important; +} + +button.ms-choice:focus { + border-color: var(--col-400) !important; +} + +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + background-color: var(--bg-1); +} + +.tdx-lookup-group div.select2-container.form-control a.select2-choices, .input-group div.select2-container.form-control a.select2-choice { + border-color: var(--border-0) !important; +} + +.input-group:not(:has(.input-group-section)):not(.input-group--no-border) { + border-color: var(--border-0); +} + +.input-group:focus, .input-group:active, .input-group:focus-within { + border-color: var(--col-400) !important; +} + +div.input-group .input-group-btn .btn-file:last-child { + color: var(--txt-3); +} + +.tdx-lookup-group { + background-color: var(--bg-0); + border-color: var(--border-0); +} + +.tdx-lookup-group:hover { + border-color: var(--border-0); +} + +.tdx-lookup-group .k-input:hover, .tdx-lookup-group .k-input:focus, .tdx-lookup-group .k-input:focus-within, .tdx-lookup-group.input-group:hover, .tdx-lookup-group.input-group:focus, .tdx-lookup-group.input-group:focus-within, .tdx-lookup-group select:hover, .tdx-lookup-group select:focus, .tdx-lookup-group select:focus-within, .tdx-lookup-group input:hover, .tdx-lookup-group input:focus, .tdx-lookup-group input:focus-within, .tdx-lookup-group input.form-control:hover, .tdx-lookup-group input.form-control:focus, .tdx-lookup-group input.form-control:focus-within { + border-color: var(--border-0); +} + +.tdx-lookup-group .k-input, .tdx-lookup-group.input-group, .tdx-lookup-group select, .tdx-lookup-group input, .tdx-lookup-group input.form-control { + border-color: var(--border-0); +} + +.tdx-lookup-group .k-svg-icon.k-svg-i-caret-alt-down::after { + color: var(--txt-1); +} + +.tdx-lookup-group:focus, .tdx-lookup-group:active, .tdx-lookup-group:focus-within { + border-color: var(--col-400); +} + +.tdx-lookup-group .k-input .k-input-inner::selection, .tdx-lookup-group.input-group .k-input-inner::selection, .tdx-lookup-group select .k-input-inner::selection, .tdx-lookup-group input .k-input-inner::selection, .tdx-lookup-group input.form-control .k-input-inner::selection { + background-color: var(--bg-2); +} + +.tdx-lookup-group>.select2-container-multi .select2-choices:not(div.attributeValue .select2-container-multi .select2-choices) { + border-color: var(--border-0) !important; +} + +.tdx-searchbar__textbox--border { + border-color: var(--border-0) !important; +} + +.tdx-lookup-group__input { + border-color: var(--border-0) !important; +} + +.tdx-input-group__textbox, +.tdx-input-group__textarea { + color: var(--txt-1) !important; + background-color: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.k-input-solid { + background-color: var(--bg-0); +} + +.k-list { + background-color: var(--bg-0); + color: var(--txt-1); +} + +.k-list-container.k-popup { + background-color: var(--bg-0); +} + +.k-list-content .k-list-item:hover, .k-list-content .k-list-item:focus, .k-list-content .k-list-item.k-focus { + background-color: var(--col-300); + color: var(--txt-1); +} + +.k-list-content .k-list-item { + color: var(--txt-1); + background-color: var(--bg-0); +} + +.k-popup { + color: var(--txt-1); +} + +.k-popup:has(.k-list) { + box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2); +} + +.tdx-lookup-group .k-input, .tdx-lookup-group.input-group, .tdx-lookup-group select, .tdx-lookup-group input, .tdx-lookup-group input.form-control { + color: var(--txt-1); +} + +.tdx-lookup-group .k-input .k-button-solid-base, .tdx-lookup-group.input-group .k-button-solid-base, .tdx-lookup-group select .k-button-solid-base, .tdx-lookup-group input .k-button-solid-base, .tdx-lookup-group input.form-control .k-button-solid-base { + background-color: var(--bg-0); +} + +.k-input-md .k-input-inner::placeholder, +.form-control::placeholder { + color: var(--txt-3) !important; +} + +.select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input { + background: var(--bg-0) !important; +} + +div.select2-container.form-control .select2-choice.select2-default { + border-color: var(--border-0); +} + +.select2-container .select2-choice>.select2-chosen { + color: var(--txt-1) !important; +} + +.select2-container .select2-choice.select2-default>.select2-chosen { + color: var(--txt-3) !important; +} + +.tdx-lookup-group>.select2-container-multi .select2-choices:not(div.attributeValue .select2-container-multi .select2-choices) .select2-search-field input.select2-default { + color: var(--txt-3) !important; +} + +.select2-results .select2-no-results, .select2-results .select2-selection-limit { + background: var(--bg-1) !important; +} + +.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit { + color: var(--txt-1) !important; +} + +.select2-drop { + background: var(--bg-0); + color: var(--txt-1); +} + +.select2-drop { + color: var(--txt-1) !important; + background-color: var(--bg-0); +} + +.select2-drop .select2-search input { + background-color: var(--bg-0); + border-color: var(--border-0); +} + +.select2-search input { + color: var(--txt-1); +} + +div.select2-drop.select2-drop-active, div.select2-drop.select2-drop-above.select2-drop-active { + box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2); +} + +.select2-drop .select2-results .select2-highlighted { + color: var(--txt-1) !important; + background-color: var(--col-300); +} + +.select2-results div.select2-result-label { + color: var(--txt-1); +} + +.select2-container:focus-within, .select2-container:focus-within a { + border-color: var(--col-400) !important; +} + +.form-group:has(select:not([multiple]):not([size])):hover::after { + color: var(--col-400) !important; +} + +div.select2-container.form-control .select2-choice, div.js-tagformfield .select2-container-multi .select2-choices, div.js-tags-inlineedit .select2-container-multi .select2-choices, div.attributeValue .select2-container-multi .select2-choices, div.select2-listbox .select2-container-multi .select2-choices, div.select2-container.form-control.select2-container-multi .select2-choices { + border-color: var(--border-0); +} + +div.select2-container.form-control .select2-choice:hover, div.js-tagformfield .select2-container-multi .select2-choices:hover, div.js-tags-inlineedit .select2-container-multi .select2-choices:hover, div.attributeValue .select2-container-multi .select2-choices:hover, div.select2-listbox .select2-container-multi .select2-choices:hover, div.select2-container.form-control.select2-container-multi .select2-choices:hover { + border-color: var(--border-0); +} + +div.select2-container-multi .select2-choices .select2-search-choice { + background-color: var(--col-100); + color: var(--col-600); +} + +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close { + color: var(--col-600) !important; +} + +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus-visible, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:hover { + color: var(--col-400) !important; +} + +div.select2-container-multi .select2-choices .select2-search-choice:hover, div.select2-container-multi .select2-choices .select2-search-choice:active { + background-color: var(--col-300); + color: var(--col-500); +} + +select.form-control:hover:not(:focus), +select.form-control { + border-color: var(--border-0); +} + +.k-chip-solid-base { + background-color: var(--col-100) !important; + color: var(--col-600) !important; +} + +.k-chip-action { + color: var(--col-600) !important; +} + +.k-chip-action:hover, .k-chip-action:focus-visible, .k-chip-action:active, .k-chip-action:active:hover, .k-chip-action:focus:active, .k-chip-action:focus:hover { + color: var(--col-400) !important; +} + +.tooltip-inner { + background-color: var(--bg-0); + color: var(--txt-1); + box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2); +} + +div#ui-datepicker-div .ui-datepicker-title select, div#ui-datepicker-div .ui-timepicker-div.ui-timepicker-oneLine select, div.ui-datepicker .ui-datepicker-title select, div.ui-datepicker .ui-timepicker-div.ui-timepicker-oneLine select { + color: var(--txt-1); + border-color: var(--bg-0); + background-color: var(--bg-0); +} + +div#ui-datepicker-div .ui-datepicker-title select:hover, div#ui-datepicker-div .ui-timepicker-div.ui-timepicker-oneLine select:hover, div.ui-datepicker .ui-datepicker-title select:hover, div.ui-datepicker .ui-timepicker-div.ui-timepicker-oneLine select:hover { + border-color: var(--border-0); +} + +div#ui-datepicker-div .ui-state-default, div#ui-datepicker-div .ui-state-default:hover, div.ui-datepicker .ui-state-default, div.ui-datepicker .ui-state-default:hover { + border-color: var(--bg-0) !important; +} + +div#ui-datepicker-div .ui-datepicker-header, div.ui-datepicker .ui-datepicker-header { + background: var(--col-100) !important; +} + +div#ui-datepicker-div th, div#ui-datepicker-div td, div.ui-datepicker th, div.ui-datepicker td { + color: var(--txt-1); +} + +div#ui-datepicker-div .ui-state-highlight, div#ui-datepicker-div .ui-widget-content .ui-state-highlight, div#ui-datepicker-div .ui-widget-header .ui-state-highlight, div.ui-datepicker .ui-state-highlight, div.ui-datepicker .ui-widget-content .ui-state-highlight, div.ui-datepicker .ui-widget-header .ui-state-highlight { + background: var(--col-100) !important; + color: var(--col-400) !important; +} + +button:has(>.ui-icon-circle-triangle-e), span:has(>.ui-icon-circle-triangle-e), a:has(>.ui-icon-circle-triangle-e), button:has(>.fa-chevron-circle-right), span:has(>.fa-chevron-circle-right), a:has(>.fa-chevron-circle-right), +button:has(>.ui-icon-circle-triangle-w), span:has(>.ui-icon-circle-triangle-w), a:has(>.ui-icon-circle-triangle-w), button:has(>.fa-chevron-circle-left), span:has(>.fa-chevron-circle-left), a:has(>.fa-chevron-circle-left) { + color: var(--col-400); +} + +/* Links */ + +.tdx-dashboard__widget-container a:not(.btn):not(.k-icon) { + color: var(--col-400) !important; +} + +.tdx-dashboard__widget-container a:not(.btn):not(.k-icon):hover, .tdx-dashboard__widget-container a:not(.btn):not(.k-icon):focus-visible { + color: var(--col-500) !important; +} + +a { + color: var(--col-400); + background-color: initial !important; +} + +a:hover, a:focus-visible, +.tdworkmgmt td a.visited-link:hover, .tdworkmgmt td a.visited-link:focus-visible { + color: var(--col-500) !important; +} + +a:visited, +.tdworkmgmt td a.visited-link, +.tdworkmgmt td a:visited, .tdworkmgmt.table .hilite a:visited { + color: var(--col-400); +} + +.tdworkmgmt.table-contents div.row > div > a { + color: var(--col-400); +} + +.tdworkmgmt.table-striped > tbody > tr.tdx-grid__group-header > td, .tdworkmgmt.table-bordered > tbody > tr.tdx-grid__group-header > td { + background-color: var(--col-100); +} + +.tdx-time-panel, .tdx-time-panel__heading { + color: var(--txt-1) !important; + background-color: var(--bg-1) !important; + border: 1px solid var(--border-0) !important; +} + +.tdx-leftnav__badge { + color: var(--txt-1) !important; + background-color: var(--col-300) !important; +} + +body .tdworkmgmt.table.table--vertical-lines > tbody > tr > td:not(:last-of-type) { + border-right: 1px solid var(--border-0); +} + +.TDGroupingRow { + color: var(--txt-1); +} + +a.disabledLink { + color: var(--txt-1) !important; +} + +.k-grid a.tdx-link { + color: var(--col-400) !important; +} + +.tdx-link:visited { + color: var(--col-400) !important; +} + +.tdx-btn--link { + color: var(--col-400) !important; +} + +/* Buttons */ +.tdx-btn--secondary { + background-color: var(--col-200) !important; + color: var(--col-400) !important; + border: none !important; +} + +.tdx-btn--secondary > a { + color: var(--col-400) !important; +} + +.tdx-btn--secondary:hover, .tdx-btn--secondary:hover:focus, .tdx-btn--secondary:focus-visible { + background-color: var(--col-300) !important; + color: var(--col-600) !important; +} + +.tdx-action-menu-dropdown__popout { + background-color: var(--bg-0) !important; + box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2) !important; +} + +.tdx-action-menu-dropdown-popout__menu-item:not(.tdx-dropdown-popout__header) { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; +} + +.tdx-action-menu-dropdown-popout__menu-item:hover, .tdx-action-menu-dropdown-popout__menu-item:focus { + background-color: var(--col-300) !important; +} + +.tdx-action-menu__item--primary { + color: var(--txt-5) !important; + background: var(--col-600) !important; + border-color: var(--col-600) !important; +} + +.tdx-action-menu__item--primary:hover, .tdx-action-menu__item--primary:hover:focus, .tdx-action-menu__item--primary:focus-visible { + color: var(--txt-5) !important; + background: var(--col-400) !important; + border-color: var(--col-400) !important; +} + +.tdx-action-menu__item:not(.tdx-action-menu__item--primary) { + color: var(--txt-1) !important; + background: var(--bg-0) !important; +} + +.tdx-action-menu__item:not(.tdx-action-menu__item--primary):hover, .tdx-action-menu__item.tdx-action-menu__item:not(.tdx-action-menu__item--primary):hover:focus, .tdx-action-menu__item.tdx-action-menu__item:not(.tdx-action-menu__item--primary):focus-visible { + background: var(--col-200) !important; + color: var(--txt-2) !important; +} + +.tdx-primary-button-override { + background-color: var(--col-600) !important; + color: var(--txt-5) !important; + border-color: var(--col-600) !important; +} + +.tdx-primary-button-override:hover, .tdx-primary-button-override:hover:focus, .tdx-primary-button-override:focus-visible { + background: var(--col-400) !important; + border-color: var(--col-400) !important; + color: var(--txt-5) !important; +} + +.tdx-primary-button-override.active, .tdx-primary-button-override.active:hover, .tdx-primary-button-override.active:focus, .tdx-primary-button-override:active, .tdx-primary-button-override:active:hover, .tdx-primary-button-override:active:focus, +.tdx-primary-button-override:focus:not(:focus-visible,.active,:active,:hover) { + background-color: var(--col-600) !important; + color: var(--txt-5) !important; + border-color: var(--col-600) !important; +} + +span.input-group-btn .btn-default { + color: var(--txt-3); +} + +span.input-group-btn .btn-default:hover, span.input-group-btn .btn-default:focus-visible, span.input-group-btn .btn-default:active, span.input-group-btn .btn-default:active:hover, span.input-group-btn .btn-default:focus:active, span.input-group-btn .btn-default:focus:hover { + color: var(--txt-2); +} + +div.input-group .input-group-btn .btn-file:last-child:hover, div.input-group .input-group-btn .btn-file:last-child:hover:focus, div.input-group .input-group-btn .btn-file:last-child:focus-visible { + background-color: var(--col-100); + color: var(--txt-2); +} + +.btn.active, .btn.active:hover, .btn.active:focus, .btn:active, .btn:active:hover, .btn:active:focus { + background: var(--col-300); + color: var(--txt-5); +} + +.btn-default { + color: var(--txt-1); +} + +.btn-default:hover, .btn-default:hover:focus, .btn-default:focus-visible { + background: var(--col-200); + color: var(--txt-1); +} + +.tdx-btn--tertiary { + color: var(--txt-1); +} + +.tdx-btn--tertiary:hover { + background: var(--col-200); + color: var(--txt-2); +} + +.tdx-btn--primary { + background-color: var(--col-600) !important; + color: var(--txt-5) !important; + border-color: var(--col-600) !important; +} + +.tdx-btn--primary:hover, .tdx-btn--primary:hover:focus, .tdx-btn--primary:focus-visible { + background: var(--col-400) !important; + border-color: var(--col-400) !important; + color: var(--txt-5) !important; +} + +.feed-button-group .btn-primary:hover, .feed-button-group .btn-primary:hover:focus, .feed-button-group .btn-primary:focus-visible { + background: var(--col-200); +} + +.feed-button-group .btn-primary.active, .feed-button-group .btn-primary.active:hover, .feed-button-group .btn-primary.active:focus, .feed-button-group .btn-primary:active, .feed-button-group .btn-primary:active:hover, .feed-button-group .btn-primary:active:focus { + background: var(--col-300); +} + +#btnSave.btn-primary, #btnClientSave.btn-primary, #btnRunReport.btn-primary, #btnApply.btn-primary, #btnAddSelected.btn-primary, #btnSubmit.btn-primary { + color: var(--txt-5) !important; + background-color: var(--col-500) !important; + border-color: var(--col-500) !important; +} + +#btnSave.btn-primary:hover, #btnSave.btn-primary:hover:focus, #btnSave.btn-primary:focus-visible, #btnClientSave.btn-primary:hover, #btnClientSave.btn-primary:hover:focus, #btnClientSave.btn-primary:focus-visible, #btnRunReport.btn-primary:hover, #btnRunReport.btn-primary:hover:focus, #btnRunReport.btn-primary:focus-visible, #btnApply.btn-primary:hover, #btnApply.btn-primary:hover:focus, #btnApply.btn-primary:focus-visible, #btnAddSelected.btn-primary:hover, #btnAddSelected.btn-primary:hover:focus, #btnAddSelected.btn-primary:focus-visible, #btnSubmit.btn-primary:hover, #btnSubmit.btn-primary:hover:focus, #btnSubmit.btn-primary:focus-visible { + background: var(--col-400) !important; + border-color: var(--col-400) !important; + color: var(--txt-5) !important; +} + +#btnSave.btn-primary.active, #btnSave.btn-primary.active:hover, #btnSave.btn-primary.active:focus, #btnSave.btn-primary:active, #btnSave.btn-primary:active:hover, #btnSave.btn-primary:active:focus, #btnClientSave.btn-primary.active, #btnClientSave.btn-primary.active:hover, #btnClientSave.btn-primary.active:focus, #btnClientSave.btn-primary:active, #btnClientSave.btn-primary:active:hover, #btnClientSave.btn-primary:active:focus, #btnRunReport.btn-primary.active, #btnRunReport.btn-primary.active:hover, #btnRunReport.btn-primary.active:focus, #btnRunReport.btn-primary:active, #btnRunReport.btn-primary:active:hover, #btnRunReport.btn-primary:active:focus, #btnApply.btn-primary.active, #btnApply.btn-primary.active:hover, #btnApply.btn-primary.active:focus, #btnApply.btn-primary:active, #btnApply.btn-primary:active:hover, #btnApply.btn-primary:active:focus, #btnAddSelected.btn-primary.active, #btnAddSelected.btn-primary.active:hover, #btnAddSelected.btn-primary.active:focus, #btnAddSelected.btn-primary:active, #btnAddSelected.btn-primary:active:hover, #btnAddSelected.btn-primary:active:focus, #btnSubmit.btn-primary.active, #btnSubmit.btn-primary.active:hover, #btnSubmit.btn-primary.active:focus, #btnSubmit.btn-primary:active, #btnSubmit.btn-primary:active:hover, #btnSubmit.btn-primary:active:focus { + background: var(--col-600) !important; + border-color: var(--col-600) !important; + color: var(--txt-5) !important; +} + +#btnSave.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnClientSave.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnRunReport.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnApply.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnAddSelected.btn-primary:focus:not(:focus-visible,.active,:active,:hover), #btnSubmit.btn-primary:focus:not(:focus-visible,.active,:active,:hover) { + background: var(--col-400) !important; + border-color: var(--col-400) !important; + color: var(--txt-5) !important; +} + +.btn-tertiary, .btn-info, .ButtonCellTopPadding .ButtonCellTop .btn-primary { + color: var(--txt-1); + background-color: var(--col-100); +} + +.btn-tertiary:hover, .btn-tertiary:hover:focus, .btn-tertiary:focus-visible, .btn-info:hover, .btn-info:hover:focus, .btn-info:focus-visible, .ButtonCellTopPadding .ButtonCellTop .btn-primary:hover, .ButtonCellTopPadding .ButtonCellTop .btn-primary:hover:focus, .ButtonCellTopPadding .ButtonCellTop .btn-primary:focus-visible { + background-color: var(--col-200); + color: var(--txt-1); +} + +.modal-footer .btn-default { + background-color: var(--col-200) !important; + color: var(--col-400) !important; + border: none !important; +} + +.modal-footer .btn-default:hover, .modal-footer .btn-default:hover:focus, .modal-footer .btn-default:focus-visible { + background-color: var(--col-300) !important; + color: var(--col-600) !important; +} + +/* .btn.btn-primary:not(.btn-sm) { + color: var(--txt-1); + background-color: var(--bg-5); + border-color: var(--bg-5); +} */ + +.TabButtonCell .btn-primary, .TabButtonCell .btn-info, .tab-row .btn-primary, #divViewButtons, .TabButtonCell .btn-primary:active, .tab-row .btn-primary:active { + color: var(--txt-2); +} + +.TabButtonCell .btn-primary:hover, .TabButtonCell .btn-primary:hover:focus, .TabButtonCell .btn-primary:focus-visible, .TabButtonCell .btn-info:hover, .TabButtonCell .btn-info:hover:focus, .TabButtonCell .btn-info:focus-visible, .tab-row .btn-primary:hover, .tab-row .btn-primary:hover:focus, .tab-row .btn-primary:focus-visible, #divViewButtons:hover, #divViewButtons:hover:focus, #divViewButtons:focus-visible, .TabButtonCell .btn-primary:active:hover, .TabButtonCell .btn-primary:active:hover:focus, .TabButtonCell .btn-primary:active:focus-visible, .tab-row .btn-primary:active:hover, .tab-row .btn-primary:active:hover:focus, .tab-row .btn-primary:active:focus-visible { + background: var(--col-200); + color: var(--txt-2); +} + +.TabButtonCell .btn-danger, .tab-row .btn-danger { + background: var(--bg-5); + color: var(--txt-2); +} + +.TabButtonCell .btn-danger:hover, .TabButtonCell .btn-danger:hover:focus, .TabButtonCell .btn-danger:focus-visible, .tab-row .btn-danger:hover, .tab-row .btn-danger:hover:focus, .tab-row .btn-danger:focus-visible { + background: var(--col-0); + color: var(--txt-2); +} + +.ButtonCellTop { + background: var(--bg-0); +} + +.feed-button-group .btn-primary { + color: var(--txt-2) !important; +} + +.btn-secondary { + background-color: var(--col-200); + color: var(--col-400); + border-color: var(--col-200); +} + +.btn-secondary:hover, .btn-secondary:hover:focus, .btn-secondary:focus-visible { + background-color: var(--col-300) !important; + color: var(--col-500) !important; + border-color: var(--col-300) !important; +} + +.btn-danger { + background-color: var(--col-200); + color: var(--col-400); + border-color: var(--col-200); +} + +.btn-danger:hover, .btn-danger:hover:focus, .btn-danger:focus-visible { + background-color: var(--col-300); + color: var(--col-500); + border-color: var(--col-300); +} + +.tdx-button-bar .btn-primary { + color: var(--txt-1); + background-color: var(--col-100); + border-color: var(--col-100); +} + +.tdx-button-bar .btn-primary:hover, .tdx-button-bar .btn-primary:hover:focus, .tdx-button-bar .btn-primary:focus-visible { + background-color: var(--col-300); + background: var(--col-300); + color: var(--txt-2); + border-color: var(--col-300); +} + +.tdx-button-bar .btn-primary:visited { + color: var(--txt-1); +} + +.tdx-button-bar .btn-danger { + color: var(--col-400); +} + +.tdx-button-bar .btn-danger:hover, .tdx-button-bar .btn-danger:hover:focus, .tdx-button-bar .btn-danger:focus-visible { + background-color: var(--col-300); + color: var(--col-500); + border-color: var(--col-300); +} + +.tdx-tile-list__item-container, +.tdx-tile-list__item-container:visited { + background-color: var(--col-100) !important; + color: var(--col-400) !important; +} + +.tdx-tile-list__item-container:hover, .tdx-tile-list__item-container:focus { + background-color: var(--col-400) !important; + color: var(--col-100) !important; +} + +a.btn.btn-primary { + background-color: var(--col-600) !important; + color: var(--txt-5) !important; + border-color: var(--col-600) !important; +} + +a.btn.btn-primary:hover { + background-color: var(--col-400) !important; + color: var(--txt-5) !important; + border-color: var(--col-400) !important; +} + +.btn-primary { + background-color: var(--col-600); + color: var(--txt-5); + border-color: var(--col-600); +} + +.btn-primary:hover, .btn-primary:hover:focus, .btn-primary:focus-visible { + background: var(--col-400); + color: var(--txt-5); + border-color: var(--col-400); +} + +td > a.btn.btn-primary { + background-color: var(--col-400) !important; + color: var(--txt-5) !important; + border-color: var(--col-400); +} + +td > a.btn.btn-primary:hover { + background-color: var(--col-500) !important; + color: var(--txt-5) !important; + border-color: var(--col-500); +} + +.btn-default.active, .btn-default.active:hover, .btn-default.active:focus, .btn-default:active, .btn-default:active:hover, .btn-default:active:focus { + background: var(--col-100) !important; + color: var(--txt-1) !important; + border-color: var(--col-100) !important; +} + +a.btn.btn-link.tdx-primary-button-override { + color: var(--txt-5) !important; +} + +.btn-link, .btn.btn-link, .sidebar-btn.btn-link { + color: var(--col-400) !important; +} + +.btn-link:hover, .btn.btn-link:hover, .sidebar-btn.btn-link:hover { + color: var(--col-400) !important; +} + +.btn-link[role=button]:hover, .btn.btn-link[role=button]:hover, .sidebar-btn.btn-link[role=button]:hover, +a.btn.btn-link.tdx-tertiary-button-override:hover { + background-color: var(--col-200) !important; +} + +.tdx-calendar .cal-views { + border-color: var(--col-400) !important; +} + +.tdx-calendar .cal-view { + color: var(--txt-2) !important; +} + +.tdx-calendar .cal-view.light-blue-bg { + background-color: var(--col-400) !important; + color: var(--txt-2) !important; +} + +.tdx-calendar .cal-view:not(.cal-view.light-blue-bg):hover, .tdx-calendar .cal-view:hover:focus, .tdx-calendar .cal-view:focus-visible { + background-color: var(--col-200) !important; +} + +.tdx-calendar #btnDatePicker { + background-color: var(--bg-0) !important; + color: var(--col-400) !important; +} + +.tdx-calendar #btnDatePicker:hover, .tdx-calendar #btnDatePicker:focus-visible, .tdx-calendar #btnDatePicker:active, .tdx-calendar #btnDatePicker:active:hover, .tdx-calendar #btnDatePicker:focus:active, .tdx-calendar #btnDatePicker:focus:hover { + color: var(--col-600) !important; +} + +button:has(.ui-icon-circle-triangle-w), span:has(.ui-icon-circle-triangle-w), +button:has(.ui-icon-circle-triangle-e), span:has(.ui-icon-circle-triangle-e) { + color: var(--col-400) !important; +} + +button:has(.ui-icon-circle-triangle-e):hover, button:has(.ui-icon-circle-triangle-e):focus-visible, button:has(.ui-icon-circle-triangle-e):active, button:has(.ui-icon-circle-triangle-e):active:hover, button:has(.ui-icon-circle-triangle-e):focus:active, button:has(.ui-icon-circle-triangle-e):focus:hover, span:has(.ui-icon-circle-triangle-e):hover, span:has(.ui-icon-circle-triangle-e):focus-visible, span:has(.ui-icon-circle-triangle-e):active, span:has(.ui-icon-circle-triangle-e):active:hover, span:has(.ui-icon-circle-triangle-e):focus:active, span:has(.ui-icon-circle-triangle-e):focus:hover, +button:has(.ui-icon-circle-triangle-w):hover, button:has(.ui-icon-circle-triangle-w):focus-visible, button:has(.ui-icon-circle-triangle-w):active, button:has(.ui-icon-circle-triangle-w):active:hover, button:has(.ui-icon-circle-triangle-w):focus:active, button:has(.ui-icon-circle-triangle-w):focus:hover, span:has(.ui-icon-circle-triangle-w):hover, span:has(.ui-icon-circle-triangle-w):focus-visible, span:has(.ui-icon-circle-triangle-w):active, span:has(.ui-icon-circle-triangle-w):active:hover, span:has(.ui-icon-circle-triangle-w):focus:active, span:has(.ui-icon-circle-triangle-w):focus:hover { + color: var(--col-600) !important; +} + +.ui-widget-header { + background: var(--bg-0) !important; +} + +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, +.ui-widget-content, .ui-widget.ui-widget-content { + background: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.tdx-calendar .fc-day-header { + color: var(--col-400) !important; +} + +.tdx-calendar .fc-day-number.fc-other-month a:first-child { + color: var(--col-200) !important; +} + +.tdx-calendar .fc-day-number a { + color: var(--col-600) !important; +} + +.tdx-calendar .ui-state-highlight a, .tdx-calendar .ui-widget-content .ui-state-highlight a, .tdx-calendar .ui-widget-header .ui-state-highlight a { + color: var(--col-400) !important; +} + +.tdx-calendar .ui-state-highlight { + background: var(--col-100) !important; +} + +.td-day-off { + background: var(--bg-2) !important; +} + +.label-primary, .tdworkmgmt.table .hilite .label.label-primary { + background-color: var(--col-300); +} + +.label-info, .label-success, .label-default { + color: var(--col-200); + background-color: var(--col-500); +} + +.tdTilemd, +.tdTilesm { + background-color: var(--col-300); + border-color: var(--col-300); +} + +.tdTilemd.secondary, +.tdTilesm.secondary { + background-color: var(--col-300); + border-color: var(--col-300); +} + +.tdTilesm.tertiary { + background-color: var(--col-300); + border-color: var(--col-300); +} + +.block-actions .btn.btn-link { + color: var(--txt-1); +} + +.block-actions .btn.btn-link:hover, .block-actions .btn.btn-link:hover:focus, .block-actions .btn.btn-link:focus-visible { + background: var(--bg-5); + color: var(--txt-1); +} + +.btn-link:hover, .btn-link:focus-visible, .btn.btn-link:hover, .btn.btn-link:focus-visible, .sidebar-btn.btn-link:hover, .sidebar-btn.btn-link:focus-visible { + color: var(--col-500); +} + +ul.dropdown-menu .btn.btn-link[data-v-775a00fa] { + color: var(--txt-1) !important; +} + +ul.dropdown-menu .btn.btn.btn-link[data-v-775a00fa]:hover { + background-color: var(--col-300) !important; + color: var(--txt-1) !important; +} + +.copyButton { + color: var(--txt-2) !important; + background-color: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.copyButton:hover { + background-color: var(--bg-2) !important; +} + +.js-open-monitor .btn { + color: var(--col-1); +} + +.js-open-monitor .btn:hover { + color: var(--col-2); +} + +/* .btn:hover, .btn:hover:focus, .btn:focus-visible { + background: var(--bg-1); +} */ + +.btn:focus:not(:focus-visible,.active,:active,:hover) { + color: var(--txt-5); + background-color: var(--col-400); +} + +.btn:hover, .btn:hover:focus, .btn:focus-visible { + color: var(--txt-5); + background-color: var(--col-600); +} + +.popover { + background-color: var(--bg-0); + box-shadow: 0 5px 10px var(--shadow-1); + border-color: var(--border-0); +} + +.popover.right > .arrow { + border-right-color: var(--border-0); +} + +.popover.right > .arrow::after { + border-right-color: var(--bg-0); +} + +/* Tables */ + +table.table { + color: var(--txt-1) !important; + border-color: var(--border-0); +} + +.tdx-table__th { + background-color: var(--bg-0) !important; + color: var(--col-600) !important; +} + +.tdx-table__td { + color: var(--txt-2) !important; +} + +.tdx-table-fade-right { + background: linear-gradient(to right,transparent,var(--bg-0)) !important; +} + +thead, tbody, tfoot, tr, td, th { + border-color: var(--border-0); +} + +.tdx-pagination-bar { + background-color: var(--bg-0) !important; +} + +.tdx-pagination-bar__item-count { + color: var(--txt-2) !important; +} + +.tdx-dashboard__widget-container { + box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-1) !important; +} + +.tdx-widget-selector__widget-option { + box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.tdx-widget-selector__widget-name { + color: var(--txt-1) !important; +} + +.tdx-widget-selector__category { + color: var(--col-600) !important; +} + +.tdx-widget-selector__widget-option:hover, .tdx-widget-selector__widget-option:focus { + outline-color: var(--col-400) !important; +} + +.tdx-dashboard-row-editor { + background-color: var(--col-100) !important; + box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.tdx-dashboard-row-editor__column { + background-color: var(--bg-0) !important; +} + +.tdx-dashboard-row-editor__selected-widget { + background-color: var(--bg-0) !important; + outline-color: var(--border-0) !important; +} + +.tdx-dashboard-row-editor__selected-widget-category-text { + color: var(--col-600) !important; +} + +.tdx-dashboard-editor__add-widget { + color: var(--txt-3) !important; +} + +.tdx-dashboard-editor__add-widget:hover, .tdx-dashboard-editor__add-widget:focus-visible { + box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.tdx-control-bar { + background-color: var(--bg-0) !important; +} + +.tdx-control-bar__title { + color: var(--txt-1) !important; +} + +.tdx-confirmation-dialog { + background-color: var(--bg-0); + color: var(--col-600); +} + +.tdx-confirmation-dialog__text-area { + color: var(--col-600); +} + +.k-grid, .k-pager, .k-table { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; +} + +.k-table-tbody>.k-table-row:not(.k-table-group-row):first-child>.k-table-td, +.k-table-tbody>.k-table-row:not(.k-table-group-row)>.k-table-td { + border-color: var(--border-0) !important; +} + +.k-grid-header, .k-grid-pager { + background-color: var(--bg-0) !important; + color: var(--txt-0) !important; +} + +.k-grid .k-table-row.k-table-alt-row { + background-color: var(--bg-0); +} + +.k-grid .k-table-row { + background-color: var(--bg-1); /* can change to 0 for non-striped rows */ +} + +td.k-table-td { + /* background-color: var(--bg-1); */ +} + +tr.k-alt td.k-table-td { + background-color: var(--bg-0) +} + +.k-table-th { + background-color: var(--bg-0) !important; +} + +.k-grid .k-grid-header .k-table-th { + color: var(--txt-4) !important; +} + +.k-grid .k-grid-header .k-table-th, .k-table-tbody .k-group-cell { + background-color: unset; +} + +.k-table-th, .k-table-td, +td.k-table-td { + background-color: unset; +} + +.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):not([style]):hover, .k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover { + background-color: var(--bg-1) !important; +} + +.k-grid .k-table-tbody>.k-table-alt-row:not(.k-detail-row):not([style]):hover, .k-grid .k-table-tbody>.k-table-alt-row:not(.k-detail-row).k-hover:not([style]) { + background-color: var(--bg-0) !important; +} + +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-button-md { + background-color: var(--bg-0) !important; + color: var(--col-400) !important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button.k-pager-nav.k-disabled, +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-pager-last.k-button-md { + background-color: var(--bg-0) !important; + color: var(--col-400) !important; +} + +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-pager-last.k-button-md.k-disabled, +button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-button-md.k-disabled { + color: var(--bg-2) !important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button.k-pager-nav:hover { + color: var(--col-600) !important; +} + +#lookupIframeWrapper { + background-color: var(--bg-0); +} + +.k-window, .k-window:focus { + background: var(--bg-0); + box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2); +} + +.k-window-titlebar { + background-color: var(--bg-0) !important; +} + +.k-window-content { + background-color: var(--bg-0) !important; +} + +.k-window-title { + color: var(--col-500) !important; +} + +.k-button .k-svg-i-window { + color: var(--col-500); +} + +.k-button .k-svg-i-x { + color: var(--col-500); +} + +button.k-button.k-button-md.k-button-flat.k-button-flat-primary.k-selected { + background-color: var(--col-100) !important; +} + +button.k-selected { + background-color: var(--col-1) !important; + color: var(--col-400) !important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button { + color: var(--col-400) !important; +} + +button.k-button.k-button-md.k-button-flat.k-button-flat-primary:hover { + color: var(--col-500); + background-color: var(--col-100)!important; +} + +.k-pager-md .k-pager-numbers-wrap .k-button.k-pager-nav { + background-color: var(--bg-0) !important; +} + +.tdx-pagination-bar { + background-color: var(--bg-0); +} + +.tdx-pagination-bar__active-page-item { + color: var(--col-400); + background-color: var(--col-200); +} + +.tdx-pagination-bar__page-item:hover:not(.tdx-pagination-bar__active-page-item,.tdx-pagination-bar__separator) { + color: var(--col-500); + background-color: var(--col-100); +} + +.tdx-pagination-bar .fa, .tdx-pagination-bar a { + color: var(--col-400); +} + +.tdx-pager-button .fa-chevron-right, .tdx-pager-button .fa-chevron-left { + -webkit-text-stroke-color: var(--bg-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 { + color: var(--txt-5); + background-color: var(--bg-5) !important; +} + +.tdworkmgmt.table-header > div { + background-color: var(--bg-1); + color: var(--col-400); +} + +/* Side Panels */ + +.tdx-right-side-panel { + background-color: var(--bg-0) !important; + box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2) !important; +} + +.white-bg, .white-hover-bg:hover { + background-color: var(--bg-0) !important; +} + +.tdx-right-side-panel__drag-border { + background: linear-gradient(var(--col-400),var(--col-400)) no-repeat left/1px 10% !important; +} + +.tdx-right-side-panel__drag-border:hover { + border-color: var(--col-400) !important; +} + +.tdx-right-side-panel__header-title { + color: var(--txt-2) !important; +} + +.tdx-right-side-panel__drag-border:focus-visible, .tdx-right-side-panel__drag-border.active { + border-color: var(--col-500) !important; +} + + +.tdx-right-side-panel__home-button { + color: var(--col-400) !important; + border-color: var(--col-500) !important; +} + +.tdx-right-side-panel__home-button:hover { + color: var(--col-200) !important; + border-color: var(--col-300) !important; +} + +.tdx-leftnav-drag-handle { + background: linear-gradient(var(--col-400),var(--col-400)) no-repeat right/1px 10% !important; +} + +.tdx-leftnav-drag-handle:hover { + background-color: var(--col-400) !important; +} + +.tdx-leftnav-drag-handle:focus-visible, .tdx-leftnav-drag-handle.active { + background-color: var(--col-500) !important;; +} + +/* Tickets */ + +.control-label, label.control-label, span.control-label { + color: var(--txt-3) !important; +} + +.control-label~* { + color: var(--txt-1) !important; +} + +.black { + color: var(--txt-1) !important; +} + +nav#divTabHeader, +.TabButtonCell, .tab-row, +.tdx-button-bar { + background-color: var(--col-100) !important; +} + +.panel-default>.panel-heading { + background-color: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.panel-body, .panel-footer { + background-color: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.panel { + background-color: var(--bg-0) !important; +} + +.panel-body, .panel-footer { + color: var(--txt-3) !important; +} + +.h2, h2, h2.h3, .panel-title { + color: var(--txt-1) !important; + border-color: var(--border-0) !important; +} + +.alert-info, div.alert-info { + color: var(--txt-1) !important; + background-color: var(--col-blue) !important; +} + +.alert-warning, div.alert-warning { + color: var(--txt-1) !important; + background-color: var(--col-yellow) !important; +} + +.nav-tabs>li.active>a, .nav-tabs>li.active>button, .nav-pills>li.active>a, .nav-pills>li.active>button { + color: var(--col-600) !important; + background-color: var(--bg-0) !important; + border-color: var(--border-0); + box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; +} + +.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>button, .nav-tabs>li>button:hover, .nav-pills>li>a, .nav-pills>li>a:hover { + color: var(--txt-3); +} + +.nav-tabs>li>a:hover, .nav-tabs>li>a:hover:hover { + color: var(--txt-2); + border-color: var(--border-0); +} + +.nav-tabs>li>a:hover { + color: var(--col-600); +} + +a.btn.btn-link.tdx-tertiary-button-override { + background-color: var(--col-100) !important; + color: var(--txt-1) !important; +} + +.gray, .gray-hover:hover { + color: var(--txt-3) !important; +} + +.dropdown-menu { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; + box-shadow: 0 1px 3px var(--shadow-1),0 2px 10px var(--shadow-2); +} + +.dropdown-menu li { + color: var(--txt-1); + background-color: var(--bg-0); +} + +.dropdown-menu>span>li>a:hover, .dropdown-menu>span>li>a:focus, .dropdown-menu>span>li:hover, .dropdown-menu>span>li:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>span>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>span>a:focus, +.dropdown-menu li:hover { + color: var(--txt-1); + background-color: var(--col-300); +} + +.TabButtonCell .btn-primary.active, .TabButtonCell .btn-primary.active:hover, .TabButtonCell .btn-primary.active:focus, .TabButtonCell .btn-primary:active, .TabButtonCell .btn-primary:active:hover, .TabButtonCell .btn-primary:active:focus, .TabButtonCell .btn-info.active, .TabButtonCell .btn-info.active:hover, .TabButtonCell .btn-info.active:focus, .TabButtonCell .btn-info:active, .TabButtonCell .btn-info:active:hover, .TabButtonCell .btn-info:active:focus, .tab-row .btn-primary.active, .tab-row .btn-primary.active:hover, .tab-row .btn-primary.active:focus, .tab-row .btn-primary:active, .tab-row .btn-primary:active:hover, .tab-row .btn-primary:active:focus, #divViewButtons.active, #divViewButtons.active:hover, #divViewButtons.active:focus, #divViewButtons:active, #divViewButtons:active:hover, #divViewButtons:active:focus, .TabButtonCell .btn-primary:active.active, .TabButtonCell .btn-primary:active.active:hover, .TabButtonCell .btn-primary:active.active:focus, .TabButtonCell .btn-primary:active:active, .TabButtonCell .btn-primary:active:active:hover, .TabButtonCell .btn-primary:active:active:focus, .tab-row .btn-primary:active.active, .tab-row .btn-primary:active.active:hover, .tab-row .btn-primary:active.active:focus, .tab-row .btn-primary:active:active, .tab-row .btn-primary:active:active:hover, .tab-row .btn-primary:active:active:focus { + background: var(--col-600); + color: var(--txt-1); +} + +div.btn-group.open>.dropdown-toggle.btn-primary, .open>.dropdown-toggle.btn-primary, .open>.dropdown-toggle.btn-primary:hover, .open>.dropdown-toggle.btn-primary:focus { + background: var(--col-100); + color: var(--txt-1); +} + +.TabButtonCell .btn-primary:focus:not(:focus-visible,.active,:active,:hover), .TabButtonCell .btn-info:focus:not(:focus-visible,.active,:active,:hover), .tab-row .btn-primary:focus:not(:focus-visible,.active,:active,:hover), #divViewButtons:focus:not(:focus-visible,.active,:active,:hover), .TabButtonCell .btn-primary:active:focus:not(:focus-visible,.active,:active,:hover), .tab-row .btn-primary:active:focus:not(:focus-visible,.active,:active,:hover) { + background: var(--col-100); + color: var(--txt-1); +} + +.btn-primary--tertiary { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; + border-color: var(--bg-0) !important; +} + +.btn-primary--tertiary:hover, .btn-primary--tertiary:hover:focus, .btn-primary--tertiary:focus-visible { + background-color: var(--col-200) !important; + color: var(--col-400) !important; +} + +.time-cell-approved { + background-color: var(--col-green); +} + +.time-cell-rejected { + background-color: var(--col-red); +} + +[class^=fa-].red, [class^=fa-].red:hover { + color: var(--col-red) !important; +} + +[class^=fa-].green, [class^=fa-].green:hover { + color: var(--col-green) !important; +} + +.tdx-error-text, span.tdx-error-text, +.tdx-error-text:hover, span.tdx-error-text:hover { + /* color: var(--col-red) !important; */ + color: var(--col-600) !important; +} + +.red-bg, +.status.red, .status-danger, .pri-hi { + background-color: var(--col-red) !important; + color: var(--txt-1) !important; +} + +.status.blue, .status.gray, .status-primary, .status-default { + background-color: var(--col-blue); + color: var(--txt-1) !important; +} + +.status-warning { + background-color: var(--col-yellow); + color: var(--txt-1) !important; +} + +.status.green, .status-success, +.js-open-monitor .btn .label-success { + background-color: var(--col-green); + color: var(--txt-1) !important; +} + +div.feed-body>div.feed-child-box { + background-color: var(--col-100); + color: var(--txt-1); +} + +.modal-content { + background-color: var(--bg-0); +} + +.modal-dialog { + box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2); +} + +.modal-title { + color: var(--txt-1); +} + +.tdx-modal { + background-color: var(--bg-0) !important; + box-shadow: 0 0 8px var(--shadow-1),0 5px 12px var(--shadow-1),0 15px 35px var(--shadow-2); +} + +.tdx-modal .modal-content { + color: var(--txt-1) !important; +} + +.tdx-modal__iframe-header, +.tdx-modal__iframe-footer { + background-color: var(--bg-0) !important; +} + +.modal-content { + background-color: var(--bg-0) !important; +} + +hr { + background-color: var(--col-300); +} + +blockquote { + border-color: var(--border-0); +} + +.code, code, pre { + background-color: var(--bg-1); + color: var(--txt-1); + border-color: var(--border-0); +} + +div.comment { + background-color: var(--col-100); +} + +.block-actions { + background-color: var(--bg-0); +} + +body .tdworkmgmt.table>thead>tr>th, body .tdworkmgmt.table>tbody>tr>th, body .tdworkmgmt.table>tfoot>tr>th, body .tdworkmgmt.table>tbody>tr.TDGridHeader>td, body .tdworkmgmt.table>thead>tr.TDGridHeader>td { + background-color: var(--bg-0); + color: var(--txt-1); +} + +body .tdworkmgmt.table>tbody>tr:not(.tdx-grid__group-header):not(.TDGridHeader)>td { + color: var(--txt-1); + border-color: var(--border-0); +} + +body .tdworkmgmt.table>tbody>tr:not(.tdx-grid__group-header):not(.TDGridHeader):last-child:not(.TDPagerRow) th, body .tdworkmgmt.table>tbody>tr:not(.tdx-grid__group-header):not(.TDGridHeader):last-child:not(.TDPagerRow) td { + border-color: var(--border-0); +} + +.tdworkmgmt td a, .tdworkmgmt.table .hilite a { + color: var(--col-400); +} + +.tdworkmgmt td a:hover, .tdworkmgmt td a:focus-visible, .tdworkmgmt.table .hilite a:hover, .tdworkmgmt.table .hilite a:focus-visible { + color: var(--col-0); +} + +.input-group-addon { + background-color: var(--bg-5); + color: var(--txt-1); +} + +.list-group-item { + background-color: var(--bg-0); + border-color: var(--border-0); +} + +/* Text Editor */ +.cke_editable { + color: var(--txt-1); + background-color: var(--bg-4); +} + +.cke_wysiwyg_div, .cke_wysiwyg_frame { + background: var(--bg-0) !important; +} + +.cke_combo_button, .cke_toolgroup { + background: var(--bg-0) !important; +} + +.cke_button_icon { + opacity: 1 !important; + filter: invert(var(--txt-invert)) !important; +} + +.cke_combo_text { + color: var(--txt-2) !important; +} + +.cke_panel_grouptitle { + background: var(--bg-2) !important; + color: var(--txt-1); +} + +.cke_panel_listItem a:active, .cke_panel_listItem a:focus, .cke_panel_listItem a:hover { + background: var(--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; +} + +.cke_bottom, .cke_top, .cke_chrome { + background-color: var(--bg-1) !important; + color: var(--txt-2) !important; +} + +.cke_combo_button, +.cke_toolgroup, +.cke_contents { + border-color: var(--border-0) !important; +} + +div .cke_top, div .cke_bottom, div .comment-options, div .cke_chrome { + background-color: var(--col-100) !important; +} + +.cke_panel_listItem a { + border: none; +} + +.cke_panel, +.cke_panel_grouptitle { + border-color: var(--border-0) !important; +} + +a.cke_colorbox, +a.cke_colorauto, a.cke_colormore { + border-color: var(--border-0) !important; +} + +.cke_colorblock, .cke_colorblock a { + color: var(--txt-1); +} + +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; +} + +a:active.cke_colorbox, a:focus.cke_colorbox, a:hover.cke_colorbox { + background: var(--bg-3) !important; +} + +.cke_dialog_contents, .cke_dialog_body { + color: var(--txt-1) !important; + background: var(--bg-2) !important; +} + +.cke_dialog_footer, .cke_dialog_title { + background: var(--bg-1) !important; +} + +.cke_reset_all, .cke_reset_all * { + color: var(--txt-2) !important; +} + +.cke_dialog_page_contents a.cke_dialog_ui_button, a.cke_dialog_ui_button_cancel { + 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(--bg-3) !important; +} + +a.cke_dialog_tab_selected { + background: var(--bg-2) !important; +} + +a.cke_dialog_tab { + background: var(--bg-3) !important; +} + +select.cke_dialog_ui_input_select { + background-color: var(--bg-4) !important; +} + +.cke_button_on { + background: var(--bg-2) !important; +} + +.dropdown-menu>li>a, .dropdown-menu>span>li>a, .dropdown-menu>li>span>a { + color: var(--txt-1) !important; +} + +/* Icons */ +.js-help a, .js-help .fa-solid, .js-default-help a, .js-default-help .fa-solid, +.disp-group .control-label>a>span { + color: var(--col-400); +} + +.js-help a:hover, .js-help a:focus-visible, .js-help a:active, .js-help a:active:hover, .js-help a:focus:active, .js-help a:focus:hover, .js-help .fa-solid:hover, .js-help .fa-solid:focus-visible, .js-help .fa-solid:active, .js-help .fa-solid:active:hover, .js-help .fa-solid:focus:active, .js-help .fa-solid:focus:hover, .js-default-help a:hover, .js-default-help a:focus-visible, .js-default-help a:active, .js-default-help a:active:hover, .js-default-help a:focus:active, .js-default-help a:focus:hover, .js-default-help .fa-solid:hover, .js-default-help .fa-solid:focus-visible, .js-default-help .fa-solid:active, .js-default-help .fa-solid:active:hover, .js-default-help .fa-solid:focus:active, .js-default-help .fa-solid:focus:hover, +.disp-group .control-label>a>span:hover, .disp-group .control-label>a>span:focus-visible, .disp-group .control-label>a>span:active, .disp-group .control-label>a>span:active:hover, .disp-group .control-label>a>span:focus:active, .disp-group .control-label>a>span:focus:hover { + color: var(--col-500); +} + +.tdx-lookup-button-group a, .tdx-lookup-button-group button, .input-btn-group a, .input-btn-group button, +div.select2-container.select2-allowclear .select2-choice abbr { + color: var(--col-400); +} + +.tdx-lookup-button-group a:hover, .tdx-lookup-button-group a:focus-visible, .tdx-lookup-button-group a:active, .tdx-lookup-button-group a:active:hover, .tdx-lookup-button-group a:focus:active, .tdx-lookup-button-group a:focus:hover, .tdx-lookup-button-group button:hover, .tdx-lookup-button-group button:focus-visible, .tdx-lookup-button-group button:active, .tdx-lookup-button-group button:active:hover, .tdx-lookup-button-group button:focus:active, .tdx-lookup-button-group button:focus:hover, .input-btn-group a:hover, .input-btn-group a:focus-visible, .input-btn-group a:active, .input-btn-group a:active:hover, .input-btn-group a:focus:active, .input-btn-group a:focus:hover, .input-btn-group button:hover, .input-btn-group button:focus-visible, .input-btn-group button:active, .input-btn-group button:active:hover, .input-btn-group button:focus:active, .input-btn-group button:focus:hover { + color: var(--col-500); +} + +.tdx-icon__encircled--active { + background-color: var(--col-200) !important; +} + +.tdx-icon__encircled--active:hover { + background-color: var(--col-300) !important; +} + +.tdx-icon__encircled:not(.tdx-icon__encircled--active) { + background-color: var(--bg-0) !important; +} + +.tdx-icon__encircled:not(.tdx-icon__encircled--active):hover { + background-color: var(--col-200) !important; +} + +.tdx-user-icon, .tdx-multiuser-icon, +div.profile-image.red-bg, div.profile-image.green-bg, div.profile-image.red-bg, div.profile-image.blue-bg, div.profile-image.yellow-bg, div.profile-image.gray-bg, div.profile-image.initials.red-bg, div.profile-image.initials.green-bg, div.profile-image.initials.red-bg, div.profile-image.initials.blue-bg, div.profile-image.initials.yellow-bg, div.profile-image.initials.gray-bg { + background-color: var(--col-400) !important; + color: var(--col-100) !important; +} + +.tdx-widget-indicator-icon { + color: var(--col-600) !important; +} + +.tdx-dirty-indicator { + color: var(--col-400) !important; +} + +.tdx-hover-darken { + color: var(--col-400); +} + +.tdx-hover-darken:hover { + color: var(--col-300); +} + +.form-group>a, .form-group>.checkbox>a, .disp-group>a, .form-group>.control-label>a, .checkbox>label>a { + color: var(--col-400) !important; +} + +.form-group>a:hover, .form-group>.checkbox>a:hover, .disp-group>a:hover, .form-group>.control-label>a:hover, .checkbox>label>a:hover { + color: var(--col-500) !important; +} + +.k-table-th[data-role=columnsorter] .k-link:not(:has(>.k-sort-icon)):after { + color: var(--col-400) !important; +} + +.k-table-th[data-role=columnsorter] .k-link:not(:has(>.k-sort-icon)):hover:after { + color: var(--col-500) !important; +} + +.tdx-calendar .fa-plus { + color: var(--col-300) !important; +} + +/* Icons + Filters */ +.tdx-dropdown__menu-icon, +.tdx-dropdown--headline:after, +.tdx-dropdown:after, +.tdx-icon--search, +.k-icon +{ + filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)); +} + +/* Same but with !important */ +.tdx-icon__encircled--active .tdx-icon, +.tdx-icon--filter-purple, +.tdx-navigation-tabs__tab--active .tdx-close-x, +.tdx-icon--new-browser, +.tdx-close-x, button.tdx-close-x, +.tdx-action-menu__item--primary:after, +.tdx-action-menu-dropdown:after, +.tdx-icon.tdx-icon--hover-darken, .tdx-icon--hover-darken>.tdx-icon, +.tdx-dropdown__menu-icon, .tdx-dropdown--headline:after, .tdx-dropdown:after, .tdx-icon--search, .tdx-icon:not(.label), +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus-visible, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:hover +{ + filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)) !important; +} + +/* Hover + !important */ +.tdx-icon__encircled:hover .tdx-icon, +.tdx-close-x:hover, button.tdx-close-x:hover, +.tdx-icon.tdx-icon--hover-darken:hover, .tdx-icon.tdx-icon--hover-darken:focus, .tdx-icon--hover-darken>.tdx-icon:hover, .tdx-icon--hover-darken>.tdx-icon:focus, +.tdx-leftnav__item-expander:hover .tdx-icon, .tdx-leftnav__item-expander:focus .tdx-icon, +.tdx-action-menu-dropdown--no-arrow:hover .tdx-icon, .tdx-action-menu-dropdown--no-arrow.active .tdx-icon, +div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close +{ + filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)) brightness(125%) !important; +} + + ` + + //const customStyles = GM_getResourceText("IMPORTED_CSS"); + GM_addStyle(customStyles); + setCssFilters() + parseOtherElements() + +})(); \ No newline at end of file