WebUI: CSS/styling improvements

WebUI: CSS/styling improvements

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 {

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 {

src/webui/www/private/css/Window.css

@@ -1,5 +1,3 @@
-@import url("palette.css");
-
 /*
 
 Window.css for Mocha UI

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 {

src/webui/www/private/css/palette.css

@@ -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%);
-    }
-}

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 {
+#statisticspage * {
-    text-align: right;
+    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 */

src/webui/www/private/css/vanillaSelectBox.css

@@ -1,5 +1,3 @@
-@import url("palette.css");
-
 .hidden-search {
     display: none !important;
 }

src/webui/www/private/index.html

@@ -14,7 +14,6 @@
     <link rel="icon" type="image/svg+xml" href="images/qbittorrent-tray.svg" sizes="any">
     <link rel="stylesheet" type="text/css" href="css/dynamicTable.css?v=${CACHEID}">
     <link rel="stylesheet" type="text/css" href="css/style.css?v=${CACHEID}">
-    <!--<link rel="stylesheet" type="text/css" href="css/Content.css">-->
     <link rel="stylesheet" type="text/css" href="css/Core.css?v=${CACHEID}">
     <link rel="stylesheet" type="text/css" href="css/Layout.css?v=${CACHEID}">
     <link rel="stylesheet" type="text/css" href="css/Window.css?v=${CACHEID}">

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),
+            width: loadWindowWidth(id, 285),
-            height: loadWindowHeight(id, 370),
+            height: loadWindowHeight(id, 415),
             onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
                 saveWindowSize(id);
             })

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,
+    .logTableRowlogCritical,
-    .peerBlocked {
+    .logTableRowpeerBlocked {
         color: var(--color-text-red);
     }
 

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 {

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;
     }

src/webui/www/webui.qrc

@@ -11,7 +11,6 @@
         <file>private/css/dynamicTable.css</file>
         <file>private/css/Layout.css</file>
         <file>private/css/noscript.css</file>
-        <file>private/css/palette.css</file>
         <file>private/css/style.css</file>
         <file>private/css/Tabs.css</file>
         <file>private/css/vanillaSelectBox.css</file>