mirror of
https://github.com/qbittorrent/qBittorrent
synced 2025-08-20 13:23:34 -07:00
WebUI: Replace GIFs with SVG
Unused GIFs have been removed along with their CSS; some GIFs have been replaced with CSS, and all SVGs were drawn myself. PR #23074.
This commit is contained in:
tehcneko
GitHub
parent
f743ae2d08
commit
03fb036ae3
22 changed files with 66 additions and 123 deletions
|
|
@ -27,41 +27,6 @@ Required by:
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#desktopTitlebarWrapper {
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#desktopTitlebar {
|
||||
background: url("../images/logo.gif") no-repeat;
|
||||
background-position: left 0;
|
||||
height: 32px;
|
||||
padding: 7px 8px 6px;
|
||||
}
|
||||
|
||||
#desktopTitlebar h1.applicationTitle {
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 25px;
|
||||
margin: 0;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
|
||||
#desktopTitlebar h2.tagline {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 7px 0 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#desktopTitlebar h2.tagline .taglineEm {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#topNav {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
|
|
@ -117,11 +82,17 @@ Required by:
|
|||
filter: var(--color-icon-hover);
|
||||
}
|
||||
|
||||
#desktopNavbar ul li a.arrow-right,
|
||||
#desktopNavbar ul li a:hover.arrow-right {
|
||||
background-image: url("../images/arrow-right.gif");
|
||||
background-position: right 7px;
|
||||
background-repeat: no-repeat;
|
||||
#desktopNavbar ul li a.arrow-right::after,
|
||||
#desktopNavbar ul li a:hover.arrow-right::after {
|
||||
border: solid currentcolor;
|
||||
border-width: 0 2px 2px 0;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
}
|
||||
|
||||
#desktopNavbar li ul {
|
||||
|
|
@ -298,17 +269,15 @@ li.divider {
|
|||
}
|
||||
|
||||
.horizontalHandle .handleIcon {
|
||||
background: url("../images/handle-icon-horizontal.gif") center center
|
||||
background: url("../images/handle-icon-horizontal.svg") center center
|
||||
no-repeat;
|
||||
font-size: 1px;
|
||||
height: 6px;
|
||||
line-height: 1px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnHandle {
|
||||
background: url("../images/handle-icon.gif") center center no-repeat;
|
||||
background: url("../images/handle-icon.svg") center center no-repeat;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
|
|
@ -331,7 +300,7 @@ li.divider {
|
|||
|
||||
/* Have to specify div here for IE6's sake */
|
||||
div.toolbox.divider {
|
||||
background: url("../images/toolbox-divider.gif") repeat-y;
|
||||
background: url("../images/toolbox-divider.svg") repeat-y;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -363,15 +332,8 @@ div.toolbox.divider {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#spinnerWrapper {
|
||||
background: url("../images/spinner-placeholder.gif") no-repeat;
|
||||
height: 16px;
|
||||
margin: 4px 5px 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
background: url("../images/spinner.gif") no-repeat;
|
||||
background: url("../images/spinner.svg") no-repeat;
|
||||
display: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ div.mochaToolbarWrapper.bottom {
|
|||
}
|
||||
|
||||
.mochaSpinner {
|
||||
background: url("../images/spinner.gif") no-repeat;
|
||||
background: url("../images/spinner.svg") no-repeat;
|
||||
bottom: 7px;
|
||||
display: none;
|
||||
height: 16px;
|
||||
|
|
@ -332,32 +332,6 @@ div.mochaToolbarWrapper.bottom {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* Example Window Themes */
|
||||
|
||||
#about_contentWrapper {
|
||||
background: #e5e5e5 url("../images/logo2.gif") 3px 3px no-repeat;
|
||||
}
|
||||
|
||||
#builder_contentWrapper {
|
||||
background: #f5f5f7;
|
||||
}
|
||||
|
||||
#json01 .mochaTitlebar {
|
||||
background: #6dd2db;
|
||||
}
|
||||
|
||||
#json02 .mochaTitlebar {
|
||||
background: #6db6db;
|
||||
}
|
||||
|
||||
#json03 .mochaTitlebar {
|
||||
background: #6d92db;
|
||||
}
|
||||
|
||||
.jsonExample .mochaTitlebar h3 {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
/* This does not work in IE6. */
|
||||
.isFocused.jsonExample .mochaTitlebar h3 {
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -365,6 +365,7 @@ a.propButton img {
|
|||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 5px 20px 5px 5px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -393,10 +394,16 @@ a.propButton img {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.contextMenu li:not(.disabled) .arrow-right {
|
||||
background-image: url("../images/arrow-right.gif");
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
.contextMenu li:not(.disabled) .arrow-right::after {
|
||||
border: solid currentcolor;
|
||||
border-width: 0 2px 2px 0;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
}
|
||||
|
||||
.contextMenu li:not(.disabled):hover > ul {
|
||||
|
|
@ -452,7 +459,7 @@ a.propButton img {
|
|||
}
|
||||
|
||||
#mochaToolbar .divider {
|
||||
background-image: url("../images/toolbox-divider.gif");
|
||||
background-image: url("../images/toolbox-divider.svg");
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 14px;
|
||||
|
|
@ -542,27 +549,6 @@ a.propButton img {
|
|||
width: 190px;
|
||||
}
|
||||
|
||||
/* Tri-state checkbox */
|
||||
|
||||
label.tristate {
|
||||
background: url("../images/3-state-checkbox.gif") 0 0 no-repeat;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 13px;
|
||||
margin: 0.15em 8px 5px 0;
|
||||
overflow: hidden;
|
||||
text-indent: -999em;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
label.checked {
|
||||
background-position: 0 -13px;
|
||||
}
|
||||
|
||||
label.partial {
|
||||
background-position: 0 -26px;
|
||||
}
|
||||
|
||||
fieldset.settings {
|
||||
border: 1px solid var(--color-border-default);
|
||||
padding: 4px 4px 6px 6px;
|
||||
|
|
@ -795,7 +781,7 @@ td.noWrap {
|
|||
}
|
||||
|
||||
td.statusBarSeparator {
|
||||
background-image: url("../images/toolbox-divider.gif");
|
||||
background-image: url("../images/toolbox-divider.svg");
|
||||
background-position: center 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2px 18px;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 322 B |
Binary file not shown.
|
Before Width: | Height: | Size: 66 B |
1
src/webui/www/private/images/L.svg
Normal file
1
src/webui/www/private/images/L.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path stroke="gray" stroke-dasharray="1,1" d="M7.5 0v9M7 8.5h11" /></svg>
|
||||
|
After Width: | Height: | Size: 136 B |
Binary file not shown.
|
Before Width: | Height: | Size: 54 B |
Binary file not shown.
|
Before Width: | Height: | Size: 46 B |
1
src/webui/www/private/images/handle-icon-horizontal.svg
Normal file
1
src/webui/www/private/images/handle-icon-horizontal.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg height="8" width="20" xmlns="http://www.w3.org/2000/svg"><g fill="#999"><circle cx="6" cy="4" r="1"/><circle cx="10" cy="4" r="1"/><circle cx="14" cy="4" r="1"/></g></svg>
|
||||
|
After Width: | Height: | Size: 176 B |
Binary file not shown.
|
Before Width: | Height: | Size: 46 B |
1
src/webui/www/private/images/handle-icon.svg
Normal file
1
src/webui/www/private/images/handle-icon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg height="20" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="#999"><circle cx="4" cy="6" r="1"/><circle cx="4" cy="10" r="1"/><circle cx="4" cy="14" r="1"/></g></svg>
|
||||
|
After Width: | Height: | Size: 176 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 B |
Binary file not shown.
|
Before Width: | Height: | Size: 80 B |
Binary file not shown.
|
Before Width: | Height: | Size: 793 B |
26
src/webui/www/private/images/spinner.svg
Normal file
26
src/webui/www/private/images/spinner.svg
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M8 4V1" opacity="0">
|
||||
<animate attributeName="opacity" begin="0s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M10.828 5.172 12.95 3.05" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.1s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M12 8h3" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.2s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="m10.828 10.828 2.122 2.122" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.3s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M8 12v3" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.4s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M5.172 10.828 3.05 12.95" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.5s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M4 8H1" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.6s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
<path stroke="#999" stroke-linecap="round" stroke-width="2" d="M5.172 5.172 3.05 3.05" opacity="0">
|
||||
<animate attributeName="opacity" begin="0.7s" dur="0.8s" repeatCount="indefinite" values="1;0" />
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 B |
1
src/webui/www/private/images/toolbox-divider.svg
Normal file
1
src/webui/www/private/images/toolbox-divider.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg height="20" width="2" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h1v20h-1z" fill="#fff"/><path d="m1 0h1v20h-1z" fill="#c4c4c4"/></svg>
|
||||
|
After Width: | Height: | Size: 145 B |
|
|
@ -52,9 +52,6 @@
|
|||
</noscript>
|
||||
<div id="desktop">
|
||||
<div id="desktopHeader">
|
||||
<!--<div id="desktopTitlebar">
|
||||
<h1 class="applicationTitle">qBittorrent Web User Interface <span class="version">version 2.0.0</span></h1>
|
||||
</div>-->
|
||||
<div id="desktopNavbar">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -2489,7 +2489,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
|
||||
if (td.firstElementChild === null) {
|
||||
const treeImg = document.createElement("img");
|
||||
treeImg.src = "images/L.gif";
|
||||
treeImg.src = "images/L.svg";
|
||||
treeImg.style.marginBottom = "-2px";
|
||||
td.append(treeImg);
|
||||
}
|
||||
|
|
@ -2974,7 +2974,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
|
||||
if (td.firstElementChild === null) {
|
||||
const treeImg = document.createElement("img");
|
||||
treeImg.src = "images/L.gif";
|
||||
treeImg.src = "images/L.svg";
|
||||
treeImg.style.marginBottom = "-2px";
|
||||
td.append(treeImg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,11 +20,9 @@
|
|||
<file>private/editfeedurl.html</file>
|
||||
<file>private/edittracker.html</file>
|
||||
<file>private/editwebseed.html</file>
|
||||
<file>private/images/3-state-checkbox.gif</file>
|
||||
<file>private/images/application-exit.svg</file>
|
||||
<file>private/images/application-rss.svg</file>
|
||||
<file>private/images/application-url.svg</file>
|
||||
<file>private/images/arrow-right.gif</file>
|
||||
<file>private/images/browser-cookies.svg</file>
|
||||
<file>private/images/checked-completed.svg</file>
|
||||
<file>private/images/collapse.svg</file>
|
||||
|
|
@ -322,18 +320,16 @@
|
|||
<file>private/images/go-down.svg</file>
|
||||
<file>private/images/go-top.svg</file>
|
||||
<file>private/images/go-up.svg</file>
|
||||
<file>private/images/handle-icon-horizontal.gif</file>
|
||||
<file>private/images/handle-icon.gif</file>
|
||||
<file>private/images/handle-icon-horizontal.svg</file>
|
||||
<file>private/images/handle-icon.svg</file>
|
||||
<file>private/images/hash.svg</file>
|
||||
<file>private/images/help-about.svg</file>
|
||||
<file>private/images/help-contents.svg</file>
|
||||
<file>private/images/insert-link.svg</file>
|
||||
<file>private/images/ip-blocked.svg</file>
|
||||
<file>private/images/L.gif</file>
|
||||
<file>private/images/L.svg</file>
|
||||
<file>private/images/list-add.svg</file>
|
||||
<file>private/images/list-remove.svg</file>
|
||||
<file>private/images/logo.gif</file>
|
||||
<file>private/images/logo2.gif</file>
|
||||
<file>private/images/mail-inbox.svg</file>
|
||||
<file>private/images/mascot.png</file>
|
||||
<file>private/images/name.svg</file>
|
||||
|
|
@ -357,9 +353,7 @@
|
|||
<file>private/images/set-location.svg</file>
|
||||
<file>private/images/slow.svg</file>
|
||||
<file>private/images/slow_off.svg</file>
|
||||
<file>private/images/spacer.gif</file>
|
||||
<file>private/images/spinner-placeholder.gif</file>
|
||||
<file>private/images/spinner.gif</file>
|
||||
<file>private/images/spinner.svg</file>
|
||||
<file>private/images/stalledDL.svg</file>
|
||||
<file>private/images/stalledUP.svg</file>
|
||||
<file>private/images/stopped.svg</file>
|
||||
|
|
@ -367,7 +361,7 @@
|
|||
<file>private/images/tags.svg</file>
|
||||
<file>private/images/task-complete.svg</file>
|
||||
<file>private/images/task-reject.svg</file>
|
||||
<file>private/images/toolbox-divider.gif</file>
|
||||
<file>private/images/toolbox-divider.svg</file>
|
||||
<file>private/images/torrent-creator.svg</file>
|
||||
<file>private/images/torrent-magnet.svg</file>
|
||||
<file>private/images/torrent-start-forced.svg</file>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue