Update icons (#1295)

* Update icons

* Simplify sidebar-button-icon styles

6 files changed, 38 insertions, 47 deletions

diff --git a/ext/fg/float.html b/ext/fg/float.html
index 505bce81..c361c9eb 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -66,14 +66,14 @@
     <div class="content-sidebar scrollbar" id="content-sidebar">
         <div class="content-sidebar-inner">
             <div class="content-sidebar-top-pre">
-                <button class="sidebar-button danger" id="close-button" title="Close popup" data-hotkey='["close","title","Close popup ({0})"]'><span class="sidebar-button-icon" data-icon="cross"></span></button>
+                <button class="sidebar-button danger" id="close-button" title="Close popup" data-hotkey='["close","title","Close popup ({0})"]'><span class="sidebar-button-icon icon" data-icon="cross"></span></button>
             </div>
             <div class="content-sidebar-top">
-                <button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition" data-hotkey='["historyBackward","title","Previous definition ({0})"]'><span class="sidebar-button-icon" data-icon="left-chevron"></span></button>
-                <button class="sidebar-button" disabled id="navigate-next-button" title="Next definition" data-hotkey='["historyForward","title","Next definition ({0})"]'><span class="sidebar-button-icon" data-icon="right-chevron"></span></button>
+                <button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition" data-hotkey='["historyBackward","title","Previous definition ({0})"]'><span class="sidebar-button-icon icon" data-icon="left-chevron"></span></button>
+                <button class="sidebar-button" disabled id="navigate-next-button" title="Next definition" data-hotkey='["historyForward","title","Next definition ({0})"]'><span class="sidebar-button-icon icon" data-icon="right-chevron"></span></button>
             </div>
             <div class="content-sidebar-bottom">
-                <button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon" data-icon="profile"></span></button>
+                <button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon icon" data-icon="profile"></span></button>
             </div>
         </div>
     </div>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index a7c3e368..0c6ab336 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -494,17 +494,11 @@ button.sidebar-button.danger:active:not(:disabled) {
     background-color: var(--sidebar-button-danger-background-color-active);
 }
 .sidebar-button-icon {
+    --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
+
     display: block;
     width: 100%;
     height: 100%;
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-mode: alpha;
-    mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center center;
-    -webkit-mask-mode: alpha;
-    -webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
     background-color: var(--sidebar-button-icon-color);
     transition: background-color 0.125s ease-in-out;
 }
@@ -518,26 +512,6 @@ button.sidebar-button.danger:focus .sidebar-button-icon {
 button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
     background-color: var(--accent-color);
 }
-.sidebar-button-icon[data-icon=cross] {
-    mask-image: url(/mixed/img/cross.svg);
-    -webkit-mask-image: url(/mixed/img/cross.svg);
-}
-.sidebar-button-icon[data-icon=left-chevron] {
-    mask-image: url(/mixed/img/left-chevron.svg);
-    -webkit-mask-image: url(/mixed/img/left-chevron.svg);
-}
-.sidebar-button-icon[data-icon=right-chevron] {
-    mask-image: url(/mixed/img/right-chevron.svg);
-    -webkit-mask-image: url(/mixed/img/right-chevron.svg);
-}
-.sidebar-button-icon[data-icon=kebab-menu] {
-    mask-image: url(/mixed/img/kebab-menu.svg);
-    -webkit-mask-image: url(/mixed/img/kebab-menu.svg);
-}
-.sidebar-button-icon[data-icon=profile] {
-    mask-image: url(/mixed/img/profile.svg);
-    -webkit-mask-image: url(/mixed/img/profile.svg);
-}
 
 
 /* Search page */
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index 259d6460..6846c187 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -196,10 +196,13 @@
 .icon[data-icon=expand]                  { --icon-image: url(/mixed/img/expand.svg); }
 .icon[data-icon=window]                  { --icon-image: url(/mixed/img/window.svg); }
 .icon[data-icon=cross]                   { --icon-image: url(/mixed/img/cross.svg); }
+.icon[data-icon=checkmark]               { --icon-image: url(/mixed/img/checkmark.svg); }
 .icon[data-icon=sentence-parsing]        { --icon-image: url(/mixed/img/sentence-parsing.svg); }
 .icon[data-icon=question-mark]           { --icon-image: url(/mixed/img/question-mark.svg); }
 .icon[data-icon=question-mark-circle]    { --icon-image: url(/mixed/img/question-mark-circle.svg); }
 .icon[data-icon=question-mark-thick]     { --icon-image: url(/mixed/img/question-mark-thick.svg); }
+.icon[data-icon=left-chevron]            { --icon-image: url(/mixed/img/left-chevron.svg); }
+.icon[data-icon=right-chevron]           { --icon-image: url(/mixed/img/right-chevron.svg); }
 .icon[data-icon=material-down-arrow] {
     --icon-image: url(/mixed/img/material-down-arrow.svg);
     --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
diff --git a/ext/mixed/img/checkmark.svg b/ext/mixed/img/checkmark.svg
new file mode 100644
index 00000000..14504166
--- /dev/null
+++ b/ext/mixed/img/checkmark.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6.5 13l8-8-2-2-6 6-3-3-2 2z"/></svg>
\ No newline at end of file
diff --git a/ext/mixed/img/cross.svg b/ext/mixed/img/cross.svg
index 9b3d6a5c..9ea89e51 100644
--- a/ext/mixed/img/cross.svg
+++ b/ext/mixed/img/cross.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M3.5605 1.4395L1.4394 3.5606l4.4395 4.4395-4.4395 4.4395 2.1211 2.1211L8 10.1212l4.1895 4.4395 2.1211-2.1211-4.1895-4.4395 4.1895-4.4395-2.1211-2.1211L8 5.879z" fill="#333"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1.5 3.5l2-2L8 6l4.5-4.5 2 2L10 8l4.5 4.5-2 2L8 10l-4.5 4.5-2-2L6 8z"/></svg>
\ No newline at end of file
diff --git a/resources/icons.svg b/resources/icons.svg
index 59723730..5d5ac89e 100644
--- a/resources/icons.svg
+++ b/resources/icons.svg
@@ -27,11 +27,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="-0.96137572"
-     inkscape:cy="5.5332057"
+     inkscape:zoom="32"
+     inkscape:cx="10.107295"
+     inkscape:cy="8.7280255"
      inkscape:document-units="px"
-     inkscape:current-layer="g1184"
+     inkscape:current-layer="layer41"
      showgrid="true"
      units="px"
      inkscape:snap-center="true"
@@ -532,7 +532,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -1447,14 +1447,14 @@
        sodipodi:nodetypes="sccccsssssccccsscssccccccccc" />
   </g>
   <g
-     style="display:none"
      inkscape:groupmode="layer"
-     id="g1049"
-     inkscape:label="Cross">
+     id="layer41"
+     inkscape:label="Cross"
+     style="display:none">
     <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="M 3.5605469,1.4394531 1.4394531,3.5605469 5.8789062,8 1.4394531,12.439453 3.5605469,14.560547 8,10.121094 12.189453,14.560547 14.310547,12.439453 10.121094,8 14.310547,3.5605469 12.189453,1.4394531 8,5.8789062 Z"
-       id="path1047"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 1.5,3.5 2,-2 4.5,4.5 4.5,-4.5 2,2 -4.5,4.5 4.5,4.5 -2,2 L 8,10 3.5,14.5 1.5,12.5 6,8 Z"
+       id="path1071"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="ccccccccccccc" />
   </g>
@@ -1528,10 +1528,23 @@
      inkscape:label="Sentence Parsing"
      id="g1184"
      inkscape:groupmode="layer"
-     style="display:inline">
+     style="display:none">
     <path
        style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
-       d="M 2.5996094 1.8007812 C 1.5996094 2.8007812 1 3.75 1 5 C 1 5.5522847 1.4477153 6 2 6 C 2.5522847 6 3 5.5522847 3 5 C 3 4.4510454 2.5574543 4.1057254 2.0097656 4.1015625 C 2.0559376 3.3458915 2.6066745 2.7114397 2.9003906 2.1992188 L 2.5996094 1.8007812 z M 5.0996094 1.8007812 C 4.0996094 2.8007812 3.5 3.75 3.5 5 C 3.5 5.5522847 3.9477153 6 4.5 6 C 5.0522847 6 5.5 5.5522847 5.5 5 C 5.5 4.4510454 5.0574543 4.1057254 4.5097656 4.1015625 C 4.5559376 3.3458915 5.1066745 2.7114397 5.4003906 2.1992188 L 5.0996094 1.8007812 z M 6.5 5 L 6.5 6 L 15 6 L 15 5 L 6.5 5 z M 1 7 L 1 8 L 8 8 L 8 7 L 1 7 z M 9 7 L 9 8 L 12 8 L 12 7 L 9 7 z M 13 7 L 13 8 L 15 8 L 15 7 L 13 7 z M 1 9 L 1 10 L 3 10 L 3 9 L 1 9 z M 4 9 L 4 10 L 7 10 L 7 9 L 4 9 z M 8 9 L 8 10 L 11 10 L 11 9 L 8 9 z M 13.5 9 C 12.677495 9 12 9.6774952 12 10.5 C 12 11.322505 12.677495 12 13.5 12 C 14.322505 12 15 11.322505 15 10.5 C 15 9.6774952 14.322505 9 13.5 9 z M 13.5 10 C 13.782065 10 14 10.217935 14 10.5 C 14 10.782065 13.782065 11 13.5 11 C 13.217935 11 13 10.782065 13 10.5 C 13 10.217935 13.217935 10 13.5 10 z M 1 11 L 1 12 L 5 12 L 5 11 L 1 11 z M 6 11 L 6 12 L 11 12 L 11 11 L 6 11 z "
-       id="path1176" />
+       d="M 2.5996094,1.8007812 C 1.5996094,2.8007812 1,3.75 1,5 1,5.5522847 1.4477153,6 2,6 2.5522847,6 3,5.5522847 3,5 3,4.4510454 2.5574543,4.1057254 2.0097656,4.1015625 2.0559376,3.3458915 2.6066745,2.7114397 2.9003906,2.1992188 Z m 2.5,0 C 4.0996094,2.8007812 3.5,3.75 3.5,5 c 0,0.5522847 0.4477153,1 1,1 0.5522847,0 1,-0.4477153 1,-1 C 5.5,4.4510454 5.0574543,4.1057254 4.5097656,4.1015625 4.5559376,3.3458915 5.1066745,2.7114397 5.4003906,2.1992188 Z M 6.5,5 V 6 H 15 V 5 Z M 1,7 V 8 H 8 V 7 Z m 8,0 v 1 h 3 V 7 Z m 4,0 v 1 h 2 V 7 Z M 1,9 v 1 H 3 V 9 Z m 3,0 v 1 H 7 V 9 Z m 4,0 v 1 h 3 V 9 Z m 5.5,0 C 12.677495,9 12,9.6774952 12,10.5 12,11.322505 12.677495,12 13.5,12 14.322505,12 15,11.322505 15,10.5 15,9.6774952 14.322505,9 13.5,9 Z m 0,1 C 13.782065,10 14,10.217935 14,10.5 14,10.782065 13.782065,11 13.5,11 13.217935,11 13,10.782065 13,10.5 13,10.217935 13.217935,10 13.5,10 Z M 1,11 v 1 h 4 v -1 z m 5,0 v 1 h 5 v -1 z"
+       id="path1176"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Check"
+     id="g1068"
+     inkscape:groupmode="layer">
+    <path
+       sodipodi:nodetypes="ccccccc"
+       inkscape:connector-curvature="0"
+       id="path1066"
+       d="M 6.4999999,13 14.5,5 l -2,-2 -6.0000001,6 -3,-3 -2,2 z"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
   </g>
 </svg>