Replace uikit with css on before-navigate

Also fix formatting
FastForwardTeam · Apr 29, 2023 · 395f672 · 395f672
1 parent 57e01e6
commit 395f672
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 51 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 {
-    "singleQuote": true
+    "singleQuote": true,
+    "bracketSameLine": true
   }
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -30,7 +30,7 @@
 		"message": "Options"
 	},
 	"optionsLink": {
-		"message": "Change FastForward' options."
+		"message": "Change FastForward's options."
 	},
 	"optionsEnabled": {
 		"message": "Enable website bypasses."

diff --git a/src/html/base.js b/src/html/base.js
@@ -3,6 +3,3 @@ document.documentElement.setAttribute(
   'dir',
   brws.i18n.getMessage('@@bidi_dir')
 );
-if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-  document.documentElement.className = 'uk-light uk-background-secondary';
-}
diff --git a/src/html/before-navigate.html b/src/html/before-navigate.html
@@ -4,24 +4,24 @@
     <title data-message="beforeNavigate"></title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
     <script src="./base.js"></script>
   </head>
   <body>
-    <div class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right">
-      <h1 data-message="beforeNavigate"></h1>
+    <section>
+      <h2 data-message="beforeNavigate"></h2>
       <p id="destination"></p>
-      <div id="timer" class="uk-alert uk-alert-primary uk-hidden">
+      <div id="timer">
         <p></p>
       </div>
       <p id="options-link">
         <span data-message="beforeNavigateOptions"></span>
         <a
           href="options.html#option-navigation-delay"
           target="_blank"
-          data-message="optionsLink"
-        ></a>
+          data-message="optionsLink"></a>
       </p>
-    </div>
+    </section>
 
     <script src="./i18n.js"></script>
     <script src="./before-navigate.js"></script>

diff --git a/src/html/before-navigate.js b/src/html/before-navigate.js
@@ -20,9 +20,9 @@ function escapeHtml(unsafe) {
 const destinationElement = document.querySelector('#destination');
 destinationElement.innerHTML = brws.i18n.getMessage(
   'beforeNavigateDestination',
-  `<a href="${escapeHtml(targetUrl)}"><code> ${escapeHtml(
+  `<br><a href="${escapeHtml(
     targetUrl
-  )} </a></code>`
+  )}" class="link link-preview"><code> ${escapeHtml(targetUrl)} </a></code>`
 );
 
 brws.storage.local.get('options', (result) => {

diff --git a/src/html/crowd-bypassed.html b/src/html/crowd-bypassed.html
@@ -4,29 +4,31 @@
     <title data-message="crowdBypassed"></title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
     <script src="base.js"></script>
   </head>
   <body>
-    <div class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right">
-      <h1 data-message="crowdBypassed"></h1>
+    <section>
+      <h2 data-message="crowdBypassed"></h1>
       <p id="crowd-bypass-info"></p>
-      <div id="timer" class="uk-alert uk-alert-primary uk-hidden">
+      <div id="timer">
         <p></p>
       </div>
       <p data-message="tempDisableCrowdBypassDesc"></p>
       <button id="temp-disable-crowd">
         <span data-message="tempDisableCrowdBypassButton"></span>
       </button>
       <br />
-      <p>
+      <p id="options-link">
         <span data-message="crowdBypassedOptions"></span>
         <a
           href="options.html#option-crowd-open-delay"
           target="_blank"
-          data-message="optionsLink"
-        ></a>
+          data-message="optionsLink"></a>
       </p>
-    </div>
+
+    </section>
+
     <script src="i18n.js"></script>
     <script src="crowd-bypassed.js"></script>
   </body>

diff --git a/src/html/crowd-bypassed.js b/src/html/crowd-bypassed.js
@@ -20,7 +20,9 @@ function escapeHtml(unsafe) {
 function updateDestinationMessage() {
   let msg = brws.i18n.getMessage(
     'crowdBypassedInfo',
-    '<a><code>'.concat(escapeHtml(targetUrl), '</a></code>')
+    `<br><a href="${escapeHtml(
+      targetUrl
+    )}" class="link link-preview"><code> ${escapeHtml(targetUrl)} </a></code>`
   );
   document.querySelector('#crowd-bypass-info').innerHTML = msg;
 }
@@ -36,6 +38,7 @@ tempDisableCrowdButton.addEventListener('click', () => {
     brws.storage.local.set({ tempDisableCrowd: 'true' });
     // Create an alarm that will trigger after 10 minutes
     brws.alarms.create('enableCrowdBypass', { delayInMinutes: 10 });
+    history.back();
   });
 });
 

diff --git a/src/html/options.html b/src/html/options.html
@@ -24,7 +24,7 @@
           <a href="https://discord.gg/RSAf7b5njt" target="_blank" data-message="support"></a>
         </p>
       </div>
-      <form id="options-form" style="font-size: 1rem">
+      <form id="options-form">
         <section>
           <h2 data-message="options"></h2>
           <label class="ffInput"><input type="checkbox" id="navigationDelayToggle"><span class="checkmark"></span></label>

diff --git a/src/html/style.css b/src/html/style.css
@@ -1,12 +1,12 @@
 * {
-  font-family: "Montserrat", sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 :root {
-  --ff-aqua: #00C0FA;
-  --ff-blue: #4261ED;
-  --ff-purple: #6717CC;
-  --ff-lightred: #FF4D4D;
+  --ff-aqua: #00c0fa;
+  --ff-blue: #4261ed;
+  --ff-purple: #6717cc;
+  --ff-lightred: #ff4d4d;
   --ff-lightpurplebg: rgb(194, 162, 235);
   --ff-text: #fff;
   --ff-background: #111;
@@ -18,13 +18,14 @@
 }
 
 body {
-  background-color: var(--ff-background);;
+  background-color: var(--ff-background);
   margin: 0px;
   padding: 0px;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   color: var(--ff-text);
+  font-size: 1rem;
 }
 
 /*================header css================*/
@@ -49,7 +50,13 @@ body {
 
 nav {
   background-color: var(--ff-module-background);
-  border-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 50%, var(--ff-purple) 100%) 0 0 1 0;
+  border-image: linear-gradient(
+      135deg,
+      var(--ff-aqua) 0%,
+      var(--ff-blue) 50%,
+      var(--ff-purple) 100%
+    )
+    0 0 1 0;
   border-bottom: 3px solid;
   justify-content: space-between;
   height: 89px;
@@ -63,14 +70,15 @@ nav ul {
   padding-right: 15px;
 }
 
-nav .spacer{
+nav .spacer {
   flex: 1;
 }
 
-nav a {
+nav a,
+#options-link > a {
   color: var(--ff-link);
   text-decoration: none;
-  transition: color .15s ease-in-out;
+  transition: color 0.15s ease-in-out;
   font-weight: 600;
   padding: 10px;
   font-size: 1rem;
@@ -84,19 +92,19 @@ nav a.active {
   color: var(--ff-text);
 }
 
-nav a.active:hover {
+nav a.active {
   color: var(--ff-text);
 }
 
-nav a:hover {
+nav a:hover,
+#options-link > a:hover {
   color: var(--ff-link-hover);
 }
 
 nav a:hover:disabled {
   color: var(--ff-link);
 }
 
-
 /*=================content css================*/
 
 section {
@@ -112,7 +120,12 @@ section {
 
 h1 {
   font-size: calc(150% + 3vw);
-  background-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 50%, var(--ff-purple) 100%);
+  background-image: linear-gradient(
+    135deg,
+    var(--ff-aqua) 0%,
+    var(--ff-blue) 50%,
+    var(--ff-purple) 100%
+  );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -125,7 +138,12 @@ h1 {
 
 h2 {
   font-size: calc(100% + 2vw);
-  background-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 50%, var(--ff-purple) 100%);
+  background-image: linear-gradient(
+    135deg,
+    var(--ff-aqua) 0%,
+    var(--ff-blue) 50%,
+    var(--ff-purple) 100%
+  );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -145,14 +163,25 @@ h2 {
 
 .ffInput {
   border: 2px solid;
-  border-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 50%, var(--ff-purple) 100%) 1;
+  border-image: linear-gradient(
+      135deg,
+      var(--ff-aqua) 0%,
+      var(--ff-blue) 50%,
+      var(--ff-purple) 100%
+    )
+    1;
   display: inline-block;
   text-decoration: none;
-  background-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 50%, var(--ff-purple) 100%);
+  background-image: linear-gradient(
+    135deg,
+    var(--ff-aqua) 0%,
+    var(--ff-blue) 50%,
+    var(--ff-purple) 100%
+  );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  transition: padding .15s ease-in-out, margin .15s ease-in-out;
+  transition: padding 0.15s ease-in-out, margin 0.15s ease-in-out;
   margin-bottom: -2px;
   margin-top: 0.5vh;
   outline: none;
@@ -161,7 +190,7 @@ h2 {
 
 ::placeholder {
   -webkit-text-fill-color: initial;
-  color: rgba(0,0,0,0.25);
+  color: rgba(0, 0, 0, 0.25);
 }
 
 @-moz-document url-prefix() {
@@ -170,14 +199,13 @@ h2 {
   }
 }
 
-code {
-  background-color: var(--ff-module-background); 
-  color: var(--ff-aqua);
-}
-
 .link {
   text-decoration: none;
-  background-image: linear-gradient(135deg, var(--ff-aqua) 0%, var(--ff-blue) 100%);
+  background-image: linear-gradient(
+    135deg,
+    var(--ff-aqua) 0%,
+    var(--ff-blue) 100%
+  );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -215,7 +243,7 @@ label.ffInput:hover {
 }
 
 label.ffInput .checkmark:after {
-  content: "";
+  content: '';
   position: absolute;
   display: none;
 }
@@ -234,7 +262,7 @@ label.ffInput input:checked ~ .checkmark:after {
   transform: rotate(45deg);
 }
 
-.ffInput[type=number] {
+.ffInput[type='number'] {
   width: 34px;
 }
 
@@ -243,7 +271,7 @@ textarea.ffInput {
   width: -webkit-fill-available;
   height: 80px;
   resize: vertical;
-  transition: all .15s linear, background 1s linear;
+  transition: all 0.15s linear, background 1s linear;
 }
 
 .invalid {
@@ -254,4 +282,47 @@ textarea.ffInput {
   text-align: right;
   padding-right: 20px;
   color: var(--ff-link);
-}
+}
+
+/*=================crowd-bypassed and before-navigate css================*/
+
+code {
+  color: var(--ff-aqua);
+  -webkit-text-fill-color: var(--ff-aqua);
+  background-color: var(--ff-module-background);
+  font-family: monospace;
+}
+
+button {
+  border: 2px solid;
+  border-image: linear-gradient(
+      135deg,
+      var(--ff-aqua) 0%,
+      var(--ff-blue) 50%,
+      var(--ff-purple) 100%
+    )
+    1;
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0.5vh 1vw;
+  display: inline-block;
+  text-decoration: none;
+  margin-bottom: 0.5vh;
+  margin-top: 0.5vh;
+  outline: none;
+  color: var(--ff-aqua);
+  transition: background-color 0.1s ease-in-out;
+}
+
+button:hover {
+  background-color: #222;
+  cursor: pointer;
+}
+
+a .link-preview:hover {
+  text-decoration: underline;
+}
+
+#options-link > a {
+  padding: 0;
+}