mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2024-10-22 10:46:04 +03:00
WebUI: CSS/styling improvements
WebUI: CSS/styling improvements
This commit is contained in:
commit
cebaedf485
13 changed files with 91 additions and 86 deletions
|
@ -1,5 +1,3 @@
|
||||||
@import url("palette.css");
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
Core.css for Mocha UI
|
Core.css for Mocha UI
|
||||||
|
@ -99,6 +97,7 @@ body {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#desktopNavbar > ul > li {
|
#desktopNavbar > ul > li {
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import url("palette.css");
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
Tabs.css for Mocha UI
|
Tabs.css for Mocha UI
|
||||||
|
@ -21,6 +19,7 @@ Required by:
|
||||||
|
|
||||||
.toolbarTabs {
|
.toolbarTabs {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-menu {
|
.tab-menu {
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import url("palette.css");
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
Window.css for Mocha UI
|
Window.css for Mocha UI
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import url("palette.css");
|
|
||||||
|
|
||||||
/**************************************************************
|
/**************************************************************
|
||||||
|
|
||||||
Dynamic Table
|
Dynamic Table
|
||||||
|
@ -11,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#transferList .dynamicTable td {
|
#transferList .dynamicTable td {
|
||||||
padding: 4px 2px;
|
padding: 3px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dynamicTableDiv table.dynamicTable tbody tr.selected {
|
.dynamicTableDiv table.dynamicTable tbody tr.selected {
|
||||||
|
|
|
@ -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%);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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 */
|
/* Reset */
|
||||||
|
|
||||||
|
@ -514,6 +567,7 @@ div.formRow {
|
||||||
padding: 4px 0 4px 6px;
|
padding: 4px 0 4px 6px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -704,9 +758,28 @@ td.statusBarSeparator {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Statistics window */
|
/* Statistics window */
|
||||||
.statisticsValue {
|
#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;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& h3 {
|
||||||
|
color: var(--color-text-default);
|
||||||
|
margin-bottom: 1px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Search tab */
|
/* Search tab */
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import url("palette.css");
|
|
||||||
|
|
||||||
.hidden-search {
|
.hidden-search {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,6 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="images/qbittorrent-tray.svg" sizes="any">
|
<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/dynamicTable.css?v=${CACHEID}">
|
||||||
<link rel="stylesheet" type="text/css" href="css/style.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/Core.css?v=${CACHEID}">
|
||||||
<link rel="stylesheet" type="text/css" href="css/Layout.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}">
|
<link rel="stylesheet" type="text/css" href="css/Window.css?v=${CACHEID}">
|
||||||
|
|
|
@ -448,8 +448,8 @@ const initializeWindows = function() {
|
||||||
contentURL: new URI("views/statistics.html").toString(),
|
contentURL: new URI("views/statistics.html").toString(),
|
||||||
maximizable: false,
|
maximizable: false,
|
||||||
padding: 10,
|
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) => {
|
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
|
||||||
saveWindowSize(id);
|
saveWindowSize(id);
|
||||||
})
|
})
|
||||||
|
|
|
@ -55,20 +55,20 @@
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logNormal {
|
.logTableRowlogNormal {
|
||||||
color: var(--color-text-default);
|
color: var(--color-text-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logInfo {
|
.logTableRowlogInfo {
|
||||||
color: var(--color-text-blue);
|
color: var(--color-text-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logWarning {
|
.logTableRowlogWarning {
|
||||||
color: var(--color-text-orange);
|
color: var(--color-text-orange);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logCritical,
|
.logTableRowlogCritical,
|
||||||
.peerBlocked {
|
.logTableRowpeerBlocked {
|
||||||
color: var(--color-text-red);
|
color: var(--color-text-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#rssFetchingDisabled {
|
#rssFetchingDisabled {
|
||||||
color: red;
|
color: var(--color-text-red);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
@ -53,13 +53,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#rssTorrentDetailsName {
|
#rssTorrentDetailsName {
|
||||||
background-color: #678db2;
|
background-color: var(--color-background-blue);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: white;
|
color: var(--color-text-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
#rssTorrentDetailsDate {
|
#rssTorrentDetailsDate {
|
||||||
background-color: #EFEFEF;
|
background-color: var(--color-background-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
#rssDetailsView {
|
#rssDetailsView {
|
||||||
|
|
|
@ -64,7 +64,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#rssDownloaderDisabled {
|
#rssDownloaderDisabled {
|
||||||
color: red;
|
color: var(--color-text-red);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
<file>private/css/dynamicTable.css</file>
|
<file>private/css/dynamicTable.css</file>
|
||||||
<file>private/css/Layout.css</file>
|
<file>private/css/Layout.css</file>
|
||||||
<file>private/css/noscript.css</file>
|
<file>private/css/noscript.css</file>
|
||||||
<file>private/css/palette.css</file>
|
|
||||||
<file>private/css/style.css</file>
|
<file>private/css/style.css</file>
|
||||||
<file>private/css/Tabs.css</file>
|
<file>private/css/Tabs.css</file>
|
||||||
<file>private/css/vanillaSelectBox.css</file>
|
<file>private/css/vanillaSelectBox.css</file>
|
||||||
|
|
Loading…
Reference in a new issue