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.

src/webui/www/private/css/Layout.css

@@ -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.arrow-right::after,
-#desktopNavbar ul li a:hover.arrow-right {
+#desktopNavbar ul li a:hover.arrow-right::after {
-    background-image: url("../images/arrow-right.gif");
+    border: solid currentcolor;
-    background-position: right 7px;
+    border-width: 0 2px 2px 0;
-    background-repeat: no-repeat;
+    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;

src/webui/www/private/css/Window.css

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

src/webui/www/private/css/style.css

@@ -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 {
+.contextMenu li:not(.disabled) .arrow-right::after {
-    background-image: url("../images/arrow-right.gif");
+    border: solid currentcolor;
-    background-position: right center;
+    border-width: 0 2px 2px 0;
-    background-repeat: no-repeat;
+    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;

src/webui/www/private/images/L.svg

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

src/webui/www/private/images/handle-icon-horizontal.svg

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

src/webui/www/private/images/handle-icon.svg

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

src/webui/www/private/images/spinner.svg

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

src/webui/www/private/images/toolbox-divider.svg

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

src/webui/www/private/index.html

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

src/webui/www/private/scripts/dynamicTable.js

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

src/webui/www/webui.qrc

@@ -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-horizontal.svg</file>
-        <file>private/images/handle-icon.gif</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.svg</file>
-        <file>private/images/spinner-placeholder.gif</file>
-        <file>private/images/spinner.gif</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>