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 f7918e84c..000000000
Binary files a/src/webui/www/private/images/3-state-checkbox.gif and /dev/null differ
diff --git a/src/webui/www/private/images/L.gif b/src/webui/www/private/images/L.gif
deleted file mode 100644
index 48b81c80a..000000000
Binary files a/src/webui/www/private/images/L.gif and /dev/null differ
diff --git a/src/webui/www/private/images/L.svg b/src/webui/www/private/images/L.svg
new file mode 100644
index 000000000..e46f16eec
--- /dev/null
+++ b/src/webui/www/private/images/L.svg
@@ -0,0 +1,6 @@
+
\ 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 da97e6814..000000000
Binary files a/src/webui/www/private/images/arrow-right.gif and /dev/null differ
diff --git a/src/webui/www/private/images/handle-icon-horizontal.gif b/src/webui/www/private/images/handle-icon-horizontal.gif
deleted file mode 100644
index fb7dff199..000000000
Binary files a/src/webui/www/private/images/handle-icon-horizontal.gif and /dev/null differ
diff --git a/src/webui/www/private/images/handle-icon.gif b/src/webui/www/private/images/handle-icon.gif
deleted file mode 100644
index 42412517c..000000000
Binary files a/src/webui/www/private/images/handle-icon.gif and /dev/null differ
diff --git a/src/webui/www/private/images/logo.gif b/src/webui/www/private/images/logo.gif
deleted file mode 100644
index 61c19e2a1..000000000
Binary files a/src/webui/www/private/images/logo.gif and /dev/null differ
diff --git a/src/webui/www/private/images/logo2.gif b/src/webui/www/private/images/logo2.gif
deleted file mode 100644
index fce2ad80d..000000000
Binary files a/src/webui/www/private/images/logo2.gif and /dev/null differ
diff --git a/src/webui/www/private/images/spacer.gif b/src/webui/www/private/images/spacer.gif
deleted file mode 100644
index 099c95f3c..000000000
Binary files a/src/webui/www/private/images/spacer.gif and /dev/null differ
diff --git a/src/webui/www/private/images/spinner-placeholder.gif b/src/webui/www/private/images/spinner-placeholder.gif
deleted file mode 100644
index ff0c3f1fe..000000000
Binary files a/src/webui/www/private/images/spinner-placeholder.gif and /dev/null differ
diff --git a/src/webui/www/private/images/spinner.gif b/src/webui/www/private/images/spinner.gif
deleted file mode 100644
index 879316f75..000000000
Binary files a/src/webui/www/private/images/spinner.gif and /dev/null differ
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 fb70d77bc..000000000
Binary files a/src/webui/www/private/images/toolbox-divider.gif and /dev/null differ
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 @@