Migrations
/
wappalyzer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI updates

Browse Source
main
Elbert Alias 4 years ago
parent a5bc69ce5b
commit 394deb55c8
3 changed files with 111 additions and 121 deletions
Show Stats Download Patch File Download Diff File

193
src/drivers/webextension/css/styles.css
Unescape View File

@ -1,8 +1,10 @@
:root { :root {
--color-primary: #4608ad; --color-primary: #4608ad;
--color-primary-darken: #32067c; --color-primary-darken: #32067c;
--color-secondary: #e0e0e0; --color-primary-lighten: #f4f1fa;
--color-secondary-dark: rgba(255, 255, 255, .2); --color-accent: #2196f3;
--color-secondary: #fafafa;
--color-secondary-darken: #f5f5f5;
--color-text: #4a4a4a; --color-text: #4a4a4a;
--color-text-dark: rgba(255, 255, 255, .8); --color-text-dark: rgba(255, 255, 255, .8);
--color-light-grey: #fafafa; --color-light-grey: #fafafa;
@ -22,26 +24,17 @@ body {
margin: 0; margin: 0;
min-width: 24rem; min-width: 24rem;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 3rem;
} }
a { a, a:focus, a:hover {
color: var(--color-primary); color: var(--color-accent);
outline: none;
text-decoration: none;
}
a:focus {
outline: none; outline: none;
}
a:hover {
text-decoration: underline; text-decoration: underline;
} }
.header { .header {
align-items: center; align-items: center;
border-bottom: 1px solid var(--color-secondary); background: var(--color-primary);
display: flex; display: flex;
height: 4.5rem; height: 4.5rem;
justify-content: space-between; justify-content: space-between;
@ -53,12 +46,12 @@ a:hover {
margin-top: .5rem; margin-top: .5rem;
} }
.header__logo--dark { .header__logo--light {
display: none; display: none;
} }
.header__icon { .header__icon {
color: var(--color-primary); color: #fff;
cursor: pointer; cursor: pointer;
height: 1.1rem; height: 1.1rem;
margin-left: 1rem; margin-left: 1rem;
@ -75,52 +68,53 @@ a:hover {
display: none; display: none;
} }
.header__switch--disabled {
color: var(--color-text);
}
.spacer { .spacer {
flex-grow:1; flex-grow: 1;
} }
.footer { .footer {
align-items: center; background: var(--color-primary-lighten);
background: #fff;
bottom: 0; bottom: 0;
border-top: 1px solid var(--color-secondary);
font-size: .8rem;
height: 3rem;
display: flex; display: flex;
padding: 0 1.5rem; flex-direction: column;
position: fixed; color: var(--color-primary);
padding: 1rem;
width: 100%; width: 100%;
} }
.footer__links { .footer__heading {
white-space: nowrap; font-weight: bold;
}
.footer__link {
display: inline-block;
padding: 0 .3rem;
} }
.footer__link:first-child { .footer__content {
padding-left: 0; font-size: .85rem;
letter-spacing: .5px;
flex: 1 0 auto;
opacity: .7;
max-width: 400px;
} }
.footer__link a { .footer__button, .footer__button:active, .footer__button:hover {
border-bottom: 1px solid var(--color-secondary); color: var(--color-primary);
display: block;
font-size: .85rem;
font-weight: bold;
margin-top: .5rem;
text-decoration: none; text-decoration: none;
text-align: right;
} }
.footer__link a:hover { .footer__icon {
border-bottom: 1px solid var(--color-primary); height: 1.2rem;
margin: 0 .2rem .2rem 0;
width: 1.2rem;
vertical-align: middle;
} }
.detections { .detections {
columns: 2; columns: 2;
column-gap: 3rem; column-gap: 3rem;
min-height: 200px;
padding: 1.5rem 1.5rem .5rem 1.5rem; padding: 1.5rem 1.5rem .5rem 1.5rem;
} }
@ -129,8 +123,8 @@ a:hover {
} }
.empty { .empty {
opacity: .3; opacity: .8;
padding: 3rem 1.5rem 2.5rem 1.5rem; padding: 5rem 1.5rem 4.5rem 1.5rem;
text-align: center; text-align: center;
} }
@ -144,14 +138,18 @@ a:hover {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.category__link { .category__link, .category__link:active, .category__link:hover {
color: var(--color-text);
font-weight: bold; font-weight: bold;
line-height: 2rem; line-height: 2rem;
text-decoration: none; text-decoration: none;
} }
.category__link:active, .category__link:hover {
text-decoration: underline;
}
.category__pin { .category__pin {
color: var(--color-primary);
cursor: pointer; cursor: pointer;
display: none; display: none;
visibility: hidden; visibility: hidden;
@ -160,19 +158,19 @@ a:hover {
width: 1.1rem; width: 1.1rem;
} }
.category__pin--outline { body.dynamic-icon .category__pin--outline {
display: inline; display: inline;
} }
.category__pin--active { body.dynamic-icon .category__pin--active {
visibility: visible; visibility: visible;
} }
.category__pin.category__pin--active { body.dynamic-icon .category__pin.category__pin--active {
display: inline display: inline
} }
.category__pin--outline.category__pin--active { body.dynamic-icon .category__pin--outline.category__pin--active {
display: none display: none
} }
@ -180,13 +178,13 @@ a:hover {
white-space: nowrap; white-space: nowrap;
} }
.category__heading:hover .category__pin { body.dynamic-icon .category__heading:hover .category__pin {
visibility: visible; visibility: visible;
} }
.technology { .technology {
display: block; display: block;
line-height: 1.7rem; line-height: 1.2rem;
} }
.technology__heading { .technology__heading {
@ -196,29 +194,36 @@ a:hover {
} }
.technology__icon { .technology__icon {
height: 16px; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
background-color: var(--color-secondary);
border-radius: 50%;
flex: 0 0 auto;
display: inline-flex;
height: 32px;
margin-right: .5rem; margin-right: .5rem;
width: 16px; width: 32px;
vertical-align: middle;
} }
.technology__link { .technology__icon img {
color: var(--color-text);
display: block; display: block;
width: 100%; height: 16px;
} margin: auto;
width: 16px;
.technology__link .technology__name { vertical-align: middle;
border-bottom: 1px solid var(--color-secondary);
} }
.technology__link:hover { .technology__link, .technology__link:active, .technology__link:hover {
align-items: center;
display: flex;
padding: .1rem 0;
text-decoration: none; text-decoration: none;
width: 100%;
} }
.technology__link:hover .technology__name { .technology__name {
border-bottom: 1px solid var(--color-primary); font-size: .85rem;
color: var(--color-primary); letter-spacing: .5px;
text-decoration: underline;
} }
.technology__confidence { .technology__confidence {
@ -228,11 +233,12 @@ a:hover {
} }
.technology__version { .technology__version {
background: var(--color-secondary); background: var(--color-secondary-darken);
color: var(--color-text);
border-radius: 3px; border-radius: 3px;
font-size: .7rem; font-size: .7rem;
padding: .1rem .3rem; padding: .2rem .3rem .1rem .3rem;
margin-left: .2rem; margin-left: .5rem;
vertical-align: middle; vertical-align: middle;
} }
@ -312,60 +318,29 @@ a:hover {
color: var(--color-text-dark); color: var(--color-text-dark);
} }
.theme-mode a { body.theme-mode .category__link, .category__link:active, .category__link:hover {
color: var(--color-text-dark); color: var(--color-text-dark);
} }
.theme-mode .header { body.theme-mode .technology__link {
border-color: var(--color-secondary-dark)
}
.theme-mode .header__logo {
display: none;
}
.theme-mode .header__logo--dark {
display: inline-block;
}
.theme-mode .header__settings {
color: var(--color-text-dark); color: var(--color-text-dark);
} }
.theme-mode .header__icon { body.theme-mode .technology__icon {
color: #fff; background: var(--color-primary);
}
.theme-mode .category__link {
color: #fff;
}
.theme-mode .category__pin {
color: #fff
} }
.theme-mode .technology__link:hover .technology__name { body.theme-mode .technology__version {
border-bottom: 1px solid var(--color-text-dark); background: var(--color-primary);
color: var(--color-text-dark); color: var(--color-text-dark);
} }
.theme-mode .technology__confidence { body.theme-mode .footer {
}
.theme-mode .technology__version {
background: var(--color-primary); background: var(--color-primary);
color: var(--color-text-dark);
} }
.theme-mode .footer { body.theme-mode .footer__button {
background: var(--color-primary-darken); color: var(--color-text-dark);
border-color: var(--color-secondary-dark)
}
.theme-mode .footer__open-in-new {
color: #fff;
}
.theme-mode .technology__open-in-new {
color: #fff;
} }
} }

30
src/drivers/webextension/html/popup.html
Unescape View File

@ -72,7 +72,9 @@
<div data-template="technology" class="technology"> <div data-template="technology" class="technology">
<div class="technology__heading"> <div class="technology__heading">
<a class="technology__link" href="#"> <a class="technology__link" href="#">
<img class="technology__icon" alt="" src="../images/icons/default.svg" /> <div class="technology__icon">
<img alt="" src="../images/icons/default.svg" />
</div>
<span class="technology__name">&nbsp;</span> <span class="technology__name">&nbsp;</span>
@ -86,17 +88,23 @@
</div> </div>
<div class="footer"> <div class="footer">
<div class="footer__links"> <div class="footer__heading">
<span class="footer__link"> Generate sales leads
<a href="https://www.wappalyzer.com/lead-generation/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer">Lead generation</a>
</span> &centerdot;
<span class="footer__link">
<a href="https://www.wappalyzer.com/download/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer">CRM integration</a>
</span> &centerdot;
<span class="footer__link">
<a href="https://www.wappalyzer.com/api/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer">API</a>
</span>
</div> </div>
<div class="footer__content">
<p>
Find new prospects by the technologies they use. Reach out to customers of Shopify, Magento, Salesforce and others.
</p>
</div>
<a class="footer__button" href="https://www.wappalyzer.com/lists/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer">
<svg class="footer__icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z" />
</svg>
Create a lead list
</a>
</div> </div>
</body> </body>
</html> </html>

9
src/drivers/webextension/js/popup.js
Unescape View File

@ -46,6 +46,13 @@ const Popup = {
return templates return templates
}, {}) }, {})
// Disabled domains
const dynamicIcon = await getOption('dynamicIcon', false)
if (dynamicIcon) {
document.querySelector('body').classList.add('dynamic-icon')
}
// Disabled domains // Disabled domains
let disabledDomains = await getOption('disabledDomains', []) let disabledDomains = await getOption('disabledDomains', [])
@ -249,7 +256,7 @@ const Popup = {
({ name, slug, confidence, version, icon, website }) => { ({ name, slug, confidence, version, icon, website }) => {
const technologyNode = Popup.templates.technology.cloneNode(true) const technologyNode = Popup.templates.technology.cloneNode(true)
const image = technologyNode.querySelector('.technology__icon') const image = technologyNode.querySelector('.technology__icon img')
image.src = `../images/icons/${icon}` image.src = `../images/icons/${icon}`

Write Preview
Loading…
Cancel
Save