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" },
"leadLists": { "message": "Lead generation tools" },
"tabTechnologies": { "message": "Technologies" },
"tabPro": { "message": "Pro" },
"tabPro": { "message": "More info" },
"creditBalance": { "message": "Credit balance:" },
"proMessageHeading": { "message": "Unlock PRO features" },
"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;
}
.tab--disabled {
opacity: .5;
pointer-events: none;
}
.tab--active {
border-bottom: 2px solid var(--color-primary);
color: var(--color-primary);
pointer-events: none;
}
.tab-item {
@ -662,7 +668,8 @@ body.dynamic-icon .category__heading:hover .category__pin {
}
.options {
background: white;
background: var(--color-secondary);
color: var(--color-text);
padding: 1.5rem 1.5rem 1rem 1.5rem;
}
@ -671,16 +678,34 @@ body.dynamic-icon .category__heading:hover .category__pin {
margin-bottom: 1rem;
}
.options__checkbox {
margin: 0 .5rem 0 5px;
vertical-align: middle;
}
.options__input {
border: 1px solid var(--color-text);
border: 1px solid var(--color-primary);
border-radius: 4px;
padding: .5rem;
margin: .2rem 0 .5rem 0;
color: var(--color-text);
padding: .7rem .5rem;
margin-top: .4rem;
width: 100%;
}
.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 {
@ -848,6 +873,10 @@ body.dynamic-icon .category__heading:hover .category__pin {
opacity: .8;
}
.dark .tab--disabled {
opacity: .5;
}
.dark .tab--active {
border-color: var(--color-text-dark);
opacity: 1;
@ -879,10 +908,6 @@ body.dynamic-icon .category__heading:hover .category__pin {
opacity: .8;
}
.dark .panel__content tr:hover td {
opacity: 1;
}
.dark .panel__content td div {
border-color: var(--color-primary);
}

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

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

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