diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css
index f6d2c8343..26bbe0ba8 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
@@ -99,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 61080dc87..82d9b40bf 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
@@ -21,6 +19,7 @@ Required by:
.toolbarTabs {
overflow: visible;
+ user-select: none;
}
.tab-menu {
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..40dc29f30 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
@@ -11,7 +9,7 @@
}
#transferList .dynamicTable td {
- padding: 4px 2px;
+ padding: 3px 2px;
}
.dynamicTableDiv table.dynamicTable tbody tr.selected {
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..d140ad1bc 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -1,4 +1,57 @@
-@import url("palette.css");
+/* 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%);
+ --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%);
+
+ color-scheme: light dark;
+}
+
+/* Light corrections */
+@media (prefers-color-scheme: light) {
+ :root {
+ color-scheme: light;
+ }
+}
+
+/* Dark corrections */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --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%);
+
+ color-scheme: dark;
+ }
+
+ #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 */
@@ -514,6 +567,7 @@ div.formRow {
padding: 4px 0 4px 6px;
text-overflow: ellipsis;
text-transform: uppercase;
+ user-select: none;
white-space: nowrap;
}
@@ -704,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/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 1b309275f..868521497 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/private/scripts/mocha-init.js b/src/webui/www/private/scripts/mocha-init.js
index 7e0b1e42d..b404c59cc 100644
--- a/src/webui/www/private/scripts/mocha-init.js
+++ b/src/webui/www/private/scripts/mocha-init.js
@@ -448,8 +448,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);
})
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);
}
diff --git a/src/webui/www/private/views/rss.html b/src/webui/www/private/views/rss.html
index 625132dae..4d2cee9c0 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;
}
diff --git a/src/webui/www/webui.qrc b/src/webui/www/webui.qrc
index d944cd7f6..bd11d9a0a 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