diff --git a/tdx-enhanced.js b/tdx-enhanced.js index 1b73e2d..af7d279 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1,7 +1,7 @@ // ==UserScript== // @name tdx-enhanced // @namespace purdue-it -// @version 2026-05-08-01 +// @version 2026-09-14-02 // @description enhanced tdx coloring & formatting. follows system color scheme. // @author Purdue STEM IT - it@purdue.edu // @match https://service.purdue.edu/TDWorkManagement* @@ -14,1868 +14,839 @@ // @require https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.6.0/tinycolor.min.js // @downloadURL https://raw.github.itap.purdue.edu/ECN/tdx-userscript/refs/heads/beta/tdx-enhanced.js // @updateURL https://raw.github.itap.purdue.edu/ECN/tdx-userscript/refs/heads/beta/tdx-enhanced.js -// @grant GM_getResourceText // @grant GM_addStyle // @run-at document-end // ==/UserScript== - - -(function() { +(() => { 'use strict'; - const primaryTitle = "Purdue University IT" - - /* QUEUE COLORS */ - - //from main webqueue script - var colorsByQueue = { - 'aae': {'bg' : '#7030A0', 'txt' : 'white' }, - 'abe' : {'bg' : '#256f78', 'txt' : 'white'}, - 'ag' : {'bg' : '#99CC00', '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'}, - 'cos admin' : {'bg' : '#ddaa33', 'txt' : 'black'}, - 'dp' : {'bg' : '#0070A8', 'txt' : 'white'}, - 'doe': {'bg' : 'red', 'txt' : 'white'}, - 'ece' : {'bg' : '#FF6600', 'txt' : 'white'}, - 'ecnaccts' : {'bg' : '#98A4AE', 'txt' : 'white'}, - 'eaps' : {'bg' : '#629454', 'txt': 'white'}, - 'eee' : {'bg' : '#F66A6A', 'txt' : 'white'}, - 'ene': {'bg' : '#A45CD0', 'txt': 'white' }, - 'engineering' : {'bg' : '#FFD900', 'txt' : 'black'}, - 'engr - south' : {'bg' : '#663300', 'txt' : 'white'}, - 'engr - north' : {'bg' : '#663300', 'txt' : 'white'}, - 'epics': {'bg' : '#E399E3', 'txt' : 'black'}, - 'flex' : {'bg' : '#A7ECFF', 'txt' : 'black'}, - 'helpdesk' : {'bg' : '#98A4AE', 'txt' : 'white'}, - 'hhs' : {'bg' : '#CFB991', 'txt' : 'black'}, - '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'}, - 'pharmacy' : {'bg' : '#FF33FF', 'txt' : 'white'}, - 'physics' : {'bg' : '#07622f', 'txt': 'white'}, - //'potr' : {'bg' : '#663300', 'txt' : 'white'}, - 'president' : {'bg' : '#cfb991', 'txt' : 'black'}, - 'sacc' : {'bg' : '#434343', 'txt' : 'white'}, - 'science' : {'bg' : '#22dd94', 'txt' : 'black'}, - 'sitemgrs' : {'bg' : '#98A4AE', 'txt' : 'white'}, - 'stat' : {'bg' : '#ff6f44', 'txt' : 'white'}, - 'students' : {'bg' : '#98A4AE', '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'}, - 'vet' : {'bg' : '#CCFFFF', 'txt' : 'black'}, - //'wang' : {'bg' : '#000099', 'txt' : 'white'}, - 'web' : {'bg' : '#B46086', 'txt' : 'white'}, - 'windows' : {'bg' : '#b77729', 'txt' : 'white'}, - 'zsite' : {'bg' : '#98A4AE', 'txt' : 'white'}, + /* Install in a userscript manager on the matched Purdue TDX sites. The wrench + * beside search controls themes, links, highlights, AI visibility, and layout. + * Report columns are recognized by their displayed headings, not column order. + * Titles can contain !! text !!, ~~ text ~~, ## text ##, or %% text %%; a + * widget title of {"name":"Title","url":"https://..."} embeds that URL. + * Moment preserves TDX's local date/calendar semantics; tinycolor handles CSS + * colors. No build step is required. Settings stay in localStorage.userSettings. + */ + + // Department colors are shared with the original Purdue webqueue script. + const QUEUES = { + 'aae': {bg: '#7030A0', txt: 'white' }, + 'abe' : {bg: '#256f78', txt: 'white'}, + 'ag' : {bg: '#99CC00', 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'}, + 'cos admin' : {bg: '#ddaa33', txt: 'black'}, + 'dp' : {bg: '#0070A8', txt: 'white'}, + 'doe': {bg: 'red', txt: 'white'}, + 'ece' : {bg: '#FF6600', txt: 'white'}, + 'ecnaccts' : {bg: '#98A4AE', txt: 'white'}, + 'eaps' : {bg: '#629454', txt: 'white'}, + 'eee' : {bg: '#F66A6A', txt: 'white'}, + 'ene': {bg: '#A45CD0', txt: 'white' }, + 'engineering' : {bg: '#FFD900', txt: 'black'}, + 'engr - south' : {bg: '#663300', txt: 'white'}, + 'engr - north' : {bg: '#663300', txt: 'white'}, + 'epics': {bg: '#E399E3', txt: 'black'}, + 'flex' : {bg: '#A7ECFF', txt: 'black'}, + 'helpdesk' : {bg: '#98A4AE', txt: 'white'}, + 'hhs' : {bg: '#CFB991', txt: 'black'}, + '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'}, + 'pharmacy' : {bg: '#FF33FF', txt: 'white'}, + 'physics' : {bg: '#07622f', txt: 'white'}, + 'president' : {bg: '#cfb991', txt: 'black'}, + 'sacc' : {bg: '#434343', txt: 'white'}, + 'science' : {bg: '#22dd94', txt: 'black'}, + 'sitemgrs' : {bg: '#98A4AE', txt: 'white'}, + 'stat' : {bg: '#ff6f44', txt: 'white'}, + 'students' : {bg: '#98A4AE', 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'}, + 'vet' : {bg: '#CCFFFF', txt: 'black'}, + 'web' : {bg: '#B46086', txt: 'white'}, + 'windows' : {bg: '#b77729', txt: 'white'}, + 'zsite' : {bg: '#98A4AE', txt: 'white'}, }; - var colorsByTdxStatus = { - 'In Process': {'bg' : '#FF3C3C20', 'txt' : 'var(--txt-1)', 'border' : '#FF3C3C50'}, - 'New': {'bg' : '#FF3C3C20', 'txt' : 'var(--txt-1)', 'border' : '#FF3C3C50'}, - 'Assigned': {'bg' : '#FF3C3C20', 'txt' : 'var(--txt-1)', 'border' : '#FF3C3C50'}, - 'Awaiting Customer Response': {'bg' : '#33CC3320', 'txt' : 'var(--txt-1)', 'border' : '#33CC3350'}, - 'Pending External': {'bg' : '#FF990020', 'txt' : 'var(--txt-1)', 'border' : '#FF990050'}, - 'Pending Internal': {'bg' : '#FF990020', 'txt' : 'var(--txt-1)', 'border' : '#FF990050'}, - }; - - 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")}, - '##': {style: {background: 'var(--col-highlight-3)'}, type: 'highlight', re: new RegExp("\## (.*) \##","g")}, - '%%': {style: {background: 'var(--col-highlight-4)'}, type: 'highlight', re: new RegExp("\%% (.*) \%%","g")}, - } - - var colorScheme - - /* BEGIN FUNCTIONS */ - - //color manipulation via css filters: https://github.com/angel-rs/css-color-filter-generator - //modified to return an object instead of filter string - + // CSS filters recolor monochrome image/sprite icons. These matrix operations + // simulate the browser's RGB transforms; clamping after each step is essential. + // Adapted from https://github.com/angel-rs/css-color-filter-generator. 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; - } - } + constructor(r, g, b) { this.set(r, g, b); } + set(r, g, b) { + this.r = Math.max(0, Math.min(255, r)); + this.g = Math.max(0, Math.min(255, g)); + this.b = Math.max(0, Math.min(255, b)); + } + multiply(m) { + const {r, g, b} = this; + this.set(r * m[0] + g * m[1] + b * m[2], r * m[3] + g * m[4] + b * m[5], r * m[6] + g * m[7] + b * m[8]); + } + linear(slope, intercept = 0) { + this.set(this.r * slope + intercept * 255, this.g * slope + intercept * 255, this.b * slope + intercept * 255); + } + invert(value) { this.linear(1 - 2 * value, value); } + brightness(value) { this.linear(value); } + contrast(value) { this.linear(value, (1 - value) / 2); } + sepia(value) { + this.multiply([ + 1 - 0.607 * value, 0.769 * value, 0.189 * value, + 0.349 * value, 1 - 0.314 * value, 0.168 * value, + 0.272 * value, 0.534 * value, 1 - 0.869 * value + ]); + } + saturate(value) { + 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 + ]); + } + hueRotate(angle) { + const sin = Math.sin(angle * Math.PI / 180), cos = Math.cos(angle * Math.PI / 180); + 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 + ]); + } + // HSL adds perceptual error to the RGB distance used by the optimizer. + // Adapted from https://stackoverflow.com/a/9493060/2688027 (CC BY-SA). + hsl() { + const r = this.r / 255, g = this.g / 255, b = this.b / 255; + const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min; + const l = (max + min) / 2; + let h = 0, s = 0; + if (delta) { + s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min); + if (max === r) h = (g - b) / delta + (g < b ? 6 : 0); + else if (max === g) h = (b - r) / delta + 2; + else h = (r - g) / delta + 4; + h /= 6; + } + return {h: h * 100, s: s * 100, l: l * 100}; + } + } class Solver { - constructor(target, baseColor) { + constructor(target) { this.target = target; this.targetHSL = target.hsl(); - this.reusedColor = new Color(0, 0, 0); + this.color = new Color(0, 0, 0); // Reuse the color object in the hot loop. } - + // Search broadly up to three times, then refine the best result locally. 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; - } + let best = {loss: Infinity}; + for (let i = 0; i < 3 && best.loss > 25; i++) { + const result = this.spsa(5, [60, 180, 18000, 600, 1.2, 1.2], 15, [50, 20, 3750, 50, 100, 100], 1000); + if (result.loss < best.loss) best = result; } - return best; + const scale = best.loss + 1; + const refined = this.spsa(best.loss, [0.25, 0.25, 1, 0.25, 0.2, 0.2].map(value => value * scale), 2, best.values.slice(), 500); + if (refined.loss < best.loss) best = refined; + const fmt = (index, multiplier = 1) => Math.round(best.values[index] * multiplier); + return {filter: {invert: `${fmt(0)}%`, sepia: `${fmt(1)}%`, saturate: `${fmt(2)}%`, hue_rotate: `${fmt(3, 3.6)}deg`, brightness: `${fmt(4)}%`, contrast: `${fmt(5)}%`}}; } - - 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); + // SPSA estimates all six derivatives with only two loss evaluations per + // iteration. Decreasing step sizes stabilize the search around a minimum. + spsa(A, a, c, values, iterations) { + let best, bestLoss = Infinity; + const deltas = [], high = [], low = []; + for (let k = 0; k < iterations; k++) { + const step = c / Math.pow(k + 1, 1 / 6); 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]; + high[i] = values[i] + step * deltas[i]; + low[i] = values[i] - step * deltas[i]; } - - const lossDiff = this.loss(highArgs) - this.loss(lowArgs); - + const difference = this.loss(high) - this.loss(low); 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 value = values[i] - a[i] / (A + k + 1) * difference / (2 * step) * deltas[i]; + // Hue wraps around; other filters stay inside their valid bounds. + values[i] = i === 3 ? ((value % 100) + 100) % 100 : Math.max(0, Math.min(i === 2 ? 7500 : i >= 4 ? 200 : 100, value)); } - 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; + if (loss < bestLoss) { best = values.slice(); bestLoss = loss; } } + return {values: best, loss: bestLoss}; } - - loss(filters) { - // Argument is array of percentages. - const color = this.reusedColor; + loss(values) { + const color = this.color; 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) - ); + color.invert(values[0] / 100); + color.sepia(values[1] / 100); + color.saturate(values[2] / 100); + color.hueRotate(values[3] * 3.6); + color.brightness(values[4] / 100); + color.contrast(values[5] / 100); + const hsl = color.hsl(), target = this.target, targetHSL = this.targetHSL; + return Math.abs(color.r - target.r) + Math.abs(color.g - target.g) + Math.abs(color.b - target.b) + + Math.abs(hsl.h - targetHSL.h) + Math.abs(hsl.s - targetHSL.s) + Math.abs(hsl.l - 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)}%` - } + const TOOLS_ORIGIN = 'https://engineering.purdue.edu'; + const DATE_FORMAT = 'M/D/YYYY h:mm A'; + const LOCAL_FORMAT = 'YYYY-MM-DDTHH:mm'; + const DATE_COLUMNS = ['Modified', 'Created', 'Date Due', 'Due', 'Start', 'SLA Resolve By', 'SLA Respond By']; + const LINK_COLUMNS = ['Title', 'TicketID', 'TicketTitle']; + const REPORT_COLUMNS = new Set([...DATE_COLUMNS, ...LINK_COLUMNS, 'CSS Support', 'Status', 'Age', 'Requestor', 'Modified By', 'Prim Resp', 'Responsibility']); + const STATUS_COLORS = {'In Process': '#FF3C3C', New: '#FF3C3C', Assigned: '#FF3C3C', 'Awaiting Customer Response': '#33CC33', 'Pending External': '#FF9900', 'Pending Internal': '#FF9900'}; + const media = matchMedia('(prefers-color-scheme: dark)'); + const $ = (selector, root = document) => root.querySelector(selector); + const all = (selector, root = document) => [...root.querySelectorAll(selector)]; + const clamp = value => Math.max(0, Math.min(1, value)); + const make = (tag, className = '', text = '') => Object.assign(document.createElement(tag), {className, textContent: text}); + const defaults = {colorMode: 'auto', theme: '', linkBehavior: 'tabs', highlightBehavior: 'block', aiBehavior: 'aiEnable', customHighlights: []}; + let config = readSettings(); + let rules = compileHighlights(config.customHighlights); + let revision = 0; + let colorWindow; + let frameRequest = 0; + const pending = new Set(); + const filters = new Map(); + const rows = new WeakMap(); + const sources = new WeakMap(); + const decorations = new WeakMap(); + const originalLinks = new WeakMap(); + const calendars = new WeakMap(); + const editors = new WeakSet(); + const editorDocuments = new WeakMap(); + const shadowRoots = new WeakSet(); + + // Accept both the legacy JSON-inside-JSON format and plain arrays. A bad rule + // must not discard unrelated preferences or stop the rest of the script. + function readSettings() { + try { + const saved = JSON.parse(localStorage.getItem('userSettings')) || {}; + return {...defaults, ...saved, customHighlights: parseHighlights(saved.customHighlights ?? [])}; + } catch { + return {...defaults, customHighlights: []}; + } + } - //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 parseHighlights(value) { + try { + const parsed = typeof value === 'string' ? JSON.parse(value) : value; + return Array.isArray(parsed) ? parsed.filter(rule => rule && typeof rule === 'object' && rule.style && typeof rule.style === 'object') : []; + } catch { + return []; } } - 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; + // Escape literal delimiters fully; omit /g so repeated matches have no cursor. + function compileHighlights(custom) { + const escape = text => String(text).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const builtins = ['!!', '~~', '##', '%%'].map((value, i) => ({type: 'highlight', value, style: {background: `var(--col-highlight-${i + 1})`}})); + return [...builtins, ...custom].flatMap(rule => { + try { + const pattern = rule.type === 'highlight' ? `${escape(rule.value)} (.*) ${escape(rule.value)}` : rule.value; + return [{...rule, re: ['highlight', 'report-regex'].includes(rule.type) ? new RegExp(pattern) : null}]; + } catch { + return []; // One malformed user regex must not break every report. + } }); - - 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(); + // Keep the legacy storage shape so the external color editor and old installs + // can still read it. Merge form fields to preserve hidden settings such as layout. + function saveSettings() { + const form = $('#settingsForm'); + if (!form || !form.reportValidity()) return; + config = {...config, ...Object.fromEntries(new FormData(form)), stickyColumns: form.elements.stickyColumns.checked ? 'enabled' : ''}; + config.customHighlights = parseHighlights(config.customHighlights); + localStorage.setItem('userSettings', JSON.stringify({...config, customHighlights: JSON.stringify(config.customHighlights)})); + applySettings(); + } - if (!bestResult || result.loss < bestResult.loss) { - bestResult = result; - if (bestResult.loss <= 0.01) { - // exit early if good result is found - break; - } - } + function fillSettings() { + const form = $('#settingsForm'); + if (!form) return; + for (const [name, value] of Object.entries(config)) { + const field = form.elements.namedItem(name); + if (!field) continue; + if (field.type === 'checkbox') field.checked = value === 'enabled' || value === true; + else field.value = name === 'theme' && !value ? 'gold' : typeof value === 'object' ? JSON.stringify(value) : value; + } + for (const [name, variable] of [['primaryColor', 'col-400'], ['backgroundColor', 'bg-0']]) { + if (!config[name]) form.elements[name].value = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(`--${variable}`).trim()).toHexString(); } - - 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 { - } - } + // CSS owns presentation, including live OS mode changes and newly inserted AI + // controls. Settings refresh existing rows once; ordinary mutations stay scoped. + function applySettings() { + const root = document.documentElement; + const mode = ['lightMode', 'darkMode'].includes(config.colorMode) ? config.colorMode : (media.matches ? 'darkMode' : 'lightMode'); + root.classList.remove('lightMode', 'darkMode'); + root.classList.add(mode); + root.classList.toggle('tdx-hide-ai', config.aiBehavior === 'aiDisable'); + root.classList.toggle('tdx-sticky-columns', config.stickyColumns === 'enabled' || config.stickyColumns === true); + root.classList.toggle('tdx-wide-column', config.layout === '1_100-66-33'); + for (const scheme of ['dark', 'light']) { + const theme = ['gold', 'blue', 'green'].includes(config.theme) ? config.theme : ''; + // An unset theme used TDX's original default palette, not the Gold preset. + const accent = theme ? `var(--${scheme}-${theme}-accent)` : `var(--${scheme}-col-default)`; + const custom = config.theme === 'custom'; + root.style.setProperty(`--${scheme}-col-primary`, custom && tinycolor(config.primaryColor).isValid() ? config.primaryColor : accent); + root.style.setProperty(`--${scheme}-bg-primary`, custom && tinycolor(config.backgroundColor).isValid() ? config.backgroundColor : `var(--${scheme}-bg-default)`); } + localStorage.setItem('styles', config.colorMode); // Retain the original compatibility key. + setIconFilter(); + fillSettings(); + rules = compileHighlights(config.customHighlights); + revision++; + schedule(document); } - 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) - }); + // Solving costs thousands of color transforms. Cache by resolved accent; shadow + // trees inherit the variables from their host instead of solving again. + function setIconFilter() { + const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--col-400').trim()); + if (!accent.isValid()) return; + const key = accent.toHexString(); + if (!filters.has(key)) { + const {r, g, b} = accent.toRgb(); + filters.set(key, new Solver(new Color(r, g, b)).solve().filter); } - - //change tab title - if (header) { - let ticketTitle = header.childNodes[0].textContent - document.title = ticketTitle - } else { - return + for (const [name, value] of Object.entries(filters.get(key))) { + document.documentElement.style.setProperty(`--filter-${name.replace('_', '-')}`, value); } + } - //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) + // Remember only properties we change. Undo them before reapplying rules so + // switching themes/highlights does not leave stale colors behind. + function paint(element, style, priority = '') { + if (!style) return; + let saved = decorations.get(element); + if (!saved) decorations.set(element, saved = new Map()); + for (const [name, value] of Object.entries(style)) { + const property = name.startsWith('--') ? name : name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`); + if (!saved.has(property)) saved.set(property, {value: element.style.getPropertyValue(property), priority: element.style.getPropertyPriority(property)}); + element.style.setProperty(property, String(value), priority); } + } - //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") + function resetPaint(element) { + const saved = decorations.get(element); + if (!saved) return; + for (const [name, {value, priority}] of saved) { + if (value) element.style.setProperty(name, value, priority); + else element.style.removeProperty(name); } + decorations.delete(element); + } - //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() - } - }); - } + // Wrapping existing nodes preserves links and their event listeners. + function bubble(cell, style) { + let span = cell.firstElementChild; + if (!span?.classList.contains('qHighlight')) { + span = make('span', 'qHighlight'); + span.append(...cell.childNodes); + cell.append(span); } + paint(span, {borderColor: 'transparent', ...style}); + // TDX sets link colors with !important. Keep links clickable while letting + // the badge's selected foreground win in normal, visited, and hover states. + all('a', span).forEach(link => paint(link, {color: 'inherit'}, 'important')); + return span; } - 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) - } - }) - } - }) - - //force contrastive colors in descriptions with inline styles - document.querySelectorAll("div.moreToggle *:not(a), div.lessToggle *:not(a), div.wrap-text *:not(a)").forEach(textBlock=>{ - textBlock.style.color = "var(--txt-1)" - }) - document.querySelectorAll("#ToggleAIAgentAssist, .tdx-view-ticket-summary").forEach(AIAgentButton=>{ - let selected = settings('get','aiBehavior'); - if (selected == "aiDisable") { - AIAgentButton.style.display = "none" - } - }) - - 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 - } + function highlight(type, text, element) { + let match; + let style; + // Built-in delimiters have first-match precedence; custom rules can override. + for (let i = 0; i < rules.length; i++) { + const rule = rules[i]; + if (rule.type === 'highlight') { + const found = rule.re.exec(String(text)); + if (found) { + match = found; + style = {...rule.style}; + if (i < 4) i = 3; + else break; } - - //resize column 3 - for (const cls of col3.classList) { - if (cls.startsWith("col-md")) { - col3.classList.remove(cls) - col3.classList.add(col3WidthClass) - break - } + } else if (rule.type === type || (type === 'report' && rule.type === 'report-regex')) { + if (['person', 'report'].includes(rule.type) && rule.value !== text) continue; + if (rule.type === 'report-regex' && !rule.re.test(text)) continue; + style = {...rule.style}; + if (type === 'report') element.classList.add('reportTitle'); + if (type === 'person') element = bubble(element); + // Never mutate the stored style or build invalid one-digit hex alpha. + if (type === 'dateModified' && style.background && tinycolor(style.background).isValid()) { + style.background = tinycolor(style.background).setAlpha(clamp(text)).toRgbString(); } } } - - //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" - }); + if (!style) { + if (type === 'reply') style = {backgroundColor: 'var(--col-reply)'}; + if (type === 'userModified') style = {backgroundColor: 'var(--col-modified)'}; + if (type === 'dateModified' || type === 'age') style = {backgroundColor: `rgba(255,0,0,${clamp(text)})`}; } + const link = $('a', element); + if (style && match && link) { + if (config.highlightBehavior === 'block') link.textContent = match[1]; + else { + const span = make('span', '', link.textContent); + span.dataset.tdxHighlight = ''; + link.replaceChildren(span); + element = span; + paint(element, {lineHeight: '1.4'}); + } + } + paint(element, style); } - function invertHex(hex) { - return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase() + // TDX normally uses onclick popups. Report links become tabs; update/task + // actions retain the original centered-window dimensions in Tabs mode. + function handleLink(source, link) { + if (!originalLinks.has(link)) originalLinks.set(link, {onclick: link.onclick, target: link.getAttribute('target')}); + const original = originalLinks.get(link); + if (config.linkBehavior !== 'tabs') { + link.onclick = original.onclick; + if (original.target === null) link.removeAttribute('target'); + else link.target = original.target; + } else if (source === 'report') { + link.onclick = null; + link.target = '_blank'; + } else { + link.onclick = event => { + event.preventDefault(); + const w = screen.width / 1.75, h = screen.height / 1.25; + const left = (screen.width - w) / 2 + (window.screenLeft ?? 0); + const top = (screen.height - h) / 2 + (window.screenTop ?? 0); + const base = location.pathname.slice(0, location.pathname.lastIndexOf('/')); + window.open(`${base}/${source}${location.search}`, '_blank', `width=${w},height=${h},left=${left},top=${top}`); + }; + } } - 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); + // Keep raw dates/titles separately from rendered labels. Reprocessing "Yesterday" + // as a new date would otherwise corrupt timestamps after a report refresh. + function sourceText(cell) { + const current = cell.textContent.trim(); + const saved = sources.get(cell); + return saved && current === saved.output ? saved.input : current; + } - //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) + function parseTable(table) { + const headerRow = [...table.rows].find(row => [...row.cells].some(cell => cell.tagName === 'TH')); + if (!headerRow) return; + const headers = [...headerRow.cells].map(cell => ($('span', cell) || cell).textContent.trim()); + const schema = headers.join('|'); + if (!headers.some(header => REPORT_COLUMNS.has(header))) return; + for (const row of table.rows) { + if (row === headerRow || !row.querySelector('td') || row.closest('table') !== table) continue; + const cells = [...row.cells]; + const links = all('a', row); + const last = rows.get(row); + if (last && last.revision === revision && last.schema === schema && last.text === row.textContent && cells.length === last.cells.length && cells.every((cell, i) => cell === last.cells[i]) && links.length === last.links.length && links.every((link, i) => link === last.links[i])) continue; + resetPaint(row); + const item = {}; + // A checkbox header occupies its physical column. Never shift data when + // a row contains an input or a header lacks the old nested . + cells.forEach((cell, i) => { + const input = sourceText(cell); + resetPaint(cell); + all('a', cell).forEach(resetPaint); // Restore link colors when a badge is removed. + cell.classList.remove('light', 'dark'); + all('.qHighlight, [data-tdx-highlight]', cell).forEach(span => span.replaceWith(...span.childNodes)); + if (headers[i] === 'Title' && cell.textContent.trim() !== input) { + const link = $('a', cell); + if (link) link.textContent = input; } - //console.log("i:",header.cellIndex,txt) + if (headers[i]) item[headers[i]] = {cell, text: input}; }); - - //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) - }) + decorateRow(item, row); + // Store original source from the item, since formatting has now changed it. + Object.values(item).forEach(({cell, text}) => sources.set(cell, {input: text, output: cell.textContent.trim()})); + rows.set(row, {revision, schema, text: row.textContent, cells, links: all('a', row)}); } - - //updateHeading(element) - } - - function createHighlightBubble(element,bgColor,txtColor,borderColor = "#00000000") { - - //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.style.borderColor = borderColor - 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) - } + function decorateRow(item, row) { + const queue = item['CSS Support']; + const palette = queue && QUEUES[queue.text.toLowerCase()]; + if (palette) bubble(queue.cell, {backgroundColor: palette.bg, color: palette.txt}); + const status = item.Status; + const statusColor = status && STATUS_COLORS[status.text]; + if (statusColor) bubble(status.cell, {backgroundColor: `${statusColor}20`, color: 'var(--txt-1)', borderColor: `${statusColor}50`}); + for (const name of DATE_COLUMNS) { + if (!item[name] || !item[name].text) continue; + const {cell, text} = item[name]; + const date = moment(text); + if (!date.isValid()) continue; + cell.textContent = name === 'Modified' ? date.fromNow() : date.calendar(); + cell.title = text; + if (name === 'Created' || name === 'Start') continue; + const hours = moment().diff(date, 'hours', true); + const alpha = clamp(name === 'Modified' ? hours / 336 : 1 + hours / 120); + highlight('dateModified', alpha, cell); + cell.classList.add(alpha > 0.5 ? 'light' : 'dark'); } - - if ('Status' in item) { - let statusCell = item["Status"].cell - let statusText = item["Status"].txt - if (colorsByTdxStatus.hasOwnProperty(statusText)) { - let statusStyle = colorsByTdxStatus[statusText] - createHighlightBubble(statusCell, statusStyle.bg, statusStyle.txt, statusStyle.border) + if (item.Age) { + const days = Number(item.Age.text.slice(0, -1)); + if (days > 30) { + const alpha = clamp((days - 30) / 30); + highlight('age', alpha, item.Age.cell); + item.Age.cell.classList.add(alpha > 0.5 ? 'light' : 'dark'); } } - - //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 - } - } + const requestor = item.Requestor, modified = item['Modified By'], assigned = item['Prim Resp']; + if (requestor && modified && assigned) { + if (requestor.text === modified.text && requestor.text !== assigned.text && assigned.text !== 'Unassigned') highlight('reply', null, row); + if (modified.text !== requestor.text && modified.text !== assigned.text) highlight('userModified', null, modified.cell); } - - let detailedDates = ['Date Due','Due','Created','Start','SLA Resolve By','SLA Respond By'] - 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 - } - } + const person = assigned || item.Responsibility; + if (person) highlight('person', person.text, person.cell); + if (item.Title) highlight('title', item.Title.text, item.Title.cell); + for (const name of LINK_COLUMNS) { + const link = item[name] && $('a', item[name].cell); + if (link) handleLink('report', link); } + } - //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") - } + // Local datetime controls write back to TDX's original named inputs, which must + // remain in the form for its validators and submission format to keep working. + function enhanceCalendar(calendar) { + const existing = calendars.get(calendar); + if (existing?.input.isConnected) { existing.sync(); return; } + const input = make('input', calendar.className); + input.type = 'datetime-local'; + input.id = `${calendar.id}-new`; + input.setAttribute('aria-label', calendar.getAttribute('aria-label') || (calendar.id === 'txtStartDate' ? 'Start date and time' : 'End date and time')); + const label = make('span'); + const buttons = make('div', 'calBox'); + const sync = () => { + const date = moment(calendar.value, DATE_FORMAT); + input.value = date.isValid() ? date.format(LOCAL_FORMAT) : ''; + label.textContent = date.isValid() ? date.calendar() : ''; + input.disabled = calendar.disabled; + input.readOnly = calendar.readOnly; + }; + const commit = date => { + calendar.value = date?.isValid() ? date.format(DATE_FORMAT) : ''; + sync(); + calendar.dispatchEvent(new Event('input', {bubbles: true})); + calendar.dispatchEvent(new Event('change', {bubbles: true})); + }; + input.addEventListener('input', () => commit(input.value ? moment(input.value, LOCAL_FORMAT, true) : null)); + calendar.addEventListener('change', sync); + for (const [text, action, value] of [['+1 day', 'add', {days: 1}], ['+1 week', 'add', {weeks: 1}], ['+1 month', 'add', {months: 1}], ['12PM', 'set', {hour: 12, minute: 0}], ['5PM', 'set', {hour: 17, minute: 0}]]) { + const button = make('button', 'btn btn-calendar', text); + button.type = 'button'; + button.addEventListener('click', () => { + if (calendar.disabled || calendar.readOnly) return; + let date = moment(calendar.value, DATE_FORMAT); + if (!date.isValid()) date = moment(); + date[action](value); + const day = date.isoWeekday(); + if (day >= 5 && date.hour() * 60 + date.minute() > 17 * 60) date.add(8 - day, 'days').hour(8).minute(0); + else if (day > 5) date.add(8 - day, 'days'); + commit(date); + }); + buttons.append(button); } + calendar.style.display = 'none'; + calendar.after(input, label, buttons); + calendars.set(calendar, {input, sync}); + sync(); // Do not rewrite empty/invalid original fields during initialization. + } - //highlight modified/age red - let dueDates = ['Due','Date Due','SLA Resolve By','SLA Respond By'] - for (const dType of dueDates) { - if (dType in item) { - let dueDate = item[dType] - const ageThreshold = -5*24 - - let date = moment(dueDate.txt) - let duration = moment.duration(moment().diff(date)) - let hours = duration.asHours() - let alpha - if (hours < 0) { - alpha = 1 - ((hours / ageThreshold)) - alpha = alpha < 0? 0: alpha - } else { - alpha = 1 - } - - if (!Number.isNaN(hours)) { - let cell = dueDate.cell - handleHighlight("dateModified",alpha,cell) - cell.classList.add(alpha > 0.5 ? "light" : "dark") - } - } + function enhanceTicket() { + const header = $('#thTicket_spnTitle, #upTaskHeader>div>h1'); + if (!header) return; + const title = [...header.childNodes].filter(node => !node.classList?.contains('qBox')).map(node => node.textContent).join('').trim(); + if (title && document.title !== title) document.title = title; + const queue = $('#ctlAttribute2285 span.wrap-text')?.textContent.trim(); + let box = $('.qBox', header); + if (queue) { + if (!box) header.append(box = make('span', 'qBox')); + if (box.textContent !== queue) box.textContent = queue; + resetPaint(box); + const palette = QUEUES[queue.toLowerCase()]; + if (palette) paint(box, {backgroundColor: palette.bg, color: palette.txt}); + } else box?.remove(); + for (const [selector, source] of [['#btnUpdateTicket, #divUpdateFromActions', 'Update'], ['#liAddTicketTask>a', 'TicketTaskNew'], ['#divAddTaskTemplate>a', 'TicketAddTaskTemplate']]) { + all(selector).forEach(link => handleLink(source, link)); } + } - let age = ['Age'] - for (const dType of age) { - if (dType in item) { - let Age = item[dType] - const ageThreshold = 30 - - let days = Age.txt.slice(0,-1) + function enhanceHeading(heading) { + const text = heading.textContent; + resetPaint(heading); + heading.classList.remove('reportTitle'); + highlight('report', text, heading); + if (!text.startsWith('{')) return; + try { + const data = JSON.parse(text); + const widget = heading.closest('.tdx-dashboard__widget-container') || heading.parentElement?.parentElement?.parentElement; + const body = widget && $('.tdx-widget', widget); + const url = new URL(data.url, location.href); + if (!body || typeof data.name !== 'string' || typeof data.url !== 'string' || !['http:', 'https:'].includes(url.protocol)) return; + const frame = make('iframe', 'customEmbed'); + frame.src = url.href; + frame.title = data.name; + heading.textContent = data.name; + body.replaceWith(frame); + } catch { /* Ordinary headings and incomplete JSON are left as text. */ } + } - if (days > 30){ - days = days - 30 - let alpha = days / ageThreshold - alpha = alpha > 1 ? 1 : alpha - let cell = Age.cell - handleHighlight("age",alpha,cell) - cell.classList.add(alpha > 0.5 ? "light" : "dark") - } - } + // CKEditor runs in a separate document, so it needs both the stylesheet and + // current root variables. Do not persist theme colors into editable ticket HTML. + function styleEditor(editor) { + const doc = editor.document?.$; + if (!doc?.head) return; + const existing = doc.getElementById('tdxuserscript-style'); + if (existing && editorDocuments.get(doc) === revision) return; + if (!existing) { + const style = doc.createElement('style'); + style.id = 'tdxuserscript-style'; + style.textContent = customStyles; + doc.head.append(style); } - - // let Status = ['Status'] - // for (const dType of Status) { - // if (dType in item) { - // let CurrentStatus = item[dType] - // let cell = CurrentStatus.cell - // handleHighlight("status",CurrentStatus.txt,cell) - // } - // } - - //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) - } + doc.documentElement.classList.remove('lightMode', 'darkMode'); + doc.documentElement.classList.add(document.documentElement.classList.contains('darkMode') ? 'darkMode' : 'lightMode'); + doc.documentElement.style.cssText = document.documentElement.style.cssText; + editorDocuments.set(doc, revision); + } - //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) + function enhanceEditors() { + if (typeof CKEDITOR === 'undefined') return; + for (const editor of Object.values(CKEDITOR.instances)) { + if (!editors.has(editor)) { + editors.add(editor); + editor.on('contentDom', () => styleEditor(editor)); + editor.on('instanceReady', () => styleEditor(editor)); } + styleEditor(editor); } + } - //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) + // Open shadow roots isolate CSS. Inject once, then observe their own child + // changes; custom properties naturally inherit from the surrounding document. + function enhanceShadow(host) { + const root = host.shadowRoot; + if (!root) return; + if (!root.querySelector('#customStyles')) { + const style = make('style'); + style.id = 'customStyles'; + style.textContent = customStyles; + root.append(style); } - - //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) - } - } + if (!shadowRoots.has(root)) { + shadowRoots.add(root); + new MutationObserver(() => { + all('tdx-close-x', root).forEach(enhanceShadow); + }).observe(root, {childList: true, subtree: true}); } + all('tdx-close-x', root).forEach(enhanceShadow); } - 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 + // One animation-frame batch handles each burst of TDX updates. Disconnecting + // during our own edits prevents self-triggered observer loops and page freezes. + function schedule(root) { + pending.add(root); + if (!frameRequest) frameRequest = requestAnimationFrame(flush); + } - //restructure url for updating - let location = window.location.pathname - let baseHref = location.substr(0, location.lastIndexOf('/')) - href = `${baseHref}/${source}${window.location.search}` - break - } - } + const observer = new MutationObserver(records => { + for (const record of records) { + const target = record.target.nodeType === 1 ? record.target : record.target.parentElement; + if (!target || target.closest('style, script, #settingsMenu')) continue; + schedule(target.closest('table') || target); + } + }); - params = `width=${w}px,height=${h}px,left=${l}px,top=${t}px` - return window.open(href,'_blank',params) + function flush() { + frameRequest = 0; + // Include records queued since the observer last ran before disconnecting. + for (const record of observer.takeRecords()) { + const target = record.target.nodeType === 1 ? record.target : record.target.parentElement; + if (target && !target.closest('style, script, #settingsMenu')) pending.add(target.closest('table') || target); + } + observer.disconnect(); + const roots = [...pending].filter(root => root === document || root.isConnected); + pending.clear(); + try { + for (const root of roots) { + if (roots.some(other => other !== root && other.contains(root))) continue; + const select = selector => [...(root.matches?.(selector) ? [root] : []), ...all(selector, root)]; + select('table').forEach(parseTable); + select('#txtStartDate, #txtEndDate').forEach(enhanceCalendar); + select('.tdx-control-bar__title').forEach(enhanceHeading); + select('tdx-search-bar, .js_sidePanelX, tdx-close-x').forEach(enhanceShadow); } + enhanceTicket(); + enhanceEditors(); + injectToolbar(); + const headline = $('.tdx-headerbar-headline a'); + if (headline && headline.textContent !== 'Purdue University IT') headline.textContent = 'Purdue University IT'; + } finally { + observer.observe(document.body, {childList: true, subtree: true, characterData: true}); } - } - 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 - } + // The status request is independent of rendering. A failed request must say + // "unavailable", rather than claiming every Purdue service is operational. + async function loadStatus(container) { + const icon = $('#statusIcon', container), text = $('#statusText', container), time = $('#statusTime', container); + try { + const response = await fetch('https://it.purdue.edu/api-status/messages.php', {signal: AbortSignal.timeout(10000)}); + if (!response.ok) throw new Error('Status request failed'); + const {Results} = await response.json(); + if (!Array.isArray(Results)) throw new Error('Unexpected status response'); + const message = Results[1] || 'All systems operational.'; + text.textContent = message; + icon.className = `fa-solid ${/^(?=(?:\w+\s){0,5}?(?:operational|green)\b(?!-))(\w+(?:\s\w+){0,5})/m.test(message) ? 'fa-check' : 'fa-triangle-exclamation'}`; + const date = Results[0] && moment(Results[0]); + time.textContent = date?.isValid() ? date.fromNow() : ''; + } catch { + text.textContent = 'Service status unavailable. Open Status for details.'; + time.textContent = ''; + icon.className = 'fa-solid fa-triangle-exclamation'; } + } - 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 - } - } + // Keep the original toolbar element types and sibling structure: TDX styles + // buttons differently from links and lays out each toolbar sibling separately. + function injectToolbar() { + const search = $('#globalSearchBar'); + if (!search || $('#settingsButton')) return; + const radios = (name, choices) => choices.map(([value, label]) => `
`).join(''); + const wrapper = make('span'); + wrapper.innerHTML = ` +
`; + search.after(wrapper); + const form = $('form', wrapper), menu = $('#settingsMenu', wrapper), button = $('#settingsButton', wrapper); + button.addEventListener('click', () => { + const visible = menu.classList.toggle('show'); + menu.classList.toggle('hide', !visible); + button.setAttribute('aria-expanded', String(visible)); + }); + button.addEventListener('keydown', event => { + if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); button.click(); } + }); + form.addEventListener('submit', event => event.preventDefault()); + const custom = form.elements.customHighlights; + custom.addEventListener('input', () => { + try { + if (!Array.isArray(JSON.parse(custom.value))) throw new Error(); + custom.setCustomValidity(''); + } catch { custom.setCustomValidity('Enter a JSON array of highlight rules.'); } + }); + form.addEventListener('change', saveSettings); + $('#colorPopup', wrapper).addEventListener('click', () => { + colorWindow = window.open(`${TOOLS_ORIGIN}/ecnuds/tdx/userscript/coloreditor`, 'TDX Color Editor', 'popup=true'); + // The cross-origin editor initiates the colorsReady handshake on load. + }); + all('.tdx-toolbar-link').forEach(link => link.remove()); + const links = make('span'); + links.innerHTML = `
 +
`; + const status = $('#statusBox', links); + // Separate siblings prevent the links from stacking inside one flex item. + search.parentElement.prepend(...links.children); + fillSettings(); + loadStatus(status); + } - if (type=="reply" && customType=="reply") { - style = customHighlight.style + // Only the trusted editor popup may exchange settings. The SSO helper forwards + // its token solely to TDX Tools; never print keys or message payloads to the console. + window.addEventListener('message', event => { + if (event.origin !== TOOLS_ORIGIN || !colorWindow || event.source !== colorWindow || !event.data || typeof event.data !== 'object') return; + if (event.data.colorsReady) event.source.postMessage({customColors: config.customHighlights}, TOOLS_ORIGIN); + if (Array.isArray(event.data.colorData)) { + const field = $('#customHighlights'); + if (field) { + field.value = JSON.stringify(event.data.colorData); + field.setCustomValidity(''); + saveSettings(); } + } + }); - if (type=="dateModified" && customType=="dateModified") { - style = customHighlight.style - if (style.background) { - let a = Math.floor(txt * 255).toString(16); - style.background = style.background + a - } - } + function forwardSSO() { + if (location.pathname.toLowerCase() !== '/tdwebapi/api/auth/loginsso' || !window.opener) return; + const pre = $('pre'); + if (pre) { + window.opener.postMessage({tdxkey: pre.textContent}, TOOLS_ORIGIN); + window.close(); + } + } - if (type=="userModified" && customType=="userModified") { - style = customHighlight.style - } + window.addEventListener('storage', event => { + if (event.key === 'userSettings' || event.key === null) { + config = readSettings(); + applySettings(); + } + }); + media.addEventListener('change', () => { + if (config.colorMode === 'auto') applySettings(); + }); - if (type=="report" && customType=="report") { - if (customHighlight.value==txt) { - element.classList.add("reportTitle") - style = customHighlight.style - } - } + // Semantic variables let the large compatibility stylesheet share one palette. + // Keep selector order/specificity: TDX combines Bootstrap, Kendo, Select2, and + // CKEditor, so their overlapping overrides cannot safely be globally reordered. + function themeVariables(mode) { + const names = 'bg-0 bg-1 bg-2 bg-3 bg-4 bg-5 col-100 col-200 col-300 col-400 col-500 col-600 col-700 col-red col-green col-blue col-yellow col-link txt-0 txt-1 txt-2 txt-3 txt-4 txt-5 txt-invert txt-hue border-0 border-1 col-reply col-currentuser shadow-1 shadow-2'.split(' '); + const shared = 'col-highlight-1 col-highlight-2 col-highlight-3 col-highlight-4 col-modified'.split(' '); + return `color-scheme: ${mode};` + [...names.map(name => `--${name}: var(--${mode}-${name});`), ...shared.map(name => `--${name}: var(--dark-${name});`)].join(''); + } - 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}`; - } - // if (type=="status"){ - // if (txt=="In Process") { - // element.style.backgroundColor = "red" - // } - // } - if (type=="age") { - 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) - } - } - } - - function ckeinjectCustomCss(event) { - // var editor = event.editor - try { - if (!(event.document.$.getElementById("tdxuserscript-style"))) { - var style = event.document.$.createElement('style'); - style.id = "tdxuserscript-style" - style.innerHTML = customStyles - event.document.$.getElementsByTagName('head')[0].appendChild(style); - event.document.$.querySelectorAll("div, span").forEach((element) => { - element.style.color = "var(--txt-1)" - }) - } - } catch(error) {} - } - - //setup observer to watch report/table changes/refreshes - let observer = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - let t = mutation.target - if (t.querySelector("div > table")) { - //let table = t.firstElementChild.querySelector("table") - //console.log("Matched table",t) - - //potential cause of freezing issue - //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")) - } - - //force contrastive colors in comments/replies with inline styles - document.querySelectorAll("div.feed-item-text *:not(a)").forEach(textBlock=>{ - textBlock.style.color = "var(--txt-1)" - }) - - //parse dashboard widgets - if (t.id=="tdx-workmgmt-container-collection") { - parseOtherElements() - } - - //parse side panels - if (t.classList.contains("tdx-right-side-panel")) { - parseOtherElements() - } - if (t.classList.contains("sr-alert-region")){ // magic class - document.querySelectorAll("#divFieldSuggestionsResponsible, #divFieldSuggestionsPriority, #divFieldSuggestionsForm").forEach(AIAgentButton=>{ - let selected = settings('get','aiBehavior'); - if (selected == "aiDisable") { - AIAgentButton.style.display = "none" - } - }) - } - if (t.classList.contains("cke_button_label")){ - document.querySelectorAll(".cke_button__revisetext").forEach(AIAgentButton=>{ - let selected = settings('get','aiBehavior'); - if (selected == "aiDisable") { - AIAgentButton.style.display = "none" - } - }) - } - - let module = t.querySelector("div > .tdx-dashboard__widget-container") - if (module) { - updateHeading(t) - } - - try { - for (const instance in CKEDITOR.instances) { - ckeinjectCustomCss(CKEDITOR.instances[instance]); - } - } catch (error) {} - - //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: false, - subtree: true, - childList: true, - characterData: false - }); - } - - 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) - } - - } - - try { - CKEDITOR.on('instanceReady', function(event) { - ckeinjectCustomCss(event) - }) - } catch (error) {} - - 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 = ` + const 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%); @@ -1908,7 +879,6 @@ --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; @@ -1940,2286 +910,477 @@ --light-txt-hue: 0deg; --light-shadow-1: rgba(50, 50, 50, 0.1); --light-shadow-2: rgba(50, 50, 50, 0.06); - --body-text-color: var(--txt-0); -} - -@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-highlight-3: var(--dark-col-highlight-3); - --col-highlight-3: var(--dark-col-highlight-4); - --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-highlight-3: var(--dark-col-highlight-3); - --col-highlight-4: var(--dark-col-highlight-4); - --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-highlight-3: var(--dark-col-highlight-3); - --col-highlight-4: var(--dark-col-highlight-4); - --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-highlight-3: var(--dark-col-highlight-3); - --col-highlight-4: var(--dark-col-highlight-4); - --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); + --dark-bg-5: var(--dark-bg-4); + --light-txt-0: var(--light-txt-2); + --light-col-link: #4b3bb9; + --col-0: var(--col-400); + --col-1: var(--col-600); + --col-2: var(--col-500); } /* 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); -} +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 { 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; border-width: 2px; border-style: solid; 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; } -#settingsMenu.hide { - visibility: hidden; -} +/* 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; } -#settingsMenu h5 { - margin-bottom: 2px; -} +/* 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), .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; } -#settingsMenu h3 { - padding-top: 10px; - font-weight: 500; - font-size: 18px; -} +/* 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, .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, [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) !important; border-color: var(--border-0); } +button.ms-choice { background-color: var(--bg-0) !important; 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; } +.tdx-lookup-group.input-group { background-color: var(--bg-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, .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, .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), .tdx-searchbar__textbox--border, .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 { background-color: var(--bg-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, .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); background-color: var(--bg-0); } +.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, 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); } -#settingsForm .flex { - display: flex; - gap: 24px; - align-items: baseline; -} +/* 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, .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, .tdx-link:visited, .tdx-btn--link { color: var(--col-400) !important; } -#settingsForm .textBox { - display: flex; - flex-direction: column; - gap: 8px; -} +/* 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; } +.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, .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, .tdTilemd.secondary, .tdTilesm.secondary, .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: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); } -.customEmbed { - border: 0; - width: 100%; - height: 400px; -} +/* 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); } +.k-grid .k-table-tbody > .k-alt.k-table-row:not(.k-detail-row) { 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, .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, .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, .k-window-content { background-color: var(--bg-0) !important; } +.k-window-title { color: var(--col-500) !important; } +.k-button .k-svg-i-window, .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); } -.calBox { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - padding-top: 4px; - gap: 4px; - max-width: 220px; -} +/* 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; } -#statusBox:hover #statusMsg { - display: block; - width: 400px; - line-height: 22px; - padding: 8px; - right: 390px; -} +/* Tickets */ +.control-label, label.control-label, span.control-label { color: var(--txt-3) !important; } +.control-label~*, .black { color: var(--txt-1) !important; } +nav#divTabHeader, .TabButtonCell, .tab-row, .tdx-button-bar { background-color: var(--col-100) !important; } +.panel-default>.panel-heading, .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, .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-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, .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) !important; border-color: var(--border-0); } -#statusTime, #statusText { - margin: 6px; -} +/* Text Editor */ +.cke_editable { color: var(--txt-1); background-color: var(--bg-4); } +html .cke_editable { background-color: var(--bg-0) !important; color: var(--txt-1) !important; } +.cke_wysiwyg_div, .cke_wysiwyg_frame, .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; background-color: var(--bg-0) !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, 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, 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, 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, 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; } -#statusTime { - font-size: 12px; -} +/* 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; } +.icon-button { color: var(--col-400) !important; } +.tdx-view-ticket-summary #divSummaryHeading a, .tdx-view-ticket-summary #divSummaryHeading a #spnCopySummaryIcon { color: var(--col-400); } -#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; - border-width: 2px; - border-style: solid; - 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) !important; - border-color: var(--border-0); -} - -button.ms-choice { - background-color: var(--bg-0) !important; - 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; -} - -.tdx-lookup-group.input-group { - background-color: var(--bg-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 { - background-color: var(--bg-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); - background-color: var(--bg-0); -} - -.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); */ -} - -.k-grid .k-table-tbody > .k-alt.k-table-row:not(.k-detail-row) { - 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) !important; - border-color: var(--border-0); -} - -/* Text Editor */ -.cke_editable { - color: var(--txt-1); - background-color: var(--bg-4); -} - -html .cke_editable { - background-color: var(--bg-0) !important; - color: var(--txt-1) !important; -} - -.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; - background-color: var(--bg-0) !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; -} - -.icon-button { - color: var(--col-400) !important; -} - -.tdx-view-ticket-summary #divSummaryHeading a { - color: var(--col-400); -} - -.tdx-view-ticket-summary #divSummaryHeading a #spnCopySummaryIcon { - color: var(--col-400); -} - -/* 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)); -} - -#divDescription .wrap-text [style*="color"]:not([style*="color"] [style*="color"]), .feed-item-text [style*="color"]:not([style*="color"] [style*="color"]), #divCustomLoginPrompt [style*="color"]:not([style*="color"] [style*="color"]) { - filter: none !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)); } +#divDescription .wrap-text [style*="color"]:not([style*="color"] [style*="color"]), .feed-item-text [style*="color"]:not([style*="color"] [style*="color"]), #divCustomLoginPrompt [style*="color"]:not([style*="color"] [style*="color"]) { filter: none !important; } /* 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; -} +.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; -} - - ` - setInterval(() => { - document.querySelectorAll("table:not([data-parsed])").forEach(table => { - table.dataset.parsed = "true"; - parseTable(table.parentElement); - }); - }, 5000); - //const customStyles = GM_getResourceText("IMPORTED_CSS"); +.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; } +/* Live preferences and contrast: CSS also covers new content without DOM rewrites. */ +:root.tdx-hide-ai :is(#ToggleAIAgentAssist, .tdx-view-ticket-summary, #divFieldSuggestionsResponsible, #divFieldSuggestionsPriority, #divFieldSuggestionsForm, .cke_button__revisetext) { display: none !important; } +:root.tdx-sticky-columns .tdx-dashboard__column { position: sticky; align-self: flex-start; top: 4px; } +@media (min-width: 992px) { + :root.tdx-wide-column #divContent #Column2 { width: 66.666667%; } + :root.tdx-wide-column #divContent #Column3 { width: 33.333333%; } +} +/* Read-only descriptions also contain class-colored text; protect selected badge colors. */ +:is(div.moreToggle, div.lessToggle, div.wrap-text, div.feed-item-text) *:not(a, .qHighlight, .qHighlight *), +:is(#ttDescription, .cke_editable) [style*="color"]:not(a, .qHighlight, .qHighlight *) { color: var(--txt-1) !important; } +#settingsForm input[type=color] { display: block; max-width: 90px; } +:root, :root.lightMode { ${themeVariables('light')} } +:root.darkMode { ${themeVariables('dark')} } + + `; + + // Initialize after CSS exists: computed colors and editor injection depend on it. + // The first scheduled pass handles content already present at document-end. GM_addStyle(customStyles); - setCssFilters() - parseOtherElements() - + applySettings(); + forwardSSO(); })(); diff --git a/tdx-enhanced_OLD.js b/tdx-enhanced_OLD.js new file mode 100644 index 0000000..1b73e2d --- /dev/null +++ b/tdx-enhanced_OLD.js @@ -0,0 +1,4225 @@ +// ==UserScript== +// @name tdx-enhanced +// @namespace purdue-it +// @version 2026-05-08-01 +// @description enhanced tdx coloring & formatting. follows system color scheme. +// @author Purdue STEM IT - it@purdue.edu +// @match https://service.purdue.edu/TDWorkManagement* +// @match https://service.purdue.edu/tdworkmanagement* +// @match https://service.purdue.edu/TDNext* +// @match https://service.purdue.edu/TDWebApi* +// @match https://purdue.teamdynamixpreview.com/TDWorkManagement* +// @match https://purdue.teamdynamixpreview.com/TDNext* +// @require https://momentjs.com/downloads/moment.min.js +// @require https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.6.0/tinycolor.min.js +// @downloadURL https://raw.github.itap.purdue.edu/ECN/tdx-userscript/refs/heads/beta/tdx-enhanced.js +// @updateURL https://raw.github.itap.purdue.edu/ECN/tdx-userscript/refs/heads/beta/tdx-enhanced.js +// @grant GM_getResourceText +// @grant GM_addStyle +// @run-at document-end +// ==/UserScript== + + + +(function() { + 'use strict'; + + const primaryTitle = "Purdue University IT" + + /* QUEUE COLORS */ + + //from main webqueue script + var colorsByQueue = { + 'aae': {'bg' : '#7030A0', 'txt' : 'white' }, + 'abe' : {'bg' : '#256f78', 'txt' : 'white'}, + 'ag' : {'bg' : '#99CC00', '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'}, + 'cos admin' : {'bg' : '#ddaa33', 'txt' : 'black'}, + 'dp' : {'bg' : '#0070A8', 'txt' : 'white'}, + 'doe': {'bg' : 'red', 'txt' : 'white'}, + 'ece' : {'bg' : '#FF6600', 'txt' : 'white'}, + 'ecnaccts' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'eaps' : {'bg' : '#629454', 'txt': 'white'}, + 'eee' : {'bg' : '#F66A6A', 'txt' : 'white'}, + 'ene': {'bg' : '#A45CD0', 'txt': 'white' }, + 'engineering' : {'bg' : '#FFD900', 'txt' : 'black'}, + 'engr - south' : {'bg' : '#663300', 'txt' : 'white'}, + 'engr - north' : {'bg' : '#663300', 'txt' : 'white'}, + 'epics': {'bg' : '#E399E3', 'txt' : 'black'}, + 'flex' : {'bg' : '#A7ECFF', 'txt' : 'black'}, + 'helpdesk' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'hhs' : {'bg' : '#CFB991', 'txt' : 'black'}, + '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'}, + 'pharmacy' : {'bg' : '#FF33FF', 'txt' : 'white'}, + 'physics' : {'bg' : '#07622f', 'txt': 'white'}, + //'potr' : {'bg' : '#663300', 'txt' : 'white'}, + 'president' : {'bg' : '#cfb991', 'txt' : 'black'}, + 'sacc' : {'bg' : '#434343', 'txt' : 'white'}, + 'science' : {'bg' : '#22dd94', 'txt' : 'black'}, + 'sitemgrs' : {'bg' : '#98A4AE', 'txt' : 'white'}, + 'stat' : {'bg' : '#ff6f44', 'txt' : 'white'}, + 'students' : {'bg' : '#98A4AE', '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'}, + 'vet' : {'bg' : '#CCFFFF', 'txt' : 'black'}, + //'wang' : {'bg' : '#000099', 'txt' : 'white'}, + 'web' : {'bg' : '#B46086', 'txt' : 'white'}, + 'windows' : {'bg' : '#b77729', 'txt' : 'white'}, + 'zsite' : {'bg' : '#98A4AE', 'txt' : 'white'}, + }; + + var colorsByTdxStatus = { + 'In Process': {'bg' : '#FF3C3C20', 'txt' : 'var(--txt-1)', 'border' : '#FF3C3C50'}, + 'New': {'bg' : '#FF3C3C20', 'txt' : 'var(--txt-1)', 'border' : '#FF3C3C50'}, + 'Assigned': {'bg' : '#FF3C3C20', 'txt' : 'var(--txt-1)', 'border' : '#FF3C3C50'}, + 'Awaiting Customer Response': {'bg' : '#33CC3320', 'txt' : 'var(--txt-1)', 'border' : '#33CC3350'}, + 'Pending External': {'bg' : '#FF990020', 'txt' : 'var(--txt-1)', 'border' : '#FF990050'}, + 'Pending Internal': {'bg' : '#FF990020', 'txt' : 'var(--txt-1)', 'border' : '#FF990050'}, + }; + + 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")}, + '##': {style: {background: 'var(--col-highlight-3)'}, type: 'highlight', re: new RegExp("\## (.*) \##","g")}, + '%%': {style: {background: 'var(--col-highlight-4)'}, type: 'highlight', re: new RegExp("\%% (.*) \%%","g")}, + } + + var colorScheme + + /* BEGIN FUNCTIONS */ + + //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 + + 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) + } + }) + } + }) + + //force contrastive colors in descriptions with inline styles + document.querySelectorAll("div.moreToggle *:not(a), div.lessToggle *:not(a), div.wrap-text *:not(a)").forEach(textBlock=>{ + textBlock.style.color = "var(--txt-1)" + }) + document.querySelectorAll("#ToggleAIAgentAssist, .tdx-view-ticket-summary").forEach(AIAgentButton=>{ + let selected = settings('get','aiBehavior'); + if (selected == "aiDisable") { + AIAgentButton.style.display = "none" + } + }) + + 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,borderColor = "#00000000") { + + //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.style.borderColor = borderColor + 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) + } + } + + if ('Status' in item) { + let statusCell = item["Status"].cell + let statusText = item["Status"].txt + if (colorsByTdxStatus.hasOwnProperty(statusText)) { + let statusStyle = colorsByTdxStatus[statusText] + createHighlightBubble(statusCell, statusStyle.bg, statusStyle.txt, statusStyle.border) + } + } + + //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','SLA Resolve By','SLA Respond By'] + 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") + } + } + + //highlight modified/age red + let dueDates = ['Due','Date Due','SLA Resolve By','SLA Respond By'] + for (const dType of dueDates) { + if (dType in item) { + let dueDate = item[dType] + const ageThreshold = -5*24 + + let date = moment(dueDate.txt) + let duration = moment.duration(moment().diff(date)) + let hours = duration.asHours() + let alpha + if (hours < 0) { + alpha = 1 - ((hours / ageThreshold)) + alpha = alpha < 0? 0: alpha + } else { + alpha = 1 + } + + if (!Number.isNaN(hours)) { + let cell = dueDate.cell + handleHighlight("dateModified",alpha,cell) + cell.classList.add(alpha > 0.5 ? "light" : "dark") + } + } + } + + let age = ['Age'] + for (const dType of age) { + if (dType in item) { + let Age = item[dType] + const ageThreshold = 30 + + let days = Age.txt.slice(0,-1) + + if (days > 30){ + days = days - 30 + let alpha = days / ageThreshold + alpha = alpha > 1 ? 1 : alpha + let cell = Age.cell + handleHighlight("age",alpha,cell) + cell.classList.add(alpha > 0.5 ? "light" : "dark") + } + } + } + + // let Status = ['Status'] + // for (const dType of Status) { + // if (dType in item) { + // let CurrentStatus = item[dType] + // let cell = CurrentStatus.cell + // handleHighlight("status",CurrentStatus.txt,cell) + // } + // } + + //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}`; + } + // if (type=="status"){ + // if (txt=="In Process") { + // element.style.backgroundColor = "red" + // } + // } + if (type=="age") { + 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) + } + } + } + + function ckeinjectCustomCss(event) { + // var editor = event.editor + try { + if (!(event.document.$.getElementById("tdxuserscript-style"))) { + var style = event.document.$.createElement('style'); + style.id = "tdxuserscript-style" + style.innerHTML = customStyles + event.document.$.getElementsByTagName('head')[0].appendChild(style); + event.document.$.querySelectorAll("div, span").forEach((element) => { + element.style.color = "var(--txt-1)" + }) + } + } catch(error) {} + } + + //setup observer to watch report/table changes/refreshes + let observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + let t = mutation.target + if (t.querySelector("div > table")) { + //let table = t.firstElementChild.querySelector("table") + //console.log("Matched table",t) + + //potential cause of freezing issue + //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")) + } + + //force contrastive colors in comments/replies with inline styles + document.querySelectorAll("div.feed-item-text *:not(a)").forEach(textBlock=>{ + textBlock.style.color = "var(--txt-1)" + }) + + //parse dashboard widgets + if (t.id=="tdx-workmgmt-container-collection") { + parseOtherElements() + } + + //parse side panels + if (t.classList.contains("tdx-right-side-panel")) { + parseOtherElements() + } + if (t.classList.contains("sr-alert-region")){ // magic class + document.querySelectorAll("#divFieldSuggestionsResponsible, #divFieldSuggestionsPriority, #divFieldSuggestionsForm").forEach(AIAgentButton=>{ + let selected = settings('get','aiBehavior'); + if (selected == "aiDisable") { + AIAgentButton.style.display = "none" + } + }) + } + if (t.classList.contains("cke_button_label")){ + document.querySelectorAll(".cke_button__revisetext").forEach(AIAgentButton=>{ + let selected = settings('get','aiBehavior'); + if (selected == "aiDisable") { + AIAgentButton.style.display = "none" + } + }) + } + + let module = t.querySelector("div > .tdx-dashboard__widget-container") + if (module) { + updateHeading(t) + } + + try { + for (const instance in CKEDITOR.instances) { + ckeinjectCustomCss(CKEDITOR.instances[instance]); + } + } catch (error) {} + + //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: false, + subtree: true, + childList: true, + characterData: false + }); + } + + 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) + } + + } + + try { + CKEDITOR.on('instanceReady', function(event) { + ckeinjectCustomCss(event) + }) + } catch (error) {} + + 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-highlight-3: #ff3b1859; + --dark-col-highlight-4: #53f74d59; + --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-highlight-3: #f75f5f; + --light-col-highlight-4: #92ff84; + --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); + + --body-text-color: var(--txt-0); +} + +@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-highlight-3: var(--dark-col-highlight-3); + --col-highlight-3: var(--dark-col-highlight-4); + --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-highlight-3: var(--dark-col-highlight-3); + --col-highlight-4: var(--dark-col-highlight-4); + --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-highlight-3: var(--dark-col-highlight-3); + --col-highlight-4: var(--dark-col-highlight-4); + --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-highlight-3: var(--dark-col-highlight-3); + --col-highlight-4: var(--dark-col-highlight-4); + --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; + border-width: 2px; + border-style: solid; + 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) !important; + border-color: var(--border-0); +} + +button.ms-choice { + background-color: var(--bg-0) !important; + 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; +} + +.tdx-lookup-group.input-group { + background-color: var(--bg-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 { + background-color: var(--bg-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); + background-color: var(--bg-0); +} + +.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); */ +} + +.k-grid .k-table-tbody > .k-alt.k-table-row:not(.k-detail-row) { + 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) !important; + border-color: var(--border-0); +} + +/* Text Editor */ +.cke_editable { + color: var(--txt-1); + background-color: var(--bg-4); +} + +html .cke_editable { + background-color: var(--bg-0) !important; + color: var(--txt-1) !important; +} + +.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; + background-color: var(--bg-0) !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; +} + +.icon-button { + color: var(--col-400) !important; +} + +.tdx-view-ticket-summary #divSummaryHeading a { + color: var(--col-400); +} + +.tdx-view-ticket-summary #divSummaryHeading a #spnCopySummaryIcon { + color: var(--col-400); +} + +/* 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)); +} + +#divDescription .wrap-text [style*="color"]:not([style*="color"] [style*="color"]), .feed-item-text [style*="color"]:not([style*="color"] [style*="color"]), #divCustomLoginPrompt [style*="color"]:not([style*="color"] [style*="color"]) { + filter: none !important; +} + +/* 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; +} + + ` + setInterval(() => { + document.querySelectorAll("table:not([data-parsed])").forEach(table => { + table.dataset.parsed = "true"; + parseTable(table.parentElement); + }); + }, 5000); + //const customStyles = GM_getResourceText("IMPORTED_CSS"); + GM_addStyle(customStyles); + setCssFilters() + parseOtherElements() + +})();