alex/yomichan
1
Fork 0
Code Releases Activity

Update icons (#1295)

Browse Source 
* Update icons

* Simplify sidebar-button-icon styles
This commit is contained in:
toasted-nutbread 2021-01-23 13:48:54 -05:00 committed by GitHub
parent a24f3f5347
commit ca3f9c3648
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ext/fg/float.html
View File

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

30
ext/mixed/css/display.css
View File

@ -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 */

3
ext/mixed/css/material.css
View File

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

1
ext/mixed/img/checkmark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 147 B

2
ext/mixed/img/cross.svg
View File

@ -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>
<?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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 B

After

Width:  |  Height:  |  Size: 187 B

41
resources/icons.svg
View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 93 KiB