Minor UI tweaks

main
Elbert Alias 3 years ago
parent 40fe819220
commit 6fe8ea4ce3

@ -25,7 +25,7 @@
"createAlert": { "message": "Create an alert for this website" }, "createAlert": { "message": "Create an alert for this website" },
"leadLists": { "message": "Lead generation tools" }, "leadLists": { "message": "Lead generation tools" },
"tabTechnologies": { "message": "Technologies" }, "tabTechnologies": { "message": "Technologies" },
"tabPro": { "message": "Pro" }, "tabPro": { "message": "More info" },
"creditBalance": { "message": "Credit balance:" }, "creditBalance": { "message": "Credit balance:" },
"proMessageHeading": { "message": "Unlock PRO features" }, "proMessageHeading": { "message": "Unlock PRO features" },
"proMessage": { "message": "Subscribe to a PRO plan to view company and contact information of the websites you visit." }, "proMessage": { "message": "Subscribe to a PRO plan to view company and contact information of the websites you visit." },

@ -193,9 +193,15 @@ small {
text-transform: uppercase; text-transform: uppercase;
} }
.tab--disabled {
opacity: .5;
pointer-events: none;
}
.tab--active { .tab--active {
border-bottom: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
pointer-events: none;
} }
.tab-item { .tab-item {
@ -662,7 +668,8 @@ body.dynamic-icon .category__heading:hover .category__pin {
} }
.options { .options {
background: white; background: var(--color-secondary);
color: var(--color-text);
padding: 1.5rem 1.5rem 1rem 1.5rem; padding: 1.5rem 1.5rem 1rem 1.5rem;
} }
@ -671,16 +678,34 @@ body.dynamic-icon .category__heading:hover .category__pin {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.options__checkbox {
margin: 0 .5rem 0 5px;
vertical-align: middle;
}
.options__input { .options__input {
border: 1px solid var(--color-text); border: 1px solid var(--color-primary);
border-radius: 4px; border-radius: 4px;
padding: .5rem; color: var(--color-text);
margin: .2rem 0 .5rem 0; padding: .7rem .5rem;
margin-top: .4rem;
width: 100%; width: 100%;
} }
.options__cache { .options__cache {
margin-top: 1rem; background: var(--color-primary);
border: none;
border-radius: 4px;
color: var(--color-text-dark);
cursor: pointer;
font-size: .85rem;
font-weight: bold;
padding: .8rem 1.5rem;
margin-bottom: 1.5rem;
}
.options__cache:active {
opacity: .9;
} }
.ttt-game { .ttt-game {
@ -848,6 +873,10 @@ body.dynamic-icon .category__heading:hover .category__pin {
opacity: .8; opacity: .8;
} }
.dark .tab--disabled {
opacity: .5;
}
.dark .tab--active { .dark .tab--active {
border-color: var(--color-text-dark); border-color: var(--color-text-dark);
opacity: 1; opacity: 1;
@ -879,10 +908,6 @@ body.dynamic-icon .category__heading:hover .category__pin {
opacity: .8; opacity: .8;
} }
.dark .panel__content tr:hover td {
opacity: 1;
}
.dark .panel__content td div { .dark .panel__content td div {
border-color: var(--color-primary); border-color: var(--color-primary);
} }

@ -13,11 +13,7 @@
</head> </head>
<body> <body>
<div class="options"> <div class="options">
<label class="options__label"> <button data-i18n="clearCache" class="options__cache">&nbsp;</button>
<span data-i18n="optionApiKey">&nbsp;</span>
<input class="options__input" type="password">
</label>
<label class="options__label"> <label class="options__label">
<input class="options__checkbox" type="checkbox"> <input class="options__checkbox" type="checkbox">
@ -49,7 +45,11 @@
<span data-i18n="optionTracking">&nbsp;</span> <span data-i18n="optionTracking">&nbsp;</span>
</label> </label>
<button data-i18n="clearCache" class="options__cache">&nbsp;</button> <label class="options__label">
<span data-i18n="optionApiKey">&nbsp;</span>
<input class="options__input" type="password">
</label>
</div> </div>
</body> </body>
</html> </html>

@ -45,8 +45,8 @@
</div> </div>
<div class="tabs"> <div class="tabs">
<div class="tab tab--active" data-i18n="tabTechnologies"></div> <div class="tab tab--technologies tab--active" data-i18n="tabTechnologies"></div>
<div class="tab" data-i18n="tabPro"></div> <div class="tab tab--pro" data-i18n="tabPro"></div>
<div class="credits credits--hidden"> <div class="credits credits--hidden">
<span data-i18n="creditBalance">&nbsp;</span> <span data-i18n="creditBalance">&nbsp;</span>

@ -184,6 +184,8 @@ const Popup = {
for (const el of document.querySelectorAll('.header__switch')) { for (const el of document.querySelectorAll('.header__switch')) {
el.classList.add('header__switch--hidden') el.classList.add('header__switch--hidden')
} }
document.querySelector('.tab--pro').classList.add('tab--disabled')
} }
} }