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
2025-08-11 16:38:11 +08:00
committed by GitHub
parent f743ae2d08
commit 03fb036ae3
22 changed files with 66 additions and 123 deletions

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