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@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%; +} + +@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">