From 960edd95cc6f1c2da9415db93763341fcde2c734 Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sat, 21 Sep 2024 14:47:04 +0200
Subject: [PATCH 1/7] WebUI: Remove redundant imports
---
src/webui/www/private/css/Layout.css | 2 -
src/webui/www/private/css/Tabs.css | 2 -
src/webui/www/private/css/Window.css | 2 -
src/webui/www/private/css/dynamicTable.css | 2 -
src/webui/www/private/css/palette.css | 58 ------------------
src/webui/www/private/css/style.css | 59 ++++++++++++++++++-
.../www/private/css/vanillaSelectBox.css | 2 -
src/webui/www/private/index.html | 1 -
src/webui/www/webui.qrc | 1 -
9 files changed, 58 insertions(+), 71 deletions(-)
delete mode 100644 src/webui/www/private/css/palette.css
diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css
index f6d2c8343..33b05a35f 100644
--- a/src/webui/www/private/css/Layout.css
+++ b/src/webui/www/private/css/Layout.css
@@ -1,5 +1,3 @@
-@import url("palette.css");
-
/*
Core.css for Mocha UI
diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css
index 61080dc87..3787a6c13 100644
--- a/src/webui/www/private/css/Tabs.css
+++ b/src/webui/www/private/css/Tabs.css
@@ -1,5 +1,3 @@
-@import url("palette.css");
-
/*
Tabs.css for Mocha UI
diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css
index 2149edfdb..9a71df8e3 100644
--- a/src/webui/www/private/css/Window.css
+++ b/src/webui/www/private/css/Window.css
@@ -1,5 +1,3 @@
-@import url("palette.css");
-
/*
Window.css for Mocha UI
diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css
index 83280c543..421c19759 100644
--- a/src/webui/www/private/css/dynamicTable.css
+++ b/src/webui/www/private/css/dynamicTable.css
@@ -1,5 +1,3 @@
-@import url("palette.css");
-
/**************************************************************
Dynamic Table
diff --git a/src/webui/www/private/css/palette.css b/src/webui/www/private/css/palette.css
deleted file mode 100644
index 1ef40f38a..000000000
--- a/src/webui/www/private/css/palette.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* Adaptive color palette */
-
-/* Default rules */
-* {
- --color-accent-blue: hsl(210deg 65% 55%);
- --color-text-blue: hsl(210deg 100% 55%);
- --color-text-orange: hsl(26deg 100% 45%);
- --color-text-red: hsl(0deg 100% 65%);
- --color-text-green: hsl(110deg 94% 27%);
- --color-text-white: hsl(0deg 0% 100%);
- --color-text-disabled: hsl(0deg 0% 60%);
- --color-text-default: hsl(0deg 0% 33%);
- --color-background-blue: hsl(210deg 65% 55%);
- --color-background-popup: hsl(0deg 0% 100%);
- --color-background-default: hsl(0deg 0% 94%);
- --color-background-hover: hsl(26deg 80% 60%);
- --color-border-blue: hsl(210deg 42% 48%);
- --color-border-default: hsl(0deg 0% 85%);
- --color-icon-hover: brightness(0) invert(100%) sepia(100%) saturate(0%)
- hue-rotate(108deg) brightness(104%) contrast(104%);
-}
-
-:root {
- color-scheme: light dark;
-}
-
-/* Light corrections */
-@media (prefers-color-scheme: light) {
- :root {
- color-scheme: light;
- }
-}
-
-/* Dark corrections */
-@media (prefers-color-scheme: dark) {
- :root {
- color-scheme: dark;
- }
-
- * {
- --color-accent-blue: hsl(210deg 42% 48%);
- --color-text-blue: hsl(210deg 88.1% 73.5%);
- --color-text-orange: hsl(26deg 65% 70%);
- --color-text-default: hsl(0deg 0% 90%);
- --color-background-blue: hsl(210deg 42% 48%);
- --color-background-popup: hsl(0deg 0% 20%);
- --color-background-default: hsl(0deg 0% 25%);
- --color-background-hover: hsl(26deg 50% 55%);
- --color-border-default: hsl(0deg 0% 33%);
- }
-
- #rssButtonBar img,
- #startSearchButton img,
- #manageSearchPlugins img {
- filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%)
- hue-rotate(156deg) brightness(106%) contrast(101%);
- }
-}
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index db7917cef..b3120fa61 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -1,4 +1,61 @@
-@import url("palette.css");
+/* Adaptive color palette */
+
+/* Default rules */
+* {
+ --color-accent-blue: hsl(210deg 65% 55%);
+ --color-text-blue: hsl(210deg 100% 55%);
+ --color-text-orange: hsl(26deg 100% 45%);
+ --color-text-red: hsl(0deg 100% 65%);
+ --color-text-green: hsl(110deg 94% 27%);
+ --color-text-white: hsl(0deg 0% 100%);
+ --color-text-disabled: hsl(0deg 0% 60%);
+ --color-text-default: hsl(0deg 0% 33%);
+ --color-background-blue: hsl(210deg 65% 55%);
+ --color-background-popup: hsl(0deg 0% 100%);
+ --color-background-default: hsl(0deg 0% 94%);
+ --color-background-hover: hsl(26deg 80% 60%);
+ --color-border-blue: hsl(210deg 42% 48%);
+ --color-border-default: hsl(0deg 0% 85%);
+ --color-icon-hover: brightness(0) invert(100%) sepia(100%) saturate(0%)
+ hue-rotate(108deg) brightness(104%) contrast(104%);
+}
+
+:root {
+ color-scheme: light dark;
+}
+
+/* Light corrections */
+@media (prefers-color-scheme: light) {
+ :root {
+ color-scheme: light;
+ }
+}
+
+/* Dark corrections */
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ }
+
+ * {
+ --color-accent-blue: hsl(210deg 42% 48%);
+ --color-text-blue: hsl(210deg 88.1% 73.5%);
+ --color-text-orange: hsl(26deg 65% 70%);
+ --color-text-default: hsl(0deg 0% 90%);
+ --color-background-blue: hsl(210deg 42% 48%);
+ --color-background-popup: hsl(0deg 0% 20%);
+ --color-background-default: hsl(0deg 0% 25%);
+ --color-background-hover: hsl(26deg 50% 55%);
+ --color-border-default: hsl(0deg 0% 33%);
+ }
+
+ #rssButtonBar img,
+ #startSearchButton img,
+ #manageSearchPlugins img {
+ filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%)
+ hue-rotate(156deg) brightness(106%) contrast(101%);
+ }
+}
/* Reset */
diff --git a/src/webui/www/private/css/vanillaSelectBox.css b/src/webui/www/private/css/vanillaSelectBox.css
index 80727e843..8191e5f17 100644
--- a/src/webui/www/private/css/vanillaSelectBox.css
+++ b/src/webui/www/private/css/vanillaSelectBox.css
@@ -1,5 +1,3 @@
-@import url("palette.css");
-
.hidden-search {
display: none !important;
}
diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index b168b81b3..2e1c96a3d 100644
--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -14,7 +14,6 @@
-
diff --git a/src/webui/www/webui.qrc b/src/webui/www/webui.qrc
index 32912b6be..1e8501d63 100644
--- a/src/webui/www/webui.qrc
+++ b/src/webui/www/webui.qrc
@@ -11,7 +11,6 @@
private/css/dynamicTable.css
private/css/Layout.css
private/css/noscript.css
- private/css/palette.css
private/css/style.css
private/css/Tabs.css
private/css/vanillaSelectBox.css
From 10149de205fe3293052e33adde1df5298ba1b14a Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sat, 21 Sep 2024 14:55:53 +0200
Subject: [PATCH 2/7] WebUI: Define global CSS variables in root selector
---
src/webui/www/private/css/style.css | 10 +++-------
1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index b3120fa61..666460e0b 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -1,7 +1,7 @@
/* Adaptive color palette */
/* Default rules */
-* {
+:root {
--color-accent-blue: hsl(210deg 65% 55%);
--color-text-blue: hsl(210deg 100% 55%);
--color-text-orange: hsl(26deg 100% 45%);
@@ -18,9 +18,7 @@
--color-border-default: hsl(0deg 0% 85%);
--color-icon-hover: brightness(0) invert(100%) sepia(100%) saturate(0%)
hue-rotate(108deg) brightness(104%) contrast(104%);
-}
-:root {
color-scheme: light dark;
}
@@ -34,10 +32,6 @@
/* Dark corrections */
@media (prefers-color-scheme: dark) {
:root {
- color-scheme: dark;
- }
-
- * {
--color-accent-blue: hsl(210deg 42% 48%);
--color-text-blue: hsl(210deg 88.1% 73.5%);
--color-text-orange: hsl(26deg 65% 70%);
@@ -47,6 +41,8 @@
--color-background-default: hsl(0deg 0% 25%);
--color-background-hover: hsl(26deg 50% 55%);
--color-border-default: hsl(0deg 0% 33%);
+
+ color-scheme: dark;
}
#rssButtonBar img,
From 0e03e4f8a7febffe88f46662b13408ef809320bb Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sun, 22 Sep 2024 16:02:46 +0200
Subject: [PATCH 3/7] WebUI: Add colors to log table rows
---
src/webui/www/private/views/log.html | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/webui/www/private/views/log.html b/src/webui/www/private/views/log.html
index 2c9998659..ebee5fd17 100644
--- a/src/webui/www/private/views/log.html
+++ b/src/webui/www/private/views/log.html
@@ -55,20 +55,20 @@
font-style: italic;
}
- .logNormal {
+ .logTableRowlogNormal {
color: var(--color-text-default);
}
- .logInfo {
+ .logTableRowlogInfo {
color: var(--color-text-blue);
}
- .logWarning {
+ .logTableRowlogWarning {
color: var(--color-text-orange);
}
- .logCritical,
- .peerBlocked {
+ .logTableRowlogCritical,
+ .logTableRowpeerBlocked {
color: var(--color-text-red);
}
From 6bfabad92fa4b91857537f10eda943d764c75c87 Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sun, 22 Sep 2024 16:34:30 +0200
Subject: [PATCH 4/7] WebUI: Prevent text selection within tabs, menu items
---
src/webui/www/private/css/Layout.css | 1 +
src/webui/www/private/css/Tabs.css | 1 +
src/webui/www/private/css/style.css | 1 +
3 files changed, 3 insertions(+)
diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css
index 33b05a35f..26bbe0ba8 100644
--- a/src/webui/www/private/css/Layout.css
+++ b/src/webui/www/private/css/Layout.css
@@ -97,6 +97,7 @@ body {
list-style: none;
margin: 0;
padding: 0;
+ user-select: none;
}
#desktopNavbar > ul > li {
diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css
index 3787a6c13..82d9b40bf 100644
--- a/src/webui/www/private/css/Tabs.css
+++ b/src/webui/www/private/css/Tabs.css
@@ -19,6 +19,7 @@ Required by:
.toolbarTabs {
overflow: visible;
+ user-select: none;
}
.tab-menu {
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index 666460e0b..1f5f87ebc 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -567,6 +567,7 @@ div.formRow {
padding: 4px 0 4px 6px;
text-overflow: ellipsis;
text-transform: uppercase;
+ user-select: none;
white-space: nowrap;
}
From 2952480f377923536e080538ed9b4e669bd3786d Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sun, 22 Sep 2024 16:36:54 +0200
Subject: [PATCH 5/7] WebUI: Use correct text and background colors in RSS
details view
---
src/webui/www/private/views/rss.html | 8 ++++----
src/webui/www/private/views/rssDownloader.html | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/webui/www/private/views/rss.html b/src/webui/www/private/views/rss.html
index 19f27ff87..4de83e9c5 100644
--- a/src/webui/www/private/views/rss.html
+++ b/src/webui/www/private/views/rss.html
@@ -25,7 +25,7 @@
}
#rssFetchingDisabled {
- color: red;
+ color: var(--color-text-red);
font-style: italic;
margin-bottom: 10px;
}
@@ -53,13 +53,13 @@
}
#rssTorrentDetailsName {
- background-color: #678db2;
+ background-color: var(--color-background-blue);
padding: 0;
- color: white;
+ color: var(--color-text-white);
}
#rssTorrentDetailsDate {
- background-color: #EFEFEF;
+ background-color: var(--color-background-default);
}
#rssDetailsView {
diff --git a/src/webui/www/private/views/rssDownloader.html b/src/webui/www/private/views/rssDownloader.html
index 8c53d6584..85867a42e 100644
--- a/src/webui/www/private/views/rssDownloader.html
+++ b/src/webui/www/private/views/rssDownloader.html
@@ -64,7 +64,7 @@
}
#rssDownloaderDisabled {
- color: red;
+ color: var(--color-text-red);
font-style: italic;
margin-bottom: 10px;
}
From 4cc3fedf379c6a9a153e77b98ff776602b8cab9e Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sun, 22 Sep 2024 16:38:14 +0200
Subject: [PATCH 6/7] WebUI: Reduce padding in torrents table
---
src/webui/www/private/css/dynamicTable.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css
index 421c19759..40dc29f30 100644
--- a/src/webui/www/private/css/dynamicTable.css
+++ b/src/webui/www/private/css/dynamicTable.css
@@ -9,7 +9,7 @@
}
#transferList .dynamicTable td {
- padding: 4px 2px;
+ padding: 3px 2px;
}
.dynamicTableDiv table.dynamicTable tbody tr.selected {
From 5e3161a3f96335ce906c0248ac888a3a55509c2a Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Sun, 22 Sep 2024 16:46:22 +0200
Subject: [PATCH 7/7] WebUI: Improve statistics window
---
src/webui/www/private/css/style.css | 23 +++++++++++++++++++--
src/webui/www/private/scripts/mocha-init.js | 4 ++--
2 files changed, 23 insertions(+), 4 deletions(-)
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index 1f5f87ebc..d140ad1bc 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -758,8 +758,27 @@ td.statusBarSeparator {
}
/* Statistics window */
-.statisticsValue {
- text-align: right;
+#statisticspage * {
+ box-sizing: border-box;
+}
+
+#statisticsContent {
+ & table {
+ background-color: var(--color-background-default);
+ border-radius: 6px;
+ margin-bottom: 6px;
+ padding: 6px 10px;
+
+ & .statisticsValue {
+ text-align: right;
+ }
+ }
+
+ & h3 {
+ color: var(--color-text-default);
+ margin-bottom: 1px;
+ padding: 2px;
+ }
}
/* Search tab */
diff --git a/src/webui/www/private/scripts/mocha-init.js b/src/webui/www/private/scripts/mocha-init.js
index 362e28e1d..2f24ed2e2 100644
--- a/src/webui/www/private/scripts/mocha-init.js
+++ b/src/webui/www/private/scripts/mocha-init.js
@@ -427,8 +427,8 @@ const initializeWindows = function() {
contentURL: new URI("views/statistics.html").toString(),
maximizable: false,
padding: 10,
- width: loadWindowWidth(id, 275),
- height: loadWindowHeight(id, 370),
+ width: loadWindowWidth(id, 285),
+ height: loadWindowHeight(id, 415),
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
})