Skip to content

Commit

Permalink
Add dark theme for WebUI
Browse files Browse the repository at this point in the history 
Closes #19844.
PR #19901.

---------

Co-authored-by: d47081 <localhost>
Co-authored-by: Chocobo1 <Chocobo1@users.noreply.github.com>
  • Loading branch information
@d47081 @Chocobo1
d47081 and Chocobo1 authored Dec 12, 2023
1 parent cc563d9 commit 9d90141
Show file tree
Hide file tree
Showing 24 changed files with 459 additions and 490 deletions.
12 changes: 6 additions & 6 deletions src/icons/icons.qrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
<file>dialog-warning.svg</file>
<file>directory.svg</file>
<file>disconnected.svg</file>
<file>downloading.svg</file>
<file>download.svg</file>
<file>downloading.svg</file>
<file>edit-clear.svg</file>
<file>edit-copy.svg</file>
<file>edit-find.svg</file>
Expand Down Expand Up @@ -322,20 +322,19 @@
<file>preferences-bittorrent.svg</file>
<file>preferences-desktop.svg</file>
<file>preferences-webui.svg</file>
<file>qbittorrent_file.ico</file>
<file>qbittorrent.ico</file>
<file>qbittorrent-tray-dark.svg</file>
<file>qbittorrent-tray-light.svg</file>
<file>qbittorrent-tray.svg</file>
<file alias="qbittorrent.svg">qbittorrent-tray.svg</file>
<file>qbittorrent.ico</file>
<file>qbittorrent_file.ico</file>
<file>queued.svg</file>
<file>ratio.svg</file>
<file>reannounce.svg</file>
<file>security-high.svg</file>
<file>security-low.svg</file>
<file>set-location.svg</file>
<file>slow_off.svg</file>
<file>slow.svg</file>
<file>slow_off.svg</file>
<file>speedometer.svg</file>
<file>splash.png</file>
<file>stalledDL.svg</file>
Expand All @@ -351,14 +350,15 @@
<file>torrent-start.svg</file>
<file>torrent-stop.svg</file>
<file>tracker-error.svg</file>
<file>tracker-warning.svg</file>
<file>trackerless.svg</file>
<file>trackers.svg</file>
<file>tracker-warning.svg</file>
<file>upload.svg</file>
<file>view-categories.svg</file>
<file>view-preview.svg</file>
<file>view-refresh.svg</file>
<file>view-statistics.svg</file>
<file>wallet-open.svg</file>
<file alias="qbittorrent.svg">qbittorrent-tray.svg</file>
</qresource>
</RCC>
2 changes: 1 addition & 1 deletion src/lang/lang.qrc
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<RCC>
<qresource prefix="/lang">
<file>qbittorrent_az@latin.qm</file>
<file>qbittorrent_ar.qm</file>
<file>qbittorrent_az@latin.qm</file>
<file>qbittorrent_be.qm</file>
<file>qbittorrent_bg.qm</file>
<file>qbittorrent_ca.qm</file>
Expand Down
82 changes: 20 additions & 62 deletions src/webui/www/private/css/Layout.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url("palette.css");

/*
Core.css for Mocha UI
Expand All @@ -18,11 +20,6 @@ Required by:
/* Layout
---------------------------------------------------------------- */

html,
body {
background: #fff;
}

body {
margin: 0; /* Required */
}
Expand All @@ -36,12 +33,7 @@ body {
position: relative;
}

#desktopHeader {
background: #f2f2f2;
}

#desktopTitlebarWrapper {
background: #718ba6 url("../images/bg-header.gif") repeat-x;
height: 45px;
overflow: hidden;
position: relative;
Expand All @@ -55,7 +47,6 @@ body {
}

#desktopTitlebar h1.applicationTitle {
color: #fff;
display: none;
font-size: 20px;
font-weight: bold;
Expand All @@ -65,7 +56,6 @@ body {
}

#desktopTitlebar h2.tagline {
color: #d4dce4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
Expand All @@ -75,12 +65,10 @@ body {
}

#desktopTitlebar h2.tagline .taglineEm {
color: #fff;
font-weight: bold;
}

#topNav {
color: #d4dce4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 13px 10px 0 0;
Expand All @@ -91,7 +79,6 @@ body {
}

#topNav a {
color: #fff;
font-weight: normal;
}

Expand All @@ -102,10 +89,7 @@ body {
/* Navbar */

#desktopNavbar {
background: #f2f2f2;
/*background-color: #ccc;*/
border-bottom: 1px solid #3f3f3f;
height: 20px;
background-color: var(--color-background-default);
margin: 0 0px;
overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
}
Expand All @@ -126,14 +110,14 @@ body {
}

#desktopNavbar ul li a {
color: #333;
color: var(--color-text-default);
font-weight: normal;
padding: 2px 10px 6px;
padding: 4px 10px;
}

#desktopNavbar ul li a:hover {
background-color: #fff;
color: #333;
background-color: var(--color-background-hover);
color: var(--color-text-white);
}

#desktopNavbar ul li a.arrow-right,
Expand All @@ -144,10 +128,9 @@ body {
}

#desktopNavbar li ul {
background: #fff url("../images/bg-dropdown.gif") repeat-y;
border: 1px solid #3f3f3f;
background-color: var(--color-background-default);
border: 1px solid var(--color-border-default);
left: -999em;
margin-top: -6px;
position: absolute;
z-index: 8000;
}
Expand All @@ -165,7 +148,6 @@ body {
}

#desktopNavbar li ul li .check {
background: #555;
font-size: 1px;
height: 5px;
left: 6px;
Expand All @@ -177,21 +159,16 @@ body {
}

#desktopNavbar li ul li a {
color: #3f3f3f;
color: var(--color-text-default);
font-weight: normal;
min-width: 120px;
padding: 1px 10px 1px 20px;
padding: 4px 10px 4px 25px;
position: relative;
}

#desktopNavbar li ul li a:hover {
background: #6c98d9;
border-radius: 2px;
color: #fff;
}

#desktopNavbar li ul li a:hover .check {
background: #fff;
background-color: var(--color-background-hover);
color: var(--color-text-white);
}

/* lists nested under hovered list items */
Expand All @@ -210,14 +187,14 @@ body {
}

li.divider {
border-top: 1px solid #ebebeb;
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 var(--color-border-default);
border-top: 1px solid var(--color-border-default);
overflow: hidden; /* This can be set to hidden or auto */
position: relative;
/*height: 100%;*/
Expand All @@ -235,7 +212,6 @@ li.divider {
}

#desktopFooter {
background: #f2f2f2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
height: 24px;
Expand All @@ -256,8 +232,7 @@ li.divider {
/* Panels */

.panel {
background: #f8f8f8;
border-bottom: 1px solid #b9b9b9;
border-bottom: 1px solid var(--color-border-default);
overflow: auto;
position: relative;
}
Expand All @@ -266,10 +241,6 @@ li.divider {
border-bottom: 0;
}

.panelAlt {
background: #f2f2f2;
}

.bottomPanel {
border-bottom: 0;
}
Expand All @@ -278,14 +249,8 @@ li.divider {
padding: 8px;
}

#mainPanel {
background: #fff;
}

.panel-header {
background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x;
border-bottom: 1px solid #d3d3d3;
height: 30px;
border-bottom: 1px solid var(--color-border-default);
overflow: hidden;
position: relative;
}
Expand All @@ -294,13 +259,7 @@ li.divider {
padding-top: 2px;
}

.panel-headerContent.tabs {
background: url("../images/tabs.gif") repeat-x;
background-position: left -68px;
}

.panel-header h2 {
color: #333;
display: inline-block;
font-size: 12px;
height: 22px;
Expand All @@ -326,7 +285,6 @@ li.divider {
/* Column and Panel Handles */

.horizontalHandle {
background: #eee url("../images/bg-handle-horizontal.gif") repeat-x;
font-size: 1px;
height: 4px;
line-height: 1px;
Expand All @@ -348,8 +306,8 @@ li.divider {
}

.columnHandle {
background: #c3c3c3 url("../images/handle-icon.gif") center center no-repeat;
border: 1px solid #909090;
background: url("../images/handle-icon.gif") center center no-repeat;
border: 1px solid var(--color-border-default);
border-bottom: 0;
border-top: 0;
float: left;
Expand Down
31 changes: 13 additions & 18 deletions src/webui/www/private/css/Tabs.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url("palette.css");

/*
Tabs.css for Mocha UI
Expand All @@ -18,10 +20,7 @@ Required by:
/* Toolbar Tabs */

.toolbarTabs {
background: url("../images/tabs.gif") repeat-x;
background-position: left -70px;
overflow: visible;
padding: 0 5px 2px 2px;
}

.tab-menu {
Expand All @@ -33,32 +32,28 @@ Required by:
}

.tab-menu li {
background: url("../images/tabs.gif") repeat-x;
background-position: left -35px;
cursor: pointer;
float: left;
margin: 0 0 5px;
}

.tab-menu li.selected {
background: url("../images/tabs.gif") repeat-x;
background-position: left 0;
}

.tab-menu li a {
background: url("../images/tabs.gif") repeat-x;
background-position: right -35px;
color: #181818;
background-color: var(--color-background-default);
border-radius: 5px 5px 0 0;
color: var(--color-text-default);
display: block;
font-weight: normal;
margin-left: 8px;
padding: 6px 15px 5px 9px;
padding: 5px 16px;
text-align: center;
}

.tab-menu li:hover a {
background-color: var(--color-background-hover);
color: var(--color-text-white);
}

.tab-menu li.selected a {
background: url("../images/tabs.gif") repeat-x;
background-position: right 0;
color: #181818;
background-color: var(--color-background-blue);
color: var(--color-text-white);
font-weight: bold;
}
Loading

0 comments on commit 9d90141

Please sign in to comment.