Updates to colorscheme

private/css/Core.css

@@ -21,9 +21,64 @@ Notes:
 
 /* Required By All
 ---------------------------------------------------------------- */
+:root {
+    color-scheme: dark;
+    --darkmode-primary: #00d9ff;
+    --darkmode-background: #202020;
+    --darkmode-background-alt: #242424;
+    --darkmode-background-alt2: #4e4e4e;
+    --darkmode-text: #c2c2c2;
+    --darkmode-line-color: #2F3437;
+    --highlight-color--darkred: #be3e3c;
+    --highlight-color--red: #FF8A88;
+    --highlight-color--orange: #FFB86C;
+    --highlight-color--yellow: #F1FA8C;
+    --highlight-color--green: #9FE39B;
+    --highlight-color--brightgreen: #50e948;
+    --highlight-color--blue: #9FC8EB;
+    --highlight-color--purple: #DEAFEB;
+    --callout-background-color-dark: #DFDFDC;
+    --calloutred-background-color-dark: #E8D4D8;
+    --calloutorange-background-color-dark: #E8DAC8;
+    --calloutyellow-background-color-dark: #E9E2BF;
+    --calloutgreen-background-color-dark: #CDE6D0;
+    --calloutblue-background-color-dark: #D6E2E6;
+    --calloutpurple-background-color-dark: #E4D5E3;
+    --text-shadow: 0.01em 0.01em 0.03em #727E84;
+}
+
+body {
+    font-size: .875rem;
+    font-family: "Google Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-feature-settings: "kern", "liga", "clig", "calt";
+}
+
+/* Text Colors */
+.highlight-darkred {
+    color: var(--highlight-color--darkred) !important;
+}
+
+.highlight-red {
+    color: var(--highlight-color--red) !important;
+}
+
+.highlight-orange {
+    color: var(--highlight-color--orange) !important;
+}
+
+.highlight-yellow {
+    color: var(--highlight-color--yellow) !important;
+}
+
+.highlight-green {
+    color: var(--highlight-color--green) !important;
+}
+
+.highlight-brightgreen {
+    color: var(--highlight-color--brightgreen) !important;
+}
 
 /* Clears */
-
 .clear {
     clear: both;
     height: 0;

private/css/Layout.css

@@ -37,7 +37,7 @@ body {
 }
 
 #desktopHeader {
-    background: #f2f2f2;
+    background: var(--darkmode-background);
 }
 
 #desktopTitlebarWrapper {
@@ -66,7 +66,7 @@ body {
 
 #desktopTitlebar h2.tagline {
     color: #d4dce4;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 10px;
     font-weight: bold;
     padding: 7px 0 0;
@@ -81,7 +81,7 @@ body {
 
 #topNav {
     color: #d4dce4;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 10px;
     padding: 13px 10px 0 0;
     position: absolute;
@@ -102,8 +102,8 @@ body {
 /* Navbar */
 
 #desktopNavbar {
-    background: #f2f2f2;
-    /*background-color: #ccc;*/
+    background: var(--darkmode-background);
+        color: var(--darkmode-text);
     border-bottom: 1px solid #3f3f3f;
     height: 20px;
     margin: 0 0px;
@@ -126,14 +126,14 @@ body {
 }
 
 #desktopNavbar ul li a {
-    color: #333;
+    color: var(--darkmode-text);
     font-weight: normal;
     padding: 2px 10px 6px;
 }
 
 #desktopNavbar ul li a:hover {
-    background-color: #fff;
-    color: #333;
+    background-color: var(--darkmode-background);
+        color: var(--darkmode-text);
 }
 
 #desktopNavbar ul li a.arrow-right,
@@ -144,8 +144,8 @@ body {
 }
 
 #desktopNavbar li ul {
-    background: #fff url("../images/bg-dropdown.gif") repeat-y;
-    border: 1px solid #3f3f3f;
+    background: var(--darkmode-background) url("../images/bg-dropdown.gif") repeat-y;
+        border: 1px solid var(--darkmode-line-color);
     left: -999em;
     margin-top: -6px;
     position: absolute;
@@ -165,7 +165,7 @@ body {
 }
 
 #desktopNavbar li ul li .check {
-    background: #555;
+    background: rgb(48, 48, 48);
     font-size: 1px;
     height: 5px;
     left: 6px;
@@ -177,7 +177,7 @@ body {
 }
 
 #desktopNavbar li ul li a {
-    color: #3f3f3f;
+    color: var(--darkmode-text);
     font-weight: normal;
     min-width: 120px;
     padding: 1px 10px 1px 20px;
@@ -185,9 +185,9 @@ body {
 }
 
 #desktopNavbar li ul li a:hover {
-    background: #6c98d9;
+    background: var(--darkmode-primary);
     border-radius: 2px;
-    color: #fff;
+    color: var(--darkmode-background);
 }
 
 #desktopNavbar li ul li a:hover .check {
@@ -216,8 +216,8 @@ li.divider {
 }
 
 #pageWrapper {
-    border-bottom: 1px solid #909090;
-    border-top: 1px solid #909090;
+    border-bottom: 1px solid var(--darkmode-line-color);
+        border-top: 1px solid var(--darkmode-line-color);
     overflow: hidden; /* This can be set to hidden or auto */
     position: relative;
     /*height: 100%;*/
@@ -235,8 +235,8 @@ li.divider {
 }
 
 #desktopFooter {
-    background: #f2f2f2;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
+    background: var(--darkmode-background);
+        font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 11px;
     height: 24px;
     padding: 6px 8px 0;
@@ -256,8 +256,9 @@ li.divider {
 /* Panels */
 
 .panel {
-    background: #f8f8f8;
-    border-bottom: 1px solid #b9b9b9;
+    background: var(--darkmode-background);
+        border-bottom: 1px solid var(--darkmode-line-color);
+        color: var(--darkmode-text);
     overflow: auto;
     position: relative;
 }
@@ -267,7 +268,7 @@ li.divider {
 }
 
 .panelAlt {
-    background: #f2f2f2;
+    background: var(--darkmode-background);
 }
 
 .bottomPanel {
@@ -279,12 +280,14 @@ li.divider {
 }
 
 #mainPanel {
-    background: #fff;
+    background: var(--darkmode-background);
+        color: var(--darkmode-text);
 }
 
 .panel-header {
-    background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x;
-    border-bottom: 1px solid #d3d3d3;
+    background: var(--darkmode-background);
+        border-bottom: 1px solid var(--darkmode-line-color);
+        color: var(--darkmode-text);
     height: 30px;
     overflow: hidden;
     position: relative;

private/css/Tabs.css

@@ -48,7 +48,7 @@ Required by:
 .tab-menu li a {
     background: url("../images/tabs.gif") repeat-x;
     background-position: right -35px;
-    color: #181818;
+    color: var(--darkmode-text);
     display: block;
     font-weight: normal;
     margin-left: 8px;
@@ -59,6 +59,6 @@ Required by:
 .tab-menu li.selected a {
     background: url("../images/tabs.gif") repeat-x;
     background-position: right 0;
-    color: #181818;
+    color: #e0e0e0;
     font-weight: bold;
 }

private/css/Window.css

@@ -57,12 +57,12 @@ Required by:
 }
 
 .mocha.isFocused .mochaTitlebar h3 {
-    color: #181818;
+    color: var(--darkmode-text);
 }
 
 .mochaToolbarWrapper {
-    background: #f1f1f1;
-    border-top: 1px solid #d9d9d9;
+    background: var(--darkmode-background);
+        border-top: 1px solid var(--darkmode-line-color);
     height: 29px;
     overflow: hidden;
     position: relative;
@@ -71,22 +71,22 @@ Required by:
 
 div.mochaToolbarWrapper.bottom {
     border: 0;
-    border-bottom: 1px solid #d9d9d9;
+    border-bottom: 1px solid var(--darkmode-line-color);
 }
 
 .mochaToolbar {
-    border-top: 1px solid #fff;
+    border-top: 1px solid var(--darkmode-line-color);
     width: 100%; /* For IE */
 }
 
 .mochaContentBorder {
-    border-bottom: 1px solid #dadada;
-    border-top: 1px solid #dadada;
+    border-bottom: 1px solid var(--darkmode-line-color);
+        border-top: 1px solid var(--darkmode-line-color);
 }
 
 /* Has a fixed height and scrollbars if required. */
 .mochaContentWrapper {
-    background: #fff;
+    background: var(--darkmode-background);
     font-size: 12px;
     overflow: auto;
 }

private/css/dynamicTable.css

@@ -6,12 +6,12 @@
 **************************************************************/
 
 .dynamicTable tbody tr {
-    background-color: #fff;
+    background-color: var(--darkmode-background);
 }
 
 .dynamicTable tbody tr:nth-child(even),
 .dynamicTable tbody tr.alt {
-    background-color: #eee;
+    background-color: var(--darkmode-background-alt);
 }
 
 #transferList .dynamicTable td {
@@ -19,13 +19,13 @@
 }
 
 .dynamicTable tbody tr.selected {
-    background-color: #354158;
-    color: #fff;
+    background-color: #747474;
+        color: #c2c2c2;
 }
 
 .dynamicTable tbody tr:hover {
-    background-color: #ee6600;
-    color: #fff;
+    background-color: #747474;
+        color: #c2c2c2;
 }
 
 #transferList tr:hover {
@@ -50,8 +50,9 @@ tr.dynamicTableHeader {
 }
 
 .dynamicTable th {
-    background-color: #eee;
-    border-right: 1px solid #ccc;
+    background: var(--darkmode-background);
+        color: var(--darkmode-text);
+        border-right: 1px solid var(--darkmode-line-color);
     box-sizing: border-box;
     padding: 4px;
     white-space: nowrap;
@@ -63,7 +64,7 @@ tr.dynamicTableHeader {
 }
 
 .dynamicTable thead tr {
-    background-color: #eee;
+    background-color: var(--darkmode-background);
 }
 
 .dynamicTable th,

private/css/fonts.css

@@ -0,0 +1,100 @@
+/* GoogleSans - Regular */
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-Regular.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-Regular.ttf) format("truetype");
+    font-weight: 400;
+    font-style: normal
+}
+
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-Italic.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-Italic.ttf) format("truetype");
+    font-weight: 400;
+    font-style: italic
+}
+
+/* GoogleSans - Medium */
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-Medium.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-Medium.ttf) format("truetype");
+    font-weight: 600;
+    font-style: normal
+}
+
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-MediumItalic.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-MediumItalic.ttf) format("truetype");
+    font-weight: 600;
+    font-style: italic
+}
+
+/* GoogleSans - Bold */
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-Bold.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-Bold.ttf) format("truetype");
+    font-weight: bold;
+    font-style: normal
+}
+
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-BoldItalic.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-BoldItalic.ttf) format("truetype");
+    font-weight: bold;
+    font-style: italic
+}
+
+/* GoogleSans - Black */
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-Black.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-Black.ttf) format("truetype");
+    font-weight: 900;
+    font-style: normal
+}
+
+@font-face {
+    font-family: "Google Sans";
+    font-display: swap;
+    src: url(../fonts/GoogleSans/GoogleSans-BlackItalic.woff) format("woff"), url(../fonts/GoogleSans/GoogleSans-BlackItalic.ttf) format("truetype");
+    font-weight: 900;
+    font-style: italic
+}
+
+
+/* Google Sans Display */
+@font-face {
+    font-family: "Google Sans Display";
+    font-display: swap;
+    src: url(../fonts/GoogleSansDisplay/GoogleSansDisplay-Regular.woff) format("woff"), url(../fonts/GoogleSansDisplay/GoogleSansDisplay-Regular.ttf) format("truetype");
+    font-style: normal
+}
+
+@font-face {
+    font-family: "Google Sans Display";
+    font-display: swap;
+    src: url(../fonts/GoogleSansDisplay/GoogleSansDisplay-Italic.woff) format("woff"), url(../fonts/GoogleSansDisplay/GoogleSansDisplay-Italic.ttf) format("truetype");
+    font-style: italic
+}
+
+/* GoogleSansDisplay - Bold */
+@font-face {
+    font-family: "Google Sans Display";
+    font-display: swap;
+    src: url(../fonts/GoogleSansDisplay/GoogleSansDisplay-Bold.woff) format("woff"), url(../fonts/GoogleSansDisplay/GoogleSansDisplay-Bold.ttf) format("truetype");
+    font-weight: bold;
+    font-style: normal
+}
+
+@font-face {
+    font-family: "Google Sans Display";
+    font-display: swap;
+    src: url(../fonts/GoogleSansDisplay/GoogleSansDisplay-BoldItalic.woff) format("woff"), url(../fonts/GoogleSansDisplay/GoogleSansDisplay-BoldItalic.ttf) format("truetype");
+    font-weight: bold;
+    font-style: italic
+}

private/css/style.css

@@ -15,8 +15,10 @@ a img,
 /* Structure */
 
 body {
-    color: #555;
-    font-family: Arial, Helvetica, sans-serif;
+    background-color: var(--darkmode-background);
+        color: var(--darkmode-text);
+        font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        ;
     font-size: 12px;
     line-height: 18px;
     margin: 0;
@@ -105,7 +107,7 @@ pre {
     border: 1px solid #d1d7dc;
     color: #006600;
     display: block;
-    font-family: "Courier New", Courier, monospace;
+    font-family: 'Google Sans Display', 'Courier New', Courier, monospace;
     font-size: 11px;
     margin: 0 0 10px;
     max-height: 250px;
@@ -152,8 +154,8 @@ hr {
 }
 
 .selectedFilter {
-    background-color: #415a8d;
-    color: #ffffff;
+    background-color: var(--darkmode-primary);
+        color: var(--darkmode-background);
 }
 
 .selectedFilter a {
@@ -203,7 +205,8 @@ a.propButton img {
 .contextMenu li a {
     color: #000;
     display: block;
-    font-family: tahoma, arial, sans-serif;
+    font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        ;
     font-size: 12px;
     padding: 5px 20px 5px 5px;
     text-decoration: none;
@@ -335,9 +338,10 @@ a.propButton img {
 }
 
 #mochaToolbar .divider {
-    background-image: url("../images/toolbox-divider.gif");
+    /* background-image: url("../images/toolbox-divider.gif");
     background-position: left center;
     background-repeat: no-repeat;
+        */ border-left: 1px solid var(--darkmode-line-color);
     padding-left: 14px;
     padding-top: 15px;
 }
@@ -365,6 +369,8 @@ a.propButton img {
     background-size: 1.5em;
     padding-left: 2em;
     width: 160px;
+    height: 100%;
+        min-height: 20px;
 }
 
 #torrentFilesFilterToolbar {
@@ -402,8 +408,11 @@ label.partial {
     background-position: 0 -26px;
 }
 
+fieldset {
+    border-color: var(--darkmode-line-color);
+}
 fieldset.settings {
-    border: solid 1px black;
+    border: solid 1px var(--darkmode-line-color);
     border-radius: 8px;
     padding: 4px 4px 4px 10px;
 }

private/index.html

@@ -8,9 +8,9 @@
     <title>qBittorrent Web UI</title>
     <link rel="icon" type="image/png" href="images/qbittorrent32.png" sizes="32x32" />
     <link rel="icon" type="image/svg+xml" href="images/qbittorrent-tray.svg" sizes="any" />
+    <link rel="stylesheet" type="text/css" href="css/fonts.css?v=${CACHEID}" />
     <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}" />

private/scripts/dynamicTable.js

@@ -1206,6 +1206,24 @@ window.qBittorrent.DynamicTable = (function() {
                 const string = (ratio === -1) ? '∞' : window.qBittorrent.Misc.toFixedPointString(ratio, 2);
                 td.set('text', string);
                 td.set('title', string);
+                td.classList.add('ratio');
+                td.set('class', 'ratio');
+                // color by percentage
+                if (string === 0 || string === "0.00") {
+                    td.classList.add('highlight-darkred');
+                } else if (string > "0" && string <= "0.10") {
+                    td.classList.add('highlight-red');
+                } else if (string > "0.10" && string <= "0.20") {
+                    td.classList.add('highlight-orange');
+                } else if (string > "0.20" && string <= "0.40") {
+                    td.classList.add('highlight-yellow');
+                } else if (string > "0.40" && string <= "0.60") {
+                    td.classList.add('highlight-yellow');
+                } else if (string > "0.60" && string <= "0.80") {
+                    td.classList.add('highlight-green');
+                } else if (string > "0.80" && string <= "1.0") {
+                    td.classList.add('highlight-brightgreen');
+                }
             };
 
             // added on

private/scripts/piecesbar.js

@@ -54,8 +54,8 @@ window.qBittorrent.PiecesBar = (() => {
                 'id': 'piecesbar_' + (piecesBarUniqueId++),
                 'width': 0,
                 'height': 0,
-                'downloadingColor': 'green',
-                'haveColor': 'blue',
+                'downloadingColor': '#50e948',
+                'haveColor': '#00d9ff',
                 'borderSize': 1,
                 'borderColor': '#999'
             };

private/scripts/progressbar.js

@@ -47,8 +47,8 @@ window.qBittorrent.ProgressBar = (function() {
                 'value': $pick(value, 0),
                 'width': 0,
                 'height': 0,
-                'darkbg': '#006',
-                'darkfg': '#fff',
+                'darkbg': '#00d9ff',
+                'darkfg': '#202020',
                 'lightbg': '#fff',
                 'lightfg': '#000'
             };