open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch info/external style link icons from img to svg

Browse Source 
Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps.
This commit is contained in:
narcolepticinsomniac 2017-03-30 19:49:03 -04:00 committed by GitHub
parent 4dd17c1caf
commit df0f45dc06
4 changed files with 47 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
edit.html
View File

@ -65,16 +65,11 @@
.aligned { .aligned {
display: table-row; display: table-row;
} }
.aligned > *:not(img) { .aligned > *:not(svg) {
display: table-cell; display: table-cell;
margin-top: 0.1rem; margin-top: 0.1rem;
min-height: 1.4rem; min-height: 1.4rem;
} }
img[src="help.png"] {
cursor: pointer;
vertical-align: middle;
margin-left: 0.2rem;
}
input[type="checkbox"] { input[type="checkbox"] {
margin-left: 0.1rem; margin-left: 0.1rem;
} }
@ -95,12 +90,23 @@
#url:not([href^="http"]) { #url:not([href^="http"]) {
display: none; display: none;
} }
img[src*="world"] { .svg-icon {
width: 16px; cursor: pointer;
height: 16px;
vertical-align: middle; vertical-align: middle;
image-rendering: -webkit-optimize-contrast; transition: fill .5s;
} }
.svg-icon:not(.applies-to-help) {
margin-left: 0.2rem;
}
h2 .svg-icon, label .svg-icon {
margin-top: -2px;
}
.svg-icon.info:hover {
fill: #000000;
}
a:hover .svg-icon.installed, .svg-icon.dismiss:hover {
fill: hsl(0, 0%, 40%);
}
#enabled { #enabled {
margin-left: 0; margin-left: 0;
vertical-align: middle; vertical-align: middle;
@ -270,14 +276,9 @@
overflow-y: auto; overflow-y: auto;
} }
#help-popup .close-icon { #help-popup .close-icon {
cursor: pointer;
width: 8px;
height: 8px;
border: 8px solid transparent;
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 4px; top: 4px;
background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat, linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat;
} }
.keymap-list { .keymap-list {
@ -428,7 +429,7 @@
#options { #options {
-webkit-column-count: 2; -webkit-column-count: 2;
} }
#options .aligned > *:not(img) { #options .aligned > *:not(svg) {
margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */ margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
padding-right: 0.4rem; padding-right: 0.4rem;
vertical-align: baseline; vertical-align: baseline;
@ -513,7 +514,7 @@
<br> <br>
<div class="applies-to"> <div class="applies-to">
<label i18n-text="appliesLabel"> <label i18n-text="appliesLabel">
<img class="applies-to-help" src="help.png" i18n-alt="helpAlt"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="applies-to-help svg-icon info" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16" i18n-alt="helpAlt"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
</label> </label>
<ul class="applies-to-list"></ul> <ul class="applies-to-list"></ul>
</div> </div>
@ -564,7 +565,7 @@
<section id="basic-info"> <section id="basic-info">
<div id="basic-info-name"> <div id="basic-info-name">
<input id="name" class="style-contributor" i18n-placeholder="styleMissingName"> <input id="name" class="style-contributor" i18n-placeholder="styleMissingName">
<a id="url" target="_blank"><img src="world_go.png"></a> <a id="url" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon installed" fill="#000000" height="16" width="16" viewBox="0 0 8 8"><path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path></svg></a>
</div> </div>
<div id="basic-info-enabled"> <div id="basic-info-enabled">
<input type="checkbox" id="enabled" class="style-contributor"> <input type="checkbox" id="enabled" class="style-contributor">
@ -578,7 +579,7 @@
<a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a> <a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
</div> </div>
<div> <div>
<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><img id="to-mozilla-help" src="help.png"></h2> <h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="to-mozilla-help" class="svg-icon info" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16" i18n-alt="helpAlt"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></h2>
<button id="from-mozilla" i18n-text="importLabel"></button> <button id="from-mozilla" i18n-text="importLabel"></button>
<button id="to-mozilla" i18n-text="exportLabel"></button> <button id="to-mozilla" i18n-text="exportLabel"></button>
</div> </div>
@ -604,20 +605,20 @@
<div class="option aligned"> <div class="option aligned">
<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label> <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
<select data-option="keyMap" id="editor.keyMap"></select> <select data-option="keyMap" id="editor.keyMap"></select>
<img id="keyMap-help" src="help.png" i18n-alt="helpAlt"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="keyMap-help" class="svg-icon info" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16" i18n-alt="helpAlt"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
</div> </div>
<div class="option aligned"> <div class="option aligned">
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label> <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
<select data-option="theme" id="editor.theme"></select> <select data-option="theme" id="editor.theme"></select>
</div> </div>
</section> </section>
<section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><img id="lint-help" src="help.png" i18n-alt="helpAlt"></h2><div></div></section> <section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="lint-help" class="svg-icon info" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16" i18n-alt="helpAlt"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></h2><div></div></section>
</div> </div>
<section id="sections"> <section id="sections">
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2> <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sections-help" class="svg-icon info" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16" i18n-alt="helpAlt"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></h2>
</section> </section>
<div id="help-popup"> <div id="help-popup">
<div class="title"></div><div class="close-icon"></div> <div class="title"></div><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="close-icon svg-icon dismiss" fill="#000000" height="16" width="12" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
<div class="contents"></div> <div class="contents"></div>
</div> </div>
</body> </body>

24
manage.html
View File

@ -47,12 +47,20 @@
height: 2px; height: 2px;
background-color: #fff; background-color: #fff;
} }
img[src*="world"] { .svg-icon.installed {
width: 16px; cursor: pointer;
height: 16px; vertical-align: middle;
vertical-align: middle; margin-left: 0.3rem;
image-rendering: -webkit-optimize-contrast; margin-top: -4px;
} transition: fill .5s;
}
a:hover .svg-icon.installed {
fill: hsl(0, 0%, 40%);
}
.style-name {
margin-top: .25em;
word-break: break-word;
}
.applies-to { .applies-to {
word-break: break-word; word-break: break-word;
} }
@ -209,7 +217,9 @@
<template data-id="styleHomepage"> <template data-id="styleHomepage">
<a target="_blank"> <a target="_blank">
<img src="world_go.png" alt="*"> <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" class="svg-icon installed" height="16" width="16" viewBox="0 0 8 8">
<path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z" id="external-link"></path>
</svg>
</a> </a>
</template> </template>

24
popup.css
View File

@ -77,30 +77,14 @@ body.blocked > DIV {
} }
#installed .style-edit-link, #installed .delete { #installed .style-edit-link, #installed .delete {
display: inline-block; display: inline-block;
padding: 0 1px 0;
} }
.svg-icon { .svg-icon {
width: 16px;
height: 16px;
pointer-events: none; pointer-events: none;
transition: fill .5s;
} }
.svg-icon path, a:hover .svg-icon {
.svg-icon polygon, fill: #000000;
.svg-icon rect {
fill: hsl(0, 0%, 30%);
transition: .5s;
}
.svg-icon circle {
stroke: hsl(0, 0%, 30%);
stroke-width: 1;
transition: .5s;
}
a:hover .svg-icon path,
a:hover .svg-icon polygon,
a:hover .svg-icon rect {
fill: hsl(0, 0%, 54%);
}
a:hover .svg-icon circle {
stroke: hsl(0, 0%, 54%);
} }
body > .actions { body > .actions {

4
popup.html
View File

@ -15,12 +15,12 @@
<a href="#" class="enable" i18n-text="enableStyleLabel"></a> <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel"></a> <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute --> <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute -->
<svg class="svg-icon" viewBox="0 0 14 16"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon edit" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path> <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
</svg> </svg>
</a> </a>
<a href="#" class="delete" i18n-title="deleteStyleLabel"> <a href="#" class="delete" i18n-title="deleteStyleLabel">
<svg class="svg-icon" viewBox="0 0 14 16"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon remove" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path> <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
</svg> </svg>
</a> </a>