mirrors/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2024-11-21 16:55:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

WebUI: CSS/styling improvements

Browse source 
WebUI: CSS/styling improvements
This commit is contained in:
Chocobo1 2024-09-30 17:57:42 +08:00 committed by GitHub
commit cebaedf485
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 91 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/webui/www/private/css/Layout.css
View file

@ -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 {

3
src/webui/www/private/css/Tabs.css
View file

@ -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 {

2
src/webui/www/private/css/Window.css
View file

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

4
src/webui/www/private/css/dynamicTable.css
View file

@ -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 {

58
src/webui/www/private/css/palette.css
View file

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

79
src/webui/www/private/css/style.css
View file

@ -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 */

2
src/webui/www/private/css/vanillaSelectBox.css
View file

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

1
src/webui/www/private/index.html
View file

@ -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}">

4
src/webui/www/private/scripts/mocha-init.js
View file

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

10
src/webui/www/private/views/log.html
View file

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

8
src/webui/www/private/views/rss.html
View file

@ -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 {

2
src/webui/www/private/views/rssDownloader.html
View file

@ -64,7 +64,7 @@
}
#rssDownloaderDisabled {
color: red;
color: var(--color-text-red);
font-style: italic;
margin-bottom: 10px;
}

1
src/webui/www/webui.qrc
View file

@ -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>