mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2024-10-22 10:46:04 +03:00
Add dark theme for WebUI
Closes #19844. PR #19901. --------- Co-authored-by: d47081 <localhost> Co-authored-by: Chocobo1 <Chocobo1@users.noreply.github.com>
This commit is contained in:
d47081
GitHub
parent
cc563d9f78
commit
9d90141c29
24 changed files with 459 additions and 490 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url("palette.css");
|
||||
|
||||
/*
|
||||
|
||||
Core.css for Mocha UI
|
||||
|
|
@ -18,11 +20,6 @@ Required by:
|
|||
/* Layout
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
html,
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0; /* Required */
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -55,7 +47,6 @@ body {
|
|||
}
|
||||
|
||||
#desktopTitlebar h1.applicationTitle {
|
||||
color: #fff;
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
|
@ -65,7 +56,6 @@ body {
|
|||
}
|
||||
|
||||
#desktopTitlebar h2.tagline {
|
||||
color: #d4dce4;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
|
|
@ -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;
|
||||
|
|
@ -91,7 +79,6 @@ body {
|
|||
}
|
||||
|
||||
#topNav a {
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -165,7 +148,6 @@ body {
|
|||
}
|
||||
|
||||
#desktopNavbar li ul li .check {
|
||||
background: #555;
|
||||
font-size: 1px;
|
||||
height: 5px;
|
||||
left: 6px;
|
||||
|
|
@ -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 */
|
||||
|
|
@ -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%;*/
|
||||
|
|
@ -235,7 +212,6 @@ li.divider {
|
|||
}
|
||||
|
||||
#desktopFooter {
|
||||
background: #f2f2f2;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 11px;
|
||||
height: 24px;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -266,10 +241,6 @@ li.divider {
|
|||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.panelAlt {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.bottomPanel {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url("palette.css");
|
||||
|
||||
/*
|
||||
|
||||
Tabs.css for Mocha UI
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url("palette.css");
|
||||
|
||||
/*
|
||||
|
||||
Window.css for Mocha UI
|
||||
|
|
@ -19,12 +21,15 @@ Required by:
|
|||
---------------------------------------------------------------- */
|
||||
|
||||
.mocha {
|
||||
background-color: #e5e5e5;
|
||||
background-color: var(--color-background-default);
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mochaOverlay {
|
||||
background-color: var(--color-background-default);
|
||||
border-radius: 5px;
|
||||
height: auto !important; /* also fixes out of block issue */
|
||||
left: 0;
|
||||
position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */
|
||||
top: 0;
|
||||
|
|
@ -42,13 +47,13 @@ Required by:
|
|||
*/
|
||||
|
||||
.mochaTitlebar {
|
||||
background: url("../images/spacer.gif?from=fafafa&to=e5e5e5");
|
||||
background-color: var(--color-background-default);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mochaTitlebar h3 {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 15px;
|
||||
|
|
@ -56,14 +61,9 @@ Required by:
|
|||
padding: 5px 10px 4px 12px;
|
||||
}
|
||||
|
||||
.mocha.isFocused .mochaTitlebar h3 {
|
||||
color: #181818;
|
||||
}
|
||||
|
||||
.mochaToolbarWrapper {
|
||||
background: #f1f1f1;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
height: 29px;
|
||||
background-color: var(--color-background-popup);
|
||||
height: auto !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%; /* For IE */
|
||||
|
|
@ -71,22 +71,24 @@ Required by:
|
|||
|
||||
div.mochaToolbarWrapper.bottom {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.mochaToolbar {
|
||||
border-top: 1px solid #fff;
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
height: auto !important;
|
||||
padding-top: 4px;
|
||||
width: 100%; /* For IE */
|
||||
}
|
||||
|
||||
.mochaContentBorder {
|
||||
border-bottom: 1px solid #dadada;
|
||||
border-top: 1px solid #dadada;
|
||||
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-color: var(--color-background-popup);
|
||||
font-size: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -115,13 +117,12 @@ div.mochaToolbarWrapper.bottom {
|
|||
|
||||
/* Bottom right resize handle */
|
||||
.mocha .cornerSE {
|
||||
background: #fefefe; /* This is the color of the visible resize handle */
|
||||
background-color: var(--color-background-default);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.mochaCanvasHeader {
|
||||
background: transparent;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
|
@ -131,7 +132,6 @@ div.mochaToolbarWrapper.bottom {
|
|||
}
|
||||
|
||||
.mochaControls {
|
||||
background: transparent;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
|
|
@ -141,7 +141,6 @@ div.mochaToolbarWrapper.bottom {
|
|||
}
|
||||
|
||||
.mochaCanvasControls {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
|
|
@ -159,8 +158,8 @@ div.mochaToolbarWrapper.bottom {
|
|||
.mochaMinimizeButton,
|
||||
.mochaMaximizeButton,
|
||||
.mochaCloseButton {
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
background-color: var(--color-background-default);
|
||||
color: var(--color-text-default);
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 1px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url("palette.css");
|
||||
|
||||
/**************************************************************
|
||||
|
||||
Dynamic Table
|
||||
|
|
@ -5,27 +7,23 @@
|
|||
|
||||
**************************************************************/
|
||||
|
||||
.dynamicTable tbody tr {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.dynamicTable tbody tr:nth-child(even),
|
||||
.dynamicTable tbody tr.alt {
|
||||
background-color: #eee;
|
||||
background-color: var(--color-background-default);
|
||||
}
|
||||
|
||||
#transferList .dynamicTable td {
|
||||
padding: 0 2px;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
.dynamicTable tbody tr.selected {
|
||||
background-color: #354158;
|
||||
color: #fff;
|
||||
background-color: var(--color-background-blue);
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
.dynamicTable tbody tr:hover {
|
||||
background-color: #ee6600;
|
||||
color: #fff;
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
#transferList tr:hover {
|
||||
|
|
@ -50,22 +48,17 @@ tr.dynamicTableHeader {
|
|||
}
|
||||
|
||||
.dynamicTable th {
|
||||
background-color: #eee;
|
||||
border-right: 1px solid #ccc;
|
||||
border-right: 1px solid var(--color-border-default);
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
padding: 4px 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dynamicTable td {
|
||||
padding: 0px 4px;
|
||||
padding: 4px 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dynamicTable thead tr {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.dynamicTable th,
|
||||
.dynamicTable td {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -1,271 +0,0 @@
|
|||
.hidden-search {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
li[data-parent].closed{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
li[data-parent].open:not(.hidden-search){
|
||||
display:block !important;
|
||||
}
|
||||
|
||||
.vsb-menu{
|
||||
cursor:pointer;
|
||||
z-index:1000;
|
||||
display:block;
|
||||
visibility: hidden;
|
||||
position:absolute;/*Don't change*/
|
||||
border:1px solid #B2B2B2;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
border-radius:4px;
|
||||
font-size : 11px;
|
||||
}
|
||||
|
||||
.vsb-js-search-zone{
|
||||
position:absolute;/*Don't change*/
|
||||
z-index:1001;
|
||||
width: 80%;
|
||||
min-height:1.8em;
|
||||
padding: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.vsb-js-search-zone input{
|
||||
border: 1px solid grey;
|
||||
margin-left: 2px;
|
||||
width: 96%;
|
||||
border-radius: 4px;
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
.vsb-main{
|
||||
position: relative;/*Don't change*/
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.vsb-menu li:hover {
|
||||
background: linear-gradient(#f5f5f5, #e8e8e8);
|
||||
}
|
||||
|
||||
.vsb-menu ul{
|
||||
user-select:none;
|
||||
list-style:none;
|
||||
white-space: nowrap;
|
||||
margin:0px;
|
||||
margin-top:4px;
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
padding-bottom:3px;
|
||||
color: #333;
|
||||
cursor:pointer;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
li.disabled{
|
||||
cursor:not-allowed;
|
||||
opacity:0.3;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
li.overflow{
|
||||
cursor:not-allowed;
|
||||
opacity:0.3;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
li.short{
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.vsb-main button{
|
||||
min-width: 120px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
color: #333;
|
||||
background: white !important;
|
||||
border: 1px solid #999 !important;
|
||||
line-height:20px;
|
||||
font-size:14px;
|
||||
padding:6px 12px;
|
||||
}
|
||||
|
||||
.vsb-main button.disabled{
|
||||
cursor:not-allowed;
|
||||
opacity:0.65;
|
||||
}
|
||||
|
||||
.vsb-main .title {
|
||||
margin-right: 6px;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.vsb-main li:hover {
|
||||
background: linear-gradient(#f5f5f5, #e8e8e8);
|
||||
}
|
||||
|
||||
.vsb-main ul{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vsb-menu li {
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
min-height:1.4em;
|
||||
padding: 0.2em 2em 0.2em 1em;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option b {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
margin-left:10px;
|
||||
transform: translate(-18px);
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option.open span {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
margin-top:-2px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
transform: translate(-38px) rotate(45deg);
|
||||
border-bottom: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option.closed span {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
transform: translate(-38px) rotate(-45deg);
|
||||
border-bottom: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option i {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
float:left;
|
||||
font-weight:bold;
|
||||
margin-left:22px;
|
||||
margin-right:2px;
|
||||
height: 11px;
|
||||
width: 8px;
|
||||
border : 1px solid;
|
||||
border-radius : 3px;
|
||||
padding: 1px 3px 2px 3px;
|
||||
margin-top:0px;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option.checked i::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
color: #333;
|
||||
float:left;
|
||||
margin-left:0px;
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
height: 8px;
|
||||
width: 5px;
|
||||
border-bottom: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
}
|
||||
|
||||
.vsb-menu :not(.multi) li.active {
|
||||
margin-left:7px;
|
||||
}
|
||||
|
||||
.vsb-menu :not(.multi) li.active::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
margin-left:-18px;
|
||||
transform: rotate(45deg);
|
||||
height: 10px;
|
||||
width: 5px;
|
||||
border-bottom: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li {
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
min-height:1.4em;
|
||||
padding: 0.2em 2em 0.2em 26px;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li.grouped-option {
|
||||
font-size: 15px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.vsb-menu .multi li.grouped-option:hover {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
color:rgb(52, 31, 112);
|
||||
}
|
||||
|
||||
.vsb-menu .multi li:not(.grouped-option)::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
float:left;
|
||||
font-weight:bold;
|
||||
margin-left:-22px;
|
||||
margin-right:2px;
|
||||
border : 1px solid;
|
||||
border-radius : 3px;
|
||||
padding : 7px;
|
||||
margin-top:0px;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li:not(.grouped-option).active::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
color: #333;
|
||||
float:left;
|
||||
margin-left:-18px;
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
margin-top:1px;
|
||||
height: 8px;
|
||||
width: 5px;
|
||||
border-bottom: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
border-top: 4px dashed;
|
||||
border-top: 4px solid;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
li[data-parent]{
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
|
||||
49
src/webui/www/private/css/palette.css
Normal file
49
src/webui/www/private/css/palette.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* 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%);
|
||||
}
|
||||
|
||||
: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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import url("palette.css");
|
||||
|
||||
/* Reset */
|
||||
|
||||
a img,
|
||||
|
|
@ -6,6 +8,32 @@ a img,
|
|||
border: none;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="button"],
|
||||
button,
|
||||
select {
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 3px;
|
||||
color: var(--color-text-default);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
accent-color: var(--color-accent-blue);
|
||||
}
|
||||
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
/*table { border-collapse: collapse; border-spacing: 0; }*/
|
||||
|
||||
:focus {
|
||||
|
|
@ -15,7 +43,7 @@ a img,
|
|||
/* Structure */
|
||||
|
||||
body {
|
||||
color: #555;
|
||||
color: var(--color-text-default);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -36,7 +64,6 @@ body {
|
|||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
|
|
@ -44,13 +71,13 @@ h4 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #555;
|
||||
color: var(--color-text-default);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#mochaPage h3 {
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin: 0 0 8px;
|
||||
|
|
@ -59,7 +86,7 @@ h2 {
|
|||
|
||||
#error_div,
|
||||
#rename_error {
|
||||
color: #f00;
|
||||
color: var(--color-text-red);
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -70,7 +97,7 @@ h4 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #e60;
|
||||
color: var(--color-text-orange);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -99,12 +126,19 @@ 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: 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 +151,9 @@ pre {
|
|||
/* Dividers */
|
||||
|
||||
hr {
|
||||
background-color: #ddd;
|
||||
background-color: var(--color-background-default);
|
||||
border: 0px;
|
||||
color: #ccc;
|
||||
color: var(--color-text-default);
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -147,22 +181,22 @@ hr {
|
|||
|
||||
#Filters ul img {
|
||||
height: 16px;
|
||||
padding: 2px 4px;
|
||||
padding: 0 4px;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.selectedFilter {
|
||||
background-color: #415a8d;
|
||||
color: #ffffff;
|
||||
background-color: var(--color-background-blue) !important;
|
||||
color: var(--color-text-white) !important;
|
||||
}
|
||||
|
||||
.selectedFilter a {
|
||||
color: #ffffff;
|
||||
color: var(--color-text-white) !important;
|
||||
}
|
||||
|
||||
#properties {
|
||||
background-color: #e5e5e5;
|
||||
background-color: var(--color-background-default);
|
||||
}
|
||||
|
||||
a.propButton {
|
||||
|
|
@ -184,15 +218,15 @@ a.propButton img {
|
|||
/* context menu specific */
|
||||
|
||||
.contextMenu {
|
||||
background: #eee;
|
||||
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 var(--color-border-default);
|
||||
}
|
||||
|
||||
.contextMenu li {
|
||||
|
|
@ -201,7 +235,7 @@ a.propButton img {
|
|||
}
|
||||
|
||||
.contextMenu li a {
|
||||
color: #000;
|
||||
color: var(--color-text-default);
|
||||
display: block;
|
||||
font-family: tahoma, arial, sans-serif;
|
||||
font-size: 12px;
|
||||
|
|
@ -211,21 +245,21 @@ a.propButton img {
|
|||
}
|
||||
|
||||
.contextMenu li a:hover {
|
||||
background-color: #ddd;
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
.contextMenu li a.disabled {
|
||||
color: #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.contextMenu li a.disabled:hover {
|
||||
background-color: #eee;
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.contextMenu li ul {
|
||||
background: #eee;
|
||||
border: 1px solid #999;
|
||||
background: var(--color-background-default);
|
||||
border: 1px solid var(--color-border-default);
|
||||
left: -999em;
|
||||
list-style-type: none;
|
||||
margin: -29px 0 0 100%;
|
||||
|
|
@ -259,6 +293,7 @@ a.propButton img {
|
|||
.contextMenu li img {
|
||||
height: 16px;
|
||||
margin-bottom: -4px;
|
||||
margin-right: 0.5em; /* return missed padding */
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -328,7 +363,7 @@ a.propButton img {
|
|||
/* Mocha Customization */
|
||||
|
||||
#mochaToolbar {
|
||||
height: 29px;
|
||||
height: auto !important;
|
||||
margin-top: 5px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
|
@ -354,17 +389,20 @@ a.propButton img {
|
|||
}
|
||||
|
||||
#torrentsFilterToolbar {
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#torrentsFilterInput {
|
||||
background-color: var(--color-background-default);
|
||||
background-image: url("../images/edit-find.svg");
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em;
|
||||
padding-left: 2em;
|
||||
width: 160px;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 3px;
|
||||
min-width: 160px;
|
||||
padding: 4px 4px 4px 25px;
|
||||
}
|
||||
|
||||
#torrentFilesFilterToolbar {
|
||||
|
|
@ -403,7 +441,7 @@ label.partial {
|
|||
}
|
||||
|
||||
fieldset.settings {
|
||||
border: solid 1px black;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 8px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
}
|
||||
|
|
@ -455,19 +493,21 @@ ul.filterList {
|
|||
}
|
||||
|
||||
ul.filterList a {
|
||||
color: inherit;
|
||||
color: var(--color-text-default);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 4px 6px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.filterList li:hover {
|
||||
background-color: #e60;
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
ul.filterList li:hover a {
|
||||
color: white;
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
td.generalLabel {
|
||||
|
|
@ -477,15 +517,6 @@ td.generalLabel {
|
|||
width: 1px;
|
||||
}
|
||||
|
||||
#torrentFilesTableDiv {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#torrentTrackersTableDiv,
|
||||
#webseedsTable {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.filesTableCollapseIcon {
|
||||
cursor: pointer;
|
||||
height: 15px;
|
||||
|
|
@ -532,7 +563,6 @@ td.generalLabel {
|
|||
}
|
||||
|
||||
.select-watched-folder-editable {
|
||||
background-color: white;
|
||||
border: solid grey 1px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
|
|
@ -623,27 +653,18 @@ td.statusBarSeparator {
|
|||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
color: var(--color-text-red);
|
||||
}
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
color: var(--color-text-green);
|
||||
}
|
||||
|
||||
.searchPluginsTableRow {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#torrentFilesTableDiv .dynamicTable tr.nonAlt {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#torrentFilesTableDiv .dynamicTable tr.nonAlt.selected {
|
||||
background-color: #354158;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#torrentFilesTableDiv .dynamicTable tr.nonAlt:hover {
|
||||
background-color: #ee6600;
|
||||
color: #fff;
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
|
|
|||
231
src/webui/www/private/css/vanillaSelectBox.css
Normal file
231
src/webui/www/private/css/vanillaSelectBox.css
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
@import url("palette.css");
|
||||
|
||||
.hidden-search {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
li[data-parent].closed {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
li[data-parent].open:not(.hidden-search) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.vsb-menu {
|
||||
background-clip: padding-box;
|
||||
background-color: var(--color-background-default);
|
||||
border: 1px solid var(--color-border-default);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
z-index: 1000; /*Don't change*/
|
||||
}
|
||||
|
||||
.vsb-js-search-zone {
|
||||
min-height: 1.8em;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
z-index: 1001; /*Don't change*/
|
||||
}
|
||||
|
||||
.vsb-js-search-zone input {
|
||||
border-radius: 4px;
|
||||
height: 25px !important;
|
||||
margin-left: 2px;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.vsb-main {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
vertical-align: top; /*Don't change*/
|
||||
}
|
||||
|
||||
.vsb-menu ul {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
background-color: #999;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
li.overflow {
|
||||
background-color: #999;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
li.short {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.vsb-main button {
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 4px;
|
||||
min-width: 120px;
|
||||
padding: 6px 12px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vsb-main button.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.vsb-main .title {
|
||||
margin-right: 6px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vsb-main ul {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vsb-menu li {
|
||||
font-size: 12px;
|
||||
padding: 4px 26px;
|
||||
}
|
||||
|
||||
.vsb-menu li:hover {
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option b {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
transform: translate(-18px);
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option.open span {
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 8px;
|
||||
margin-top: -2px;
|
||||
transform: translate(-38px) rotate(45deg);
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option.closed span {
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 8px;
|
||||
transform: translate(-38px) rotate(-45deg);
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option i {
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
height: 11px;
|
||||
margin-left: 22px;
|
||||
margin-right: 2px;
|
||||
margin-top: 0px;
|
||||
padding: 1px 3px 2px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.vsb-menu li.grouped-option.checked i::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: inherit;
|
||||
height: 8px;
|
||||
margin-left: 0px;
|
||||
transform: rotate(45deg);
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.vsb-menu :not(.multi) li.active {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.vsb-menu :not(.multi) li.active::before {
|
||||
border-bottom: 3px solid var(--color-border-blue);
|
||||
border-radius: 2px;
|
||||
border-right: 3px solid var(--color-border-blue);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 10px;
|
||||
margin-left: -18px;
|
||||
transform: rotate(45deg);
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li.grouped-option {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li.grouped-option:hover {
|
||||
color: rgb(52 31 112);
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li:not(.grouped-option)::before {
|
||||
background: var(--color-background-popup);
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
margin-left: -22px;
|
||||
margin-right: 2px;
|
||||
margin-top: 0px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.vsb-menu .multi li:not(.grouped-option).active::after {
|
||||
border-bottom: 3px solid var(--color-border-blue);
|
||||
border-right: 3px solid var(--color-border-blue);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: inherit;
|
||||
height: 8px;
|
||||
margin-left: -18px;
|
||||
margin-top: 1px;
|
||||
transform: rotate(45deg);
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px dashed;
|
||||
border-top: 4px solid;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
li[data-parent] {
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 B |
Binary file not shown.
|
Before Width: | Height: | Size: 57 B |
Binary file not shown.
|
Before Width: | Height: | Size: 91 B |
Binary file not shown.
|
Before Width: | Height: | Size: 229 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
|
|
@ -1212,7 +1212,7 @@ window.addEvent('load', function() {
|
|||
loadMethod: 'xhr',
|
||||
contentURL: 'views/log.html',
|
||||
require: {
|
||||
css: ['css/lib/vanillaSelectBox.css'],
|
||||
css: ['css/vanillaSelectBox.css'],
|
||||
js: ['scripts/lib/vanillaSelectBox.js'],
|
||||
},
|
||||
tabsURL: 'views/logTabs.html',
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@ window.qBittorrent.PiecesBar = (() => {
|
|||
'id': 'piecesbar_' + (piecesBarUniqueId++),
|
||||
'width': 0,
|
||||
'height': 0,
|
||||
'downloadingColor': 'green',
|
||||
'haveColor': 'blue',
|
||||
'downloadingColor': 'hsl(110deg 94% 27%)', // @TODO palette vars not supported for this value, apply average
|
||||
'haveColor': 'hsl(210deg 55% 55%)', // @TODO palette vars not supported for this value, apply average
|
||||
'borderSize': 1,
|
||||
'borderColor': '#999'
|
||||
'borderColor': 'var(--color-border-default)'
|
||||
};
|
||||
|
||||
if (parameters && ($type(parameters) === 'object'))
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@ window.qBittorrent.ProgressBar = (function() {
|
|||
'value': $pick(value, 0),
|
||||
'width': 0,
|
||||
'height': 0,
|
||||
'darkbg': '#006',
|
||||
'darkfg': '#fff',
|
||||
'lightbg': '#fff',
|
||||
'lightfg': '#000'
|
||||
'darkbg': 'var(--color-background-blue)',
|
||||
'darkfg': 'var(--color-text-white)',
|
||||
'lightbg': 'var(--color-background-default)',
|
||||
'lightfg': 'var(--color-text-default)'
|
||||
};
|
||||
if (parameters && $type(parameters) == 'object')
|
||||
$extend(vals, parameters);
|
||||
|
|
@ -60,7 +60,7 @@ window.qBittorrent.ProgressBar = (function() {
|
|||
'id': vals.id,
|
||||
'class': 'progressbar_wrapper',
|
||||
'styles': {
|
||||
'border': '1px solid #000',
|
||||
'border': '1px solid var(--color-border-default)',
|
||||
'width': vals.width,
|
||||
'height': vals.height,
|
||||
'position': 'relative',
|
||||
|
|
|
|||
|
|
@ -9,15 +9,13 @@
|
|||
|
||||
#logFilterBar>label {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
#logFilterBar>button {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
padding: 0 .5em;
|
||||
padding: 4px 15px;
|
||||
margin-left: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#logView {
|
||||
|
|
@ -40,9 +38,11 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-size: 1.5em;
|
||||
padding: 1px 5px 1px 2em;
|
||||
margin-left: 20px;
|
||||
padding: 4px 5px 4px 2em;
|
||||
margin-left: .3em;
|
||||
width: 200px;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#logFilterSummary {
|
||||
|
|
@ -56,24 +56,24 @@
|
|||
}
|
||||
|
||||
.logNormal {
|
||||
color: #80766e;
|
||||
color: var(--color-text-default);
|
||||
}
|
||||
|
||||
.logInfo {
|
||||
color: #1781b5;
|
||||
color: var(--color-text-blue);
|
||||
}
|
||||
|
||||
.logWarning {
|
||||
color: #f97d1c;
|
||||
color: var(--color-text-orange);
|
||||
}
|
||||
|
||||
.logCritical,
|
||||
.peerBlocked {
|
||||
color: #ee3f4d;
|
||||
color: var(--color-text-red);
|
||||
}
|
||||
|
||||
.vsb-main>button {
|
||||
padding: 0 12px !important;
|
||||
padding: 4px 12px !important;
|
||||
}
|
||||
|
||||
.contextMenu>li>a>img {
|
||||
|
|
@ -209,6 +209,7 @@
|
|||
clearAll: 'QBT_TR(Clear All)QBT_TR[CONTEXT=ExecutionLogWidget]',
|
||||
},
|
||||
placeHolder: "QBT_TR(Choose a log level...)QBT_TR[CONTEXT=ExecutionLogWidget]",
|
||||
keepInlineStyles: false
|
||||
});
|
||||
|
||||
const logTableContextMenu = new window.qBittorrent.ContextMenu.ContextMenu({
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<style>
|
||||
#searchPattern {
|
||||
width: 300px;
|
||||
line-height: 2em;
|
||||
padding: 1px 5px 1px 2em;
|
||||
background-image: url("images/edit-find.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em;
|
||||
background-position: left;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 3px;
|
||||
padding: 4px 2px 4px 25px;
|
||||
}
|
||||
|
||||
#categorySelect {
|
||||
|
|
@ -17,10 +18,6 @@
|
|||
width: 150px;
|
||||
}
|
||||
|
||||
#startSearchButton {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
#searchResultsNoPlugins {
|
||||
height: calc(100% - 110px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
body {
|
||||
color: #555;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>qBittorrent QBT_TR(Web UI)QBT_TR[CONTEXT=OptionsDialog]</title>
|
||||
<link rel="icon" type="image/png" href="images/qbittorrent32.png" />
|
||||
<link rel="icon" type="image/svg+xml" href="images/qbittorrent-tray.svg" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<RCC>
|
||||
<qresource prefix="/www/translations">
|
||||
<file>webui_az@latin.qm</file>
|
||||
<file>webui_ar.qm</file>
|
||||
<file>webui_az@latin.qm</file>
|
||||
<file>webui_be.qm</file>
|
||||
<file>webui_bg.qm</file>
|
||||
<file>webui_ca.qm</file>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@
|
|||
<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/lib/vanillaSelectBox.css</file>
|
||||
<file>private/css/vanillaSelectBox.css</file>
|
||||
<file>private/css/Window.css</file>
|
||||
<file>private/download.html</file>
|
||||
<file>private/downloadlimit.html</file>
|
||||
|
|
@ -22,17 +23,13 @@
|
|||
<file>private/images/application-rss.svg</file>
|
||||
<file>private/images/application-url.svg</file>
|
||||
<file>private/images/arrow-right.gif</file>
|
||||
<file>private/images/bg-dropdown.gif</file>
|
||||
<file>private/images/bg-handle-horizontal.gif</file>
|
||||
<file>private/images/bg-header.gif</file>
|
||||
<file>private/images/bg-panel-header.gif</file>
|
||||
<file>private/images/checked-completed.svg</file>
|
||||
<file>private/images/collapse.svg</file>
|
||||
<file>private/images/configure.svg</file>
|
||||
<file>private/images/connected.svg</file>
|
||||
<file>private/images/dialog-warning.svg</file>
|
||||
<file>private/images/disconnected.svg</file>
|
||||
<file>private/images/directory.svg</file>
|
||||
<file>private/images/disconnected.svg</file>
|
||||
<file>private/images/download.svg</file>
|
||||
<file>private/images/downloading.svg</file>
|
||||
<file>private/images/edit-clear.svg</file>
|
||||
|
|
@ -351,7 +348,6 @@
|
|||
<file>private/images/stalledUP.svg</file>
|
||||
<file>private/images/stopped.svg</file>
|
||||
<file>private/images/system-log-out.svg</file>
|
||||
<file>private/images/tabs.gif</file>
|
||||
<file>private/images/tags.svg</file>
|
||||
<file>private/images/task-complete.svg</file>
|
||||
<file>private/images/task-reject.svg</file>
|
||||
|
|
@ -387,6 +383,7 @@
|
|||
<file>private/scripts/lib/mocha.min.js</file>
|
||||
<file>private/scripts/lib/MooTools-Core-1.6.0-compat-compressed.js</file>
|
||||
<file>private/scripts/lib/MooTools-More-1.6.0-compat-compressed.js</file>
|
||||
<file>private/scripts/lib/vanillaSelectBox.js</file>
|
||||
<file>private/scripts/misc.js</file>
|
||||
<file>private/scripts/mocha-init.js</file>
|
||||
<file>private/scripts/piecesbar.js</file>
|
||||
|
|
@ -399,7 +396,6 @@
|
|||
<file>private/scripts/prop-webseeds.js</file>
|
||||
<file>private/scripts/rename-files.js</file>
|
||||
<file>private/scripts/speedslider.js</file>
|
||||
<file>private/scripts/lib/vanillaSelectBox.js</file>
|
||||
<file>private/setlocation.html</file>
|
||||
<file>private/shareratio.html</file>
|
||||
<file>private/upload.html</file>
|
||||
|
|
|
|||
Loading…
Reference in a new issue