From 566d79d663417c307c0a4f76951fbfa3a38df89f Mon Sep 17 00:00:00 2001 From: tehcneko Date: Fri, 8 Aug 2025 12:41:23 +0100 Subject: [PATCH] WebUI: Replace GIFs with SVG --- src/webui/www/private/css/Layout.css | 99 ++++++++---------- src/webui/www/private/css/Window.css | 28 +---- src/webui/www/private/css/style.css | 40 +++---- .../www/private/images/3-state-checkbox.gif | Bin 322 -> 0 bytes src/webui/www/private/images/L.gif | Bin 66 -> 0 bytes src/webui/www/private/images/L.svg | 6 ++ src/webui/www/private/images/arrow-right.gif | Bin 54 -> 0 bytes .../private/images/handle-icon-horizontal.gif | Bin 46 -> 0 bytes src/webui/www/private/images/handle-icon.gif | Bin 46 -> 0 bytes src/webui/www/private/images/logo.gif | Bin 2031 -> 0 bytes src/webui/www/private/images/logo2.gif | Bin 1610 -> 0 bytes src/webui/www/private/images/spacer.gif | Bin 49 -> 0 bytes .../private/images/spinner-placeholder.gif | Bin 80 -> 0 bytes src/webui/www/private/images/spinner.gif | Bin 793 -> 0 bytes src/webui/www/private/images/spinner.svg | 52 +++++++++ .../www/private/images/toolbox-divider.gif | Bin 48 -> 0 bytes .../www/private/images/toolbox-divider.svg | 4 + src/webui/www/private/index.html | 3 - src/webui/www/private/scripts/dynamicTable.js | 4 +- src/webui/www/webui.qrc | 14 +-- 20 files changed, 125 insertions(+), 125 deletions(-) delete mode 100644 src/webui/www/private/images/3-state-checkbox.gif delete mode 100644 src/webui/www/private/images/L.gif create mode 100644 src/webui/www/private/images/L.svg delete mode 100644 src/webui/www/private/images/arrow-right.gif delete mode 100644 src/webui/www/private/images/handle-icon-horizontal.gif delete mode 100644 src/webui/www/private/images/handle-icon.gif delete mode 100644 src/webui/www/private/images/logo.gif delete mode 100644 src/webui/www/private/images/logo2.gif delete mode 100644 src/webui/www/private/images/spacer.gif delete mode 100644 src/webui/www/private/images/spinner-placeholder.gif delete mode 100644 src/webui/www/private/images/spinner.gif create mode 100644 src/webui/www/private/images/spinner.svg delete mode 100644 src/webui/www/private/images/toolbox-divider.gif create mode 100644 src/webui/www/private/images/toolbox-divider.svg diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index fb940cbf1..f2a6e8a29 100644 --- a/src/webui/www/private/css/Layout.css +++ b/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: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; diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index 9aeaf365f..743dc8c1f 100644 --- a/src/webui/www/private/css/Window.css +++ b/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; diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 82bc99f71..517931c1d 100644 --- a/src/webui/www/private/css/style.css +++ b/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 { - 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; diff --git a/src/webui/www/private/images/3-state-checkbox.gif b/src/webui/www/private/images/3-state-checkbox.gif deleted file mode 100644 index f7918e84ce2f365bce7eab1f632432240dfe871a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 322 zcmV-I0lof5Nk%w1VGRH$0E7ns98rKFp&{|{@9*#I`T6+l?CJCK@&Et-_xJYo_4MWC z;^^q*`}_L-{{GzD*W%*d;NaW+{rukE+4}nV{QUdk;@#)x<>le^_4EDx{o~`` z|NsC0|NsC0|NsC0EC2ui01W^q000HYARvw;>6{YuC`&O2BC4{kV8rR#zD6SEG+qKB zn(b^uf=E~EAqWgn5cy<8L`Nqy(hxP1*2Y03ta1-y0Cg)ym)`KWs6yXhESKiIV#hZ# zbA5R)0U1O9f;9mFPa<~#ii-pjB6y1eivg1qB6*pT6BHU=grK5b06ZC*p&DW$Hinz7 zZU6?dt!-&?yl^KDKu0ma5XD(ID#Z{&KQqcyMJo!^1l83`3ZI!!QVZIWR{%#5 + + + \ No newline at end of file diff --git a/src/webui/www/private/images/arrow-right.gif b/src/webui/www/private/images/arrow-right.gif deleted file mode 100644 index da97e6814f8ddaeb13dba4cb61cb023b6fbaff8d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 54 zcmZ?wbhEHb7On_qum%9^DG5CQ diff --git a/src/webui/www/private/images/logo.gif b/src/webui/www/private/images/logo.gif deleted file mode 100644 index 61c19e2a1379786dde22de1427818c84e8b92953..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2031 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 I2>`DD0x<`)F#rGn diff --git a/src/webui/www/private/images/spacer.gif b/src/webui/www/private/images/spacer.gif deleted file mode 100644 index 099c95f3c4975c910c5e02d85ff2cc414952561f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 49 zcmZ?wbhEHbwT;yc-B+_d6iMn;WO0K1*7JqHa?>1*;um%7Dy&S>- diff --git a/src/webui/www/private/images/spinner.gif b/src/webui/www/private/images/spinner.gif deleted file mode 100644 index 879316f753450a884ad9784b01d243d26c134ebc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 793 zcmZ?wbhEHb6krfw*v!e$J7rdT-;_nmS7#Pg9XND!z&!tPBjC3_2jiAY&O=TntXmJhnjMwoUKM*)0lFzK4bz zOiX%puvnYW}EP!8SFGK-2-MY7wf5qK!Z73NHEw5#>25HC`Pfe-09`EDL4v_vprGKKIa`GT&0zO=>5edi z1vt760u5$wCc$71kiq9?&JGblGuUHZx)aP`HfAmcpuxOtBp7@SWU%0@*)9TT20PD7 wcZC_u!`9^hG?=-O1cL<@0S!JrV|IxQn!#@K(p_K%Gcb591RBiRgw0@U04%*3l>h($ diff --git a/src/webui/www/private/images/spinner.svg b/src/webui/www/private/images/spinner.svg new file mode 100644 index 000000000..cad28dc1c --- /dev/null +++ b/src/webui/www/private/images/spinner.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/webui/www/private/images/toolbox-divider.gif b/src/webui/www/private/images/toolbox-divider.gif deleted file mode 100644 index fb70d77bc4c587fe30961ceeb80c20efc54680a3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 48 xcmZ?wbhEHbWMU9uXkcJCa^%SW|Nj+#vM_*v4u}BBFfg(6^ejL5dM+1(H2_Am48{Ne diff --git a/src/webui/www/private/images/toolbox-divider.svg b/src/webui/www/private/images/toolbox-divider.svg new file mode 100644 index 000000000..f9ba3067c --- /dev/null +++ b/src/webui/www/private/images/toolbox-divider.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html index 8ba14dd6a..80b79398e 100644 --- a/src/webui/www/private/index.html +++ b/src/webui/www/private/index.html @@ -51,9 +51,6 @@
-
  • diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index 20392d5a4..79e892405 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/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); } diff --git a/src/webui/www/webui.qrc b/src/webui/www/webui.qrc index fa6ed311f..d5d03cf65 100644 --- a/src/webui/www/webui.qrc +++ b/src/webui/www/webui.qrc @@ -19,11 +19,9 @@ private/editfeedurl.html private/edittracker.html private/editwebseed.html - private/images/3-state-checkbox.gif private/images/application-exit.svg private/images/application-rss.svg private/images/application-url.svg - private/images/arrow-right.gif private/images/browser-cookies.svg private/images/checked-completed.svg private/images/collapse.svg @@ -321,18 +319,14 @@ private/images/go-down.svg private/images/go-top.svg private/images/go-up.svg - private/images/handle-icon-horizontal.gif - private/images/handle-icon.gif private/images/hash.svg private/images/help-about.svg private/images/help-contents.svg private/images/insert-link.svg private/images/ip-blocked.svg - private/images/L.gif + private/images/L.svg private/images/list-add.svg private/images/list-remove.svg - private/images/logo.gif - private/images/logo2.gif private/images/mail-inbox.svg private/images/mascot.png private/images/name.svg @@ -356,9 +350,7 @@ private/images/set-location.svg private/images/slow.svg private/images/slow_off.svg - private/images/spacer.gif - private/images/spinner-placeholder.gif - private/images/spinner.gif + private/images/spinner.svg private/images/stalledDL.svg private/images/stalledUP.svg private/images/stopped.svg @@ -366,7 +358,7 @@ private/images/tags.svg private/images/task-complete.svg private/images/task-reject.svg - private/images/toolbox-divider.gif + private/images/toolbox-divider.svg private/images/torrent-creator.svg private/images/torrent-magnet.svg private/images/torrent-start-forced.svg