diff --git a/src/drivers/webextension/_locales/en/messages.json b/src/drivers/webextension/_locales/en/messages.json index ee08d95d9..470e55215 100644 --- a/src/drivers/webextension/_locales/en/messages.json +++ b/src/drivers/webextension/_locales/en/messages.json @@ -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." }, diff --git a/src/drivers/webextension/css/styles.css b/src/drivers/webextension/css/styles.css index 76fa5257d..230bbdb88 100644 --- a/src/drivers/webextension/css/styles.css +++ b/src/drivers/webextension/css/styles.css @@ -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); } diff --git a/src/drivers/webextension/html/options.html b/src/drivers/webextension/html/options.html index 63ce0694b..9b4efbeab 100644 --- a/src/drivers/webextension/html/options.html +++ b/src/drivers/webextension/html/options.html @@ -13,11 +13,7 @@
- + - +
diff --git a/src/drivers/webextension/html/popup.html b/src/drivers/webextension/html/popup.html index fc73a769e..409de1265 100644 --- a/src/drivers/webextension/html/popup.html +++ b/src/drivers/webextension/html/popup.html @@ -45,8 +45,8 @@
-
-
+
+
  diff --git a/src/drivers/webextension/js/popup.js b/src/drivers/webextension/js/popup.js index f7392e306..158b6551f 100644 --- a/src/drivers/webextension/js/popup.js +++ b/src/drivers/webextension/js/popup.js @@ -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') } }