[tbb-commits] [tor-browser] 30/33: fixup! squash! Bug 27476: Implement about:torconnect captive portal within Tor Browser

Tue May 3 22:40:38 UTC 2022

This is an automated email from the git hooks/post-receive script.

richard pushed a commit to branch tor-browser-91.9.0esr-11.5-1
in repository tor-browser.

commit 7ffad04403bb9150698bde633ef06ce6c2145763
Author: Pier Angelo Vendrame <pierov at torproject.org>
AuthorDate: Tue Apr 26 12:56:55 2022 +0200

    fixup! squash! Bug 27476: Implement about:torconnect captive portal within Tor Browser
    
    Improved the progressbar style
---
 .../torconnect/content/aboutTorConnect.css         | 59 +++++++++++++++++-----
 .../torconnect/content/aboutTorConnect.js          |  2 +-
 .../torconnect/content/aboutTorConnect.xhtml       |  5 +-
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/browser/components/torconnect/content/aboutTorConnect.css b/browser/components/torconnect/content/aboutTorConnect.css
index a8cc2676428af..664a0f534835b 100644
--- a/browser/components/torconnect/content/aboutTorConnect.css
+++ b/browser/components/torconnect/content/aboutTorConnect.css
@@ -203,31 +203,62 @@ input[type="checkbox"]:not(:disabled):active:checked {
 }
 
 :root {
-  --progressbar-shadow-start: rgba(255, 255, 255, 0.85);
+  --progressbar-shadow-start: rgba(255, 255, 255, 0.7);
+  --progressbar-gradient: linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%);
 }
 
 @media (-moz-toolbar-prefers-color-scheme: dark) {
   :root {
-    --progressbar-shadow-start: rgba(28, 27, 34, 0.85);
+    --progressbar-shadow-start: rgba(28, 27, 34, 0.7);
   }
 }
 
-#progressBackground {
-  position:fixed;
-  padding:0;
-  margin:0;
-  top:0;
-  left:0;
+#progressBar {
+  position: fixed;
+  top: 0;
+  inset-inline-start: 0;
   width: 0%;
-  height: 40px;
-  background-image:
-    linear-gradient(transparent 17.5%, var(--progressbar-shadow-start) 17.5%, var(--in-content-page-background) 100%),
-    linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%);
-  background-size: 100%, 200%;
-  border-radius: 0;
+  padding: 0;
+  margin: 0;
   animation: progressAnimation 5s ease infinite;
 }
 
+#progressBackground {
+  height: 66px;
+  margin-top: -26px;
+  background-image:
+    linear-gradient(var(--progressbar-shadow-start), var(--in-content-page-background) 100%),
+    var(--progressbar-gradient);
+  background-position: inherit;
+  filter: blur(5px);
+  border-end-end-radius: 33px;
+}
+
+#progressSolid {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 7px;
+  background-image: var(--progressbar-gradient);
+  background-position: inherit;
+}
+
+#progressBackground, #progressSolid {
+  background-size: 200% 100%;
+}
+
+ at keyframes progressAnimation {
+  0% {
+    background-position: 200%;
+  }
+  50% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: 0%;
+  }
+}
+
 @keyframes progressAnimation {
   0% {
     background-position: 200%;
diff --git a/browser/components/torconnect/content/aboutTorConnect.js b/browser/components/torconnect/content/aboutTorConnect.js
index 506b125e8b98f..162133ee5f12f 100644
--- a/browser/components/torconnect/content/aboutTorConnect.js
+++ b/browser/components/torconnect/content/aboutTorConnect.js
@@ -33,7 +33,7 @@ class AboutTorConnect {
     },
     progress: {
       description: "p#connectShortDescText",
-      meter: "div#progressBackground",
+      meter: "div#progressBar",
     },
     breadcrumbs: {
       container: "#breadcrumbs",
diff --git a/browser/components/torconnect/content/aboutTorConnect.xhtml b/browser/components/torconnect/content/aboutTorConnect.xhtml
index 674029fdeda34..77d2e68895708 100644
--- a/browser/components/torconnect/content/aboutTorConnect.xhtml
+++ b/browser/components/torconnect/content/aboutTorConnect.xhtml
@@ -7,7 +7,10 @@
     <link rel="stylesheet" href="chrome://browser/content/torconnect/aboutTorConnect.css" type="text/css" media="all" />
   </head>
   <body>
-    <div id="progressBackground"></div>
+    <div id="progressBar">
+      <div id="progressBackground" />
+      <div id="progressSolid" />
+    </div>
     <div id="connectPageContainer" class="container">
       <div id="breadcrumbs" class="hidden">
         <span id="connect-to-tor" class="breadcrumb-item">

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.
