You don't need to remove them. It's just important to know, so you can get more flexibility.

Managed to remove all the unnecesary !important

https://pastebin.com/frSUF2xN

just 4 were necesary.. xD

Also added Normalize.css template to the user.css

https://necolas.github.io/normalize.css/

I played with the idea, what if instead of our work being on the back end of scripts, if we got in on the top side.
From what I understand. Gradio uses tailwindcss. Tailwind allows you to create modals, that are different popups. Tailwind allows you to create themes for them. The way gradio uses it, they make the modal full width.
Another tool gradio uses, is svelte. Svelte allows you to package scripts and markup, to make a svelte component.

Tailwindcss allows you to create a tailwind.config.js file, which is basically a json file with the definitions of how it should be themed.
I haven't tracked all files down, but here's a related one, it looks like a mapping for tailwind to assign classes for themeing, but it is not the theme itself. http://localhost:7860/assets/styles.ed3b21b5.js

Copy and paste this in your browser console.

var quickcssShadowCopy;
var quickcssNestedRuleLists = new Array;
function quickcssFetchRules(){
quickcssShadowCopy = document.querySelector("gradio-app").shadowRoot;
Array.from(quickcssShadowCopy.styleSheets).forEach( sht => quickcssNestedRuleLists.push(Array.from(sht.cssRules)));
quickcssNestedRuleLists.push(Array.from(quickcssShadowCopy.querySelector("style").sheet.cssRules));
}
function seekRule(searchTerm){
    var resultArray = new Array;
    quickcssNestedRuleLists.forEach( 
        childArry => childArry.forEach(
            styleRule => {
                if (styleRule.cssText.includes(searchTerm)){
                    resultArray.push(styleRule)
                }
            }
        )
    )
    return resultArray
}
quickcssFetchRules()

Then to use it. Call the function seekRule.

seekRule("cover-bg")

This will show all the css rules that has those words included.

This one has two. 0 and 1.
The item returned from the function is an array. So you could capture it in a variable if you want to hang on to it for a bit while inspecting it.

var q = seekRule("!important")
q

Now you can filter for all of the ones that use border, color, background, background-color, pseudoclasses like :hover, :before, :after, etcetera.

Interesting, let me give it a look and try to learn about that... Maybe we can reestructure the layout and theme instead of just making changes on a css file... that gives more freedom...

also, happy new year,!!!

Try editing a color, Then type a save as name when the save-as text box expands, which will unhide the save button.
That textbox shows the return value that will be written to file, in addition, it will write the comment for it to recognize where color's stop.
If that textbox is blank, it will just write a comment, putting BREAKFILEREADER as the first thing. No reads and writes to the file will work as expected going forward.
Yes, it would be better to make this more clear by changing the variant and interactiveness. Changing the flow a person would do, from top to the bottom.

You might notice that because you've modified some files locally, ones that are part of the webui repository, you might get a message like this:

To avoid causing others this issue, this is why I haven't written a script to add the favicon to the webui file.
I don't know git well enough to script it in to others systems. When I get stuck, I tend to do a hard reset and edit the files again.
I'll need to learn how to handle this better at some point. For now, I'm letting it be, might add a script in javascript to load the favicon onLoad.

--logo: url('file=extensions/sd-web-ui-quickcss/logos/logo.png');
--favicon: url('file=extensions/sd-web-ui-quickcss/favicons/favicon.svg');

There are two issues with this.
One of the goals, was to allow a person to pick the logo and favicon they want.
The way I handle this, is pull the image out from the folder and give it the name the css looks for.
Perhaps, for organizing, we can use a subfolder in the extension, we could possibly call it static.
So when a person picks their image, a copy is moved from the logos folder in to static, giving the proper name.

The second issue. The extension folder name can be different on different computers.
You have to bet, that if there is a way to break it, someone will.
Because I have two builds of the webui, and projects I work on. I put them in a different folder outside of the project, and use symlinks.
To avoid name conflicts if I run a dev build and I test the install process others go through, I have to give different names so they can install side by side (just disable one).
I think renaming would be an common thing. The webui gives an oppurtunity for someone to give a different name to the folder very easily.

There are many reasons why a person would choose to do so.
One can be from "just 'cause it's an option", all the way to different organizational reasons (disable ones that start with "something" when not on that task and enable the ones that start with "something else").

This means the css needs to be aware of the folder name somehow, or the choosen files need to live higher up the heirarchy.
Ideally, it would be in a 'static' folder.

@Gerschel,

Any idea why Extras > Upscalers section would show like this? (each upscaler is repeated 45x)

Thats a problem with the Web UI.. it happens when u restart the app over and over, it doenst update the upscalers list, just keep adding them n times you restart the UI.. it happens to me, I already reported the bug... -> AUTOMATIC1111/stable-diffusion-webui#6136

Neon Update:

https://pastebin.com/0waPx6Da

Alani:

https://pastebin.com/frSUF2xN

also, I have created a Repo: https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111-

I appreciate it.
I noticed.
Thanks for your help thus far, and motivating me to make this better.

Thank you for all the coding and good ideas..!!!

I have updated again both css files on my repo with your changes.

Returned the filepath of favicon and logo to SD root folder, added gradio container to the general UI Radius line code. and added radius code to galleries.

--logo: url('file=logo.png');
--favicon: url('file=favicon.svg');

.gradio-container * {
     border-radius: calc(1px *var(--UI_radius)) !important;
 }

and

#txt2img_gallery, 
#img2img_gallery,
#extras_gallery,
#depthmap_gallery,
#ti_gallery,
#sp_gallery,
#txt2img_images_history_gallery,
#img2img_images_history_gallery,
#txt2img-grids_images_history_gallery,
#img2img-grids_images_history_gallery,
#Extras_images_history_gallery, 
#Favorites_images_history_gallery {
    border-radius: calc(1px *var(--UI_radius)) !important;

Thanks..!

I have added you as a collaborator to Dark-Themes-SD-WebUI-Automatic1111- Repo

So, if you want, you can make updates on the files.

Also, if you want, you can point the repo to your branch, I have updated the favicon and logo file names because the ones you have are with long paths names.. hehehe

Okay, so I went ahead and updated my original .css retrowave theme up to this point in @Nacurutu 's suggestions and the stylesheet seems to be okay so far. I'm not sure at what point it toasted it to the above "after" shot above. I'll continue on with whatever changes you recommend to fit the mold of your extension; just wanted to give you an update.

Here the latest I have:

https://gist.github.com/ParityError/abe95ff010738cc0634f47da5e52bb87 (Revision 3)

EDIT: Looks like I lost the nice curve on some of my buttons and boxes, looking into it now. NVM, I found the setting in the quickcss extension controls! It works well :)

Give this a shot, send an img to img2img, you'll see that it's blank, the cursor dissapears behind the layer.
I haven't looked in to it much yet, but at the location, there are several layers, one of them is taking precedence.
Hidiing and unhiding is done through gradio app.

The weird display on those bars was because, the sliders are styled by default by the browser, to enable styling on your own, you have to disable browser defaults, with -webkit-appearance or the appearance rule. But then, all styling is gone, and you have to build up each layers. It's one of the more complicated pieces. It probably boilded down to forgetting to set style rules for one of the browsers.

Personally, I like the running track fill color to be seen. Myself, I tried building up my shape, outline background, background in track, but somehow can't seem to get fill color, unless I tell browser, fuck it. Use defaults, but change accent.

Text gray 400 background-color.

Perhaps it needs better targeting, or untargeting using :not()

Here, try replacing the
.text-gray-400 rule with this
.text-gray-400:not(div[data-testid*=image] [class*=inset-0])

This rule says all with the text-gray-400 class, except for the one that have a class inset-0 that lives in a data-testid that includes image.

It might void the text color, so it might need to be a separate rule that follows so it can overrule without having to use !important.
********************* edit, invert what I did below pull the not out so it sticks a transparent on *******************

.text-gray-400{
    color: var(--subtext0);
    background-color: var(--area);
}
.text-gray-400:not(div[data-testid*=image] [class*=inset-0]){
color: var(--subtext0);
background-color: transparent;
}

Here's exactly how the rules need to change.

.text-gray-400{
    color: var(--subtext0);
    background-color: var(--area);
}
div[data-testid*=image] [class*=inset-0]{
color: var(--subtext0);
background-color: transparent;
}

Updating now.

I notice you use version numbers. This can be useful, so we can say in code, that if a version number reads above this value, then the javascript can behave differently (upgraded formats), without breaking prior versions.

An upgrade I was thinking about, hot swaps, so an apply immediately changes the look, instead of having to reload.
The way the file is appended in memory, There is no separation, as different files.
A1111 has it where they are concatenated as a single file.

This is why I had to use a target, so the js could find it. I then took advantage of the target for making the file read and write faster.

To make it hot swappable, I'd need to replace the entire ruleset.
To isolate it, from the single long file in memory, I would need a start and end point.

This means that we would need some marker at the beginning of the file, and at the end.
The marker can't be a comment, because comments are stripped off in the CSSRules.

It could be a dummy rule. That affects nothing.

Sounds a great upgrade to the extension, great idea to have a hot swap! let me know what I have to do and a will do it without a problem.

I just realised that the bug report is not the samething that you gave a link to. It landed on a specific comment. So I was commenting about his error. He just didn't understand his problem is unrelated to your bug report.
The crazy part, I haven't experienced the bug.
Perhaps it depends on the css rules being used. When I'm using the alani from the other day, it's fine for me. But it also looks like others that use the default css have the same issue.
I am using developer chrome in incognito mode (so it doesn't cache, so a refresh when coding doesn't cause a bug by having something in memory).

And it probaly isn't because of the css, it's just that the file I'm using somehow cancels it out.

no matter what css im using, i have the issue with the arg and the send to buttons.. i tried everything before creating the bug report

sorry for the wrong link, the link is this one: AUTOMATIC1111/stable-diffusion-webui#6388

Wild stuff indeed!

I did another simple theme if you want to add it, or mess around with it. It's called blueprint:

https://gist.github.com/ParityError/648ff807c67cb2e36bdf1d6ad42dbf54

I figured a lot out. There will be some things that will have to be forced.
I've been busy with a full rewrite of the preset manager in javascript.
It's a floating window.

Expands:
Will remove the debug textbox from first shot.

Works on every tab:

This came about because I made the base code to pop out the settings on tx2timg and img2img, which made the image full screen (to some extent, there's some layers that needed modification.) But it made it feel wonky, needed more work.

Give me a few days before I give some results. I'm grinding to finish this thing before I go back to work, we can still discuss things though.

looks amazing..!!! and practical...

/*
        'beforebegin'
            <ele>
            'afterbegin'
                <otherele>
            'beforeend'
            </ele>
        'afterend'
*/

class CreateCanvas{
    constructor(target, position="afterbegin"){
        this.position = position
        this.target = gradioApp().querySelector(target)
        this.element = document.createElement("canvas")
        this.target.insertAdjacentElement(this.position, this.element)

        this.element.width
        this.ctx = this.element.getContext('2d')
        this.ctx.fillStyle = 'rgb(255, 0, 0)'
        this.ctx.fillRect(0, 0, this.element.width, this.element.height)
    }

    changeTarget(new_target=this.target, positon=this.position){
        //Specify either new position/target or both
        this.target = gradioApp().querySelector(new_target)
        this.target.insertAdjacentElement(positon, this.element)
    }

    updateSize(){
        this.element.width = this.target.width
        this.element.height = this.target.height
        this.ctx.fillRect(0, 0, this.element.width, this.element.height)
    }
}

After I paste this on the console, nothing happened... do I need to do something more?

No hablo castellano.

I setup the scripts to be callable.

As a class, it will call the constructor when using the 'new' keyword.

let canv = new CreateCanvas('[class^=mx]')

No hablo castellano.

No problem, i was just curious...

I setup the scripts to be callable.

As a class, it will call the constructor when using the 'new' keyword.

let canv = new CreateCanvas('[class^=mx]')

oh, ok... in that case, in the end is going to be easier to run and config everything

In the first example. It sets an event to trigger it on load, strip that out.
It looks for a canvas with an element id of "canvas" in the document, but we are in the shadowroot inside the document.

I stripped that out, assigned it to a variable so I can call it manually, updated it's search location.

First create your canvas, place it, give an id, size it, and give it's position relationship, I used fixed in this example, absolute works too.
There will be some things that would need stripped out, but this gets it running. It should work with a copy paste, as is.

let c = document.createElement("canvas")
gradioApp().querySelector("div[class*=container]:not([class^=modal])").insertAdjacentElement('afterbegin', c)
c.width = window.innerWidth
c.height = window.innerHeight
c.setAttribute("id", "canvas")
c.style.position = "fixed"


function sticks () {

  
    var canvas = gradioApp().getElementById('canvas');



    /********************
      Random Number
    ********************/

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    /********************
      Var
    ********************/

    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = null;
    var mouseY = null;
    var dist = 80;
    var lessThan = Math.sqrt(dist * dist + dist * dist);
    var mouseDist = 150;
    var shapeNum;
    var shapes = [];
    var ease = 0.3;
    var friction = 0.9;
    var lineWidth = 5;
    X > Y ? shapeNum = X / dist : shapeNum = Y / dist;

    if (X < 768) {
      lineWidth = 2;
      dist = 40;
      lessThan = Math.sqrt(dist * dist + dist * dist);
      mouseDist = 50;
      X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
    }

    /********************
      Animation
    ********************/

    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(cb) {
        setTimeout(cb, 17);
      };

    /********************
      Shape
    ********************/
    
    function Shape(ctx, x, y, i) {
      this.ctx = ctx;
      this.init(x, y, i);
    }
    
    Shape.prototype.init = function(x, y, i) {
      this.x = x;
      this.y = y;
      this.xi = x;
      this.yi = y;
      this.i = i;
      this.r = 1;
      this.v = {
        x: 0,
        y: 0
      };
      this.c = rand(0, 360);
    };

    Shape.prototype.draw = function() {
      var ctx  = this.ctx;
      ctx.save();
      ctx.fillStyle = 'hsl(' + this.c + ', ' + '80%, 60%)';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    };

    Shape.prototype.mouseDist = function() {
      var x = mouseX - this.x;
      var y = mouseY - this.y;
      var d = x * x + y * y;
      var dist = Math.sqrt(d);
      if (dist < mouseDist) {
        this.v.x = +this.v.x;
        this.v.y = +this.v.y;
        var colAngle = Math.atan2(mouseY - this.y, mouseX - this.x);
        this.v.x = -Math.cos(colAngle) * 5;
        this.v.y = -Math.sin(colAngle) * 5;
        this.x += this.v.x;
        this.y += this.v.y;
      } else if (dist > mouseDist && dist < mouseDist + 10) {
        this.v.x = 0;
        this.v.y = 0;
      } else {
        this.v.x += (this.xi - this.x) * ease;
        this.v.y += (this.yi - this.y) * ease;
        this.v.x *= friction;
        this.v.y *= friction;
        this.x += this.v.x;
        this.y += this.v.y;
      }
    };

    Shape.prototype.drawLine = function(i) {
      var j = i;
      for (var i = 0; i < shapes.length; i++) {
        if (j !== i) {
          var x = this.x - shapes[i].x;
          var y = this.y - shapes[i].y;
          var d = x * x + y * y;
          var dist = Math.floor(Math.sqrt(d));
          if (dist <= lessThan) {
            ctx.save();
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = 'hsl(' + this.c + ', ' + '80%, 60%)';
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(shapes[i].x, shapes[i].y);
            ctx.stroke();
            ctx.restore();
          }
        }
      }
    };

    Shape.prototype.render = function(i) {
      this.drawLine(i);
      if (mouseX !== null) this.mouseDist();
      this.draw();
    };
    
    for (var i = 0; i < shapeNum + 1; i++) {
      for (var j = 0; j < shapeNum + 1; j++) {
        if (j * dist - dist > Y) break;
        var s = new Shape(ctx, i * dist, j * dist, i, j);
        shapes.push(s);
      }
    }
   
    /********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].render(i);
      }
      requestAnimationFrame(render);
    }

    render();

    /********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      shapes = [];
      if (X < 768) {
        lineWidth = 2;
        dist = 40;
        lessThan = Math.sqrt(dist * dist + dist * dist);
        mouseDist = 50;
        X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
      } else {
        lineWidth = 5;
        dist = 80;
        lessThan = Math.sqrt(dist * dist + dist * dist);
        mouseDist = 150;
        X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
      }
      for (var i = 0; i < shapeNum + 1; i++) {
        for (var j = 0; j < shapeNum + 1; j++) {
          if (j * dist - dist > Y) break;
          var s = new Shape(ctx, i * dist, j * dist, i, j);
          shapes.push(s);
        }
      }
    }

    window.addEventListener('resize', function() {
      onResize();
    });

    window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }, false);

    canvas.addEventListener('touchmove', function(e) {
      var touch = e.targetTouches[0];
      mouseX = touch.pageX;
      mouseY = touch.pageY;
    });
};

sticks();

Thank you very much, I'm gonna try it and let u know...