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

UI updates

Browse Source
main
Elbert Alias 4 years ago
parent fd619684fd
commit df6fb2ec54
5 changed files with 104 additions and 71 deletions
Show Stats Download Patch File Download Diff File

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

@ -2,12 +2,10 @@
--color-primary: #4608ad;
--color-primary-darken: #32067c;
--color-primary-lighten: #f4f1fa;
--color-accent: #2196f3;
--color-secondary: #fafafa;
--color-secondary-darken: #f5f5f5;
--color-text: #4a4a4a;
--color-text-dark: rgba(255, 255, 255, .8);
--color-light-grey: #fafafa;
--color-text-dark: var(--color-primary-lighten);
}
* {
@ -26,7 +24,7 @@ body {
}
a, a:focus, a:hover {
color: var(--color-accent);
color: var(--color-primary);
outline: none;
text-decoration: underline;
}
@ -58,6 +56,10 @@ a, a:focus, a:hover {
width: 1.1rem;
}
.header__icon--hidden {
display: none;
}
.header__switch {
height: 1.5rem;
width: 1.5rem;
@ -159,7 +161,7 @@ a, a:focus, a:hover {
.footer__button-link:hover:before {
background: var(--color-primary);
border-radius: 3px;
border-radius: 4px;
content: '';
position: absolute;
top: 0;
@ -285,6 +287,7 @@ body.dynamic-icon .category__heading:hover .category__pin {
.technology__link, .technology__link:active, .technology__link:hover {
align-items: center;
display: flex;
overflow: hidden;
padding: .1rem 0;
text-decoration: none;
width: 200px;
@ -383,51 +386,59 @@ body.dynamic-icon .category__heading:hover .category__pin {
margin-top: 1rem;
}
@media (prefers-color-scheme: dark) {
body.theme-mode {
background: var(--color-primary-darken);
color: var(--color-text-dark);
}
body.theme-mode .category__link, body.theme-mode .category__link:active, body.theme-mode .category__link:hover {
color: var(--color-text-dark);
}
body.theme-mode .technology__link {
color: var(--color-text-dark);
}
body.theme-mode .technology__icon {
background: var(--color-primary);
}
body.theme-mode .technology__version {
background: var(--color-primary);
color: var(--color-text-dark);
}
body.theme-mode .technology__confidence {
background: var(--color-primary);
color: var(--color-text-dark);
}
body.theme-mode .footer {
background: var(--color-primary);
color: var(--color-text-dark);
}
body.theme-mode .footer__button {
color: var(--color-text-dark);
}
body.theme-mode .terms__button {
background-color: white;
color: var(--color-primary);
}
body.theme-mode .terms__button--decline {
background-color: var(--color-primary-darken);
border: 1px solid white;
color: white;
}
/* Dark mode */
.dark {
background: var(--color-primary-darken);
color: var(--color-text-dark);
}
.dark .category__link, .dark .category__link:active, .dark .category__link:hover {
color: var(--color-text-dark);
}
.dark .technology__link {
color: var(--color-text-dark);
}
.dark .technology__name {
opacity: .8;
}
.dark .technology__icon {
}
.dark .technology__version {
background: var(--color-primary);
color: var(--color-text-dark);
}
.dark .technology__confidence {
background: var(--color-primary);
color: var(--color-text-dark);
}
.dark .footer {
background: var(--color-primary);
color: var(--color-text-dark);
}
.dark .footer__button-link, .dark .footer__button-link:active, .dark .footer__button-link:hover {
color: var(--color-text-dark);
}
.dark .footer__button-link:hover:before {
background: var(--color-primary-lighten);
}
.dark .terms__button {
background-color: white;
color: var(--color-primary);
}
.dark .terms__button--decline {
background-color: var(--color-primary-darken);
border: 1px solid white;
color: white;
}

6
src/drivers/webextension/html/options.html
Unescape View File

@ -37,12 +37,6 @@
<span data-i18n="optionTracking">&nbsp;</span>
</label>
<label class="options__label">
<input class="options__checkbox" type="checkbox">
<span data-i18n="optionThemeMode">&nbsp;</span>
</label>
<button data-i18n="clearCache" class="options__cache">&nbsp;</button>
</div>
</body>

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

@ -34,6 +34,14 @@
<title data-i18n="options"></title>
<path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
</svg>
<svg class="header__theme header__theme--dark header__icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
</svg>
<svg class="header__theme header__theme--light header__icon header__icon--hidden" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z" />
</svg>
</div>
<div class="empty" data-i18n="noAppsDetected"></div>
@ -97,7 +105,7 @@
</svg>
</div>
<div class="footer__toggle footer__toggle--open footer__toggle--hidden">
<svg class="footer__icon"viewBox="0 0 24 24">
<svg class="footer__icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</div>

8
src/drivers/webextension/js/options.js
Unescape View File

@ -9,13 +9,6 @@ const Options = {
* Initialise options
*/
async init() {
// Theme mode
const themeMode = await getOption('themeMode', false)
if (themeMode) {
document.querySelector('body').classList.add('theme-mode')
}
const termsAccepted =
agent === 'chrome' || (await getOption('termsAccepted', false))
@ -24,7 +17,6 @@ const Options = {
['dynamicIcon', false],
['badge', true],
['tracking', true],
['themeMode', false],
].map(async ([option, defaultValue]) => {
const el = document
.querySelector(

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

@ -85,11 +85,17 @@ const Popup = {
// Disabled domains
let disabledDomains = await getOption('disabledDomains', [])
// Theme mode
const themeMode = await getOption('themeMode', false)
// Dark mode
const theme = await getOption('theme', 'light')
if (themeMode) {
document.querySelector('body').classList.add('theme-mode')
if (theme === 'dark') {
document.querySelector('body').classList.add('dark')
document
.querySelector('.header__theme--light')
.classList.remove('header__icon--hidden')
document
.querySelector('.header__theme--dark')
.classList.add('header__icon--hidden')
}
// Terms
@ -183,6 +189,28 @@ const Popup = {
.querySelector('.header__settings')
.addEventListener('click', () => chrome.runtime.openOptionsPage())
// Theme
const body = document.querySelector('body')
const dark = document.querySelector('.header__theme--dark')
const light = document.querySelector('.header__theme--light')
document.querySelectorAll('.header__theme').forEach((el) =>
el.addEventListener('click', async () => {
const theme = await getOption('theme', 'light')
body.classList[theme === 'dark' ? 'remove' : 'add']('dark')
body.classList[theme === 'dark' ? 'add' : 'remove']('light')
dark.classList[theme === 'dark' ? 'remove' : 'add'](
'header__icon--hidden'
)
light.classList[theme === 'dark' ? 'add' : 'remove'](
'header__icon--hidden'
)
await setOption('theme', theme === 'dark' ? 'light' : 'dark')
})
)
// Footer
const item = footers[Math.round(Math.random() * (footers.length - 1))]