From df0f45dc06689253a46187a9b0a8373749af0a45 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Thu, 30 Mar 2017 19:49:03 -0400 Subject: [PATCH 1/3] Switch info/external style link icons from img to svg 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. --- edit.html | 47 ++++++++++++++++++++++++----------------------- manage.html | 24 +++++++++++++++++------- popup.css | 24 ++++-------------------- popup.html | 4 ++-- 4 files changed, 47 insertions(+), 52 deletions(-) diff --git a/edit.html b/edit.html index bcaa9506..335bb156 100644 --- a/edit.html +++ b/edit.html @@ -65,16 +65,11 @@ .aligned { display: table-row; } - .aligned > *:not(img) { + .aligned > *:not(svg) { display: table-cell; margin-top: 0.1rem; min-height: 1.4rem; } - img[src="help.png"] { - cursor: pointer; - vertical-align: middle; - margin-left: 0.2rem; - } input[type="checkbox"] { margin-left: 0.1rem; } @@ -95,12 +90,23 @@ #url:not([href^="http"]) { display: none; } - img[src*="world"] { - width: 16px; - height: 16px; + .svg-icon { + cursor: pointer; 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 { margin-left: 0; vertical-align: middle; @@ -270,14 +276,9 @@ overflow-y: auto; } #help-popup .close-icon { - cursor: pointer; - width: 8px; - height: 8px; - border: 8px solid transparent; position: absolute; right: 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 { @@ -428,7 +429,7 @@ #options { -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 */ padding-right: 0.4rem; vertical-align: baseline; @@ -513,7 +514,7 @@
@@ -564,7 +565,7 @@
- +
@@ -578,7 +579,7 @@
-

+

@@ -604,20 +605,20 @@
- +
-

:

+

:

-

+

-
+
diff --git a/manage.html b/manage.html index 48137583..ebd9ecf5 100644 --- a/manage.html +++ b/manage.html @@ -47,12 +47,20 @@ height: 2px; background-color: #fff; } - img[src*="world"] { - width: 16px; - height: 16px; - vertical-align: middle; - image-rendering: -webkit-optimize-contrast; - } + .svg-icon.installed { + cursor: pointer; + vertical-align: middle; + margin-left: 0.3rem; + 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 { word-break: break-word; } @@ -209,7 +217,9 @@ diff --git a/popup.css b/popup.css index e9c39907..f65caf6c 100644 --- a/popup.css +++ b/popup.css @@ -77,30 +77,14 @@ body.blocked > DIV { } #installed .style-edit-link, #installed .delete { display: inline-block; + padding: 0 1px 0; } .svg-icon { - width: 16px; - height: 16px; pointer-events: none; + transition: fill .5s; } -.svg-icon path, -.svg-icon polygon, -.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%); +a:hover .svg-icon { + fill: #000000; } body > .actions { diff --git a/popup.html b/popup.html index 465efa02..6089c701 100644 --- a/popup.html +++ b/popup.html @@ -15,12 +15,12 @@ - + - + From bab801f90b760703c84fa74f3961aaaf7cec0bc9 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Thu, 30 Mar 2017 23:00:35 -0400 Subject: [PATCH 2/3] Correction --- edit.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/edit.html b/edit.html index 335bb156..e12f34ae 100644 --- a/edit.html +++ b/edit.html @@ -95,7 +95,7 @@ vertical-align: middle; transition: fill .5s; } - .svg-icon:not(.applies-to-help) { + .svg-icon:not(.applies-to-help):not(.dismiss) { margin-left: 0.2rem; } h2 .svg-icon, label .svg-icon { From e94f9d818e464ba9831b9609326de86ff5681b04 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Fri, 31 Mar 2017 07:14:47 -0400 Subject: [PATCH 3/3] Get rid of text decoration in disabled styles Fixes https://github.com/schomery/stylish-chrome/pull/58#issuecomment-290607298 --- manage.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/manage.html b/manage.html index ebd9ecf5..798a4eab 100644 --- a/manage.html +++ b/manage.html @@ -58,8 +58,8 @@ fill: hsl(0, 0%, 40%); } .style-name { - margin-top: .25em; - word-break: break-word; + margin-top: .25em; + word-break: break-word; } .applies-to { word-break: break-word; @@ -83,6 +83,9 @@ .enabled .enable { display: none; } + .style-name a[target="_blank"] { + text-decoration: none; + } /* Default, no update buttons */ .update,