commit 6c712233beedbf30a5eedc7bc6ae95898289a738 Author: canisminor1990 Date: Sat Feb 25 14:42:18 2023 +0800 ✨ feat: add antd token support diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..2fb03ce --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,32 @@ +on: + schedule: + # runs once a week on sunday + - cron: "55 23 * * 0" +jobs: + # This workflow contains a single job called "traffic" + traffic: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - uses: actions/checkout@v2 + with: + ref: "traffic" + + # Calculates traffic and clones and stores in CSV file + - name: GitHub traffic + uses: sangonzal/repository-traffic-action@v.0.1.6 + env: + TRAFFIC_ACTION_TOKEN: ${{ secrets.TRAFFIC_ACTION_TOKEN }} + + + # Commits files to repository + - name: Commit changes + uses: EndBug/add-and-commit@v4 + with: + author_name: Gerschel + message: "GitHub traffic" + add: "./traffic/*" + ref: "traffic" # commits to branch "traffic" diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6b3079c --- /dev/null +++ b/.gitignore @@ -0,0 +1,39 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +**/node_modules +npm-debug.log* +yarn-error.log +package-lock.json + +# production +**/dist +/plugins/ +/es +/lib +/logs + +# misc +.DS_Store +.eslintcache +.husky + +# umi +/src/.umi +/src/.umi-production +/src/.umi-test +/.env.local + +# ide +.idea +.vscode +.history +*.log +functions/* +lambda/mock/index.js +.temp/** + +# test +**/test-output +config.yml + diff --git a/backgrounds/Put backgrounds here.txt b/backgrounds/Put backgrounds here.txt new file mode 100644 index 0000000..e69de29 diff --git a/favicons/Put favicons here.txt b/favicons/Put favicons here.txt new file mode 100644 index 0000000..e69de29 diff --git a/javascript/background.js b/javascript/background.js new file mode 100644 index 0000000..4b55168 --- /dev/null +++ b/javascript/background.js @@ -0,0 +1,58 @@ +class InjectBackground{ + constructor(){ + this.image; + } + async init(selector="div[class^=mx-auto][class*=container]"){ + this.element = undefined + while(true){ + this.element = gradioApp().querySelector(selector) + if (this.element){ + break + } + await delay(500) + } + this.element.setAttribute("style", "background-image: url(file=static/background.png); background-size: contain; background-attachment: fixed; background-position: center; background-repeat: no-repeat") + } + removeStyle(){ + this.element.removeStyle() + } + removeImage(){ + this.element.style['background-image'] = "" + } + updateImage(path){ + this.element.style['background-image'] = `url(file=${path})` + } + //destroy not necessarily needed at this time, it's to keep the api similar + destroy(){ + this.removeStyle() + } + async refreshImage(file_name){ + setTimeout(location.reload(), 200) + //this.updateImage("static/background.png") + console.log(file_name) + return file_name + } +} +/* +element.style { + background-image: url(file=logo.png); + background-size: cover; + background-attachment: fixed; + background-position: center; +} +*/ + +let injectBackground = new InjectBackground() +async function registerInjectHandler(){ + await injectBackground.init() + while(true){ + if(injectBackground.element){ + break + } + await delay(500) + } + qkcssImagemap.injectBackground = injectBackground +} + +function delay(ms){return new Promise(resolve => setTimeout(resolve, ms))} +document.addEventListener("DOMContentLoaded", async function (){await registerInjectHandler()}) \ No newline at end of file diff --git a/javascript/favicon.js b/javascript/favicon.js new file mode 100644 index 0000000..8da3853 --- /dev/null +++ b/javascript/favicon.js @@ -0,0 +1,22 @@ +class FaviconHandler { + static setFavicon() { + const link = document.createElement('link'); + link.rel = 'icon'; + link.type = 'image/svg+xml'; + link.href = getComputedStyle(gradioApp().querySelector('.icon-container')).backgroundImage.replace(/^url\("|"\)$/g, ''); + document.getElementsByTagName('head')[0].appendChild(link); + } + static observeGradioApp() { + const observer = new MutationObserver(() => { + const iconContainer = gradioApp().querySelector('.icon-container'); + if (iconContainer) { + observer.disconnect(); + FaviconHandler.setFavicon(); + } + }); + observer.observe(gradioApp(), { childList: true, subtree: true }); + } +} +document.addEventListener("DOMContentLoaded", () => { + FaviconHandler.observeGradioApp(); +}); diff --git a/javascript/matrixfx.js b/javascript/matrixfx.js new file mode 100644 index 0000000..7f3844c --- /dev/null +++ b/javascript/matrixfx.js @@ -0,0 +1,100 @@ +class MatrixEffect{ + constructor(){ + this.matrixCanvas = document.createElement("canvas") + this.matrixCanvas.setAttribute("style", "position: fixed;") + gradioApp().querySelector("div[class*=container]:not([class^=modal])").insertAdjacentElement('afterbegin', this.matrixCanvas) + } + + async initialize(){ + while(!gradioApp().querySelector('canvas')){ + await delay(300) + } + // Initialising the canvas + this.ctx = this.matrixCanvas.getContext('2d'); + + // Setting the width and height of the canvas + this.matrixCanvas.width = window.innerWidth; + this.matrixCanvas.height = window.innerHeight; + + // Setting up the letters + this.letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; + this.letters = this.letters.split(''); + + // Setting up the columns + this.fontSize = 10, + this.columns = this.matrixCanvas.width / this.fontSize; + + // Setting up the drops + this.drops = []; + for (var i = 0; i < this.columns; i++) { + this.drops[i] = 1; + } + this.running = true; + + //timer + this.then = Date.now(); + this.fps = 20; + this.fpsInterval = 1000/this.fps; + + + // Setting up the draw function + this.draw = () => { + this.now = Date.now(); + this.elapsed = this.now - this.then; + if (this.elapsed > this.fpsInterval){ + this.then = this.now - (this.elapsed % this.fpsInterval); + + this.ctx.fillStyle = 'rgba(0, 0, 0, .1)'; + this.ctx.fillRect(0, 0, this.matrixCanvas.width, this.matrixCanvas.height); + for (var i = 0; i < this.drops.length; i++) { + text = this.letters[Math.floor(Math.random() * this.letters.length)]; + this.ctx.fillStyle = '#0f0'; + this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize); + this.drops[i]++; + if (this.drops[i] * this.fontSize > this.matrixCanvas.height && Math.random() > .95) { + this.drops[i] = 0; + } + } + } + if (this.running){ + requestAnimationFrame(this.draw) + } + } + } + + destroy(){ + this.running = false; + //clearInterval(this.Interval) + this.matrixCanvas.remove() + } +} + +let matrixEffect; + +async function registerMatrixToHandler(){ + await delay(1000); + while(qkcssFXMap == undefined){ + await delay(500) + } + qkcssFXMap["matrixfx"] = [launchMatrixEffect, matrixEffect]; +} + +async function launchMatrixEffect(){ + await delay(1000) + while (!gradioApp().querySelector("div[class*=container]:not([class^=modal])")){ + await delay(300); + } + // Loop the animation + matrixEffect = new MatrixEffect() + //Shortciruited it + qkcssFXMap["matrixfx"][1] = matrixEffect + await delay(500) + matrixEffect.initialize() + matrixEffect.Interval = matrixEffect.draw(); + //matrixEffect.Interval = setInterval(matrixEffect.draw, 33); +} + +function delay(ms){return new Promise(resolve => setTimeout(resolve, ms))} +//document.addEventListener("DOMContentLoaded", async function() {await launchMatrixEffect()}) +document.addEventListener("DOMContentLoaded", async function() {await registerMatrixToHandler()}) + diff --git a/javascript/quickcss.js b/javascript/quickcss.js new file mode 100644 index 0000000..5141d0b --- /dev/null +++ b/javascript/quickcss.js @@ -0,0 +1,72 @@ +function quickcssFormatRule(val, ele, colorsSize){ + //async is not needed, just trying to debug some error from colorpicker + ele = parseInt(ele) + //get sheet from style tag + let quickcssSheet = document.documentElement.querySelector("gradio-app").shadowRoot.querySelector("style").sheet + //get it's rules + let quickcssCssr = quickcssSheet.cssRules + //convert to array for finding index + let quickcssCssrArray = Array.from(quickcssCssr) + //use custom target to find index + let quickcssTarget = quickcssCssrArray.find( item => item.cssText.includes("quickcss_target")) + let quickcssTargetIndex = quickcssCssrArray.indexOf(quickcssTarget) + //Pull rule out + let quickcssRuleAsString = quickcssCssr[quickcssTargetIndex].cssText.toString() + //splitter for rule targets and body + let ruleSplitIndex = quickcssRuleAsString.indexOf("{") + //Target of rule + let ruleTargets = quickcssRuleAsString.slice(0, ruleSplitIndex) + //Body of rule + let quickcssRuleBody = quickcssRuleAsString.slice(ruleSplitIndex) + //Rule body edit + let asSplit = quickcssRuleBody.split(";") + let endStr = asSplit.slice(parseInt(colorsSize)).join(";") + //Edit to element position, index and length given as string via hiddenvals components + while (asSplit.length > parseInt(colorsSize)) + { + asSplit.pop() + } + let asArray = new Array + asSplit.forEach( e => {asArray.push(e.split(":"))}) + let stringarray = new Array + asArray.forEach( (e, i) => {stringarray.push( i==ele ? `${e[0]}: ${val}`: `${e[0]}: ${e[1]}`)}) + stringarray = stringarray.join(";") + `;${endStr}` + let cssRule = ruleTargets + stringarray + //Delete old rule at + quickcssSheet.deleteRule(quickcssTargetIndex) + //insert (as in add at same location) + quickcssSheet.insertRule(cssRule, quickcssTargetIndex) + //returns must equal inputs size, so outputs must matchsize, python fn hijacks for finishing save data + return [stringarray, "", ""] +} + +//Register js fx's +//they must support a destroy method + +qkcssFXMap = {}; + +function launchEffect(filename){ + qkcssFXMap[filename][0]() +} + +function destroyEffect(filename){ + qkcssFXMap[filename][1].destroy() +} + +//Register js image injectors +qkcssImagemap = {}; + +function launchImage(name){ + qkcssImagemap[name].register() +} +function removeImage(name){ + qkcssImagemap[name].destroy() +} +function updateImage(name, new_name){ + //notimplemented hidden component to send name? + qkcssImagemap[name].updateImage(new_name) +} +async function refreshImage(name){ + await qkcssImagemap[name].refreshImage() + return name +} \ No newline at end of file diff --git a/logos/Put logos here.txt b/logos/Put logos here.txt new file mode 100644 index 0000000..e69de29 diff --git a/scripts/__pycache__/quickcss.cpython-310.pyc b/scripts/__pycache__/quickcss.cpython-310.pyc new file mode 100644 index 0000000..cac8c57 Binary files /dev/null and b/scripts/__pycache__/quickcss.cpython-310.pyc differ diff --git a/scripts/__pycache__/updater.cpython-310.pyc b/scripts/__pycache__/updater.cpython-310.pyc new file mode 100644 index 0000000..3531abb Binary files /dev/null and b/scripts/__pycache__/updater.cpython-310.pyc differ diff --git a/scripts/quickcss.py b/scripts/quickcss.py new file mode 100644 index 0000000..63f0880 --- /dev/null +++ b/scripts/quickcss.py @@ -0,0 +1,387 @@ +import gradio as gr +import modules.scripts as scripts +from modules import script_callbacks, shared +import os +import shutil +from pathlib import Path + +basedir = scripts.basedir() + + +class MyTab(): + + def __init__(self, basedir): + #This extensions directory + self.extensiondir = basedir + #Up two directories, webui root + self.webui_dir = Path(self.extensiondir).parents[1] + + + self.style_folder = os.path.join(basedir, "style_choices") + self.backgrounds_folder = os.path.join(self.extensiondir, "backgrounds") + self.logos_folder = os.path.join(self.extensiondir, "logos") + self.favicon_folder = os.path.join(self.extensiondir, "favicons") + self.effects_folder = os.path.join(self.extensiondir, "effects") + self.javascript_folder = os.path.join(self.extensiondir, "javascript") + self.static_folder = os.path.join(self.webui_dir, "static") + + self.favicon_workaround = gr.HTML(value='
', render=False) + + + self.styles_list = self.get_files(self.style_folder) + self.backgrounds_list = self.get_files(self.backgrounds_folder) + self.logos_list = self.get_files(self.logos_folder) + self.favicon_list = self.get_files(self.favicon_folder) + self.effects_list = self.get_files(self.javascript_folder, file_filter=["quickcss.js", "utility.js", "background.js"], split=True) + + + self.styles_dropdown = gr.Dropdown(label="Styles", render=False, interactive=True, choices=self.styles_list, type="value") + self.background_dropdown = gr.Dropdown(label="Background", render=False, interactive=True, choices=self.backgrounds_list, type="value") + self.logos_dropdown = gr.Dropdown(label="Logos", render=False, interactive=True, choices=self.logos_list, type="value") + self.favicon_dropdown = gr.Dropdown(label="Favicon", render=False, interactive=True, choices=self.favicon_list, type="value") + self.effects_dropdown = gr.Dropdown(label="Effects (on until refresh)", render=False, interactive=True, choices=self.effects_list, type="value") + + + self.apply_style_bttn = gr.Button(value="Apply Style", render=False) + self.apply_background_bttn = gr.Button(value="Apply (Reload UI)", render=False) + #TODO: background off button to swap image in folder to blankbackground and disable style rule + self.refresh_bkcgrnd_droplist_button = gr.Button(value="Refresh List", render=False) + self.apply_logo_bttn = gr.Button(value="Apply Logo", render=False) + self.apply_favicon_bttn = gr.Button(value="Apply Favicon (edit webui.py to see)", render=False) + self.effects_button = gr.Button(value="Activate Selected Script", render=False) + self.effects_off_button = gr.Button(value="Deactivate Selected Script", render=False) + + + self.logo_image = gr.Image(render=False) + self.favicon_image = gr.Image(render=False) + + + self.import_style_file = gr.File(render=False, label="Import CSS file") + self.import_background_file = gr.File(render=False, label="Import Background Images") + self.import_logo_file = gr.File(render=False, label="Import Logo's (png)") + self.import_favicon_file = gr.File(render=False, label="Import favicons (svg)") + + + self.restart_bttn = gr.Button(value="Apply changes (Reload UI)", render=False, variant="primary") + + self.remove_style = gr.Button(value="Remove Stylesheet", render=False) + + + # BEGIN CSS COLORPICK COMPONENTS + self.save_as_filename = gr.Text(label="Save Name", visible=False, render=False) + self.save_button = gr.Button(value="Save", visible=False, render=False, variant="primary") + + #Test for file being set + self.file_exists = False + self.style_path = os.path.join(self.extensiondir, "style.css") + self.start_position_for_save = 0 + self.insert_colorpicker_break_rule_for_save = 0 + self.insert_break_rule_for_save = 0 + if os.path.exists(self.style_path): + self.file_exists = True #Conditional for creating inputs + self.lines = [] + line = "" + self.dynamic_compatible = False + with open(self.style_path, 'r', encoding='utf-8') as cssfile: + try: + for i, line in enumerate(cssfile): + line = line.strip() + if "/*BREAKFILEREADER*/" in line: + self.insert_break_rule_for_save = i - self.start_position_for_save + break + elif "/*ENDCOLORPICKERS*/" in line: + self.insert_colorpicker_break_rule_for_save = i - self.start_position_for_save + continue + if "quickcss_target" in line: + self.dynamic_compatible = True + self.start_position_for_save = i+1 + continue + if self.dynamic_compatible: + if len(line) > 0: + self.lines.append(line.split(":")) + except UnicodeDecodeError as error: + print(f"{error}\nCheck style.css in this extensions folder.") + + + if self.dynamic_compatible: + self.dynamically_generated_components = [gr.ColorPicker(label=x[0].replace("-", "").replace("_", " ").title(), render=False, elem_id="quikcss_colorpicker", value=x[1].replace(";", "").strip()) + if i < self.insert_colorpicker_break_rule_for_save else + gr.Slider(minimum=0, maximum=100, step=1, label=x[0].replace("-", "").replace("_", " ").title(), render=False, elem_id="quikcss_slider", value=x[1].replace(";", "").strip()) + for i,x in enumerate(self.lines) + ] + else: + self.dynamically_generated_components = [] + + # hidden_vals acts like an index, holds int values that are used in js + self.hidden_vals = [gr.Text(value=str(x), render=False, visible=False) for x in range(len(self.dynamically_generated_components))] + + # length_of_colors similar to hidden vals, but provides length so js knows the limit when parsing rules + self.length_of_colors = gr.Text(value=len(self.dynamically_generated_components), visible=False, render=False) + + # used as padding so we don't list index error or http 500 internal server, or http 422 forEach can't over undefined (promise pending) + self.dummy_picker = gr.Text(visible=False, render=False, elem_id="hidden") + + # Acts like catcher, actual values store in list + self.js_result_component = gr.Text(render=False, interactive=False) + + #dummy component for general purpose, currently used for _js effects; holds no relevant data, just for input/output element quota + self._dummy = gr.Text(value="", visible=False, render=False, show_label=False, interactive=False) + + def ui(self, *args, **kwargs): + with gr.Blocks(analytics_enabled=False) as ui: + self.favicon_workaround.render() + with gr.Accordion(label="Some instructions", open=False): + gr.Markdown(value="""
This is a mix from old style to new style. It is not in it's finished state
+
To see effects, you must use dropdown, select as sheet, click apply, click restart. More options will be available on restart
+
I know it lives as a tab, but this was meant to be a demo at first, now it's growing to something more
+ +
To see favicon take affect, you will need to add `favicon_path="favicon.svg"` to webui.py
+
To do this, open file, search for `prevent_thread_lock` add comma, paste in text, save.
+ +
You may need to undo this for an update, if you have git issues and don't know how to deal with them
+
This won't break your system, if you find you can't update, try `git checkout webui.py` ~~`git fetch --all` `git reset --hard origin/master`~~
+ +
Once again, this `dynamic` demo has not removed/re-implemented all features present
+""") + if self.file_exists and self.dynamic_compatible: + with gr.Row(equal_height=True): + self.save_as_filename.render() + self.save_button.render() + #Necessary for values being accessible + self.length_of_colors.render() + self.dummy_picker.render() + self.js_result_component.render() + #Render hidden vals that serve as indices to map + for h in self.hidden_vals: + h.render() + with gr.Row(): + #Render adjusters + for c in self.dynamically_generated_components: + with gr.Column(elem_id="quickcss_colorpicker"): + c.render() + + with gr.Row(): + with gr.Column(): + self.styles_dropdown.render() + self.apply_style_bttn.render() + with gr.Column(): + self.background_dropdown.render() + with gr.Row(): + self.apply_background_bttn.render() + self.refresh_bkcgrnd_droplist_button.render() + with gr.Column(): + self.logos_dropdown.render() + self.apply_logo_bttn.render() + with gr.Column(): + self.favicon_dropdown.render() + self.apply_favicon_bttn.render() + with gr.Column(): + self.effects_dropdown.render() + with gr.Row(): + self.effects_button.render() + self.effects_off_button.render() + + with gr.Accordion(label="Import Files", open=False): + with gr.Row(): + with gr.Column(): + self.import_style_file.render() + with gr.Column(): + self.import_background_file.render() + with gr.Column(): + self.import_logo_file.render() + with gr.Column(): + self.import_favicon_file.render() + + with gr.Row(): + self.restart_bttn.render() + self.remove_style.render() + + with gr.Row(): + self.logo_image.render() + self.favicon_image.render() + self._dummy.render() + + # Handlers + #Generate colorpickers and sliders handlers + if self.file_exists: + for comp,val in zip(self.dynamically_generated_components, self.hidden_vals): + comp.change( + fn = lambda *x: self.process_for_save(*x), + _js = "quickcssFormatRule", + inputs = [comp, val, self.length_of_colors], + outputs = [self.js_result_component] + [self.save_as_filename, self.dummy_picker] + ) + self.save_as_filename.change( + fn = lambda x: gr.update(visible=bool(x)), + inputs = self.save_as_filename, + outputs = self.save_button + ) + self.save_button.click( + fn = self.save, + inputs = [self.js_result_component, self.save_as_filename], + outputs = [self.js_result_component, self.styles_dropdown] + ) + + #Handler cont. + #Common interface + #NOTE: These dropdowns affect image placeholders + self.logos_dropdown.change( + fn = lambda x: self.get_image(x, folder = "logos"), + inputs = self.logos_dropdown, + outputs = self.logo_image + ) + + self.favicon_dropdown.change( + fn = lambda x: self.get_image(x, folder = "favicons"), + inputs = self.favicon_dropdown, + outputs = self.favicon_image + ) + + #buttons + self.apply_style_bttn.click( + fn = self.apply_choice_wrapper(self.style_folder, self.extensiondir, "style.css"), + inputs = self.styles_dropdown + ) + + self.apply_background_bttn.click( + fn = self.apply_choice_wrapper(self.backgrounds_folder, self.static_folder, "background.png"),#TODO: MAYBE: delete file extension + _js = "injectBackground.refreshImage", + inputs = self.background_dropdown, + outputs=self._dummy + ) + + self.refresh_bkcgrnd_droplist_button.click( + fn = lambda: self.refresh_list(self.refresh_bkcgrnd_droplist_button, self.backgrounds_folder, self.background_dropdown), + outputs=self.background_dropdown + ) + + self.apply_logo_bttn.click( + fn = self.apply_choice_wrapper(self.logos_folder, self.static_folder, "logo.png"),#TODO Update css files and change dir to static + inputs = self.logos_dropdown, + ) + + self.apply_favicon_bttn.click( + fn = self.apply_choice_wrapper(self.favicon_folder, self.static_folder, "favicon.svg"),#TODO update css files and change dir to static + inputs = self.favicon_dropdown + ) + + self.effects_button.click( + fn = None, + _js = "launchEffect", + inputs = self.effects_dropdown, + outputs = self._dummy + ) + + self.effects_off_button.click( + fn = None, + _js = "destroyEffect", + inputs = self.effects_dropdown, + outputs = self._dummy + ) + + self.remove_style.click( + fn = lambda: self.delete_style() + ) + + self.restart_bttn.click(fn=self.local_request_restart, _js='restart_reload', inputs=[], outputs=[]) + + #File Importers + self.import_style_file.change( + fn = lambda tmp_file: self.import_file_from_path(tmp_file, target_folder="style_choices", comp = self.styles_dropdown, func = self.get_files, folder=self.style_folder, focus_list=self.styles_list), + inputs=self.import_style_file, + outputs=self.styles_dropdown + ) + + self.import_background_file.change( + fn = lambda tmp_file: self.import_file_from_path(tmp_file, target_folder="backgrounds", comp = self.background_dropdown, func = self.get_files, folder=self.backgrounds_folder, focus_list=self.backgrounds_list), + inputs=self.import_background_file, + outputs=self.background_dropdown + ) + + self.import_logo_file.change( + fn = lambda tmp_file: self.import_file_from_path(tmp_file, target_folder="logos", comp = self.logos_dropdown, func = self.get_files, folder=self.logos_folder, focus_list=self.logos_list), + inputs=self.import_logo_file, + outputs=self.logos_dropdown + ) + + + self.import_favicon_file.change( + fn = lambda tmp_file: self.import_file_from_path(tmp_file, target_folder="favicons", comp = self.favicon_dropdown, func = self.get_files, folder=self.favicon_folder, focus_list=self.favicon_list), + inputs=self.import_favicon_file, + outputs=self.favicon_dropdown + ) + + + return [(ui, "Theme", "theme")] + + + def import_file_from_path(self, tmp_file_obj, target_folder, comp, func, **kwargs): + if tmp_file_obj: + shutil.copy(tmp_file_obj.name, os.path.join(self.extensiondir, target_folder, tmp_file_obj.orig_name)) + # Update appropriate list + # Make backend the same as front-end so it matches when selected + comp.choices = func(**kwargs) + tmp_file_obj.flush() + # return sends update to front-end + return gr.update(choices=comp.choices) + + + def get_files(self, folder, focus_list=[], file_filter=[], split=False): + focus_list = [file_name if not split else os.path.splitext(file_name)[0] for file_name in os.listdir(folder) if os.path.isfile(os.path.join(folder, file_name)) and file_name not in file_filter] + return focus_list + + + def apply_choice_wrapper(self, src_base_path, dst_base_path, name): + """Encapsulation so I don't need a different function for each type""" + def apply_choice(selection): + shutil.copy(os.path.join(src_base_path, selection), os.path.join(dst_base_path, name)) + return apply_choice + + + def get_image(self, name, folder): + return os.path.join(self.extensiondir, folder, name) + + + def refresh_list(self, component, folder, focus_list, file_filter=[]): + component.choices = self.get_files(folder, focus_list, file_filter) + return gr.update(choices=component.choices) + + + + def delete_style(self): + try: + os.remove(os.path.join(self.extensiondir, "style.css")) + except FileNotFoundError: + pass + + + def local_request_restart(self): + "Restart button" + shared.state.interrupt() + shared.state.need_restart = True + + + def process_for_save(self, x, *y): + return [x] + [gr.update(visible=True), None] + + + def save(self, js_cmp_val, filename): + rules = [f" {e};\n" for e in js_cmp_val[1:-1].split(";")][:-1] + #issue, save button needs to stay hidden until some color change + rules.insert(self.insert_colorpicker_break_rule_for_save, " /*ENDCOLORPICKERS*/\n") + rules.insert(self.insert_break_rule_for_save, " /*BREAKFILEREADER*/\n") + with open(self.style_path, 'r+') as file: + lines = file.readlines() + start_pos = self.start_position_for_save + for i, rule in enumerate(rules): + lines[start_pos + i] = rule + file.seek(0) + file.writelines(lines) + self.styles_dropdown.choices.insert(0, f"{filename}.css") + shutil.copy(self.style_path, os.path.join(self.style_folder, f"{filename}.css")) + return ["Saved", gr.update(choices=self.styles_dropdown.choices, value=self.styles_dropdown.choices[0])] + + + +tab = MyTab(basedir) +script_callbacks.on_ui_tabs(tab.ui) diff --git a/scripts/updater.py b/scripts/updater.py new file mode 100644 index 0000000..e061dee --- /dev/null +++ b/scripts/updater.py @@ -0,0 +1,67 @@ +from dataclasses import dataclass +import os +from pathlib import Path +import shutil +from modules import scripts + +@dataclass +class DefaultFile: + """Move file to location as filename""" + og_file:str + current_path:str + dir:str + save_as_filename:str + + +#class UpdateInstructions: +# @staticmethod +# def instructions(other_clss): +# #Create new folder +# in_root_folders = ["static"] +# #in_extension_folder = [] +# for f_name in in_root_folders: +# other_clss.check_folder + + +class BasicUpdater: + + def __init__(self): + #sd-web-ui-qkcss dir + self.extensions_dir = scripts.basedir() + + self.root_dir = Path(self.extensions_dir).parents[1] + self.static_dir = os.path.join(self.root_dir, "static") + + self.style_folder = os.path.join(self.extensions_dir, "style_choices") + self.logos_folder = os.path.join(self.extensions_dir, "logos") + self.favicon_folder = os.path.join(self.extensions_dir, "favicons") + self.backgrounds_folder = os.path.join(self.extensions_dir, "backgrounds") + self.effects_folder = os.path.join(self.extensions_dir, "effects") + self.javascript_folder = os.path.join(self.extensions_dir, "javascript") + + self.file_defaults = [ + DefaultFile(og_file="logo.png", current_path=self.logos_folder, dir=self.static_dir, save_as_filename="logo.png"), + DefaultFile(r"favicon Original.svg", self.favicon_folder, self.static_dir, "favicon.svg"), + DefaultFile("blankbackground.png", self.backgrounds_folder, self.static_dir, "background.png") + ] + + self.updater_file = os.path.join(self.extensions_dir, "update") + if os.path.exists(self.updater_file): + self.check_folders(self.static_dir) + for fd in self.file_defaults: + self.clone_file(fd) + #UpdateInstructions.instructions(self) + os.remove(self.updater_file) + + + def check_folders(self, folder_path): + if not os.path.exists(folder_path): + os.mkdir(folder_path) + + def clone_file(self, defaults_object:DefaultFile): + from_file = os.path.join(defaults_object.current_path, defaults_object.og_file) + to_file = os.path.join(defaults_object.dir, defaults_object.save_as_filename) + if not os.path.exists(to_file): + shutil.copy(from_file, to_file) + +BasicUpdater() \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..adb1808 --- /dev/null +++ b/style.css @@ -0,0 +1,1371 @@ +/*----------------------------------------------------------------*/ +/*----------------------------------------------------------------*/ +/*----------------------------------------------------------------*/ + +/*THEME VARIABLES*/ +:root, +*, +quickcss_target { + --colorPrimaryBg: #111a2c; + --colorPrimaryBgHover: #112545; + --colorPrimaryBorder: #15325b; + --colorPrimaryBorderHover: #15417e; + --colorPrimaryHover: #3c89e8; + --colorPrimary: #1668dc; + --colorPrimaryActive: #1554ad; + --colorPrimaryTextHover: #3c89e8; + --colorPrimaryText: #1668dc; + --colorPrimaryTextActive: #1554ad; + --colorErrorBg: #2c1618; + --colorErrorBgHover: #451d1f; + --colorErrorBorder: #5b2526; + --colorErrorBorderHover: #7e2e2f; + --colorErrorHover: #e86e6b; + --colorError: #dc4446; + --colorErrorActive: #ad393a; + --colorErrorTextHover: #e86e6b; + --colorErrorText: #dc4446; + --colorErrorTextActive: #ad393a; + --colorText: rgba(255, 255, 255, 0.85); + --colorTextSecondary: rgba(255, 255, 255, 0.65); + --colorTextTertiary: rgba(255, 255, 255, 0.45); + --colorTextQuaternary: rgba(255, 255, 255, 0.25); + --colorBgContainer: #141414; + --colorBgElevated: #1f1f1f; + --colorBgLayout: #141414; + --colorBgSpotlight: #424242; + --colorBgMask: rgba(0, 0, 0, 0.45); + --colorBorder: #424242; + --colorBorderSecondary: #303030; + --colorFill: rgba(255, 255, 255, 0.18); + --colorFillSecondary: rgba(255, 255, 255, 0.12); + --colorFillTertiary: rgba(255, 255, 255, 0.08); + --colorFillQuaternary: rgba(255, 255, 255, 0.04); + + /*ENDCOLORPICKERS*/ + --fontSizeBase: 14; + --borderRadiusBase: 2; + --marginBase: 4; + --paddingBase: 4; + --leftPannelWidth: 42; + --cardsSize: 50; + + /*BREAKFILEREADER*/ + --boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + + --fontSizeSM: calc(1px * var(--fontSizeBase) - 2px); + --fontSize: calc(1px * var(--fontSizeBase)); + --fontSizeLG: calc(1px * var(--fontSizeBase) + 2px); + --fontSizeXL: calc(1px * var(--fontSizeBase) + 4px); + + --borderRadiusXS: calc(1px * var(--borderRadiusBase)); + --borderRadiusSM: calc(2px * var(--borderRadiusBase)); + --borderRadius: calc(3px * var(--borderRadiusBase)); + --borderRadiusLG: calc(4px * var(--borderRadiusBase)); + + --marginXXS: calc(1px * var(--marginBase)); + --marginXS: calc(2px * var(--marginBase)); + --marginSM: calc(3px * var(--marginBase)); + --margin: calc(4px * var(--marginBase)); + --marginMD: calc(5px * var(--marginBase)); + --marginLG: calc(6px * var(--marginBase)); + --marginXL: calc(8px * var(--marginBase)); + --marginXXL: calc(12px * var(--marginBase)); + + --paddingXXS: calc(1px * var(--paddingBase)); + --paddingXS: calc(2px * var(--paddingBase)); + --paddingSM: calc(3px * var(--paddingBase)); + --padding: calc(4px * var(--paddingBase)); + --paddingMD: calc(5px * var(--paddingBase)); + --paddingLG: calc(6px * var(--paddingBase)); + --paddingXL: calc(8px * var(--paddingBase)); + + --logo: url("https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg"); + --favicon: url("https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg"); + --galleryBackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) + 0% 0% / 20px; + --leftColumn: calc(20px * var(--leftPannelWidth)); +} + +/* Quickcss extension */ +/*----------------------------------------------------------------*/ +#hidden { + visibility: hidden; +} + +#quickcss_colorpicker { + max-width: 10vw; +} + +input[type="color"] { + width: 100%; +} + +/* Favicon workaround */ +.icon-container { + background-image: var(--favicon); +} + +/*================================================ */ +/* User.css Changes */ +/*================================================ */ + +.gradio-container { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: var(--fontSize); + margin: 0; /* 1 */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + background-image: radial-gradient( + circle 600px at calc(100% - 300px) 300px, + var(--colorPrimaryBgHover), + var(--colorBgLayout) + ); + background-repeat: no-repeat; +} + +/* Header */ +/*----------------------------------------------------------------*/ + +#tabs > .tabitem { + background: transparent; + border: none; + padding: var(--padding); + margin-top: 118px; +} + +#tabs > div:first-child { + position: fixed; + top: 90px; + z-index: 1000; + flex-wrap: nowrap; + width: 100%; + border: none; +} + +#tabs > div:first-child > button { + border: none; + border-bottom: 2px solid transparent !important; + flex: none; +} + +#tabs > div:first-child > button:hover { + border: none; + border-bottom: 2px solid var(--colorPrimary) !important; + flex: none; +} + +#tabs > div:first-child > button.bg-white { + background: transparent; + border: none; + border-bottom: 2px solid var(--colorPrimary) !important; +} + +#quicksettings { + position: fixed; + z-index: 1000; + flex-wrap: nowrap; + top: 32px; +} + +#quicksettings > * { + z-index: 1000; +} + +#quicksettings:before { + content: ""; + display: block; + background: var(--logo) no-repeat; + width: 129px; + height: 26px; + z-index: 1000; + margin-right: 36px; + margin-left: 16px; + margin-top: 4px; +} + +#quicksettings:after { + content: ""; + display: block; + position: fixed; + width: 100vw; + height: 121px; + top: 0; + left: 0; + z-index: 999; + border-block-end: 1px solid var(--colorBorderSecondary); + background: var(--colorFillQuaternary); + backdrop-filter: blur(24px); +} + +#quicksettings select { + background-color: var(--colorFillTertiary); + border: none !important; + cursor: pointer; + z-index: 2; +} + +#quicksettings select:hover { + background-color: var(--colorFillSecondary) !important; +} + +#quicksettings .gr-button-tool { + margin-right: 8px; + margin-left: -4px; +} +#quicksettings .gr-button-tool:hover { + background-color: var(--colorFillSecondary) !important; +} + +#quicksettings label > span.block { + margin: 0; + width: 100%; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + font-size: 12px; + z-index: 1; + top: -18px; + background: transparent; + border: none; + color: var(--colorTextQuaternary); +} + +option { + background: var(--colorBgElevated) !important; +} + +.dark ul.dark\:bg-gray-700 { + background: var(--colorBgElevated) !important; + box-shadow: var(--boxShadow) !important; +} + +/* Prompt Translator */ +/*----------------------------------------------------------------*/ + +#prompt_trans_toolbar button:hover { + background-color: var(--colorFillSecondary) !important; +} + +#prompt_trans_toolbar > span > input { + margin-bottom: 4px; + cursor: pointer; +} + +#prompt_trans_toolbar > span > span { + margin-left: 8px; + display: inline-block; + padding: 4px 8px; + background-color: var(--colorFillQuaternary); + color: var(--colorTextQuaternary); + line-height: 1; +} + +#switch_prompt_btn { + display: none; +} + +/* Top Row */ +/*----------------------------------------------------------------*/ + +[id$="2img_toprow"] { + padding: 0 !important; + border-radius: 0 !important; + height: 222px; +} + +[id$="2img_toprow"] .gr-block.gr-box { + padding: 0 !important; +} + +[id$="2img_actions_column"] { + margin: 0 !important; +} + +[id$="2img_prompt_container"] { + margin-right: 1em; +} + +#interrogate_col { + min-width: 112px !important; +} + +[id$="2img_prompt_container"] textarea { + height: 100px !important; + overflow-x: hidden !important; + overflow-y: scroll !important; +} + +[id$="2img_prompt"] textarea { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + margin-bottom: 1px; + color: rgba(208, 226, 178, 0.98) !important; +} + +[id$="2img_prompt"] textarea:focus { + color: rgba(244, 255, 225, 0.98) !important; +} + +[id$="2img_neg_prompt"] textarea { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + color: rgba(236, 210, 213, 0.98) !important; +} + +[id$="2img_neg_prompt"] textarea:focus { + color: rgba(255, 240, 242, 0.98) !important; +} + +span.gr-box.gr-text-input { + border: 1px solid var(--colorBorder); + background: var(--colorBgElevated); + color: var(--colorTextSecondary); + top: -10px; +} + +.dark .border-b-2.flex-wrap.dark\:border-gray-700 { + border: none !important; + margin-bottom: var(--margin); +} + +.dark .border-b-2.flex-wrap.dark\:border-gray-700 button.bg-white { + border: none !important; + background: var(--colorFill); +} + +/* Gradio app font */ +/*----------------------------------------------------------------*/ + +.dark .gradio-container, +.dark .gr-compact, +.dark .flex-wrap, +.dark * .flex-wrap .rounded-t-lg, +.dark * .flex-wrap .border-transparent { + transition: all 0.3s ease-in-out; +} + +/*Css hide Gradio text, progress bar and animations*/ +/*----------------------------------------------------------------*/ +* .wrap.m-12, +* .wrap.z-20, +* .meta-text-center, +* .meta-text, +* .wrap.m-12 svg, +* .wrap.z-20 svg, +* .wrap.svelte-5usjvi { + display: none; + inset: 100%; +} + +/*Css show loading text on SD models selector*/ +/*----------------------------------------------------------------*/ +#setting_sd_model_checkpoint .wrap.svelte-5usjvi, +#setting_sd_model_checkpoint .meta-text-center, +#setting_sd_model_checkpoint .meta-text { + inset: 0; + display: flex; + justify-content: center; + color: var(--colorText); +} + +#setting_sd_model_checkpoint .wrap.svelte-5usjvi { + inset: 0; + display: flex; + justify-content: center; + color: var(--colorText); +} + +/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */ +.dark .transition.opacity-20 { + opacity: 1; +} + +/* Tab buttons */ +/*----------------------------------------------------------------*/ +#tabs > div:first-of-type button { + font-size: 90%; + transition: all 0.3s ease-in-out; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +#tabs > div:first-of-type button:hover { + border-color: 0 0 0 0.2em var(--colorText); + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +/* UI border radius */ +/*----------------------------------------------------------------*/ +.dark .gradio-container *, +.dark .gr-compact *, +.dark .rounded-t-lg, +.dark .tabitem *, +.dark .flex-wrap *, +.dark .svelte-10ogue4 > .flex-col { + border-radius: var(--borderRadius) !important; +} + +/* Selected text colors */ +/*----------------------------------------------------------------*/ +*::selection { + color: var(--colorText); + background-color: var(--colorPrimaryBorderHover); +} + +/* App Colors */ +/*----------------------------------------------------------------*/ +.dark, +.dark\:bg-gray-900, +.dark .gr-button-primary, +.dark .dark\:text-gray-200, +.dark .text-gray-700, +.dark .text-gray-800, +.dark .text-gray-900, +.dark .text-gray-500, +.dark .\!text-gray-700, +.dark .\!text-gray-800 { + color: var(--colorText); +} + +/* Input Colors */ +/*----------------------------------------------------------------*/ +.dark .gr-input { + color: var(--colorTextSecondary); + background-color: var(--colorFillQuaternary) !important; + border-color: transparent !important; + transition: all 0.3s ease-in-out; +} + +.dark .gr-input:hover { + color: var(--colorText); + background-color: var(--colorFillTertiary) !important; + border-color: transparent !important; +} + +.dark .gr-input:focus { + color: var(--colorText); + background-color: var(--colorFillQuaternary) !important; + border-color: var(--colorFill) !important; +} + +/* Background colors */ +/*----------------------------------------------------------------*/ +.dark, +.dark .gr-button, +.dark .bg-white, +.dark .gr-panel, +.dark .gr-button-lg, +.dark .gr-box, +.dark .gr-button-tool, +.dark .dark\:bg-gray-700, +.dark .dark\:bg-gray-950, +.dark .bg-gray-700, +.dark .bg-gray-950, +.dark fieldset span.text-gray-500, +.dark .gr-block.gr-box span.text-gray-500, +.dark label.block span, +#quicksettings, +#tabs .tabitem .gr-compact { + background-color: transparent; +} + +.dark fieldset span.text-gray-500, +.dark .gr-block.gr-box span.text-gray-500, +.dark label.block span { + padding: 0; + margin: 0; + font-size: var(--fontSizeSM); + color: var(--colorTextSecondary); + border: none; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); +} + +#script_list { + margin: var(--marginXL) 0 0; + padding: 0; +} + +#script_list select { + margin-top: var(--marginXL); +} + +[id$="_seed_row"] { + padding: 0; +} + +div.svelte-10ogue4 > .p-3.border.border-gray-200 { + background-color: var(--colorFillTertiary) !important; + border-color: transparent !important; + transition: all 0.3s ease-in-out; + margin-bottom: var(--marginSM); +} + +div.svelte-10ogue4 .flex.row.w-full.flex-wrap.gap-4 { + margin-top: var(--marginLG); +} + +div.svelte-10ogue4 .flex.row.w-full.flex-wrap.gap-4 > div { + padding: 0 !important; +} + +div.svelte-10ogue4 .flex.row.w-full.flex-wrap.gap-4 > button { + margin: 0 !important; +} + +.flex.gap-4, +.flex.gap-4 > .border { + border: none; +} + +.gr-panel { + padding: 0; +} + +.tabitem.p-2.border-2 { + padding: 0; + margin-bottom: var(--margin) 0; + border: none !important; +} + +.dark .bg-gray-200, +.dark .dark\:bg-gray-200, +.dark .bg-gray-200.\!text-gray-700, +#txt2img_gallery_container .livePreview { + background-color: transparent !important; +} + +.livePreview { + background: var(--galleryBackground) !important; + margin: 0 !important; + border: 2px solid var(--colorBorder) !important; +} + +/* Galleries */ +/*----------------------------------------------------------------*/ +div.svelte-10ogue4 .gr-block.gr-box.relative.w-full.border-dashed, +[id$="_gallery"].gr-block.gr-box, +#img2img_img2img_tab, +#img2img_img2img_sketch_tab, +#img2img_inpaint_sketch_tab, +#img2img_inpaint_tab, +#img2img_inpaint_upload_tab, +#pnginfo_image, +#extras_single_tab, +#extras_batch_process_tab, +#extras_batch_directory_tab { + border-radius: var(--borderRadius) !important; + background: var(--galleryBackground) !important; + transition: all 1s ease-in-out; + box-shadow: 0 0 0 0.2em transparent; + border: 2px solid var(--colorBorder) !important; + padding: var(--paddingXS) !important; +} + +#img2img_batch_tab, +#extras_batch_directory_tab { + background: var(--colorBgContainer) !important; + border-radius: var(--borderRadius) !important; + border: 2px solid var(--colorBorder) !important; + padding: var(--padding) !important; +} + +#txt2img_image_browser_gallery { + padding: 0 !important; +} + +#img_inpaint_mask { + background: var(--colorFillTertiary) !important; +} + +.dark .group { + max-height: 60vh; +} + +[id$="_gallery"] svg { + display: none; +} + +#txt2img_gallery:hover, +#img2img_gallery:hover, +#extras_gallery:hover, +#depthmap_gallery:hover, +#ti_gallery:hover, +#sp_gallery:hover { + box-shadow: 0 0 0 0.5em transparent; +} + +.dark .gr-input-label, +.dark .gr-button { + background: var(--colorFillSecondary); + transition: all 0.3s ease-in-out; +} + +th { + border-color: var(--colorBorderSecondary); +} + +.token { + padding: 4px 12px 4px 4px; +} + +.dark .backdrop-blur .modify-upload .hover\:shadow-xl { + border-style: solid; + border-color: var(--colorFill); + border-width: 1px; +} + +/* Svg */ +.dark .backdrop-blur .modify-upload svg { + display: block !important; +} + +/* Gallery items*/ +/*----------------------------------------------------------------*/ +#gallery_item { + border-width: 2px; +} + +.dark .gallery-item.svelte-1g9btlg.svelte-1g9btlg { + box-shadow: 0 0 0 1px var(--colorBorder); + backdrop-filter: blur(24px); + --tw-ring-color: var(--colorPrimary) !important; +} + +.dark .dark\:bg-gray-900 { + --tw-bg-opacity: 1; + background-color: var(--colorBgContainer); +} + +button.dark\:bg-gray-900 { + border: 1px solid var(--colorBorder); +} + +[id$="2img_gallery"] .group.dark\:bg-gray-900 { + background: var(--galleryBackground) !important; + padding: var(--paddingXS) !important; +} + +#img2img_image, +#img2img_sketch, +#img2maskimg, +#inpaint_sketch { + padding: 0; + margin-bottom: var(--margin); +} + +/* Gallery items fix */ +/*----------------------------------------------------------------*/ +#img2img_image, +#img2img_image > .h-60, +#img2img_image > .h-60 > div, +#img2img_image > .h-60 > div > img, +#img2img_sketch, +#img2img_sketch > .h-60, +#img2img_sketch > .h-60 > div, +#img2img_sketch > .h-60 > div > img, +#img2maskimg, +#img2maskimg > .h-60, +#img2maskimg > .h-60 > div, +#img2maskimg > .h-60 > div > img, +#inpaint_sketch, +#inpaint_sketch > .h-60, +#inpaint_sketch > .h-60 > div, +#inpaint_sketch > .h-60 > div > img { + height: 550px; + max-height: 100% !important; + min-height: 90% !important; +} + +/* Checks */ +/*----------------------------------------------------------------*/ +.dark .gr-check-radio:checked { + background-color: var(--colorPrimary); +} + +input[type="checkbox"]:checked + span, +input[type="radio"]:checked + span { + color: var(--colorPrimary); +} + +.dark\:bg-transparent:hover { + color: var(--colorText); + transition: all 0.3s ease-in-out; +} + +/* Generate progress bar style */ +/*----------------------------------------------------------------*/ +.dark .progressDiv { + width: 100%; + height: 22px; + background: var(--colorBgContainer); + border-color: var(--colorFill); + border-width: 0.5px; + border-radius: var(--borderRadius) !important; + cursor: progress; +} + +.dark .progressDiv .progress { + background: var(--colorPrimary); + color: var(--colorText); + font-weight: bold; + line-height: 20px; + text-align: right; + border-radius: var(--borderRadius) !important; + cursor: progress; +} + +/*Generate progress bar position*/ +#txt2img_progressbar, +#img2img_progressbar, +#ti_progressbar { + position: absolute; + z-index: 1000; + right: 0; + padding-left: 5px; + padding-right: 5px; + display: block; + cursor: progress; +} + +#txt2img_progress_row, +#img2img_progress_row { + margin-bottom: 10px; + margin-top: -18px; + flex-direction: column; + gap: 0; +} + +#txt2img_progress_row > div { + min-width: calc(var(--leftColumn)); + max-width: var(--leftColumn); +} + +/* txt2img generation parameters left panel width */ +/*----------------------------------------------------------------*/ +#txt2img_settings { + min-width: var(--leftColumn); + max-width: var(--leftColumn); +} + +.dark .overflow-hidden .flex .flex-col .relative col .gap-4 { + min-width: var(--leftColumn); + max-width: var(--leftColumn); +} + +/* TI - HN - LoRa Cards */ +/*----------------------------------------------------------------*/ +#tabs .tabitem .card { + width: calc(3px * var(--cardsSize)); + height: calc(4.48px * var(--cardsSize)); + min-width: 50px !important; + min-height: 74.6px !important; + font-size: 60%; + text-align: center; + color: var(--colorPrimary); + transition: all 0.1s ease-in-out; + border-width: 1px; + border-color: var(--colorBorder); + box-shadow: none; +} + +#tabs .tabitem .card:hover { + border-width: 3px; + border-color: var(--colorPrimary); +} + +/* Extra network cards */ +#tabs .tabitem .extra-network-cards { + display: flex; + flex-wrap: wrap; +} + +.extra-network-cards .card .actions { + box-shadow: none; + border-radius: 0 !important; + background: linear-gradient(0deg, black, transparent); +} + +/* Options Row */ +/*----------------------------------------------------------------*/ + +#txt2img_tools, +#img2img_tools { + gap: 0.4em; + justify-content: center; +} + +/* New img2img buttons reposition and border*/ +/*----------------------------------------------------------------*/ + +.gap-4 { + gap: var(--padding); +} + +#tabs .flex-wrap .tabitem .gr-compact { + margin-left: 0; + z-index: 10; + gap: var(--paddingXS); +} + +[id^="img2img_label_copy_to_"] { + display: none !important; +} + +.dark + .gr-compact + .flex-col + .tabitem + .flex-col + .gr-compact + .gr-button-secondary { + border-width: 1px !important; +} + +/* Buttons */ +/*----------------------------------------------------------------*/ +#txt2img_generate, +#img2img_generate { + letter-spacing: 0.2rem; + font-weight: bold; + transition: all 0.3s ease-in-out; +} + +#txt2img_interrupt, +#img2img_interrupt, +#txt2img_skip, +#img2img_skip { + background: var(--colorBgContainer); + z-index: 11; + transition: all 0.3s ease-in-out; +} + +#txt2img_interrupt:hover, +#img2img_interrupt:hover, +#txt2img_skip:hover, +#img2img_skip:hover { + background: var(--colorFill); + color: var(--colorText); + z-index: 11; +} + +.dark .gr-button-primary, +#modelmerger_merge, +#deforum_generate, +#depthmap_generate, +#vxa_gen_btn { + background: var(--colorPrimary); + border-color: var(--colorPrimaryBorder); + color: var(--colorText); + z-index: 10; + transition: all 0.3s ease-in-out; + border-radius: var(--borderRadius) !important; +} + +.dark .gr-button-secondary, +.dark .gr-button-tool { + border-color: var(--colorFill); + border-width: 1px; + color: var(--colorText); + transition: all 0.3s ease-in-out; + border-radius: var(--borderRadius) !important; + backdrop-filter: blur(24px); + font-size: var(--fontSize); +} + +/* Buttons pulse effect */ +/*----------------------------------------------------------------*/ + +/*Generate*/ +#txt2img_generate:hover, +#img2img_generate:hover { + box-shadow: var(--boxShadow); +} + +#txt2img_generate:active, +#img2img_generate:active { +} + +/*Primary*/ +.dark .gr-button-primary:hover, +#modelmerger_merge:hover, +#deforum_generate:hover, +#depthmap_generate:hover, +#vxa_gen_btn:hover { + background: var(--colorPrimaryHover); + border-color: var(--colorPrimaryBorderHover); + color: var(--colorText); +} + +/*Secondary*/ +.dark .gr-button-secondary:hover, +.dark .gr-button-tool:hover { + border-color: var(--colorText); + border-width: 1px; + background-color: var(--colorFill); + color: var(--colorText); + box-shadow: 0 0 0 0.5em transparent; +} + +/* Context menu */ +/*----------------------------------------------------------------*/ +#context-menu { + border-color: var(--colorPrimary); + /*box-shadow: 1px 1px 2px var(--colorPrimary) ;*/ +} + +.dark .context-menu-items a:hover { + background: var(--colorFill); + color: var(--colorText); + /*box-shadow: 1px 1px 2px var(--colorFill) ;*/ +} +.dark .context-menu-items { + transition: all 0.3s ease-in-out; +} + +/* gradio 3.4.1 stuff for editable scrollbar values */ +/*----------------------------------------------------------------*/ +.dark .gr-box > div > div > input.gr-text-input { + position: absolute; + right: 0.5em; + z-index: 200; + width: 8em; + border-color: var(--colorBorderSecondary); +} + +.gap-px { + gap: 8px; +} + +.dark .gr-box > div > div > input.gr-text-input:hover, +.dark .gr-box > div > div > input.gr-text-input:focus { + border-color: var(--colorBorder); +} + +/* Quicksettings Range*/ +/*----------------------------------------------------------------*/ +#quicksettings [id^="setting_"] { + display: grid; +} + +#quicksettings [id^="setting_"] input[type="range"] { + display: flex !important; + align-items: flex-end !important; +} + +/* Gr-block gap and padding */ +/*----------------------------------------------------------------*/ +.dark .gr-block.gr-box { + row-gap: 1.1ch; + padding: var(--padding) 0; +} + +#tab_modelmerger .gr-input-label, +#tab_modelmerger .gr-button { + margin: var(--padding) 0; +} + +/* Promtgen extension*/ +/*----------------------------------------------------------------*/ +#promptgen_results_column tr .sendto { + display: inline; +} + +#promptgen_main .gr-compact { + min-width: var(--leftColumn); + max-width: var(--leftColumn); +} + +/*-------------------------------------*/ +/*---------------Sliders-------------- */ +/*-------------------------------------*/ + +.gradio-container input[type="range"] { + -webkit-appearance: none !important ; + background: transparent !important; +} + +.gradio-container input[type="range"]:focus { + outline: none !important; +} + +.gradio-container input[type="range"]::-webkit-slider-runnable-track { + cursor: pointer !important; + height: 6px !important; + border-radius: 3px !important; + background: var(--colorFill) !important; + opacity: 0.6 !important; +} + +.gradio-container input[type="range"]:hover::-webkit-slider-runnable-track { + background: var(--colorPrimary) !important; + opacity: 1 !important; + transition: all 0.2s ease-in-out; +} + +.gradio-container input[type="range"]::-moz-range-track { + cursor: pointer !important; + height: 6px !important; + border-radius: 3px !important; + background: var(--colorPrimary) !important; +} + +.gradio-container input[type="range"]:hover::-moz-range-track { + background: var(--colorPrimary) !important; + transition: all 0.2s ease-in-out; +} + +.gradio-container input[type="range"]::-ms-fill-upper, +.gradio-container input[type="range"]::-ms-fill-lower { + cursor: pointer !important; + height: 6px !important; + border-radius: 3px !important; + background: var(--colorPrimary) !important; +} + +.gradio-container input[type="range"]:hover::-ms-fill-upper, +.gradio-container input[type="range"]:hover::-ms-fill-lower { + background: var(--colorBgElevated) !important; + transition: all 0.2s ease-in-out; +} + +.gradio-container input[type="range"]::-webkit-slider-thumb { + border: 2px solid var(--colorText) !important; + height: 16px !important; + width: 16px !important; + border-radius: 16px !important; + background: var(--colorBgElevated) !important; + cursor: pointer !important; + -webkit-appearance: none !important; + margin-top: -5px !important; +} + +.gradio-container input[type="range"]:active::-webkit-slider-thumb { + box-shadow: 0 0 3px var(--colorPrimary) !important; + border: 2px solid var(--colorPrimary) !important; + background: var(--colorBgElevated) !important; +} + +.gradio-container input[type="range"]::-moz-range-thumb { + border: 2px solid var(--colorText) !important; + height: 16px !important; + width: 16px !important; + border-radius: 16px !important; + background: var(--colorBgElevated) !important; + cursor: pointer !important; + margin-top: -5px !important; + z-index: 999; +} + +.gradio-container input[type="range"]:active::-moz-range-thumb { + box-shadow: 0 0 3px var(--colorPrimary) !important; + border: 2px solid var(--colorPrimary) !important; + background: var(--colorBgElevated) !important; +} + +.gradio-container input[type="range"]::-ms-thumb { + border: 2px solid var(--colorText) !important; + height: 16px !important; + width: 16px !important; + border-radius: 16px !important; + background: var(--colorBgElevated) !important; + cursor: pointer !important; + margin-top: -5px !important; +} + +.gradio-container input[type="range"]:active::-ms-thumb { + box-shadow: 0 0 3px var(--colorPrimary) !important; + border: 2px solid var(--colorPrimary) !important; + background: var(--colorBgElevated) !important; +} + +/*----------------------------------------------------------------*/ +/* End of changes */ +/*----------------------------------------------------------------*/ + +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +::before, +::after { + box-sizing: border-box; +} + +/** +1. Correct the line height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size (opinionated). +*/ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + tab-size: 4; /* 3 */ +} + +/* +Sections +======== +*/ + +/** +1. Remove the margin in all browsers. +2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +*/ + +body { + margin: 0; /* 1 */ +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/*----------------------------------------------------------------*/ +/* Test code space*/ +/*----------------------------------------------------------------*/ + +/* To get the favicon working, +add this to webui.py besides prevent_thread_lock=True, -> + +favicon_path="favicon.svg", + +*/ diff --git a/style_choices/style.css b/style_choices/style.css new file mode 100644 index 0000000..adb1808 --- /dev/null +++ b/style_choices/style.css @@ -0,0 +1,1371 @@ +/*----------------------------------------------------------------*/ +/*----------------------------------------------------------------*/ +/*----------------------------------------------------------------*/ + +/*THEME VARIABLES*/ +:root, +*, +quickcss_target { + --colorPrimaryBg: #111a2c; + --colorPrimaryBgHover: #112545; + --colorPrimaryBorder: #15325b; + --colorPrimaryBorderHover: #15417e; + --colorPrimaryHover: #3c89e8; + --colorPrimary: #1668dc; + --colorPrimaryActive: #1554ad; + --colorPrimaryTextHover: #3c89e8; + --colorPrimaryText: #1668dc; + --colorPrimaryTextActive: #1554ad; + --colorErrorBg: #2c1618; + --colorErrorBgHover: #451d1f; + --colorErrorBorder: #5b2526; + --colorErrorBorderHover: #7e2e2f; + --colorErrorHover: #e86e6b; + --colorError: #dc4446; + --colorErrorActive: #ad393a; + --colorErrorTextHover: #e86e6b; + --colorErrorText: #dc4446; + --colorErrorTextActive: #ad393a; + --colorText: rgba(255, 255, 255, 0.85); + --colorTextSecondary: rgba(255, 255, 255, 0.65); + --colorTextTertiary: rgba(255, 255, 255, 0.45); + --colorTextQuaternary: rgba(255, 255, 255, 0.25); + --colorBgContainer: #141414; + --colorBgElevated: #1f1f1f; + --colorBgLayout: #141414; + --colorBgSpotlight: #424242; + --colorBgMask: rgba(0, 0, 0, 0.45); + --colorBorder: #424242; + --colorBorderSecondary: #303030; + --colorFill: rgba(255, 255, 255, 0.18); + --colorFillSecondary: rgba(255, 255, 255, 0.12); + --colorFillTertiary: rgba(255, 255, 255, 0.08); + --colorFillQuaternary: rgba(255, 255, 255, 0.04); + + /*ENDCOLORPICKERS*/ + --fontSizeBase: 14; + --borderRadiusBase: 2; + --marginBase: 4; + --paddingBase: 4; + --leftPannelWidth: 42; + --cardsSize: 50; + + /*BREAKFILEREADER*/ + --boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + + --fontSizeSM: calc(1px * var(--fontSizeBase) - 2px); + --fontSize: calc(1px * var(--fontSizeBase)); + --fontSizeLG: calc(1px * var(--fontSizeBase) + 2px); + --fontSizeXL: calc(1px * var(--fontSizeBase) + 4px); + + --borderRadiusXS: calc(1px * var(--borderRadiusBase)); + --borderRadiusSM: calc(2px * var(--borderRadiusBase)); + --borderRadius: calc(3px * var(--borderRadiusBase)); + --borderRadiusLG: calc(4px * var(--borderRadiusBase)); + + --marginXXS: calc(1px * var(--marginBase)); + --marginXS: calc(2px * var(--marginBase)); + --marginSM: calc(3px * var(--marginBase)); + --margin: calc(4px * var(--marginBase)); + --marginMD: calc(5px * var(--marginBase)); + --marginLG: calc(6px * var(--marginBase)); + --marginXL: calc(8px * var(--marginBase)); + --marginXXL: calc(12px * var(--marginBase)); + + --paddingXXS: calc(1px * var(--paddingBase)); + --paddingXS: calc(2px * var(--paddingBase)); + --paddingSM: calc(3px * var(--paddingBase)); + --padding: calc(4px * var(--paddingBase)); + --paddingMD: calc(5px * var(--paddingBase)); + --paddingLG: calc(6px * var(--paddingBase)); + --paddingXL: calc(8px * var(--paddingBase)); + + --logo: url("https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg"); + --favicon: url("https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg"); + --galleryBackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) + 0% 0% / 20px; + --leftColumn: calc(20px * var(--leftPannelWidth)); +} + +/* Quickcss extension */ +/*----------------------------------------------------------------*/ +#hidden { + visibility: hidden; +} + +#quickcss_colorpicker { + max-width: 10vw; +} + +input[type="color"] { + width: 100%; +} + +/* Favicon workaround */ +.icon-container { + background-image: var(--favicon); +} + +/*================================================ */ +/* User.css Changes */ +/*================================================ */ + +.gradio-container { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: var(--fontSize); + margin: 0; /* 1 */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + background-image: radial-gradient( + circle 600px at calc(100% - 300px) 300px, + var(--colorPrimaryBgHover), + var(--colorBgLayout) + ); + background-repeat: no-repeat; +} + +/* Header */ +/*----------------------------------------------------------------*/ + +#tabs > .tabitem { + background: transparent; + border: none; + padding: var(--padding); + margin-top: 118px; +} + +#tabs > div:first-child { + position: fixed; + top: 90px; + z-index: 1000; + flex-wrap: nowrap; + width: 100%; + border: none; +} + +#tabs > div:first-child > button { + border: none; + border-bottom: 2px solid transparent !important; + flex: none; +} + +#tabs > div:first-child > button:hover { + border: none; + border-bottom: 2px solid var(--colorPrimary) !important; + flex: none; +} + +#tabs > div:first-child > button.bg-white { + background: transparent; + border: none; + border-bottom: 2px solid var(--colorPrimary) !important; +} + +#quicksettings { + position: fixed; + z-index: 1000; + flex-wrap: nowrap; + top: 32px; +} + +#quicksettings > * { + z-index: 1000; +} + +#quicksettings:before { + content: ""; + display: block; + background: var(--logo) no-repeat; + width: 129px; + height: 26px; + z-index: 1000; + margin-right: 36px; + margin-left: 16px; + margin-top: 4px; +} + +#quicksettings:after { + content: ""; + display: block; + position: fixed; + width: 100vw; + height: 121px; + top: 0; + left: 0; + z-index: 999; + border-block-end: 1px solid var(--colorBorderSecondary); + background: var(--colorFillQuaternary); + backdrop-filter: blur(24px); +} + +#quicksettings select { + background-color: var(--colorFillTertiary); + border: none !important; + cursor: pointer; + z-index: 2; +} + +#quicksettings select:hover { + background-color: var(--colorFillSecondary) !important; +} + +#quicksettings .gr-button-tool { + margin-right: 8px; + margin-left: -4px; +} +#quicksettings .gr-button-tool:hover { + background-color: var(--colorFillSecondary) !important; +} + +#quicksettings label > span.block { + margin: 0; + width: 100%; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + font-size: 12px; + z-index: 1; + top: -18px; + background: transparent; + border: none; + color: var(--colorTextQuaternary); +} + +option { + background: var(--colorBgElevated) !important; +} + +.dark ul.dark\:bg-gray-700 { + background: var(--colorBgElevated) !important; + box-shadow: var(--boxShadow) !important; +} + +/* Prompt Translator */ +/*----------------------------------------------------------------*/ + +#prompt_trans_toolbar button:hover { + background-color: var(--colorFillSecondary) !important; +} + +#prompt_trans_toolbar > span > input { + margin-bottom: 4px; + cursor: pointer; +} + +#prompt_trans_toolbar > span > span { + margin-left: 8px; + display: inline-block; + padding: 4px 8px; + background-color: var(--colorFillQuaternary); + color: var(--colorTextQuaternary); + line-height: 1; +} + +#switch_prompt_btn { + display: none; +} + +/* Top Row */ +/*----------------------------------------------------------------*/ + +[id$="2img_toprow"] { + padding: 0 !important; + border-radius: 0 !important; + height: 222px; +} + +[id$="2img_toprow"] .gr-block.gr-box { + padding: 0 !important; +} + +[id$="2img_actions_column"] { + margin: 0 !important; +} + +[id$="2img_prompt_container"] { + margin-right: 1em; +} + +#interrogate_col { + min-width: 112px !important; +} + +[id$="2img_prompt_container"] textarea { + height: 100px !important; + overflow-x: hidden !important; + overflow-y: scroll !important; +} + +[id$="2img_prompt"] textarea { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + margin-bottom: 1px; + color: rgba(208, 226, 178, 0.98) !important; +} + +[id$="2img_prompt"] textarea:focus { + color: rgba(244, 255, 225, 0.98) !important; +} + +[id$="2img_neg_prompt"] textarea { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + color: rgba(236, 210, 213, 0.98) !important; +} + +[id$="2img_neg_prompt"] textarea:focus { + color: rgba(255, 240, 242, 0.98) !important; +} + +span.gr-box.gr-text-input { + border: 1px solid var(--colorBorder); + background: var(--colorBgElevated); + color: var(--colorTextSecondary); + top: -10px; +} + +.dark .border-b-2.flex-wrap.dark\:border-gray-700 { + border: none !important; + margin-bottom: var(--margin); +} + +.dark .border-b-2.flex-wrap.dark\:border-gray-700 button.bg-white { + border: none !important; + background: var(--colorFill); +} + +/* Gradio app font */ +/*----------------------------------------------------------------*/ + +.dark .gradio-container, +.dark .gr-compact, +.dark .flex-wrap, +.dark * .flex-wrap .rounded-t-lg, +.dark * .flex-wrap .border-transparent { + transition: all 0.3s ease-in-out; +} + +/*Css hide Gradio text, progress bar and animations*/ +/*----------------------------------------------------------------*/ +* .wrap.m-12, +* .wrap.z-20, +* .meta-text-center, +* .meta-text, +* .wrap.m-12 svg, +* .wrap.z-20 svg, +* .wrap.svelte-5usjvi { + display: none; + inset: 100%; +} + +/*Css show loading text on SD models selector*/ +/*----------------------------------------------------------------*/ +#setting_sd_model_checkpoint .wrap.svelte-5usjvi, +#setting_sd_model_checkpoint .meta-text-center, +#setting_sd_model_checkpoint .meta-text { + inset: 0; + display: flex; + justify-content: center; + color: var(--colorText); +} + +#setting_sd_model_checkpoint .wrap.svelte-5usjvi { + inset: 0; + display: flex; + justify-content: center; + color: var(--colorText); +} + +/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */ +.dark .transition.opacity-20 { + opacity: 1; +} + +/* Tab buttons */ +/*----------------------------------------------------------------*/ +#tabs > div:first-of-type button { + font-size: 90%; + transition: all 0.3s ease-in-out; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +#tabs > div:first-of-type button:hover { + border-color: 0 0 0 0.2em var(--colorText); + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +/* UI border radius */ +/*----------------------------------------------------------------*/ +.dark .gradio-container *, +.dark .gr-compact *, +.dark .rounded-t-lg, +.dark .tabitem *, +.dark .flex-wrap *, +.dark .svelte-10ogue4 > .flex-col { + border-radius: var(--borderRadius) !important; +} + +/* Selected text colors */ +/*----------------------------------------------------------------*/ +*::selection { + color: var(--colorText); + background-color: var(--colorPrimaryBorderHover); +} + +/* App Colors */ +/*----------------------------------------------------------------*/ +.dark, +.dark\:bg-gray-900, +.dark .gr-button-primary, +.dark .dark\:text-gray-200, +.dark .text-gray-700, +.dark .text-gray-800, +.dark .text-gray-900, +.dark .text-gray-500, +.dark .\!text-gray-700, +.dark .\!text-gray-800 { + color: var(--colorText); +} + +/* Input Colors */ +/*----------------------------------------------------------------*/ +.dark .gr-input { + color: var(--colorTextSecondary); + background-color: var(--colorFillQuaternary) !important; + border-color: transparent !important; + transition: all 0.3s ease-in-out; +} + +.dark .gr-input:hover { + color: var(--colorText); + background-color: var(--colorFillTertiary) !important; + border-color: transparent !important; +} + +.dark .gr-input:focus { + color: var(--colorText); + background-color: var(--colorFillQuaternary) !important; + border-color: var(--colorFill) !important; +} + +/* Background colors */ +/*----------------------------------------------------------------*/ +.dark, +.dark .gr-button, +.dark .bg-white, +.dark .gr-panel, +.dark .gr-button-lg, +.dark .gr-box, +.dark .gr-button-tool, +.dark .dark\:bg-gray-700, +.dark .dark\:bg-gray-950, +.dark .bg-gray-700, +.dark .bg-gray-950, +.dark fieldset span.text-gray-500, +.dark .gr-block.gr-box span.text-gray-500, +.dark label.block span, +#quicksettings, +#tabs .tabitem .gr-compact { + background-color: transparent; +} + +.dark fieldset span.text-gray-500, +.dark .gr-block.gr-box span.text-gray-500, +.dark label.block span { + padding: 0; + margin: 0; + font-size: var(--fontSizeSM); + color: var(--colorTextSecondary); + border: none; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); +} + +#script_list { + margin: var(--marginXL) 0 0; + padding: 0; +} + +#script_list select { + margin-top: var(--marginXL); +} + +[id$="_seed_row"] { + padding: 0; +} + +div.svelte-10ogue4 > .p-3.border.border-gray-200 { + background-color: var(--colorFillTertiary) !important; + border-color: transparent !important; + transition: all 0.3s ease-in-out; + margin-bottom: var(--marginSM); +} + +div.svelte-10ogue4 .flex.row.w-full.flex-wrap.gap-4 { + margin-top: var(--marginLG); +} + +div.svelte-10ogue4 .flex.row.w-full.flex-wrap.gap-4 > div { + padding: 0 !important; +} + +div.svelte-10ogue4 .flex.row.w-full.flex-wrap.gap-4 > button { + margin: 0 !important; +} + +.flex.gap-4, +.flex.gap-4 > .border { + border: none; +} + +.gr-panel { + padding: 0; +} + +.tabitem.p-2.border-2 { + padding: 0; + margin-bottom: var(--margin) 0; + border: none !important; +} + +.dark .bg-gray-200, +.dark .dark\:bg-gray-200, +.dark .bg-gray-200.\!text-gray-700, +#txt2img_gallery_container .livePreview { + background-color: transparent !important; +} + +.livePreview { + background: var(--galleryBackground) !important; + margin: 0 !important; + border: 2px solid var(--colorBorder) !important; +} + +/* Galleries */ +/*----------------------------------------------------------------*/ +div.svelte-10ogue4 .gr-block.gr-box.relative.w-full.border-dashed, +[id$="_gallery"].gr-block.gr-box, +#img2img_img2img_tab, +#img2img_img2img_sketch_tab, +#img2img_inpaint_sketch_tab, +#img2img_inpaint_tab, +#img2img_inpaint_upload_tab, +#pnginfo_image, +#extras_single_tab, +#extras_batch_process_tab, +#extras_batch_directory_tab { + border-radius: var(--borderRadius) !important; + background: var(--galleryBackground) !important; + transition: all 1s ease-in-out; + box-shadow: 0 0 0 0.2em transparent; + border: 2px solid var(--colorBorder) !important; + padding: var(--paddingXS) !important; +} + +#img2img_batch_tab, +#extras_batch_directory_tab { + background: var(--colorBgContainer) !important; + border-radius: var(--borderRadius) !important; + border: 2px solid var(--colorBorder) !important; + padding: var(--padding) !important; +} + +#txt2img_image_browser_gallery { + padding: 0 !important; +} + +#img_inpaint_mask { + background: var(--colorFillTertiary) !important; +} + +.dark .group { + max-height: 60vh; +} + +[id$="_gallery"] svg { + display: none; +} + +#txt2img_gallery:hover, +#img2img_gallery:hover, +#extras_gallery:hover, +#depthmap_gallery:hover, +#ti_gallery:hover, +#sp_gallery:hover { + box-shadow: 0 0 0 0.5em transparent; +} + +.dark .gr-input-label, +.dark .gr-button { + background: var(--colorFillSecondary); + transition: all 0.3s ease-in-out; +} + +th { + border-color: var(--colorBorderSecondary); +} + +.token { + padding: 4px 12px 4px 4px; +} + +.dark .backdrop-blur .modify-upload .hover\:shadow-xl { + border-style: solid; + border-color: var(--colorFill); + border-width: 1px; +} + +/* Svg */ +.dark .backdrop-blur .modify-upload svg { + display: block !important; +} + +/* Gallery items*/ +/*----------------------------------------------------------------*/ +#gallery_item { + border-width: 2px; +} + +.dark .gallery-item.svelte-1g9btlg.svelte-1g9btlg { + box-shadow: 0 0 0 1px var(--colorBorder); + backdrop-filter: blur(24px); + --tw-ring-color: var(--colorPrimary) !important; +} + +.dark .dark\:bg-gray-900 { + --tw-bg-opacity: 1; + background-color: var(--colorBgContainer); +} + +button.dark\:bg-gray-900 { + border: 1px solid var(--colorBorder); +} + +[id$="2img_gallery"] .group.dark\:bg-gray-900 { + background: var(--galleryBackground) !important; + padding: var(--paddingXS) !important; +} + +#img2img_image, +#img2img_sketch, +#img2maskimg, +#inpaint_sketch { + padding: 0; + margin-bottom: var(--margin); +} + +/* Gallery items fix */ +/*----------------------------------------------------------------*/ +#img2img_image, +#img2img_image > .h-60, +#img2img_image > .h-60 > div, +#img2img_image > .h-60 > div > img, +#img2img_sketch, +#img2img_sketch > .h-60, +#img2img_sketch > .h-60 > div, +#img2img_sketch > .h-60 > div > img, +#img2maskimg, +#img2maskimg > .h-60, +#img2maskimg > .h-60 > div, +#img2maskimg > .h-60 > div > img, +#inpaint_sketch, +#inpaint_sketch > .h-60, +#inpaint_sketch > .h-60 > div, +#inpaint_sketch > .h-60 > div > img { + height: 550px; + max-height: 100% !important; + min-height: 90% !important; +} + +/* Checks */ +/*----------------------------------------------------------------*/ +.dark .gr-check-radio:checked { + background-color: var(--colorPrimary); +} + +input[type="checkbox"]:checked + span, +input[type="radio"]:checked + span { + color: var(--colorPrimary); +} + +.dark\:bg-transparent:hover { + color: var(--colorText); + transition: all 0.3s ease-in-out; +} + +/* Generate progress bar style */ +/*----------------------------------------------------------------*/ +.dark .progressDiv { + width: 100%; + height: 22px; + background: var(--colorBgContainer); + border-color: var(--colorFill); + border-width: 0.5px; + border-radius: var(--borderRadius) !important; + cursor: progress; +} + +.dark .progressDiv .progress { + background: var(--colorPrimary); + color: var(--colorText); + font-weight: bold; + line-height: 20px; + text-align: right; + border-radius: var(--borderRadius) !important; + cursor: progress; +} + +/*Generate progress bar position*/ +#txt2img_progressbar, +#img2img_progressbar, +#ti_progressbar { + position: absolute; + z-index: 1000; + right: 0; + padding-left: 5px; + padding-right: 5px; + display: block; + cursor: progress; +} + +#txt2img_progress_row, +#img2img_progress_row { + margin-bottom: 10px; + margin-top: -18px; + flex-direction: column; + gap: 0; +} + +#txt2img_progress_row > div { + min-width: calc(var(--leftColumn)); + max-width: var(--leftColumn); +} + +/* txt2img generation parameters left panel width */ +/*----------------------------------------------------------------*/ +#txt2img_settings { + min-width: var(--leftColumn); + max-width: var(--leftColumn); +} + +.dark .overflow-hidden .flex .flex-col .relative col .gap-4 { + min-width: var(--leftColumn); + max-width: var(--leftColumn); +} + +/* TI - HN - LoRa Cards */ +/*----------------------------------------------------------------*/ +#tabs .tabitem .card { + width: calc(3px * var(--cardsSize)); + height: calc(4.48px * var(--cardsSize)); + min-width: 50px !important; + min-height: 74.6px !important; + font-size: 60%; + text-align: center; + color: var(--colorPrimary); + transition: all 0.1s ease-in-out; + border-width: 1px; + border-color: var(--colorBorder); + box-shadow: none; +} + +#tabs .tabitem .card:hover { + border-width: 3px; + border-color: var(--colorPrimary); +} + +/* Extra network cards */ +#tabs .tabitem .extra-network-cards { + display: flex; + flex-wrap: wrap; +} + +.extra-network-cards .card .actions { + box-shadow: none; + border-radius: 0 !important; + background: linear-gradient(0deg, black, transparent); +} + +/* Options Row */ +/*----------------------------------------------------------------*/ + +#txt2img_tools, +#img2img_tools { + gap: 0.4em; + justify-content: center; +} + +/* New img2img buttons reposition and border*/ +/*----------------------------------------------------------------*/ + +.gap-4 { + gap: var(--padding); +} + +#tabs .flex-wrap .tabitem .gr-compact { + margin-left: 0; + z-index: 10; + gap: var(--paddingXS); +} + +[id^="img2img_label_copy_to_"] { + display: none !important; +} + +.dark + .gr-compact + .flex-col + .tabitem + .flex-col + .gr-compact + .gr-button-secondary { + border-width: 1px !important; +} + +/* Buttons */ +/*----------------------------------------------------------------*/ +#txt2img_generate, +#img2img_generate { + letter-spacing: 0.2rem; + font-weight: bold; + transition: all 0.3s ease-in-out; +} + +#txt2img_interrupt, +#img2img_interrupt, +#txt2img_skip, +#img2img_skip { + background: var(--colorBgContainer); + z-index: 11; + transition: all 0.3s ease-in-out; +} + +#txt2img_interrupt:hover, +#img2img_interrupt:hover, +#txt2img_skip:hover, +#img2img_skip:hover { + background: var(--colorFill); + color: var(--colorText); + z-index: 11; +} + +.dark .gr-button-primary, +#modelmerger_merge, +#deforum_generate, +#depthmap_generate, +#vxa_gen_btn { + background: var(--colorPrimary); + border-color: var(--colorPrimaryBorder); + color: var(--colorText); + z-index: 10; + transition: all 0.3s ease-in-out; + border-radius: var(--borderRadius) !important; +} + +.dark .gr-button-secondary, +.dark .gr-button-tool { + border-color: var(--colorFill); + border-width: 1px; + color: var(--colorText); + transition: all 0.3s ease-in-out; + border-radius: var(--borderRadius) !important; + backdrop-filter: blur(24px); + font-size: var(--fontSize); +} + +/* Buttons pulse effect */ +/*----------------------------------------------------------------*/ + +/*Generate*/ +#txt2img_generate:hover, +#img2img_generate:hover { + box-shadow: var(--boxShadow); +} + +#txt2img_generate:active, +#img2img_generate:active { +} + +/*Primary*/ +.dark .gr-button-primary:hover, +#modelmerger_merge:hover, +#deforum_generate:hover, +#depthmap_generate:hover, +#vxa_gen_btn:hover { + background: var(--colorPrimaryHover); + border-color: var(--colorPrimaryBorderHover); + color: var(--colorText); +} + +/*Secondary*/ +.dark .gr-button-secondary:hover, +.dark .gr-button-tool:hover { + border-color: var(--colorText); + border-width: 1px; + background-color: var(--colorFill); + color: var(--colorText); + box-shadow: 0 0 0 0.5em transparent; +} + +/* Context menu */ +/*----------------------------------------------------------------*/ +#context-menu { + border-color: var(--colorPrimary); + /*box-shadow: 1px 1px 2px var(--colorPrimary) ;*/ +} + +.dark .context-menu-items a:hover { + background: var(--colorFill); + color: var(--colorText); + /*box-shadow: 1px 1px 2px var(--colorFill) ;*/ +} +.dark .context-menu-items { + transition: all 0.3s ease-in-out; +} + +/* gradio 3.4.1 stuff for editable scrollbar values */ +/*----------------------------------------------------------------*/ +.dark .gr-box > div > div > input.gr-text-input { + position: absolute; + right: 0.5em; + z-index: 200; + width: 8em; + border-color: var(--colorBorderSecondary); +} + +.gap-px { + gap: 8px; +} + +.dark .gr-box > div > div > input.gr-text-input:hover, +.dark .gr-box > div > div > input.gr-text-input:focus { + border-color: var(--colorBorder); +} + +/* Quicksettings Range*/ +/*----------------------------------------------------------------*/ +#quicksettings [id^="setting_"] { + display: grid; +} + +#quicksettings [id^="setting_"] input[type="range"] { + display: flex !important; + align-items: flex-end !important; +} + +/* Gr-block gap and padding */ +/*----------------------------------------------------------------*/ +.dark .gr-block.gr-box { + row-gap: 1.1ch; + padding: var(--padding) 0; +} + +#tab_modelmerger .gr-input-label, +#tab_modelmerger .gr-button { + margin: var(--padding) 0; +} + +/* Promtgen extension*/ +/*----------------------------------------------------------------*/ +#promptgen_results_column tr .sendto { + display: inline; +} + +#promptgen_main .gr-compact { + min-width: var(--leftColumn); + max-width: var(--leftColumn); +} + +/*-------------------------------------*/ +/*---------------Sliders-------------- */ +/*-------------------------------------*/ + +.gradio-container input[type="range"] { + -webkit-appearance: none !important ; + background: transparent !important; +} + +.gradio-container input[type="range"]:focus { + outline: none !important; +} + +.gradio-container input[type="range"]::-webkit-slider-runnable-track { + cursor: pointer !important; + height: 6px !important; + border-radius: 3px !important; + background: var(--colorFill) !important; + opacity: 0.6 !important; +} + +.gradio-container input[type="range"]:hover::-webkit-slider-runnable-track { + background: var(--colorPrimary) !important; + opacity: 1 !important; + transition: all 0.2s ease-in-out; +} + +.gradio-container input[type="range"]::-moz-range-track { + cursor: pointer !important; + height: 6px !important; + border-radius: 3px !important; + background: var(--colorPrimary) !important; +} + +.gradio-container input[type="range"]:hover::-moz-range-track { + background: var(--colorPrimary) !important; + transition: all 0.2s ease-in-out; +} + +.gradio-container input[type="range"]::-ms-fill-upper, +.gradio-container input[type="range"]::-ms-fill-lower { + cursor: pointer !important; + height: 6px !important; + border-radius: 3px !important; + background: var(--colorPrimary) !important; +} + +.gradio-container input[type="range"]:hover::-ms-fill-upper, +.gradio-container input[type="range"]:hover::-ms-fill-lower { + background: var(--colorBgElevated) !important; + transition: all 0.2s ease-in-out; +} + +.gradio-container input[type="range"]::-webkit-slider-thumb { + border: 2px solid var(--colorText) !important; + height: 16px !important; + width: 16px !important; + border-radius: 16px !important; + background: var(--colorBgElevated) !important; + cursor: pointer !important; + -webkit-appearance: none !important; + margin-top: -5px !important; +} + +.gradio-container input[type="range"]:active::-webkit-slider-thumb { + box-shadow: 0 0 3px var(--colorPrimary) !important; + border: 2px solid var(--colorPrimary) !important; + background: var(--colorBgElevated) !important; +} + +.gradio-container input[type="range"]::-moz-range-thumb { + border: 2px solid var(--colorText) !important; + height: 16px !important; + width: 16px !important; + border-radius: 16px !important; + background: var(--colorBgElevated) !important; + cursor: pointer !important; + margin-top: -5px !important; + z-index: 999; +} + +.gradio-container input[type="range"]:active::-moz-range-thumb { + box-shadow: 0 0 3px var(--colorPrimary) !important; + border: 2px solid var(--colorPrimary) !important; + background: var(--colorBgElevated) !important; +} + +.gradio-container input[type="range"]::-ms-thumb { + border: 2px solid var(--colorText) !important; + height: 16px !important; + width: 16px !important; + border-radius: 16px !important; + background: var(--colorBgElevated) !important; + cursor: pointer !important; + margin-top: -5px !important; +} + +.gradio-container input[type="range"]:active::-ms-thumb { + box-shadow: 0 0 3px var(--colorPrimary) !important; + border: 2px solid var(--colorPrimary) !important; + background: var(--colorBgElevated) !important; +} + +/*----------------------------------------------------------------*/ +/* End of changes */ +/*----------------------------------------------------------------*/ + +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +::before, +::after { + box-sizing: border-box; +} + +/** +1. Correct the line height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size (opinionated). +*/ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + tab-size: 4; /* 3 */ +} + +/* +Sections +======== +*/ + +/** +1. Remove the margin in all browsers. +2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +*/ + +body { + margin: 0; /* 1 */ +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/*----------------------------------------------------------------*/ +/* Test code space*/ +/*----------------------------------------------------------------*/ + +/* To get the favicon working, +add this to webui.py besides prevent_thread_lock=True, -> + +favicon_path="favicon.svg", + +*/