From 4ae2c6703341b55ec9b5ab62a74a38b0899e3d14 Mon Sep 17 00:00:00 2001 From: tophf Date: Sat, 6 Mar 2021 20:36:47 +0300 Subject: [PATCH] unbork install button style + dedupe svg-icon regressed in b8f6f5db --- edit/edit.css | 3 -- global.css | 24 ++++++++++ install-usercss/install-usercss.css | 72 ++++++++++++----------------- manage/manage.css | 24 ---------- options/options.css | 5 -- popup/popup.css | 2 - 6 files changed, 54 insertions(+), 76 deletions(-) diff --git a/edit/edit.css b/edit/edit.css index 55f04eea..4f194cbf 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -166,9 +166,6 @@ label { } .svg-icon { - cursor: pointer; - vertical-align: middle; - transition: fill .5s; width: 16px; height: 16px; } diff --git a/global.css b/global.css index 2a6990fe..0bb117f6 100644 --- a/global.css +++ b/global.css @@ -89,6 +89,30 @@ input[type=search] { border: 1px solid hsl(0, 0%, 66%); } +.svg-icon { + cursor: pointer; + vertical-align: middle; + transition: fill .5s; + width: 20px; + height: 20px; + fill: #666; +} + +.svg-icon:hover { + fill: #000; +} + +.svg-icon.info { + width: 14px; + height: 16px; + margin-left: .5ex; +} + +.svg-icon.config { + width: 16px; + height: 16px; +} + .svg-icon.checked { position: absolute; height: 8px; diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css index d4ee6df7..45cd851d 100644 --- a/install-usercss/install-usercss.css +++ b/install-usercss/install-usercss.css @@ -1,7 +1,6 @@ body { overflow: hidden; margin: 0; - font: 12px arial, sans-serif; background: white; } @@ -14,22 +13,11 @@ a:hover { color: #666; } -img.icon, -.svg-icon { +img.icon { height: 1.4em; vertical-align: middle; } -.svg-icon { - margin-left: 2px; - fill: #000; - transition: fill .5s; -} - -a:hover .svg-icon { - fill: #666; -} - input:disabled + span { color: rgb(128, 128, 128); } @@ -107,7 +95,7 @@ h1 small { margin: 0.5em 0; } -.install { +button.install { /* raising specificity to override button:not(.fake) in global.css */ font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif; font-size: 14px; background-color: hsl(0, 0%, 33%); @@ -126,21 +114,21 @@ h1 small { transition: color .25s, background-color .25s; } -.install, -.install:before { +button.install, +button.install:before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINFiccyZ2qfAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAb0lEQVQY012OwQ3CUAzFnNeMAfsv1hk4VDTm0H6ByMmyLL2U+lRowKobwAVFEEWbwqKIIGDXBTQqBU3VbWYk0CTLIAxNEHI1s5oAYXAYm2AIfZ64Ab1ta4s/yHv908twHB5gqf0Tvyg1l9l3efC9Dw0XRC2vHIXXAAAAAElFTkSuQmCC); background-size: 100% 100%; background-repeat: repeat-x; } -.install:hover:not(:disabled) { +button.install:hover:not(:disabled) { background-color: hsl(0, 0%, 38%); color: #fff; text-shadow: none; } -.install:before, -.install:after { +button.install:before, +button.install:after { content: ""; vertical-align: middle; box-sizing: border-box; @@ -152,80 +140,80 @@ h1 small { width: 30px; } -.install:before { +button.install:before { border-left: 1px solid rgba(0, 0, 0, .3); box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%); padding: 5px 8px; transition: background-color .25s; } -.install:before, -.install:active:before, -.install:active:hover:before { +button.install:before, +button.install:active:before, +button.install:active:hover:before { background-color: hsl(176, 50%, 35%); } -.install:hover:before { +button.install:hover:before { background-color: hsl(176, 50%, 40%); } -.install:active, -.install:active:before { +button.install:active, +button.install:active:before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINFioX6+ENuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAc0lEQVQY003OwQ0CQQxD0edsRBX03xg9cFjBhMPuSOT0ZdmxuS/zesWTzExBI7xlZhrKeeYkmZkH1Icg3Rfs1D98v3Kgj+NSypJlpZWU0tbKKlpVCm0JSyuxPbbnqpiJ0JLr8+w9sbtGxqRFInvYbLiVGX46ECZMv8VvjwAAAABJRU5ErkJggg==); background-size: 100% 100%; background-repeat: repeat-x; } -.install:active, -.install:active:hover { +button.install:active, +button.install:active:hover { background-color: hsl(0, 0%, 33%); } -.install:after { +button.install:after { background-image: url(../images/icon/16.png); background-repeat: no-repeat; background-position: center center; } -.install:disabled { +button.install:disabled { opacity: .25; color: white; cursor: auto; } -.install.reinstall:after { +button.install.reinstall:after { filter: grayscale(100%); } -.install.reinstall:before, -.install.reinstall:active:before, -.install.reinstall:active:hover:before { +button.install.reinstall:before, +button.install.reinstall:active:before, +button.install.reinstall:active:hover:before { background-color: hsl(0, 0%, 20%); } -.install.reinstall:hover:before { +button.install.reinstall:hover:before { background-color: hsl(0, 0%, 25%); } -.install.reinstall:hover:before { +button.install.reinstall:hover:before { background-color: #444; } -.install.update:before, -.install.update:active:before, -.install.update:active:hover:before { +button.install.update:before, +button.install.update:active:before, +button.install.update:active:hover:before { background-color: hsl(140, 100%, 13%); } -.install.update:hover:before { +button.install.update:hover:before { background-color: hsl(140, 100%, 18%); } -.install.update:after { +button.install.update:after { filter: hue-rotate(-18deg) brightness(.7) contrast(2); } -.install.installed, +button.install.installed, h2.installed { display: none; } diff --git a/manage/manage.css b/manage/manage.css index 470d01dc..88fd8083 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -131,30 +131,6 @@ a:hover { border-top: none; } -.svg-icon { - cursor: pointer; - vertical-align: middle; - transition: fill .5s; - width: 20px; - height: 20px; - fill: #666; -} - -.svg-icon:hover { - fill: #000; -} - -.svg-icon.info { - width: 14px; - height: 16px; - margin-left: .5ex; -} - -.svg-icon.config { - width: 16px; - height: 16px; -} - .homepage { margin-left: 0.25em; margin-right: 0.1em; diff --git a/options/options.css b/options/options.css index 330b7597..cecc91aa 100644 --- a/options/options.css +++ b/options/options.css @@ -45,11 +45,6 @@ a:hover { color: #666; } -.svg-icon { - fill: #666; - transition: fill .5s; -} - a:hover .svg-icon, .svg-icon:hover { fill: #000; diff --git a/popup/popup.css b/popup/popup.css index 74be4f6f..756f896f 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -476,10 +476,8 @@ a.configure[target="_blank"] .svg-icon.config { .svg-icon { pointer-events: none; - transition: fill .5s; width: 14px; height: 16px; - fill: #666; } a:hover .svg-icon {