From df570dab9e5d73cc10256de4f00cf7a3fc6fd734 Mon Sep 17 00:00:00 2001 From: tophf Date: Sat, 1 Apr 2017 05:50:03 +0300 Subject: [PATCH] Store SVG icons in a collection +preserve the page colors via fill:currentColor and opacity transition. --- edit.html | 49 +++++++++++++++++++++++++++++------------- edit.js | 4 ++-- manage.html | 62 ++++++++++++++++++++++++++++++++--------------------- 3 files changed, 73 insertions(+), 42 deletions(-) diff --git a/edit.html b/edit.html index e12f34ae..a41664fe 100644 --- a/edit.html +++ b/edit.html @@ -86,6 +86,7 @@ } #url { margin-left: 0.25rem; + color: inherit; } #url:not([href^="http"]) { display: none; @@ -93,7 +94,10 @@ .svg-icon { cursor: pointer; vertical-align: middle; - transition: fill .5s; + transition: opacity .5s; + width: 16px; + height: 16px; + fill: currentColor; } .svg-icon:not(.applies-to-help):not(.dismiss) { margin-left: 0.2rem; @@ -101,12 +105,14 @@ h2 .svg-icon, label .svg-icon { margin-top: -2px; } - .svg-icon.info:hover { - fill: #000000; + .svg-icon:hover, + .svg-icon.info { + opacity: .6; + } + .svg-icon, + .svg-icon.info:hover { + opacity: 1; } - a:hover .svg-icon.installed, .svg-icon.dismiss:hover { - fill: hsl(0, 0%, 40%); - } #enabled { margin-left: 0; vertical-align: middle; @@ -275,10 +281,10 @@ max-height: calc(100vh - 8rem); overflow-y: auto; } - #help-popup .close-icon { + #help-popup .dismiss { position: absolute; right: 4px; - top: 4px; + top: .5em; } .keymap-list { @@ -514,7 +520,7 @@
    @@ -565,7 +571,7 @@
    - +
    @@ -579,7 +585,7 @@
    -

    +

    @@ -605,21 +611,34 @@
    - +
    -

    :

    +

    :

    -

    +

    -
    +
    + + + + + + + + + + + + + diff --git a/edit.js b/edit.js index d07c759f..4ae673d4 100644 --- a/edit.js +++ b/edit.js @@ -1348,7 +1348,7 @@ function fromMozillaFormat() { function doImport() { var replaceOldStyle = this.name == "import-replace"; - popup.querySelector(".close-icon").click(); + popup.querySelector(".dismiss").click(); var mozStyle = trimNewLines(popup.codebox.getValue()); var parser = new parserlib.css.Parser(), lines = mozStyle.split("\n"); var sectionStack = [{code: "", start: {line: 1, col: 1}}]; @@ -1575,7 +1575,7 @@ function showHelp(title, text) { if (getComputedStyle(div).display == "none") { document.addEventListener("keydown", closeHelp); - div.querySelector(".close-icon").onclick = closeHelp; // avoid chaining on multiple showHelp() calls + div.querySelector(".dismiss").onclick = closeHelp; // avoid chaining on multiple showHelp() calls } div.style.display = "block"; diff --git a/manage.html b/manage.html index 798a4eab..6a5e4a15 100644 --- a/manage.html +++ b/manage.html @@ -10,11 +10,16 @@ } a, a:visited { - color: #555; - -webkit-transition: color 0.5s; + color: inherit; + opacity: .75; + -webkit-transition: opacity 0.5s; } - a:hover { - color: #999; + a:hover, + a.homepage:hover { + opacity: .6; + } + a.homepage { + opacity: 1; } #header { height: 100%; @@ -47,20 +52,21 @@ height: 2px; background-color: #fff; } - .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; - } + .svg-icon { + cursor: pointer; + vertical-align: middle; + margin-left: 0.3rem; + margin-right: 0.3rem; + margin-top: -4px; + transition: opacity .5s; + width: 16px; + height: 16px; + fill: currentColor; + } + .style-name { + margin-top: .25em; + word-break: break-word; + } .applies-to { word-break: break-word; } @@ -83,9 +89,10 @@ .enabled .enable { display: none; } - .style-name a[target="_blank"] { - text-decoration: none; - } + .style-name a[target="_blank"] { + text-decoration: none; + color: inherit; + } /* Default, no update buttons */ .update, @@ -219,10 +226,8 @@ @@ -293,6 +298,13 @@

    + + + + + + +