WebUI: Replace GIFs with SVG

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

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

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

@@ -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 {
+.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 {
@@ -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;

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

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

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

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

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

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

src/webui/www/private/index.html

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

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

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

src/webui/www/webui.qrc

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