[tbb-commits] [tor-browser/tor-browser-91.4.0esr-11.5-1] fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser

[gk at torproject.org]

commit 866638f5b6e1973308ccaf5badf0a14f966430bc
Author: Richard Pospesel <richard at torproject.org>
Date:   Tue Dec 7 11:16:46 2021 +0100

    fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
    
    Closes: tor-browser#40691.
---
 .../torconnect/content/aboutTorConnect.css         | 41 ++++++++++++++++------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/browser/components/torconnect/content/aboutTorConnect.css b/browser/components/torconnect/content/aboutTorConnect.css
index 460ecb511fde..14a3df2a59be 100644
--- a/browser/components/torconnect/content/aboutTorConnect.css
+++ b/browser/components/torconnect/content/aboutTorConnect.css
@@ -24,30 +24,51 @@
   }
 }
 
-/* override firefox's default blue border on hover */
-input[type="checkbox"]:not(:disabled):hover {
-  border-color: var(--purple-70);
+#connectButton {
+  background-color: var(--purple-60)!important;
+  color: white;
+  fill: white;
+}
+
+#connectButton:hover {
+  background-color: var(--purple-70)!important;
+  color: white;
+  fill: white;
+}
+
+#connectButton:active {
+  background-color: var(--purple-80)!important;
+  color: white;
+  fill: white;
 }
 
-#connectButton,
+/* checkbox css */
 input[type="checkbox"]:not(:disabled) {
+  background-color: var(--grey-20)!important;
+}
+
+input[type="checkbox"]:not(:disabled):checked {
   background-color: var(--purple-60)!important;
   color: white;
   fill: white;
 }
 
-#connectButton:hover,
 input[type="checkbox"]:not(:disabled):hover {
+  /* override firefox's default blue border on hover */
+  border-color: var(--purple-70);
+  background-color: var(--grey-30)!important;
+}
+
+input[type="checkbox"]:not(:disabled):hover:checked {
   background-color: var(--purple-70)!important;
-  color: white;
-  fill: white;
 }
 
-#connectButton:active,
 input[type="checkbox"]:not(:disabled):active {
+  background-color: var(--grey-40)!important;
+}
+
+input[type="checkbox"]:not(:disabled):active:checked {
   background-color: var(--purple-80)!important;
-  color: white;
-  fill: white;
 }
 
 #progressBackground {