minor nitpicks

- resizer script to general svg coloring script - fix checkboxes - fix missing imports on scrollbar - fix text color for find dialog
2024-03-06 15:39:06 -07:00 · 2024-03-06 15:39:06 -07:00 · 46dff30a05
parent 842c8e9446
commit 46dff30a05
3 changed files with 42 additions and 23 deletions
--- a/chrome/msfx-svgs.uc.js
+++ b/chrome/msfx-svgs.uc.js
@ -1,5 +1,10 @@
 (() => {
-  const colorKeys = ["ThreeDFace", "ThreeDShadow", "ThreeDHighlight"];
+  const colorKeys = [
+    "ThreeDFace",
+    "ThreeDShadow",
+    "ThreeDHighlight",
+    "ButtonText",
+  ];
  const colors = (() => {
    const colors = {};

@ -18,6 +23,23 @@

  const css = `#main-window:not([sizemode="maximized"]) #browser-bottombox::after {
  background-image: url('data:image/svg+xml,<svg width="13" height="13" version="1.1" viewBox="0 0 3.4396 3.4396" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g><g><rect x="2.9104" y="0.0000" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.6458" y=".26458" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.3812" y=".52917" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.1167" y=".79375" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.8521" y="1.0583" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.5875" y="1.3229" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.3229" y="1.5875" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.0583" y="1.8521" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x=".79375" y="2.1167" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x=".52917" y="2.3812" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x=".26458" y="2.6458" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="0.0000" y="2.9104" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.9104" y=".26458" width=".26458" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.6458" y=".52917" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.3812" y=".79375" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.1167" y="1.0583" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.8521" y="1.3229" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.5875" y="1.5875" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.3229" y="1.8521" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.0583" y="2.1167" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x=".79375" y="2.3812" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x=".52917" y="2.6458" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x=".26458" y="2.9104" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.9104" y="1.0583" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.6458" y="1.3229" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.3812" y="1.5875" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.1167" y="1.8521" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.8521" y="2.1167" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.5875" y="2.3812" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.3229" y="2.6458" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="1.0583" y="2.9104" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.9104" y="1.3229" width=".26458" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.6458" y="1.5875" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.3812" y="1.8521" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.1167" y="2.1167" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.8521" y="2.3812" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.5875" y="2.6458" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="1.3229" y="2.9104" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.9104" y="2.1167" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.6458" y="2.3812" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.3812" y="2.6458" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.1167" y="2.9104" width=".26458" height=".26458" fill="${colors.ThreeDHighlight}"/><rect x="2.9104" y="2.3812" width=".26458" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.6458" y="2.6458" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="2.3812" y="2.9104" width=".52917" height=".26458" fill="${colors.ThreeDShadow}"/><rect x="3.1750" y="0.0000" width=".26458" height="3.4396" fill="${colors.ThreeDFace}"/><rect x="0.0000" y="3.1750" width="3.1750" height=".26458" fill="${colors.ThreeDFace}"/></g></g></svg>');
+}
+
+.checkbox-check[checked] {
+  background-image: url('data:image/svg+xml,<svg width="13" height="13" version="1.1" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 3.4396 3.4396" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g fill="${colors.ButtonText}"><rect x=".79375" y="1.3229" width=".26458" height=".79375"/><rect x="2.3812" y=".79375" width=".26458" height=".79375"/><rect x="2.1167" y="1.0583" width=".26458" height=".79375"/><rect x="1.8521" y="1.3229" width=".26458" height=".79375"/><rect x="1.0583" y="1.8521" width=".79375" height=".52917"/><rect x="1.3229" y="2.3812" width=".26458" height=".26458"/><rect x="1.0583" y="1.5875" width=".26458" height=".26458"/><rect x="1.5875" y="1.5875" width=".26458" height=".26458"/></g></svg>') !important;
+}
+
+.findbar-find-next .toolbarbutton-icon {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 15 15"><rect height="1" width="7" x="3" y="5" fill="${colors.ButtonText}"/><rect height="1" width="5" y="6" x="4" fill="${colors.ButtonText}"/><rect height="1" width="3" x="5" y="7" fill="${colors.ButtonText}"/><rect width="1" height="1" x="6" y="8" fill="${colors.ButtonText}"/></svg>') !important;
+}
+.findbar-find-next[disabled="true"] .toolbarbutton-icon {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" height="1" width="7" x="3" y="5"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" y="6" x="9"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" y="7" x="8"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" x="7" y="8"/><rect fill="${colors.ThreeDHighlight}" height="1" width="1" x="7" y="9"/><rect fill="${colors.ThreeDShadow}" height="1" width="5" y="6" x="4"/><rect fill="${colors.ThreeDShadow}" height="1" width="3" x="5" y="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" x="6" y="8"/></svg>') !important;
+}
+.findbar-find-previous .toolbarbutton-icon {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><rect height="1" width="7" y="8" x="3" fill="${colors.ButtonText}"/><rect height="1" width="5" x="4" y="7" fill="${colors.ButtonText}"/><rect height="1" width="3" y="6" x="5" fill="${colors.ButtonText}"/><rect width="1" height="1" y="5" x="6" fill="${colors.ButtonText}"/></svg>') !important;
+}
+.findbar-find-previous[disabled="true"] .toolbarbutton-icon {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" height="1" width="7" y="8" x="3"/><rect fill="${colors.ThreeDHighlight}" width="7" height="1" y="9" x="4"/><rect fill="${colors.ThreeDShadow}" height="1" width="5" x="4" y="7"/><rect fill="${colors.ThreeDShadow}" height="1" width="3" y="6" x="5"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" y="5" x="6"/></svg>') !important;
 }`;

  const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(
--- a/chrome/msfx/msfx.css
+++ b/chrome/msfx/msfx.css
@ -529,7 +529,11 @@ toolbarspring {
 .toolbarbutton-1:not(#activity_throbber):not(#ie6_statusbar):not(
    [disabled]
  ):active,
+.toolbarbutton-1:not(#activity_throbber):not(#ie6_statusbar):not(
+    [disabled]
+  ):hover:active,
 .toolbarbutton-1:not(#activity_throbber):not(#ie6_statusbar)[open="true"],
+.toolbarbutton-1:not(#activity_throbber):not(#ie6_statusbar)[open="true"]:hover,
 #PlacesChevron[open="true"],
 #PlacesChevron:active,
 #placesToolbar > toolbarbutton:not([disabled]):active,
@ -1325,7 +1329,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
  height: 100% !important;
  padding: 6px !important;
  margin: 0 !important;
-  background-color: WindowText !important;
+  background-color: ButtonText !important;
  mask-repeat: no-repeat;
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAoSURBVBhXYwCC/1AMA+h8MMCpiBFEQAFMAUwMWQNCBxSg8PFIMjAAAMnUEfGcoUqiAAAAAElFTkSuQmCC") !important;
 }
@ -1347,6 +1351,7 @@ findbar {
  background-color: unset !important;
  padding: 0px 3px !important;
  height: 22px !important;
+  color: WindowText !important;
 }

 .findbar-find-previous,
@ -1390,20 +1395,16 @@ hbox[anonid="findbar-textbox-wrapper"]::after {
 .findbar-find-previous .toolbarbutton-icon,
 .findbar-find-next .toolbarbutton-icon {
  list-style-image: none !important;
-  mask-repeat: no-repeat !important;
-  mask-position: center center !important;
-  background-color: WindowText !important;
+  background-color: transparent !important;
+  background-position: center;
  padding: 0 !important;
  min-width: 20px;
  min-height: 20px;
 }

-.findbar-find-next .toolbarbutton-icon {
-  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAkSURBVBhXY2RgYPgPxFgBSBIEsClghEmCALICZHE4QFLAwAAA+twEAr6ulF8AAAAASUVORK5CYII=") !important;
-}
-
-.findbar-find-previous .toolbarbutton-icon {
-  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAlSURBVBhXY0AD/6E0GDBCaRBAlgCLwyRRdEABI0gSmwQQMDAAAPqFBAIR7Pg5AAAAAElFTkSuQmCC") !important;
+.findbar-find-previous[disabled="true"] .toolbarbutton-icon,
+.findbar-find-next[disabled="true"] .toolbarbutton-icon {
+  opacity: 1 !important;
 }

 .findbar-container {
@ -1442,8 +1443,8 @@ hbox[anonid="findbar-textbox-wrapper"]::after {
  margin: 0 !important;
  margin-inline-start: 4px !important;
  margin-inline-end: 4px !important;
-  background-color: WindowText !important;
-  fill: WindowText !important;
+  background-color: ButtonText !important;
+  fill: ButtonText !important;
  mask-repeat: no-repeat !important;
  mask-position: center center !important;
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAAAAAKVnuc8AAAACdFJOU/8A5bcwSgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAACRJREFUGFdjYGBgBAIgBWaBSTAbSEG5yAwQDVUBEQTRjIwMDAADqAAZRZMazAAAAABJRU5ErkJggg==") !important;
@ -1651,6 +1652,7 @@ treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
 }

 .checkbox-check {
+  appearance: none !important;
  background-color: Window !important;
  border: 0 !important;
  border-radius: 0 !important;
@ -1663,11 +1665,6 @@ treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
  height: 13px !important;
 }

-.checkbox-check[checked] {
-  color: WindowText !important;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZlcnNpb249IjEuMSIgZmlsbD0iY29udGV4dC1maWxsIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IiB2aWV3Qm94PSIwIDAgMy40Mzk2IDMuNDM5NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48Zz48cmVjdCB4PSIuNzkzNzUiIHk9IjEuMzIyOSIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuNzkzNzUiLz48cmVjdCB4PSIyLjM4MTIiIHk9Ii43OTM3NSIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuNzkzNzUiLz48cmVjdCB4PSIyLjExNjciIHk9IjEuMDU4MyIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuNzkzNzUiLz48cmVjdCB4PSIxLjg1MjEiIHk9IjEuMzIyOSIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuNzkzNzUiLz48cmVjdCB4PSIxLjA1ODMiIHk9IjEuODUyMSIgd2lkdGg9Ii43OTM3NSIgaGVpZ2h0PSIuNTI5MTciLz48cmVjdCB4PSIxLjMyMjkiIHk9IjIuMzgxMiIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuMjY0NTgiLz48cmVjdCB4PSIxLjA1ODMiIHk9IjEuNTg3NSIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuMjY0NTgiLz48cmVjdCB4PSIxLjU4NzUiIHk9IjEuNTg3NSIgd2lkdGg9Ii4yNjQ1OCIgaGVpZ2h0PSIuMjY0NTgiLz48L2c+PC9nPjwvc3ZnPgo=") !important;
-}
-
 #urlbar-zoom-button {
  margin: 0 !important;
  font: menu !important;
@ -1886,7 +1883,7 @@ richlistbox.theme-listbox:focus > richlistitem[current="true"] {

 #alltabs-button .toolbarbutton-icon {
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAdSURBVDhPYxiB4D8UwwA6Hy+gv2b6aRoFKICBAQA7tRPtf9lgfQAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") !important;
-  background-color: -moz-DialogText !important;
+  background-color: ButtonText !important;
  min-height: 0 !important;
  width: 14px !important;
  height: 14px !important;
--- a/chrome/scrollbar.uc.js
+++ b/chrome/scrollbar.uc.js
@ -76,7 +76,7 @@ scrollbarbutton
  box-shadow: inset -1px -1px 0 ${colors.ThreeDDarkShadow}, inset 1px 1px 0 ${colors.ThreeDLightShadow}, inset -2px -2px 0 ${colors.ThreeDShadow}, inset 2px 2px 0 ${colors.ThreeDHighlight} !important;
 }

-scrollbarbutton:not(.disabled):hover:active
+scrollbarbutton:not([disabled="true"]):hover:active
 {
  background-color: ${colors.ThreeDFace} !important;
  border: 1px solid ${colors.ThreeDShadow} !important;
@ -138,21 +138,21 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]
 scrollbarbutton[type="increment"][disabled="true"]
 {
  background-repeat: no-repeat !important;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" width="1" height="7" y="4" x="5"/><rect width="1" height="2" fill="${colors.ThreeDHighlight}" x="6" y="10"/><rect width="1" height="2" fill="${colors.ThreeDHighlight}" x="7" y="9"/><rect width="1" height="2" fill="${colors.ThreeDHighlight}" x="8" y="8"/><rect width="1" fill="${colors.ThreeDHighlight}" height="1" y="8" x="9"/><rect fill="${colors.ThreeDShadow}" width="1" height="5" y="5" x="6"/><rect fill="${colors.ThreeDShadow}" width="1" height="3" y="6" x="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" y="7" x="8"/></svg>');
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" width="1" height="7" y="4" x="5"/><rect width="1" height="2" fill="${colors.ThreeDHighlight}" x="6" y="10"/><rect width="1" height="2" fill="${colors.ThreeDHighlight}" x="7" y="9"/><rect width="1" height="2" fill="${colors.ThreeDHighlight}" x="8" y="8"/><rect width="1" fill="${colors.ThreeDHighlight}" height="1" y="8" x="9"/><rect fill="${colors.ThreeDShadow}" width="1" height="5" y="5" x="6"/><rect fill="${colors.ThreeDShadow}" width="1" height="3" y="6" x="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" y="7" x="8"/></svg>') !important;
  background-position: center center !important;
 }

 scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"]
 {
  background-repeat: no-repeat !important;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" height="1" width="7" x="3" y="5"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" y="6" x="9"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" y="7" x="8"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" x="7" y="8"/><rect fill="${colors.ThreeDHighlight}" height="1" width="1" x="7" y="9"/><rect fill="${colors.ThreeDShadow}" height="1" width="5" y="6" x="4"/><rect fill="${colors.ThreeDShadow}" height="1" width="3" x="5" y="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" x="6" y="8"/></svg>');
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" height="1" width="7" x="3" y="5"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" y="6" x="9"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" y="7" x="8"/><rect fill="${colors.ThreeDHighlight}" height="1" width="2" x="7" y="8"/><rect fill="${colors.ThreeDHighlight}" height="1" width="1" x="7" y="9"/><rect fill="${colors.ThreeDShadow}" height="1" width="5" y="6" x="4"/><rect fill="${colors.ThreeDShadow}" height="1" width="3" x="5" y="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" x="6" y="8"/></svg>') !important;
  background-position: center center !important;
 }

 scrollbarbutton[type="decrement"][disabled="true"]
 {
  background-repeat: no-repeat !important;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" width="1" height="7" y="4" x="8"/><rect width="1" height="7" fill="${colors.ThreeDHighlight}" y="5" x="9"/><rect fill="${colors.ThreeDShadow}" width="1" height="5" y="5" x="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="3" y="6" x="6"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" y="7" x="5"/></svg>');
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 15 15"><rect fill="${colors.ThreeDShadow}" width="1" height="7" y="4" x="8"/><rect width="1" height="7" fill="${colors.ThreeDHighlight}" y="5" x="9"/><rect fill="${colors.ThreeDShadow}" width="1" height="5" y="5" x="7"/><rect fill="${colors.ThreeDShadow}" width="1" height="3" y="6" x="6"/><rect fill="${colors.ThreeDShadow}" width="1" height="1" y="7" x="5"/></svg>') !important;
  background-position: center center !important;
 }