From e54de75c27915e3c4a39379fef9cebc9e60aeab1 Mon Sep 17 00:00:00 2001 From: d47081 Date: Mon, 6 Nov 2023 03:37:00 +0200 Subject: [PATCH] init adaptive color scheme for private WebUI --- src/webui/www/private/addpeers.html | 1 + src/webui/www/private/addtrackers.html | 1 + src/webui/www/private/confirmdeletion.html | 1 + .../www/private/confirmfeeddeletion.html | 1 + src/webui/www/private/confirmruleclear.html | 1 + .../www/private/confirmruledeletion.html | 1 + src/webui/www/private/css/Layout.css | 105 ++++++++------ src/webui/www/private/css/Tabs.css | 46 ++++-- src/webui/www/private/css/Window.css | 54 ++++--- src/webui/www/private/css/dynamicTable.css | 30 ++-- src/webui/www/private/css/palette.css | 47 +++++++ src/webui/www/private/css/style.css | 132 ++++++++++++------ src/webui/www/private/download.html | 1 + src/webui/www/private/downloadlimit.html | 1 + src/webui/www/private/edittracker.html | 1 + src/webui/www/private/index.html | 1 + src/webui/www/private/newcategory.html | 1 + src/webui/www/private/newfeed.html | 1 + src/webui/www/private/newfolder.html | 1 + src/webui/www/private/newrule.html | 1 + src/webui/www/private/newtag.html | 1 + src/webui/www/private/rename.html | 1 + src/webui/www/private/rename_feed.html | 1 + src/webui/www/private/rename_file.html | 1 + src/webui/www/private/rename_files.html | 3 +- src/webui/www/private/rename_rule.html | 1 + src/webui/www/private/setlocation.html | 1 + src/webui/www/private/shareratio.html | 1 + src/webui/www/private/upload.html | 1 + src/webui/www/private/uploadlimit.html | 1 + src/webui/www/private/views/search.html | 7 +- src/webui/www/webui.qrc | 1 + 32 files changed, 317 insertions(+), 131 deletions(-) create mode 100644 src/webui/www/private/css/palette.css diff --git a/src/webui/www/private/addpeers.html b/src/webui/www/private/addpeers.html index 4a23ace3d..e0639a5f3 100644 --- a/src/webui/www/private/addpeers.html +++ b/src/webui/www/private/addpeers.html @@ -4,6 +4,7 @@ QBT_TR(Add Peers)QBT_TR[CONTEXT=PeersAdditionDialog] + diff --git a/src/webui/www/private/addtrackers.html b/src/webui/www/private/addtrackers.html index 5bf5670cf..4618820dc 100644 --- a/src/webui/www/private/addtrackers.html +++ b/src/webui/www/private/addtrackers.html @@ -4,6 +4,7 @@ QBT_TR(Add trackers)QBT_TR[CONTEXT=TrackersAdditionDialog] + diff --git a/src/webui/www/private/confirmdeletion.html b/src/webui/www/private/confirmdeletion.html index 6ce0174e8..12c5ce49e 100644 --- a/src/webui/www/private/confirmdeletion.html +++ b/src/webui/www/private/confirmdeletion.html @@ -4,6 +4,7 @@ QBT_TR(Remove torrent(s))QBT_TR[CONTEXT=confirmDeletionDlg] + diff --git a/src/webui/www/private/confirmfeeddeletion.html b/src/webui/www/private/confirmfeeddeletion.html index dba355316..40661d155 100644 --- a/src/webui/www/private/confirmfeeddeletion.html +++ b/src/webui/www/private/confirmfeeddeletion.html @@ -4,6 +4,7 @@ QBT_TR(Deletion confirmation)QBT_TR[CONTEXT=RSSWidget] + diff --git a/src/webui/www/private/confirmruleclear.html b/src/webui/www/private/confirmruleclear.html index 6ea5ce63e..98f326ba3 100644 --- a/src/webui/www/private/confirmruleclear.html +++ b/src/webui/www/private/confirmruleclear.html @@ -4,6 +4,7 @@ QBT_TR(Clear downloaded episodes)QBT_TR[CONTEXT=AutomatedRssDownloader] + diff --git a/src/webui/www/private/confirmruledeletion.html b/src/webui/www/private/confirmruledeletion.html index 6418ff122..fc05af54c 100644 --- a/src/webui/www/private/confirmruledeletion.html +++ b/src/webui/www/private/confirmruledeletion.html @@ -4,6 +4,7 @@ QBT_TR(Rule deletion confirmation)QBT_TR[CONTEXT=AutomatedRssDownloader] + diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index 1e30090d1..bf7a3b3e4 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -20,7 +20,7 @@ Required by: html, body { - background: #fff; + /*background: #fff;#19844*/ } body { @@ -37,11 +37,11 @@ body { } #desktopHeader { - background: #f2f2f2; + /*background: #f2f2f2;#19844*/ } #desktopTitlebarWrapper { - background: #718ba6 url("../images/bg-header.gif") repeat-x; + /*background: #718ba6 url("../images/bg-header.gif") repeat-x;#19844*/ height: 45px; overflow: hidden; position: relative; @@ -55,7 +55,7 @@ body { } #desktopTitlebar h1.applicationTitle { - color: #fff; + /*color: #fff;#19844*/ display: none; font-size: 20px; font-weight: bold; @@ -65,7 +65,7 @@ body { } #desktopTitlebar h2.tagline { - color: #d4dce4; + /*color: #d4dce4;#19844*/ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; @@ -75,12 +75,12 @@ body { } #desktopTitlebar h2.tagline .taglineEm { - color: #fff; + /*color: #fff;#19844*/ font-weight: bold; } #topNav { - color: #d4dce4; + /*color: #d4dce4;#19844*/ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding: 13px 10px 0 0; @@ -91,7 +91,7 @@ body { } #topNav a { - color: #fff; + /*color: #fff;#19844*/ font-weight: normal; } @@ -101,11 +101,16 @@ body { /* Navbar */ +#Filters_pad {/*#19844 @TODO element fix wanted*/ + padding: 0 1px!important; +} + #desktopNavbar { - background: #f2f2f2; + /*background: #f2f2f2;#19844*/ /*background-color: #ccc;*/ - border-bottom: 1px solid #3f3f3f; - height: 20px; + /*border-bottom: 1px solid #3f3f3f;#19844*/ + background-color: var(--color-background-default); + /*height: 20px;#19844*/ margin: 0 0px; overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ } @@ -126,14 +131,18 @@ body { } #desktopNavbar ul li a { - color: #333; + /*color: #333;#19844*/ + color: var(--color-text-default); font-weight: normal; - padding: 2px 10px 6px; + /*padding: 2px 10px 6px;#19844*/ + padding: 4px 10px; } #desktopNavbar ul li a:hover { - background-color: #fff; - color: #333; + /*background-color: #fff;#19844*/ + /*color: #333;#19844*/ + background-color: var(--color-background-blue); + color: var(--color-text-white); } #desktopNavbar ul li a.arrow-right, @@ -144,10 +153,12 @@ body { } #desktopNavbar li ul { - background: #fff url("../images/bg-dropdown.gif") repeat-y; - border: 1px solid #3f3f3f; + /*background: #fff url("../images/bg-dropdown.gif") repeat-y;#19844*/ + /*border: 1px solid #3f3f3f;#19844*/ + background-color: var(--color-background-default); + border: 1px solid var(--color-border-default); left: -999em; - margin-top: -6px; + /*margin-top: -6px;#19844*/ position: absolute; z-index: 8000; } @@ -165,7 +176,7 @@ body { } #desktopNavbar li ul li .check { - background: #555; + /*background: #555;#19844*/ font-size: 1px; height: 5px; left: 6px; @@ -177,21 +188,25 @@ body { } #desktopNavbar li ul li a { - color: #3f3f3f; + /*color: #3f3f3f;#19844*/ + color: var(--color-text-default); font-weight: normal; min-width: 120px; - padding: 1px 10px 1px 20px; + /*padding: 1px 10px 1px 20px;#19844*/ + padding: 4px 10px 4px 25px; position: relative; } #desktopNavbar li ul li a:hover { - background: #6c98d9; - border-radius: 2px; - color: #fff; + /*background: #6c98d9;#19844*/ + /*border-radius: 2px;#19844*/ + /*color: #fff;#19844*/ + background-color: var(--color-background-blue); + color: var(--color-text-white); } #desktopNavbar li ul li a:hover .check { - background: #fff; + /*background: #fff;#19844*/ } /* lists nested under hovered list items */ @@ -210,14 +225,17 @@ body { } li.divider { - border-top: 1px solid #ebebeb; + /*border-top: 1px solid #ebebeb;#19844*/ + border-top: 1px solid var(--color-border-default); margin-top: 2px; padding-top: 3px; } #pageWrapper { - border-bottom: 1px solid #909090; - border-top: 1px solid #909090; + /*border-bottom: 1px solid #909090;#19844*/ + /* border-top: 1px solid #909090;#19844*/ + border-top: 1px solid var(--color-border-default); + border-bottom: 1px solid var(--color-border-default); overflow: hidden; /* This can be set to hidden or auto */ position: relative; /*height: 100%;*/ @@ -235,7 +253,7 @@ li.divider { } #desktopFooter { - background: #f2f2f2; + /*background: #f2f2f2;#19844*/ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; height: 24px; @@ -256,8 +274,9 @@ li.divider { /* Panels */ .panel { - background: #f8f8f8; - border-bottom: 1px solid #b9b9b9; + /*background: #f8f8f8;#19844*/ + /*border-bottom: 1px solid #b9b9b9;*/ + border-bottom: 1px solid var(--color-border-default); overflow: auto; position: relative; } @@ -267,7 +286,7 @@ li.divider { } .panelAlt { - background: #f2f2f2; + /*background: #f2f2f2;#19844*/ } .bottomPanel { @@ -279,13 +298,14 @@ li.divider { } #mainPanel { - background: #fff; + /*background: #fff;#19844*/ } .panel-header { - background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x; - border-bottom: 1px solid #d3d3d3; - height: 30px; + /*background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x;#19844*/ + /*border-bottom: 1px solid #d3d3d3;#19844*/ + /*height: 30px;#19844*/ + border-bottom: 1px solid var(--color-border-default); overflow: hidden; position: relative; } @@ -295,12 +315,12 @@ li.divider { } .panel-headerContent.tabs { - background: url("../images/tabs.gif") repeat-x; - background-position: left -68px; + /*background: url("../images/tabs.gif") repeat-x;#19844*/ + /*background-position: left -68px;#19844*/ } .panel-header h2 { - color: #333; + /*color: #333;#19844*/ display: inline-block; font-size: 12px; height: 22px; @@ -326,7 +346,7 @@ li.divider { /* Column and Panel Handles */ .horizontalHandle { - background: #eee url("../images/bg-handle-horizontal.gif") repeat-x; + /*background: #eee url("../images/bg-handle-horizontal.gif") repeat-x;#19844*/ font-size: 1px; height: 4px; line-height: 1px; @@ -348,8 +368,9 @@ li.divider { } .columnHandle { - background: #c3c3c3 url("../images/handle-icon.gif") center center no-repeat; - border: 1px solid #909090; + background: /*#c3c3c3#19844*/ url("../images/handle-icon.gif") center center no-repeat; + /*border: 1px solid #909090;*/ + border: 1px solid var(--color-border-default); border-bottom: 0; border-top: 0; float: left; diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css index 34f80748f..6233513e4 100644 --- a/src/webui/www/private/css/Tabs.css +++ b/src/webui/www/private/css/Tabs.css @@ -18,10 +18,10 @@ Required by: /* Toolbar Tabs */ .toolbarTabs { - background: url("../images/tabs.gif") repeat-x; - background-position: left -70px; + /*background: url("../images/tabs.gif") repeat-x;#19844*/ + /*background-position: left -70px;#19844*/ overflow: visible; - padding: 0 5px 2px 2px; + /*padding: 0 5px 2px 2px;#19844*/ } .tab-menu { @@ -33,32 +33,48 @@ Required by: } .tab-menu li { - background: url("../images/tabs.gif") repeat-x; - background-position: left -35px; + /*background: url("../images/tabs.gif") repeat-x;#19844*/ + /*background-position: left -35px;#19844*/ cursor: pointer; float: left; - margin: 0 0 5px; + /*margin: 0 0 5px;#19844*/ } .tab-menu li.selected { - background: url("../images/tabs.gif") repeat-x; - background-position: left 0; + /*background: url("../images/tabs.gif") repeat-x;#19844*/ + /*background-position: left 0;#19844*/ } .tab-menu li a { - background: url("../images/tabs.gif") repeat-x; - background-position: right -35px; - color: #181818; + /*background: url("../images/tabs.gif") repeat-x;#19844*/ + /*background-position: right -35px;#19844*/ + /*color: #181818;#19844*/ + background-color: var(--color-background-default); + color: var(--color-text-default); + border-radius: 5px 5px 0 0; display: block; font-weight: normal; margin-left: 8px; - padding: 6px 15px 5px 9px; + /*padding: 6px 15px 5px 9px;#19844 replace GIF backgrounds with CSS*/ + padding: 5px 16px;/*#19844*/ text-align: center; } .tab-menu li.selected a { - background: url("../images/tabs.gif") repeat-x; - background-position: right 0; - color: #181818; + /*background: url("../images/tabs.gif") repeat-x;#19844*/ + /*background-position: right 0;#19844*/ + /*border: 1px #909090 solid;#19844 CSS tab, native border bottom color*/ + /*border-radius: 5px 5px 0 0;/*#19844 CSS tab*/ + /*color: #181818;#19844*/ + + /* @TODO + border-top: 1px var(--color-border-default) solid; + border-left: 1px var(--color-border-default) solid; + border-right: 1px var(--color-border-default) solid; + */ + + background-color: var(--color-background-blue); + color: var(--color-text-white); + font-weight: bold; } diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index d211dd980..53f8babed 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -19,7 +19,8 @@ Required by: ---------------------------------------------------------------- */ .mocha { - background-color: #e5e5e5; + /*background-color: #e5e5e5;#19844*/ + background-color: var(--color-background-default); display: none; overflow: hidden; } @@ -28,6 +29,9 @@ Required by: left: 0; position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ top: 0; + background-color: var(--color-background-default); + border-radius: 5px; + height: auto!important; /* #19844 also fixes out of block issue */ } /* @@ -42,13 +46,15 @@ Required by: */ .mochaTitlebar { - background: url("../images/spacer.gif?from=fafafa&to=e5e5e5"); + /*background: url("../images/spacer.gif?from=fafafa&to=e5e5e5");#19844*/ + background-color: var(--color-background-default); + border-radius: 5px; overflow: hidden; width: 100%; } .mochaTitlebar h3 { - color: #888; + /*color: #888;#19844*/ font-size: 12px; font-weight: bold; line-height: 15px; @@ -57,13 +63,15 @@ Required by: } .mocha.isFocused .mochaTitlebar h3 { - color: #181818; + /*color: #181818;#19844*/ } .mochaToolbarWrapper { - background: #f1f1f1; - border-top: 1px solid #d9d9d9; - height: 29px; + /*background: #f1f1f1;#19844*/ + /*border-top: 1px solid #d9d9d9;#19844*/ + background-color: var(--color-background-popup); + /*height: 29px;#19844*/ + height: auto !important; overflow: hidden; position: relative; width: 100%; /* For IE */ @@ -71,22 +79,29 @@ Required by: div.mochaToolbarWrapper.bottom { border: 0; - border-bottom: 1px solid #d9d9d9; + /*border-bottom: 1px solid #d9d9d9;#19844*/ + border-bottom: 1px solid var(--color-border-default); } .mochaToolbar { - border-top: 1px solid #fff; + /*border-top: 1px solid #fff;#19844*/ + border-top: 1px solid var(--color-border-default); + padding-top: 4px; + height: auto !important; width: 100%; /* For IE */ } .mochaContentBorder { - border-bottom: 1px solid #dadada; - border-top: 1px solid #dadada; + /*border-bottom: 1px solid #dadada;#19844*/ + /*border-top: 1px solid #dadada;#19844*/ + border-bottom: 1px solid var(--color-border-default); + border-top: 1px solid var(--color-border-default); } /* Has a fixed height and scrollbars if required. */ .mochaContentWrapper { - background: #fff; + /*background: #fff;#19844*/ + background-color: var(--color-background-popup); font-size: 12px; overflow: auto; } @@ -115,13 +130,14 @@ div.mochaToolbarWrapper.bottom { /* Bottom right resize handle */ .mocha .cornerSE { - background: #fefefe; /* This is the color of the visible resize handle */ + /*background: #fefefe;#19844*/ /* This is the color of the visible resize handle */ + background-color: var(--color-background-default); height: 20px; width: 20px; } .mochaCanvasHeader { - background: transparent; + /*background: transparent;#19844*/ left: 0; overflow: hidden; position: absolute; @@ -131,7 +147,7 @@ div.mochaToolbarWrapper.bottom { } .mochaControls { - background: transparent; + /*background: transparent;#19844*/ height: 14px; position: absolute; right: 8px; @@ -141,7 +157,7 @@ div.mochaToolbarWrapper.bottom { } .mochaCanvasControls { - background: transparent; + /*background: transparent;#19844*/ position: absolute; right: 8px; top: 8px; @@ -159,8 +175,10 @@ div.mochaToolbarWrapper.bottom { .mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { - background-color: #fff; - color: #666; + /*background-color: #fff;#19844*/ + background-color: var(--color-background-default); + /*color: #666;#19844*/ + color: var(--color-text-default); cursor: pointer; float: right; font-size: 1px; diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index f54c35692..4b980d210 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -6,26 +6,32 @@ **************************************************************/ .dynamicTable tbody tr { - background-color: #fff; + /*background-color: #fff;#19844*/ } .dynamicTable tbody tr:nth-child(even), .dynamicTable tbody tr.alt { - background-color: #eee; + /*background-color: #eee;#19844*/ + background-color: var(--color-background-default); } #transferList .dynamicTable td { - padding: 0 2px; + /*padding: 0 2px;#19844*/ + padding: 2px; } .dynamicTable tbody tr.selected { - background-color: #354158; - color: #fff; + /*background-color: #354158;#19844*/ + /*color: #fff;#19844*/ + background-color: var(--color-background-blue); + color: var(--color-text-white); } .dynamicTable tbody tr:hover { - background-color: #ee6600; - color: #fff; + /*background-color: #ee6600;#19844*/ + /*color: #fff;#19844*/ + background-color: var(--color-background-blue); + color: var(--color-text-white); } #transferList tr:hover { @@ -50,20 +56,22 @@ tr.dynamicTableHeader { } .dynamicTable th { - background-color: #eee; - border-right: 1px solid #ccc; + /*background-color: #eee;#19844*/ + /*border-right: 1px solid #ccc;#19844*/ + border-right: 1px solid var(--color-border-default); box-sizing: border-box; padding: 4px; white-space: nowrap; } .dynamicTable td { - padding: 0px 4px; + padding: 0 4px; + border-bottom: 1px solid transparent; white-space: nowrap; } .dynamicTable thead tr { - background-color: #eee; + /*background-color: #eee;#19844*/ } .dynamicTable th, diff --git a/src/webui/www/private/css/palette.css b/src/webui/www/private/css/palette.css new file mode 100644 index 000000000..0862d2942 --- /dev/null +++ b/src/webui/www/private/css/palette.css @@ -0,0 +1,47 @@ +/* Adaptive color palette #19844 */ + +/* Default rules */ +* { + --color-text-blue: hsl(210, 100%, 55%); + --color-text-orange: hsl(26, 100%, 45%); + --color-text-red: hsl(0, 100%, 65%); + --color-text-green: hsl(110, 94%, 27%); + --color-text-white: hsl(0, 0%, 100%); + --color-text-disabled: hsl(0, 0%, 60%); + --color-text-default: hsl(0, 0%, 33%); + + --color-background-blue: hsl(210, 42%, 48%); + --color-background-popup: hsl(0, 0%, 100%); + --color-background-default: hsl(0, 0%, 94%); + + --color-border-default: hsl(0, 0%, 85%); +} + +: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-text-default: hsl(0, 0%, 90%); + + --color-background-popup: hsl(0, 0%, 20%); + --color-background-default: hsl(0, 0%, 30%); + + --color-border-default: hsl(0, 0%, 33%); + } +} diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 7f7f201bd..77311ed31 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -15,7 +15,8 @@ a img, /* Structure */ body { - color: #555; + /*color: #555;#19844*/ + color: var(--color-text-default); font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; @@ -36,7 +37,7 @@ body { h2, h3, h4 { - color: #333; + /*color: #333;#19844*/ font-size: 12px; font-weight: bold; margin: 0; @@ -44,13 +45,15 @@ h4 { } h2 { - color: #555; + /*color: #555;#19844*/ + color: var(--color-text-default); font-size: 14px; font-weight: bold; } #mochaPage h3 { - border-bottom: 1px solid #bbb; + /*border-bottom: 1px solid #bbb;#19844*/ + border-bottom: 1px solid var(--color-border-default); display: block; font-size: 12px; margin: 0 0 8px; @@ -59,7 +62,8 @@ h2 { #error_div, #rename_error { - color: #f00; + /*color: #f00;#19844*/ + color: var(--color-text-red); float: left; font-size: 14px; font-weight: bold; @@ -70,7 +74,8 @@ h4 { } a { - color: #e60; + /*color: #e60;#19844*/ + color: var(--color-text-orange); cursor: pointer; text-decoration: none; } @@ -99,12 +104,22 @@ dd { padding: 0 0 9px; } +/* Forms */ + +fieldset { + border: 1px solid var(--color-border-default); + border-radius: 5px; +} + /* Code */ pre { - background-color: #f6f6f6; - border: 1px solid #d1d7dc; - color: #006600; + /*background-color: #f6f6f6;#19844*/ + /*border: 1px solid #d1d7dc;#19844*/ + /*color: #006600;#19844*/ + background-color: var(--color-background-default); + border: 1px solid var(--color-border-default); + color: var(--color-text-green); display: block; font-family: "Courier New", Courier, monospace; font-size: 11px; @@ -117,9 +132,11 @@ pre { /* Dividers */ hr { - background-color: #ddd; + /*background-color: #ddd;#19844*/ + /*color: #ccc;#19844*/ + background-color: var(--color-background-default); + color: var(--color-text-default); border: 0px; - color: #ccc; height: 1px; } @@ -147,22 +164,27 @@ hr { #Filters ul img { height: 16px; - padding: 2px 4px; + /*padding: 2px 4px;#19844*/ + padding: 0 4px; vertical-align: middle; width: 16px; } .selectedFilter { - background-color: #415a8d; - color: #ffffff; + /*background-color: #415a8d;#19844*/ + /*color: #ffffff;#19844*/ + background-color: var(--color-background-blue)!important; /* important prevents hover effect on click, @TODO CSS optimization */ + color: var(--color-text-white)!important; } .selectedFilter a { - color: #ffffff; + /*color: #ffffff;#19844*/ + color: var(--color-text-white)!important; /* @TODO original re-definition below */ } #properties { - background-color: #e5e5e5; + /*background-color: #e5e5e5;#19844*/ + background-color: var(--color-background-default); } a.propButton { @@ -184,15 +206,18 @@ a.propButton img { /* context menu specific */ .contextMenu { - background: #eee; - border: 1px solid #999; + /*background: #eee;#19844*/ + /*border: 1px solid #999;*/ + background-color: var(--color-background-default); + border: 1px solid var(--color-border-default); display: none; list-style-type: none; padding: 0; } .contextMenu .separator { - border-top: 1px solid #999; + /*border-top: 1px solid #999;#19844*/ + border-top: 1px solid var(--color-border-default); } .contextMenu li { @@ -201,7 +226,8 @@ a.propButton img { } .contextMenu li a { - color: #000; + /*color: #000;#19844*/ + color: var(--color-text-default); display: block; font-family: tahoma, arial, sans-serif; font-size: 12px; @@ -211,21 +237,26 @@ a.propButton img { } .contextMenu li a:hover { - background-color: #ddd; + /*background-color: #ddd;#19844*/ + background-color: var(--color-background-blue); + color: var(--color-text-white); } .contextMenu li a.disabled { - color: #ccc; + /*color: #ccc;#19844*/ font-style: italic; } .contextMenu li a.disabled:hover { - background-color: #eee; + /*background-color: #eee;#19844*/ + color: var(--color-text-disabled); } .contextMenu li ul { - background: #eee; - border: 1px solid #999; + /*background: #eee;#19844*/ + /*border: 1px solid #999;#19844*/ + background: var(--color-background-default); + border: 1px solid var(--color-border-default); left: -999em; list-style-type: none; margin: -29px 0 0 100%; @@ -260,6 +291,7 @@ a.propButton img { height: 16px; margin-bottom: -4px; width: 16px; + margin-right: 0.5em; /*#19844 return missed padding */ } .contextMenu li input[type="checkbox"] { @@ -328,7 +360,8 @@ a.propButton img { /* Mocha Customization */ #mochaToolbar { - height: 29px; + /*height: 29px;#19844*/ + height: auto !important; margin-top: 5px; overflow-y: hidden; position: relative; @@ -354,8 +387,10 @@ a.propButton img { } #torrentsFilterToolbar { - float: right; - margin-right: 30px; + /*float: right;#19844*/ + /*margin-right: 30px;#19844*/ + display: inline-block; + vertical-align: top; } #torrentsFilterInput { @@ -363,8 +398,13 @@ a.propButton img { background-position: left; background-repeat: no-repeat; background-size: 1.5em; - padding-left: 2em; - width: 160px; + background-color: var(--color-background-default); + border: 1px solid var(--color-border-default); + border-radius: 3px; + padding: 4px 4px 4px 25px; + /*padding-left: 2em;#19844*/ + /*width: 160px;#19844*/ + min-width: 160px; } #torrentFilesFilterToolbar { @@ -403,7 +443,8 @@ label.partial { } fieldset.settings { - border: solid 1px black; + /*border: solid 1px black;#19844*/ + border: 1px solid var(--color-border-default); border-radius: 8px; padding: 4px 4px 4px 10px; } @@ -455,7 +496,9 @@ ul.filterList { } ul.filterList a { - color: inherit; + /*color: inherit;#19844*/ + color: var(--color-text-default); + padding: 4px 6px; display: block; overflow: hidden; text-overflow: ellipsis; @@ -463,11 +506,12 @@ ul.filterList a { } ul.filterList li:hover { - background-color: #e60; + /*background-color: #e60;#19844*/ + background-color: var(--color-background-default); } ul.filterList li:hover a { - color: white; + /*color: white;#19844*/ } td.generalLabel { @@ -532,7 +576,7 @@ td.generalLabel { } .select-watched-folder-editable { - background-color: white; + /*background-color: white;#19844*/ border: solid grey 1px; height: 20px; position: relative; @@ -623,11 +667,13 @@ td.statusBarSeparator { } .red { - color: red; + /*color: red;#19844*/ + color: var(--color-text-red); } .green { - color: green; + /*color: green;#19844*/ + color: var(--color-text-green); } .searchPluginsTableRow { @@ -635,15 +681,17 @@ td.statusBarSeparator { } #torrentFilesTableDiv .dynamicTable tr.nonAlt { - background-color: #fff; + /*background-color: #fff;#19844*/ } #torrentFilesTableDiv .dynamicTable tr.nonAlt.selected { - background-color: #354158; - color: #fff; + /*background-color: #354158;#19844*/ + /*color: #fff;#19844*/ } #torrentFilesTableDiv .dynamicTable tr.nonAlt:hover { - background-color: #ee6600; - color: #fff; + /*background-color: #ee6600;#19844*/ + /*color: #fff;#19844*/ + background-color: var(--color-background-blue); + color: var(--color-text-white); } diff --git a/src/webui/www/private/download.html b/src/webui/www/private/download.html index 913a10001..e06554cc0 100644 --- a/src/webui/www/private/download.html +++ b/src/webui/www/private/download.html @@ -4,6 +4,7 @@ QBT_TR(Add Torrent Links)QBT_TR[CONTEXT=downloadFromURL] + diff --git a/src/webui/www/private/downloadlimit.html b/src/webui/www/private/downloadlimit.html index fa49266dd..d60af2ac2 100644 --- a/src/webui/www/private/downloadlimit.html +++ b/src/webui/www/private/downloadlimit.html @@ -4,6 +4,7 @@ QBT_TR(Torrent Download Speed Limiting)QBT_TR[CONTEXT=TransferListWidget] + diff --git a/src/webui/www/private/edittracker.html b/src/webui/www/private/edittracker.html index 17d2a92d2..51a68c982 100644 --- a/src/webui/www/private/edittracker.html +++ b/src/webui/www/private/edittracker.html @@ -4,6 +4,7 @@ QBT_TR(Tracker editing)QBT_TR[CONTEXT=TrackerListWidget] + diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html index 9aa01c063..35eda062c 100644 --- a/src/webui/www/private/index.html +++ b/src/webui/www/private/index.html @@ -8,6 +8,7 @@ qBittorrent Web UI + diff --git a/src/webui/www/private/newcategory.html b/src/webui/www/private/newcategory.html index 63186e013..b5c147a1e 100644 --- a/src/webui/www/private/newcategory.html +++ b/src/webui/www/private/newcategory.html @@ -4,6 +4,7 @@ QBT_TR(New Category)QBT_TR[CONTEXT=TransferListWidget] + diff --git a/src/webui/www/private/newfeed.html b/src/webui/www/private/newfeed.html index 4f6204a9d..12fd3c9d5 100644 --- a/src/webui/www/private/newfeed.html +++ b/src/webui/www/private/newfeed.html @@ -4,6 +4,7 @@ QBT_TR(Please type a RSS feed URL)QBT_TR[CONTEXT=RSSWidget] + diff --git a/src/webui/www/private/newfolder.html b/src/webui/www/private/newfolder.html index cc1259b8d..7d064241c 100644 --- a/src/webui/www/private/newfolder.html +++ b/src/webui/www/private/newfolder.html @@ -4,6 +4,7 @@ QBT_TR(Please choose a folder name)QBT_TR[CONTEXT=RSSWidget] + diff --git a/src/webui/www/private/newrule.html b/src/webui/www/private/newrule.html index 99cb8ba78..5bf6dc764 100644 --- a/src/webui/www/private/newrule.html +++ b/src/webui/www/private/newrule.html @@ -4,6 +4,7 @@ QBT_TR(New rule name)QBT_TR[CONTEXT=AutomatedRssDownloader] + diff --git a/src/webui/www/private/newtag.html b/src/webui/www/private/newtag.html index 16b779ce3..2ca8d7aa5 100644 --- a/src/webui/www/private/newtag.html +++ b/src/webui/www/private/newtag.html @@ -4,6 +4,7 @@ QBT_TR(Add Tags)QBT_TR[CONTEXT=TransferListWidget] + diff --git a/src/webui/www/private/rename.html b/src/webui/www/private/rename.html index 1284812db..0afa7a665 100644 --- a/src/webui/www/private/rename.html +++ b/src/webui/www/private/rename.html @@ -4,6 +4,7 @@ QBT_TR(Rename)QBT_TR[CONTEXT=TransferListWidget] + diff --git a/src/webui/www/private/rename_feed.html b/src/webui/www/private/rename_feed.html index 141e1a01f..898310994 100644 --- a/src/webui/www/private/rename_feed.html +++ b/src/webui/www/private/rename_feed.html @@ -4,6 +4,7 @@ QBT_TR(Please choose a new name for this RSS feed)QBT_TR[CONTEXT=RSSWidget] + diff --git a/src/webui/www/private/rename_file.html b/src/webui/www/private/rename_file.html index 49cdbada8..3bd671d59 100644 --- a/src/webui/www/private/rename_file.html +++ b/src/webui/www/private/rename_file.html @@ -4,6 +4,7 @@ QBT_TR(Renaming)QBT_TR[CONTEXT=TorrentContentTreeView] + diff --git a/src/webui/www/private/rename_files.html b/src/webui/www/private/rename_files.html index 633501c57..276d7c302 100644 --- a/src/webui/www/private/rename_files.html +++ b/src/webui/www/private/rename_files.html @@ -3,7 +3,8 @@ - QBT_TR(Renaming))QBT_TR[CONTEXT=TorrentContentTreeView] + QBT_TR(Renaming)QBT_TR[CONTEXT=TorrentContentTreeView] + diff --git a/src/webui/www/private/rename_rule.html b/src/webui/www/private/rename_rule.html index cbc252c3c..8158e7746 100644 --- a/src/webui/www/private/rename_rule.html +++ b/src/webui/www/private/rename_rule.html @@ -4,6 +4,7 @@ QBT_TR(Rule renaming)QBT_TR[CONTEXT=AutomatedRssDownloader] + diff --git a/src/webui/www/private/setlocation.html b/src/webui/www/private/setlocation.html index 36a2ee815..a23e80c7c 100644 --- a/src/webui/www/private/setlocation.html +++ b/src/webui/www/private/setlocation.html @@ -4,6 +4,7 @@ QBT_TR(Set location)QBT_TR[CONTEXT=HttpServer] + diff --git a/src/webui/www/private/shareratio.html b/src/webui/www/private/shareratio.html index 897f0cb01..a6685411b 100644 --- a/src/webui/www/private/shareratio.html +++ b/src/webui/www/private/shareratio.html @@ -4,6 +4,7 @@ QBT_TR(Torrent Upload/Download Ratio Limiting)QBT_TR[CONTEXT=UpDownRatioDialog] + diff --git a/src/webui/www/private/upload.html b/src/webui/www/private/upload.html index b2e2b018c..2fb0d02b6 100644 --- a/src/webui/www/private/upload.html +++ b/src/webui/www/private/upload.html @@ -4,6 +4,7 @@ QBT_TR(Upload local torrent)QBT_TR[CONTEXT=HttpServer] + diff --git a/src/webui/www/private/uploadlimit.html b/src/webui/www/private/uploadlimit.html index e6cb93ef6..da073af0e 100644 --- a/src/webui/www/private/uploadlimit.html +++ b/src/webui/www/private/uploadlimit.html @@ -4,6 +4,7 @@ QBT_TR(Torrent Upload Speed Limiting)QBT_TR[CONTEXT=TransferListWidget] + diff --git a/src/webui/www/private/views/search.html b/src/webui/www/private/views/search.html index fbae44ae8..85c540957 100644 --- a/src/webui/www/private/views/search.html +++ b/src/webui/www/private/views/search.html @@ -1,12 +1,15 @@