github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-20 13:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WebUI: Replace GIFs with SVG

Browse source
This commit is contained in:
tehcneko 2025-08-08 12:41:23 +01:00
commit 566d79d663
20 changed files with 125 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 {
@ -296,26 +267,51 @@ li.divider {
}
.horizontalHandle .handleIcon {
background: url("../images/handle-icon-horizontal.gif") center center
no-repeat;
font-size: 1px;
height: 6px;
line-height: 1px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 20px;
}
.horizontalHandle .handleIcon::before {
background: currentcolor;
box-shadow:
4px 0 0 currentcolor,
8px 0 0 currentcolor;
content: "";
height: 2px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
}
.columnHandle {
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;
min-height: 10px;
overflow: hidden;
position: relative;
width: 8px;
}
.columnHandle::before {
background: currentcolor;
box-shadow:
0 4px 0 currentcolor,
0 8px 0 currentcolor;
content: "";
height: 2px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
}
/* Toolboxes */
.toolbox {
@ -329,7 +325,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;
}
@ -361,15 +357,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;

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

@ -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;
@ -322,32 +322,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;

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

@ -355,6 +355,7 @@ a.propButton img {
display: flex;
gap: 2px;
padding: 5px 20px 5px 5px;
position: relative;
text-decoration: none;
white-space: nowrap;
}
@ -383,10 +384,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 {
@ -442,7 +449,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;
@ -532,27 +539,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;
@ -774,7 +760,7 @@ td.generalLabel {
}
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;

BIN
src/webui/www/private/images/3-state-checkbox.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 322 B

BIN
src/webui/www/private/images/L.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 66 B

6
src/webui/www/private/images/L.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
<line x1="7.5" y1="0" x2="7.5" y2="9" stroke="#808080" stroke-width="1"
stroke-dasharray="1,1" />
<line x1="7" y1="8.5" x2="18" y2="8.5" stroke="#808080" stroke-width="1"
stroke-dasharray="1,1" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 291 B

BIN
src/webui/www/private/images/arrow-right.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 54 B

BIN
src/webui/www/private/images/handle-icon-horizontal.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 B

BIN
src/webui/www/private/images/handle-icon.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 B

BIN
src/webui/www/private/images/logo.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2 KiB

BIN
src/webui/www/private/images/logo2.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/webui/www/private/images/spacer.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 B

BIN
src/webui/www/private/images/spinner-placeholder.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 80 B

BIN
src/webui/www/private/images/spinner.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 793 B

52
src/webui/www/private/images/spinner.svg Normal file
View file

@ -0,0 +1,52 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(8,8)">
<g>
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(45)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.1s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(90)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.2s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(135)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.3s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(180)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.4s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(225)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.5s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(270)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.6s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(315)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.7s"
repeatCount="indefinite" />
</line>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/webui/www/private/images/toolbox-divider.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 48 B

4
src/webui/www/private/images/toolbox-divider.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="2" height="20" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1" height="20" fill="#fff" />
<rect x="1" y="0" width="1" height="20" fill="#c4c4c4" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 190 B

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

@ -51,9 +51,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>

4
src/webui/www/private/scripts/dynamicTable.js
View file

@ -2322,7 +2322,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);
}
@ -2806,7 +2806,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);
}

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

@ -19,11 +19,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>
@ -321,18 +319,14 @@
<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/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>
@ -356,9 +350,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>
@ -366,7 +358,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>