fix qbittorrent unthemed elements

[arminius-smh]

---

• I have read the contributing guideline and understand that I have made the correct modifications

• PR's are done against the develop branch.

---

Bug fixes

• When submitting bugfixes please show a before and after screenshot of the fix, and a description of what the fix does.

Description:

Hello, qbittorrent 5.0 introduced a few unthemed elements
(catppuccin/theme.park#13 mentioned it, however since catppuccin is a community-theme, I've recreated the images with dracula, just in case)

This issue realtes to the unthemed search bar (and the borders of the searchbar and the icon next to it whose purpose I currently don't know):

And the modals are unthemed at the botton:

With the changes I've done the searchbar is now themed:

As well as the modal:

NOTE: The I've used var(--drop-down-menu-bg) instead of var(--modal-bg-color) since qbit just didn't want to apply the css with themes that don't have a simple hex code as their definition for modal-bg-color, like hotline, if I try to set it there, it just won't apply it

(Unrelated to this pr, but on the modal image, is there a reason why the category input is hardcoded to #fff and not var(--transparency-dark-25) like the others?, I know it looks a bit darker than the rest for this dropdown menu but I think this may look better overall?)

Benefits of this PR and context:

It fixes unthemed elements in qbittorrent

How Has This Been Tested?

I've tested this by importing
@import url("https://theme-park.dev/css/theme-options/dracula.css");, as well as the contents of https://github.com/themepark-dev/theme.park/blob/develop/css/base/qbittorrent/qbittorrent-base.css in stylus, that styled my local my qbit web and added my changes to it.

Source / References:

catppuccin/theme.park#13

[arminius-smh]

Also, just as an info, qbit 5.0 introduced some variables that can be overridden to theme qbit now: https://github.com/qbittorrent/qBittorrent/blob/8e941a06f15a0a8c12f37439cb2815fec73797c3/src/webui/www/private/css/style.css#L4-L23

Would it be preferred to override those, or continue styling individual elements? The border colors could then all be set by --color-border-default, at least for > 5.0.0, so I could also define that at the top, but I wasn't sure what is preferred, so I've only done the individual elements for now

[GilbN]

Thanks for the PR. Looks good.
In regard to the #FFF color on input, that's probably just something I've missed. Feel free to fix it if you want.

Also, just as an info, qbit 5.0 introduced some variables that can be overridden to theme qbit now: https://github.com/qbittorrent/qBittorrent/blob/8e941a06f15a0a8c12f37439cb2815fec73797c3/src/webui/www/private/css/style.css#L4-L23

Would it be preferred to override those, or continue styling individual elements? The border colors could then all be set by --color-border-default, at least for > 5.0.0, so I could also define that at the top, but I wasn't sure what is preferred, so I've only done the individual elements for now

Anything that simplifies the theme is preferred yeah, so if overriding those works and you want to make another pr go for it.
Just remember to make sure any changes are backwards compatible as I don't think most people use v5 yet.

[arminius-smh]

Thanks for the PR. Looks good. In regard to the #FFF color on input, that's probably just something I've missed. Feel free to fix it if you want.

Okay fixed it, looked like it that way, but wasn't sure so I thought I'd ask beforehand
The other inputs use dark-25 but that looked a bit to dark here (I don't really know why I guess I don't get css) but dark-05 is a bit more nuanced and more inline with the other colors

05

25

Anything that simplifies the theme is preferred yeah, so if overriding those works and you want to make another pr go for it. Just remember to make sure any changes are backwards compatible as I don't think most people use v5 yet.

Yep, I myself don't use v5 yet (whitelist's and stuff), I think right now it would just be more confusing as to what is styled by the normal css and what is using the variables, and more so as everything else seems to be working nicely I don't see much reason to

Just as a side note this would be everything to theme qbit-web to catppuccin-mocha-mauve I threw together to test the variables, but of course leaving it only like that would break backwards compatibility with every version <5.0.0
If more stuff breaks in the future I can add some useful ones, but I don't see much reason to right now

* {
	--color-accent-blue: #cba6f7;
	--color-text-blue: #89b4fa;
	--color-text-orange: #fab387;
	--color-text-red: #f38ba8;
	--color-text-green: #a6e3a1;
	--color-text-white: #cdd6f4;
	--color-text-disabled: #cdd6f4;
	--color-text-default: #cdd6f4;
	--color-background-blue: #cba6f7;
	--color-background-popup: #181825;
	--color-background-default: #181825;
	--color-background-hover: #585b704d;
	--color-border-blue: #89b4fa;
	--color-border-default: #313244;
}

body {
	background: #1e1e2e !important;
}

.selectedFilter span,
.selectedFilter a,
li.selected a,
.torrentsTableContextMenuTarget.selected:not(:hover),
.progressbar_dark {
	color: #181825 !important;
}

input,
select,
textarea,
button {
	color: #cdd6f4 !important;
	background-color: #313244 !important;
	border-color: var(--color-border-default) !important;
}

[GilbN]

I've merged your PR.

Thanks for the PR. Looks good. In regard to the #FFF color on input, that's probably just something I've missed. Feel free to fix it if you want.

Okay fixed it, looked like it that way, but wasn't sure so I thought I'd ask beforehand The other inputs use dark-25 but that looked a bit to dark here (I don't really know why I guess I don't get css) but dark-05 is a bit more nuanced and more inline with the other colors

Hm, could be to make it look better one other themes. I'm not opposed to changing anything really, as long as it still looks good on all theme-options. The gradient theme-options can be a bit tricky.

Anything that simplifies the theme is preferred yeah, so if overriding those works and you want to make another pr go for it. Just remember to make sure any changes are backwards compatible as I don't think most people use v5 yet.

Yep, I myself don't use v5 yet (whitelist's and stuff), I think right now it would just be more confusing as to what is styled by the normal css and what is using the variables, and more so as everything else seems to be working nicely I don't see much reason to

Just as a side note this would be everything to theme qbit-web to catppuccin-mocha-mauve I threw together to test the variables, but of course leaving it only like that would break backwards compatibility with every version <5.0.0 If more stuff breaks in the future I can add some useful ones, but I don't see much reason to right now

Yeah, nice. Though I'm not sure that would support theme-options like aquamarine, plex etc because of the gradients.