diff --git a/src/drivers/npm/package.json b/src/drivers/npm/package.json index 9f7982aea..9f9e36f00 100644 --- a/src/drivers/npm/package.json +++ b/src/drivers/npm/package.json @@ -2,7 +2,7 @@ "name": "wappalyzer", "description": "Uncovers the technologies used on websites", "homepage": "https://github.com/AliasIO/Wappalyzer", - "version": "5.0.7", + "version": "5.1.0", "author": "Elbert Alias", "license": "GPL-3.0", "repository": { diff --git a/src/drivers/webextension/css/popup.css b/src/drivers/webextension/css/popup.css index 015a333bd..98c56c2de 100644 --- a/src/drivers/webextension/css/popup.css +++ b/src/drivers/webextension/css/popup.css @@ -1,31 +1,95 @@ body { background: #fff; - color: #4a4a4a; font-family: Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 16px; + font-size: .8rem; + height: 20.8rem; margin: 0; - min-width: 200px; - overflow-x: hidden; - padding: 15px; + overflow: hidden; + width: 30rem; } -a { - color: #4a4a4a; +.header { + align-items: center; + background: linear-gradient(160deg, #32067c, #150233); + height: 4rem; + display: flex; } -a:focus { - outline: 0; +.header__link:focus { + outline: none; } -img { +.header__logo { + display: inline-block; + margin: .2rem 0 0 1.5rem; + -webkit-backface-visibility: hidden; + -webkit-transform: translateZ(0) scale(1.0, 1.0); + transform: translateZ(0); + height: 2rem; +} + +.container { + height: 15.8rem; + overflow: scroll; + padding: 1rem 1.5rem 0rem 1.5rem; +} + +.detected { + columns: 2; + column-gap: 1.5rem; + line-height: 1.4rem; +} + +.detected__category { + break-inside: avoid-column; + padding-bottom: 1rem; +} + +.detected__category-link { + border-bottom: 1px solid #dbdbdb; + display: block; + margin-bottom: .5rem; + text-decoration: none; +} + +.detected__category-name { + color: #4608ad; + display: block; + font-weight: bold; + line-height: 2rem; +} + +.detected__category-link:hover .detected__category-name { + color: #4a4a4a; +} + +.detected__app { + display: block; + line-height: 1.7rem; + text-decoration: none; +} + +.detected__app:focus { + display: block; + outline: 0; +} + +.detected__app-icon { display: inline-block; height: 16px; - margin-right: 8px; - vertical-align: top; + margin-right: .5rem; + vertical-align: -.2rem; width: 16px; } +.detected__app-name { + color: #4a4a4a; +} + +.detected__app:hover .detected__app-name { + border-bottom: 1px solid #4a4a4a; +} + .detected-app { padding: 7px 0; } @@ -39,40 +103,12 @@ img { padding-bottom: 0; } - .detected-app a { - color: #4608ad; - display: block; - text-decoration: none; - } - - .detected-app a .label .name { - border-bottom: 1px solid transparent; - } - - .detected-app a:hover .label .name { - border-bottom: 1px solid #4608ad; - } - - .detected-app a .category .name { - color: #4a4a4a; - border-bottom: 1px solid transparent; - } - - .detected-app a:hover .category .name { - border-bottom: 1px solid #4a4a4a; - } - -.label { - font-weight: bold; -} - -.category { - display: block; - margin: 5px 0 0 24px; +.empty { + display: flex; + height: 16rem; + align-items: center; + justify-content: center; } -.empty { - color: #999; - font-style: italic; - text-align: center; +.empty__text { } diff --git a/src/drivers/webextension/html/popup.html b/src/drivers/webextension/html/popup.html index 2f4e90ad2..1f17595cf 100644 --- a/src/drivers/webextension/html/popup.html +++ b/src/drivers/webextension/html/popup.html @@ -11,5 +11,12 @@
+