Created
December 11, 2022 21:52
-
-
Save PhilipFlyvholm/32cc6d2e4ee9d32bbe791ea2188caa1b to your computer and use it in GitHub Desktop.
CSS Variable modifier boost for Arc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| let enabled = document.cookie.split(";").find((v, _) => v.trim().split("=")[0] === "variable_checker_enabled" && v.trim().split("=")[1] === 'true') | |
| let cssVars = null | |
| let crossOrigin = [] | |
| let modified = [] | |
| let host = window.location.hostname.startsWith('www.') ? window.location.hostname.substring(4) : window.location.hostname | |
| window.addEventListener("keypress", (e) => { | |
| if (e.key !== 'V' || !e.shiftKey || !e.ctrlKey) return | |
| if (enabled) disable() | |
| else enable() | |
| }); | |
| async function enable() { | |
| enabled = true | |
| document.cookie = "variable_checker_enabled=true; path=/"; | |
| if (!document.getElementById('variable-checker-root')) { | |
| let page = host + "'s variables" | |
| let loader = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="variable-checker-loader" class="variable-checker-loader-show" width="3rem" height="3rem" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> | |
| <circle cx="50" cy="50" r="32" stroke-width="8" stroke="#fe718d" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round"> | |
| <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform> | |
| </circle> | |
| </svg>` | |
| document.body.insertAdjacentHTML('beforeend', `<div id="variable-checker-root" class="variable-checker-show"><div id="variable-checker-dragbar"></div><button id="variable-checker-close">X</button><h2 id="variable-checker-title">${page}</h2><div id="variable-checker-container"></div>${loader}</div>`) | |
| await timeout(1) //Tick timeout to make the html above render such that it feels faster | |
| } else { | |
| document.getElementById('variable-checker-root').classList.add('variable-checker-show') | |
| } | |
| if (cssVars === null) { | |
| let result = await getAllCSSVariableNames() | |
| cssVars = result.cssVars | |
| crossOrigin = result.crossOrigin | |
| } | |
| const root = document.getElementById('variable-checker-root') | |
| const dragbar = document.getElementById('variable-checker-dragbar') | |
| const closeIcon = document.getElementById('variable-checker-close') | |
| render() | |
| closeIcon.addEventListener('click', () => { | |
| disable() | |
| }) | |
| let mouseLoc = null | |
| dragbar.addEventListener("mousedown", (e) => { | |
| mouseLoc = { offsetX: root.offsetLeft - e.screenX, offsetY: root.offsetTop - e.screenY } | |
| document.body.classList.add('variable-checker-unselectable') | |
| }) | |
| document.addEventListener("mouseup", () => { | |
| mouseLoc = null | |
| document.body.classList.remove('variable-checker-unselectable') | |
| }) | |
| document.addEventListener("mousemove", (e) => { | |
| if (mouseLoc == null) return | |
| let top = e.screenY + mouseLoc.offsetY | |
| let left = e.screenX + mouseLoc.offsetX | |
| if (top < 0) top = 0 | |
| if (left < 0) left = 0 | |
| if (top > window.innerHeight - root.offsetHeight) top = window.innerHeight - root.offsetHeight | |
| if (left > window.innerWidth - root.offsetWidth) left = window.innerWidth - root.offsetWidth | |
| root.style.top = top + "px" | |
| root.style.left = left + "px" | |
| }); | |
| window.addEventListener('resize', () => { | |
| root.style.top = null | |
| root.style.left = null | |
| }) | |
| } | |
| function disable() { | |
| enabled = false; | |
| document.cookie = "variable_checker_enabled=; path=/"; | |
| document.getElementById('variable-checker-root').classList.remove('variable-checker-show') | |
| } | |
| async function render() { | |
| const loader = document.getElementById('variable-checker-loader') | |
| loader.classList.add('variable-checker-loader-show') | |
| const elementVars = await getElementCSSVariables(cssVars) | |
| const rootContainer = document.getElementById('variable-checker-container') | |
| rootContainer.innerHTML = "" | |
| if (crossOrigin.length) { | |
| for (let key in crossOrigin) { | |
| let href = crossOrigin[key].href | |
| let triedToLoad = crossOrigin[key].triedToLoad | |
| let crossOriginContainer = document.createElement('div') | |
| let crossOriginElement = document.createElement('small') | |
| crossOriginElement.classList.add('variable-checker-cross-origin-text') | |
| crossOriginElement.innerHTML = | |
| triedToLoad | |
| ? `Can't load <a href=${href} target="_blank">${href}</a> because of cross-origin` | |
| : `Skipped load of <a href=${href} target="_blank">${href}</a> because of cross-origin` | |
| crossOriginContainer.appendChild(crossOriginElement) | |
| if (!triedToLoad) { | |
| let crossOriginButton = document.createElement('button') | |
| crossOriginButton.classList.add('variable-checker-button') | |
| crossOriginButton.innerText = 'Force load' | |
| crossOriginButton.addEventListener('click', () => { | |
| loadExternStylesheet(href); | |
| }) | |
| crossOriginContainer.appendChild(crossOriginButton) | |
| } | |
| rootContainer.appendChild(crossOriginContainer) | |
| } | |
| } | |
| if (elementVars && Object.keys(elementVars).length) { | |
| let searchInput = getSearchInput(rootContainer) | |
| rootContainer.appendChild(searchInput) | |
| for (let variable in elementVars) { | |
| let value = elementVars[variable] | |
| let container = document.createElement('div') | |
| container.classList.add("variable-checker-variable") | |
| container.setAttribute('data-vc-variable', variable) | |
| let inputContainer = document.createElement('div') | |
| inputContainer.classList.add("variable-checker-input-container") | |
| let input = document.createElement('input') | |
| input.type = "text" | |
| input.classList.add("variable-checker-variable-input") | |
| input.id = "variable-checker" + variable | |
| input.value = value | |
| let label_text = document.createElement('span'); | |
| label_text.innerHTML = variable; | |
| let label = document.createElement('label') | |
| label.classList.add("variable-checker-variable-label") | |
| label.setAttribute("for", "variable-checker" + variable) | |
| label.appendChild(label_text); | |
| let rightLabel = document.createElement('div') | |
| rightLabel.classList.add("variable-checker-variable-label-right") | |
| const resetSVG = getResetSVG() | |
| if(modified[variable]){ | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| } | |
| value = convertToHex(value) | |
| resetSVG.addEventListener('click', () => { | |
| if(!modified[variable]) return | |
| const original = modified[variable].original | |
| const color_indicator = rightLabel.getElementsByClassName('variable-checker-color-indicator-input') | |
| if(color_indicator.length){ | |
| color_indicator[0].value = original | |
| color_indicator[0].parentElement.style.background = original | |
| } | |
| input.value = original | |
| updateModifiers(rightLabel,original, input, variable, resetSVG, inputContainer, value) | |
| resetSVG.classList.remove("variable-checker-reset-show") | |
| setProperty(variable, value, null) | |
| }) | |
| rightLabel.appendChild(resetSVG) | |
| if (isColorCode(value)) { | |
| const color_indicator_label = getColorIndicator(variable, value, input, resetSVG) | |
| rightLabel.appendChild(color_indicator_label) | |
| }else if(isUnit(value)){ | |
| inputContainer.appendChild(getButtonContainer(input,variable,value,resetSVG)) | |
| } | |
| input.addEventListener('change', () => { | |
| const newVal = convertToHex(input.value); | |
| updateModifiers(rightLabel,newVal,input,variable, resetSVG, inputContainer, value) | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| setProperty(variable, value, newVal); | |
| }) | |
| input.addEventListener('keydown', (e) =>{ | |
| if(e.code === "ArrowUp"){ | |
| if(isUnit(input.value)){ | |
| input.value = modifyUnit(input.value, 1) | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| setProperty(variable, value, input.value); | |
| } | |
| }else if(e.code === "ArrowDown"){ | |
| if(isUnit(input.value)){ | |
| input.value = modifyUnit(input.value, -1) | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| setProperty(variable, value, input.value); | |
| } | |
| } | |
| }) | |
| label.appendChild(rightLabel) | |
| container.appendChild(label) | |
| inputContainer.prepend(input) | |
| container.appendChild(inputContainer) | |
| rootContainer.appendChild(container) | |
| } | |
| const generateButton = document.createElement('button') | |
| generateButton.id = "variable-checker-generate" | |
| generateButton.classList.add('variable-checker-button') | |
| generateButton.innerText = "Generate code" | |
| generateButton.addEventListener('click', () => { | |
| showGeneratedCode(rootContainer) | |
| }) | |
| rootContainer.appendChild(generateButton) | |
| } else { | |
| let noVariablesUsedText = document.createElement('p') | |
| noVariablesUsedText.id = 'variable-checker-not-found-text' | |
| noVariablesUsedText.innerText = 'No variables found :(' | |
| rootContainer.appendChild(noVariablesUsedText) | |
| } | |
| loader.classList.remove('variable-checker-loader-show') | |
| } | |
| function updateModifiers(rightLabel, newVal, input, variable, resetSVG, inputContainer, value){ | |
| const color_indicator = rightLabel.getElementsByClassName('variable-checker-color-indicator-label') | |
| if(isColorCode(newVal)){ | |
| if(!color_indicator.length){ | |
| const color_indicator_label = getColorIndicator(variable, newVal, input, resetSVG) | |
| rightLabel.appendChild(color_indicator_label) | |
| } | |
| }else{ | |
| for(const indicator of color_indicator){ | |
| rightLabel.removeChild(indicator) | |
| } | |
| } | |
| const modificationButtons = inputContainer.getElementsByClassName('variable-checker-number-mod-buttons') | |
| if(isUnit(newVal)){ | |
| if(!modificationButtons.length){ | |
| inputContainer.appendChild(getButtonContainer(input,variable,value,resetSVG)) | |
| } | |
| }else{ | |
| for(const container of modificationButtons){ | |
| inputContainer.removeChild(container) | |
| } | |
| } | |
| } | |
| function getButtonContainer(input, variable, value, resetSVG){ | |
| const buttonContainer = document.createElement('div') | |
| buttonContainer.classList.add("variable-checker-number-mod-buttons") | |
| const additionButton = document.createElement('button') | |
| additionButton.classList.add("variable-checker-mod-button") | |
| additionButton.classList.add("variable-checker-mod-addition") | |
| additionButton.innerText = "^" | |
| additionButton.addEventListener('click', () => { | |
| input.value = modifyUnit(input.value, 1) | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| setProperty(variable, value, input.value); | |
| }) | |
| buttonContainer.appendChild(additionButton) | |
| const subtractionButton = document.createElement('button') | |
| subtractionButton.classList.add("variable-checker-mod-button") | |
| subtractionButton.classList.add("variable-checker-mod-subtraction") | |
| subtractionButton.innerText = "^" | |
| subtractionButton.addEventListener('click', () => { | |
| input.value = modifyUnit(input.value, -1) | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| setProperty(variable, value, input.value); | |
| }) | |
| buttonContainer.appendChild(subtractionButton) | |
| return buttonContainer | |
| } | |
| function getColorIndicator(variable, value, input, resetSVG){ | |
| const color_indicator_label = document.createElement('label') | |
| color_indicator_label.classList.add('variable-checker-color-indicator-label') | |
| color_indicator_label.style.background = value | |
| const color_indicator_input = document.createElement('input') | |
| color_indicator_input.type = "color" | |
| color_indicator_input.classList.add('variable-checker-color-indicator-input') | |
| color_indicator_input.value = value | |
| color_indicator_input.addEventListener('input', () => { | |
| const newVal = color_indicator_input.value; | |
| color_indicator_label.style.background = newVal | |
| input.value = newVal; | |
| resetSVG.classList.add("variable-checker-reset-show") | |
| setProperty(variable, value, newVal); | |
| }); | |
| input.addEventListener('input', () => { | |
| const newVal = convertToHex(input.value); | |
| color_indicator_label.style.background = newVal | |
| color_indicator_input.value = newVal | |
| }) | |
| color_indicator_label.appendChild(color_indicator_input) | |
| return color_indicator_label | |
| } | |
| function getSearchInput(root){ | |
| const input = document.createElement('input') | |
| input.type = "text" | |
| input.placeholder = 'Search...' | |
| input.addEventListener('input', () => { | |
| const val = input.value | |
| if(val.trim() === ""){ | |
| const hiddenElements = root.getElementsByClassName('variable-checker-search-hide') | |
| for(const element of hiddenElements){ | |
| element.classList.remove('variable-checker-search-hide') | |
| } | |
| return | |
| } | |
| let containers = root.getElementsByClassName('variable-checker-variable') | |
| for(const container of containers){ | |
| const variable = container.getAttribute('data-vc-variable') | |
| if(variable.includes(val)) container.classList.remove('variable-checker-search-hide') | |
| else container.classList.add('variable-checker-search-hide') | |
| } | |
| }) | |
| return input | |
| } | |
| function showGeneratedCode(rootContainer) { | |
| rootContainer.innerHTML = "" | |
| const textArea = document.createElement('textarea') | |
| textArea.id = "variable-checker-generate-textarea" | |
| textArea.readOnly = true | |
| let sb = `body {` | |
| for (const key in modified) { | |
| if(!modified[key]) continue | |
| const value = modified[key].current | |
| if(value === modified[key].original) continue | |
| sb += ` | |
| ${key}: ${value};` | |
| } | |
| sb += ` | |
| }` | |
| textArea.value = sb | |
| rootContainer.appendChild(textArea) | |
| const backButton = document.createElement('button') | |
| backButton.id = "variable-checker-generate-back" | |
| backButton.classList.add('variable-checker-button') | |
| backButton.innerText = "Back" | |
| backButton.addEventListener('click', () => { | |
| render() | |
| }) | |
| rootContainer.appendChild(backButton) | |
| } | |
| function getAllCSSVariableNames(styleSheets = document.styleSheets) { | |
| return new Promise(resolve => { | |
| var cssVars = []; | |
| var crossOrigin = []; | |
| // loop each stylesheet | |
| Object.keys(styleSheets).forEach( | |
| (i) => { | |
| const sheet = styleSheets[i]; | |
| if (sheet.href && !sheet.href.startsWith(window.location.origin)) { | |
| crossOrigin.push({ href: sheet.href, triedToLoad: false }) | |
| return | |
| } | |
| try { | |
| const cssRules = sheet.cssRules; | |
| Object.keys(cssRules).forEach((j) => { | |
| const rules = cssRules[j]; | |
| if (!rules["style"]) return; //If falsely then return | |
| const styles = rules.style; | |
| Object.keys(styles).forEach((k) => { | |
| const name = styles[k]; | |
| if (name.startsWith('--') && cssVars.indexOf(name) == -1) { | |
| cssVars.push(name); | |
| } | |
| }) | |
| }, cssRules) | |
| } catch (e) { | |
| console.log("Could not fetch all stylesheets", e) | |
| } | |
| } | |
| ) | |
| resolve({ cssVars: cssVars, crossOrigin: crossOrigin }) | |
| }) | |
| } | |
| function getElementCSSVariables(allCSSVars, element = document.body, pseudo) { | |
| return new Promise(resolve => { | |
| var elStyles = window.getComputedStyle(element, pseudo); | |
| var cssVars = {}; | |
| allCSSVars.forEach((key) => { | |
| let value = elStyles.getPropertyValue(key) | |
| if (value) { cssVars[key] = value; } | |
| }) | |
| resolve(cssVars); | |
| }) | |
| } | |
| function loadExternStylesheet(href) { | |
| const loader = document.getElementById('variable-checker-loader') | |
| loader.classList.add('variable-checker-loader-show') | |
| timeout(1) | |
| var xhttp = new XMLHttpRequest(); | |
| xhttp.onload = function () { | |
| let sheet = new CSSStyleSheet(); | |
| sheet.replaceSync(this.responseText) | |
| const cssRules = sheet.cssRules; | |
| Object.keys(cssRules).forEach((j) => { | |
| const rules = cssRules[j]; | |
| if (!rules["style"]) return; //If falsely then return | |
| const styles = rules.style; | |
| Object.keys(styles).forEach((k) => { | |
| const name = styles[k]; | |
| if (name.startsWith('--') && cssVars.indexOf(name) == -1) { | |
| cssVars.push(name); | |
| } | |
| }) | |
| }, cssRules) | |
| crossOrigin = crossOrigin.filter((item) => item.href !== href) // Remove from list | |
| render() | |
| } | |
| xhttp.onerror = function () { | |
| crossOrigin = crossOrigin.map((item) => item.href !== href ? item : { href: item.href, triedToLoad: true }) | |
| render() | |
| } | |
| xhttp.open("GET", href, true); | |
| xhttp.send(); | |
| } | |
| window.addEventListener('load', () => { | |
| if (enabled) enable() | |
| }) | |
| //Utils | |
| function setProperty(variable, current, newVal, priority = "important", element = document.body) { | |
| if(modified[variable]){ | |
| if(newVal) modified[variable].current = newVal | |
| else modified[variable] = null | |
| }else if(newVal){ | |
| modified[variable] = {current: newVal, original: current} | |
| } | |
| if(newVal) element.style.setProperty(variable, newVal, priority) | |
| else element.style.removeProperty(variable) | |
| } | |
| function hslToHex(h, s, l) { | |
| l /= 100; | |
| const a = s * Math.min(l, 1 - l) / 100; | |
| const f = n => { | |
| const k = (n + h / 30) % 12; | |
| const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); | |
| return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed | |
| }; | |
| return `#${f(0)}${f(8)}${f(4)}`; | |
| } | |
| function componentToHex(c) { | |
| var hex = c.toString(16); | |
| return hex.length == 1 ? "0" + hex : hex; | |
| } | |
| function convertToHex(c) { | |
| const nameConverted = getColorFromName(c) | |
| if (nameConverted) return nameConverted | |
| if (c.startsWith("#")) { | |
| if (c.length === 4) { | |
| return "#" + c[1] + c[1] + c[2] + c[2] + c[3] + c[3] //Convert #fff to #ffffff or #f80 to #ff8800 | |
| } | |
| return c | |
| } | |
| c = c.toLowerCase() | |
| if (c.startsWith('rgb')) { | |
| c = c.substring(4, c.length - 1).split(",") | |
| const r = parseInt(c[0]); | |
| const g = parseInt(c[1]); | |
| const b = parseInt(c[2]); | |
| return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); | |
| } | |
| if (c.startsWith('hsl')) { | |
| c = c.substring(4, c.length - 1).split(","); | |
| const h = parseInt(c[0]); | |
| const s = parseInt(c[1].substring(0, c[1].length - 1)) | |
| const l = parseInt(c[2].substring(0, c[2].length - 1)) | |
| return hslToHex(h, s, l) | |
| } | |
| return c //It is not a color so we just return | |
| } | |
| function isColorCode(code) { | |
| const s = new Option().style; | |
| s.color = code; | |
| return s.color !== ''; | |
| } | |
| const unitRegex = /(^ *-?\d+(.\d+)?)(px|pt|pc|cm|mm|in|em|rem|(ex)|ch|vw|vh|vmin|vmax|%)?$/ | |
| function isUnit(value){ | |
| return unitRegex.test(value) | |
| } | |
| function modifyUnit(value, addition){ | |
| let reg = unitRegex.exec(value.trim()) | |
| const intValue = parseFloat(reg[1])+addition | |
| const unit = reg[3] ?? "px" | |
| return `${intValue}${unit}` | |
| } | |
| function timeout(ms) { | |
| return new Promise(resolve => setTimeout(resolve, ms)); | |
| } | |
| function getColorFromName(s) { | |
| let colors = { | |
| "aliceblue": "#f0f8ff", | |
| "antiquewhite": "#faebd7", | |
| "aqua": "#00ffff", | |
| "aquamarine": "#7fffd4", | |
| "azure": "#f0ffff", | |
| "beige": "#f5f5dc", | |
| "bisque": "#ffe4c4", | |
| "black": "#000000", | |
| "blanchedalmond": "#ffebcd", | |
| "blue": "#0000ff", | |
| "blueviolet": "#8a2be2", | |
| "brown": "#a52a2a", | |
| "burlywood": "#deb887", | |
| "cadetblue": "#5f9ea0", | |
| "chartreuse": "#7fff00", | |
| "chocolate": "#d2691e", | |
| "coral": "#ff7f50", | |
| "cornflowerblue": "#6495ed", | |
| "cornsilk": "#fff8dc", | |
| "crimson": "#dc143c", | |
| "cyan": "#00ffff", | |
| "darkblue": "#00008b", | |
| "darkcyan": "#008b8b", | |
| "darkgoldenrod": "#b8860b", | |
| "darkgray": "#a9a9a9", | |
| "darkgreen": "#006400", | |
| "darkgrey": "#a9a9a9", | |
| "darkkhaki": "#bdb76b", | |
| "darkmagenta": "#8b008b", | |
| "darkolivegreen": "#556b2f", | |
| "darkorange": "#ff8c00", | |
| "darkorchid": "#9932cc", | |
| "darkred": "#8b0000", | |
| "darksalmon": "#e9967a", | |
| "darkseagreen": "#8fbc8f", | |
| "darkslateblue": "#483d8b", | |
| "darkslategray": "#2f4f4f", | |
| "darkslategrey": "#2f4f4f", | |
| "darkturquoise": "#00ced1", | |
| "darkviolet": "#9400d3", | |
| "deeppink": "#ff1493", | |
| "deepskyblue": "#00bfff", | |
| "dimgray": "#696969", | |
| "dimgrey": "#696969", | |
| "dodgerblue": "#1e90ff", | |
| "firebrick": "#b22222", | |
| "floralwhite": "#fffaf0", | |
| "forestgreen": "#228b22", | |
| "fuchsia": "#ff00ff", | |
| "gainsboro": "#dcdcdc", | |
| "ghostwhite": "#f8f8ff", | |
| "goldenrod": "#daa520", | |
| "gold": "#ffd700", | |
| "gray": "#808080", | |
| "green": "#008000", | |
| "greenyellow": "#adff2f", | |
| "grey": "#808080", | |
| "honeydew": "#f0fff0", | |
| "hotpink": "#ff69b4", | |
| "indianred": "#cd5c5c", | |
| "indigo": "#4b0082", | |
| "ivory": "#fffff0", | |
| "khaki": "#f0e68c", | |
| "lavenderblush": "#fff0f5", | |
| "lavender": "#e6e6fa", | |
| "lawngreen": "#7cfc00", | |
| "lemonchiffon": "#fffacd", | |
| "lightblue": "#add8e6", | |
| "lightcoral": "#f08080", | |
| "lightcyan": "#e0ffff", | |
| "lightgoldenrodyellow": "#fafad2", | |
| "lightgray": "#d3d3d3", | |
| "lightgreen": "#90ee90", | |
| "lightgrey": "#d3d3d3", | |
| "lightpink": "#ffb6c1", | |
| "lightsalmon": "#ffa07a", | |
| "lightseagreen": "#20b2aa", | |
| "lightskyblue": "#87cefa", | |
| "lightslategray": "#778899", | |
| "lightslategrey": "#778899", | |
| "lightsteelblue": "#b0c4de", | |
| "lightyellow": "#ffffe0", | |
| "lime": "#00ff00", | |
| "limegreen": "#32cd32", | |
| "linen": "#faf0e6", | |
| "magenta": "#ff00ff", | |
| "maroon": "#800000", | |
| "mediumaquamarine": "#66cdaa", | |
| "mediumblue": "#0000cd", | |
| "mediumorchid": "#ba55d3", | |
| "mediumpurple": "#9370db", | |
| "mediumseagreen": "#3cb371", | |
| "mediumslateblue": "#7b68ee", | |
| "mediumspringgreen": "#00fa9a", | |
| "mediumturquoise": "#48d1cc", | |
| "mediumvioletred": "#c71585", | |
| "midnightblue": "#191970", | |
| "mintcream": "#f5fffa", | |
| "mistyrose": "#ffe4e1", | |
| "moccasin": "#ffe4b5", | |
| "navajowhite": "#ffdead", | |
| "navy": "#000080", | |
| "oldlace": "#fdf5e6", | |
| "olive": "#808000", | |
| "olivedrab": "#6b8e23", | |
| "orange": "#ffa500", | |
| "orangered": "#ff4500", | |
| "orchid": "#da70d6", | |
| "palegoldenrod": "#eee8aa", | |
| "palegreen": "#98fb98", | |
| "paleturquoise": "#afeeee", | |
| "palevioletred": "#db7093", | |
| "papayawhip": "#ffefd5", | |
| "peachpuff": "#ffdab9", | |
| "peru": "#cd853f", | |
| "pink": "#ffc0cb", | |
| "plum": "#dda0dd", | |
| "powderblue": "#b0e0e6", | |
| "purple": "#800080", | |
| "rebeccapurple": "#663399", | |
| "red": "#ff0000", | |
| "rosybrown": "#bc8f8f", | |
| "royalblue": "#4169e1", | |
| "saddlebrown": "#8b4513", | |
| "salmon": "#fa8072", | |
| "sandybrown": "#f4a460", | |
| "seagreen": "#2e8b57", | |
| "seashell": "#fff5ee", | |
| "sienna": "#a0522d", | |
| "silver": "#c0c0c0", | |
| "skyblue": "#87ceeb", | |
| "slateblue": "#6a5acd", | |
| "slategray": "#708090", | |
| "slategrey": "#708090", | |
| "snow": "#fffafa", | |
| "springgreen": "#00ff7f", | |
| "steelblue": "#4682b4", | |
| "tan": "#d2b48c", | |
| "teal": "#008080", | |
| "thistle": "#d8bfd8", | |
| "tomato": "#ff6347", | |
| "turquoise": "#40e0d0", | |
| "violet": "#ee82ee", | |
| "wheat": "#f5deb3", | |
| "white": "#ffffff", | |
| "whitesmoke": "#f5f5f5", | |
| "yellow": "#ffff00", | |
| "yellowgreen": "#9acd32" | |
| } | |
| return colors[s] | |
| } | |
| function getResetSVG(){ | |
| const svg = document.createElement('div') | |
| svg.classList.add('variable-checker-reset') | |
| svg.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M125.7 160H176c17.7 0 32 14.3 32 32s-14.3 32-32 32H48c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32s32 14.3 32 32v51.2L97.6 97.6c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0L125.7 160z"/></svg>` | |
| return svg | |
| } | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #variable-checker-root { | |
| background-color: white; | |
| position: fixed; | |
| min-width: 250px; | |
| z-index: 99999; | |
| width: 20vw; | |
| height: 90vh; | |
| top: 5vh; | |
| right: 10px; | |
| padding-bottom: 1%; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 0 4px grey; | |
| display: none; | |
| flex-direction: column; | |
| opacity: 0.9; | |
| font-size: 14px; | |
| transition: opacity 0.25s; | |
| } | |
| #variable-checker-root * { | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| color: black; | |
| font-size: inherit; | |
| } | |
| #variable-checker-root.variable-checker-show { | |
| display: flex; | |
| } | |
| #variable-checker-root:hover { | |
| opacity: 1; | |
| } | |
| #variable-checker-root #variable-checker-title { | |
| text-align: center; | |
| font-weight: bold; | |
| color: #4b4b4b; | |
| margin: 1rem 0; | |
| word-break: break-all; | |
| font-size: 1em; | |
| } | |
| #variable-checker-root #variable-checker-container { | |
| color: black; | |
| display: flex; | |
| gap: 1rem; | |
| flex-direction: column; | |
| flex: 1; | |
| overflow: scroll; | |
| padding: 0 1rem; | |
| } | |
| #variable-checker-root .variable-checker-variable { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #variable-checker-root .variable-checker-variable.variable-checker-search-hide{ | |
| display: none; | |
| } | |
| #variable-checker-root .variable-checker-input-container { | |
| display: flex; | |
| } | |
| #variable-checker-root .variable-checker-variable-input{ | |
| flex: 1; | |
| } | |
| #variable-checker-root input[type="text"] { | |
| border: none; | |
| background: #f5f5f5; | |
| padding: 10px; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| transition: background .25s; | |
| } | |
| #variable-checker-root input[type="text"]:hover { | |
| background: #e4e4e4; | |
| } | |
| #variable-checker-root .variable-checker-variable-label, #variable-checker-root .variable-checker-variable-label-right { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| #variable-checker-root .variable-checker-color-indicator-input { | |
| width: 0; | |
| height: 0; | |
| visibility: hidden; | |
| } | |
| #variable-checker-root .variable-checker-color-indicator-label { | |
| border: 1px solid #4b4b4b; | |
| width: 20px; | |
| height: 20px; | |
| padding: 0; | |
| outline: none; | |
| margin: .5rem; | |
| } | |
| #variable-checker-root #variable-checker-dragbar { | |
| width: 100%; | |
| height: 7px; | |
| background: #4b4b4b; | |
| transition: background .5s; | |
| } | |
| #variable-checker-root #variable-checker-dragbar:hover { | |
| background: #363636; | |
| cursor: grab; | |
| } | |
| #variable-checker-root #variable-checker-dragbar::after { | |
| content: '...'; | |
| display: block; | |
| color: white; | |
| transform: translateY(-50%); | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| .variable-checker-unselectable { | |
| -webkit-user-select: none; | |
| -webkit-touch-callout: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| #variable-checker-root small.variable-checker-cross-origin-text { | |
| word-break: break-all; | |
| font-size: .8rem; | |
| margin-bottom: 0; | |
| padding: 0; | |
| } | |
| #variable-checker-root button.variable-checker-button { | |
| margin: 0; | |
| width: 100%; | |
| font-size: .8rem; | |
| text-align: center; | |
| background: #5c5c5c; | |
| color: white; | |
| border: none; | |
| padding: .5rem 1px; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| transition: background .25s; | |
| } | |
| #variable-checker-root button.variable-checker-button:hover { | |
| background: #505050; | |
| cursor: pointer; | |
| } | |
| #variable-checker-root #variable-checker-not-found-text { | |
| text-align: center; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| } | |
| #variable-checker-root button#variable-checker-close { | |
| position: absolute; | |
| font-size: .6rem; | |
| width: 1.1rem; | |
| height: 1.1rem; | |
| line-height: 1rem; | |
| border-radius: 10px; | |
| font-weight: bold; | |
| background: transparent; | |
| top: 0; | |
| right: 0; | |
| transform: translate(25%,-25%); | |
| background: #5d5d5d; | |
| color: white; | |
| text-align: center; | |
| transition: color .25s background .25s; | |
| } | |
| #variable-checker-root button#variable-checker-close:hover{ | |
| background: #474747; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| #variable-checker-root svg#variable-checker-loader{ | |
| display: none; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%,-50%); | |
| } | |
| #variable-checker-root svg#variable-checker-loader.variable-checker-loader-show { | |
| display: block; | |
| } | |
| #variable-checker-root textarea#variable-checker-generate-textarea { | |
| flex: 1; | |
| border: 1px solid black; | |
| border-radius: 10px; | |
| padding: .5rem; | |
| background: white; | |
| } | |
| #variable-checker-root .variable-checker-reset{ | |
| width: 1em; | |
| height: 1em; | |
| color: #5d5d5d; | |
| display: none; | |
| } | |
| #variable-checker-root .variable-checker-reset-show{ | |
| display: block; | |
| } | |
| #variable-checker-root .variable-checker-reset:hover{ | |
| color: #474747; | |
| cursor: pointer; | |
| } | |
| #variable-checker-root .variable-checker-reset svg{ | |
| vertical-align: top; | |
| } | |
| #variable-checker-root .variable-checker-number-mod-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| margin-left: 5px; | |
| } | |
| #variable-checker-root .variable-checker-mod-button { | |
| width: 1.5rem; | |
| background: #6c6c6c; | |
| font-weight: bold; | |
| color: white; | |
| transition: background .25s; | |
| } | |
| #variable-checker-root .variable-checker-mod-button:hover { | |
| background: #474747; | |
| cursor: pointer; | |
| } | |
| #variable-checker-root .variable-checker-mod-button.variable-checker-mod-subtraction { | |
| transform: rotate(180deg); | |
| } | |
| @media screen and (prefers-reduced-motion: reduce) { | |
| #variable-checker-root * { | |
| transition: none !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment