!important making things hard to override

[adrianbj]

Just one example, but in the new Konkat theme, InputfieldMarkup items gets this outline added and I want to override it, but the only way seems to be by ID because when it's by class: InputfieldMarkup the !important here won't let me.

https://github.com/processwire/processwire/blob/8ee607f06fd5221f500835751a1e3a94ae012918/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.css#L5000

[ryancramerdesign]

@adrianbj I think the way you'd override it is to use the same CSS selector (or whatever CSS selector you want to use to target the element), and then set the --pw-border-color: with whatever value you need, i.e. --pw-order-color: transparent.

[adrianbj]

@ryancramerdesign - problem with that is that I don't want all borders to be transparent. There are plenty of places where having a border makes sense, but I don't think InputfieldMarkup is one of them.

I don't think !important should ever be used at the base of a project because it will always cause issues like this.

[ocorreiododiogo]

@adrianbj if you set the variable on the element itself, it changes the border only for that element.

.InputfieldMarkup {--pw-border-color: transparent}

We use !important in some places because the Konkat theme is inheriting from the previous theme, which has very specific selectors.

[adrianbj]

Thanks @ocorreiododiogo - that does work, although it would still be a problem if I wanted to change something else about the outline, like the stroke width of it.

I understand why you need those !important instances, but I still think it's a bit of problem having three layers of admin theme - the original PW default theme, UiKit on top of that, and now Konkat on top of that. It's a lot of unncessary CSS being loaded and it also means issues like this.

[adrianbj]

I am closing because even though the issue is still inherent in the system, I know it's not going to change at this stage.

[matjazpotocnik]

I wonder if we would be better with AdminThemeKonkat rather than another layer of overrides of AdminThemeUikit (which overrides Uikit, which has some Reno styles...).

[adrianbj]

I wonder if we would be better with AdminThemeKonkat rather than another layer of overrides of AdminThemeUikit (which overrides Uikit, which has some Reno styles...).

I completely agree!

[adrianbj]

@ocorreiododiogo - unfortunately I found an issue with that fix.

Now the Module Information section has no border because it is InputfieldMarkup. This isn't issue with the old theme which still has a border in this situation but not on InpufieldMarkup elements in the PageEdit interface. The issue is my case is that I often use InpufieldMarkup as a container for an AJAX response message and while it's still empty, it looks really strange with the border around nothing.

PS - you can also see another issue there with the width of the Support Files section - happens at specific viewport widths.

[adrianbj]

@ocorreiododiogo - just wanted to note that there are lots of other places in the admin that use InputfieldMarkup that now don't have a border, eg at the bottom of the Basics tab when editing a template. I don't honestly know what changed, but in the old theme, core usage of InputfieldMarkup resulted in a border, but custom usage didn't. I think we need any easy way to have this optional please.

[adrianbj]

In case anyone else wants to have no borders on their InputfieldMarkup blocks added via a runtime only field, but keep them where they should be, the best way seems to be:

.InputfieldHeaderHidden {
    --pw-border-color: transparent
}

The point from my OP still stands though :)