about summary refs log tree commit diff stats
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/background/background.js90
-rw-r--r--src/pages/options/general/general.html8
-rw-r--r--src/pages/options/general/general.js5
-rw-r--r--src/pages/options/imgur/imgur.html2
-rw-r--r--src/pages/options/instagram/instagram.html2
-rw-r--r--src/pages/options/maps/maps.html2
-rw-r--r--src/pages/options/medium/medium.html2
-rw-r--r--src/pages/options/reddit/reddit.html2
-rw-r--r--src/pages/options/reddit/reddit.js4
-rw-r--r--src/pages/options/search/search.html2
-rw-r--r--src/pages/options/tiktok/tiktok.html2
-rw-r--r--src/pages/options/translate/translate.html4
-rw-r--r--src/pages/options/twitter/twitter.html6
-rw-r--r--src/pages/options/wikipedia/wikipedia.html2
-rw-r--r--src/pages/options/youtube/youtube.html2
-rw-r--r--src/pages/options/youtubeMusic/youtubeMusic.html2
-rw-r--r--src/pages/popup/popup.html17
-rw-r--r--src/pages/popup/popup.js35
-rw-r--r--src/pages/popup/style.css2
-rw-r--r--src/pages/stylesheets/styles.css14
20 files changed, 87 insertions, 118 deletions
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 1f91ad4d..50b054ec 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -90,96 +90,8 @@ browser.webRequest.onBeforeRequest.addListener(
   ["blocking"]
 );
 
-browser.webRequest.onResponseStarted.addListener(
-  (responseDetails) => {
-    let url = new URL(responseDetails.url);
-    let protocolHost = `${url.protocol}//${url.host}`;
-    var mightyList = getMightyList();
-
-    if (mightyList.includes(protocolHost)); {
-      if (responseDetails.statusCode >= 500 && responseDetails.type === "main_frame") {
-        console.log("Instance is corrupted, redirecting", responseDetails.url);
-        changeInstance(responseDetails.url);
-      }
-    }
-  },
-  { urls: ["<all_urls>"] }
-);
-
 browser.tabs.onUpdated.addListener(
   (tabId, changeInfo) => {
     if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url))
       youtubeHelper.invidiousInitCookies(tabId);
-  });
-
-function changeInstance(url) {
-  var tabUrl = new URL(url);
-  var protocolHost = `${tabUrl.protocol}//${tabUrl.host}`;
-  var newUrl;
-
-  console.log("wewe")
-  newUrl = youtubeHelper.changeInstance(url);
-
-  let twitterList = [...twitterHelper.getRedirects().nitter.normal];
-  if (twitterList.includes(protocolHost) && twitterList.length > 1) newUrl = 'https://twitter.com';
-
-  let instagramList = [...instagramHelper.getRedirects().bibliogram.normal];
-  if (instagramList.includes(protocolHost) && instagramList.length > 1) newUrl = 'https://instagram.com';
-
-  let redditList = [...redditHelper.getRedirects().libreddit.normal, ...redditHelper.getRedirects().teddit.normal]
-  if (redditList.includes(protocolHost) && redditList.length > 1) {
-    if (tabUrl.pathname.startsWith('/img')) {
-      newUrl = "https://i.redd.it"
-      tabUrl.href = tabUrl.href.replace("/img", "")
-    }
-    else
-      newUrl = 'https://reddit.com';
-  }
-
-  let searchList = [...searchHelper.getRedirects().searx.normal, ...searchHelper.getRedirects().whoogle.normal]
-  if (searchList.includes(protocolHost) && searchList.length > 1) newUrl = 'https://google.com';
-
-  let translateList = [...translateHelper.getRedirects().simplyTranslate.normal, ...translateHelper.getRedirects().lingva.normal]
-  if (translateList.includes(protocolHost) && translateList.length > 1) newUrl = 'https://translate.google.com';
-
-  let mediumList = [...mediumHelper.getRedirects().scribe.normal]
-  if (mediumList.includes(protocolHost) && mediumList.length > 1) newUrl = 'https://medium.com';
-
-  let imgurList = [...imgurHelper.getRedirects().rimgo.normal];
-  if (imgurList.includes(protocolHost) && imgurList.length > 1) newUrl = 'https://imgur.com';
-
-  let wikipediaList = [...wikipediaHelper.getRedirects().wikiless.normal]
-  if (wikipediaList.includes(protocolHost) && wikipediaList.length > 1) newUrl = 'https://wikipedia.com';
-
-  if (newUrl) browser.tabs.update({ url: tabUrl.href.replace(protocolHost, newUrl) });
-}
-
-function getMightyList() {
-  return [
-    ...youtubeHelper.getCustomRedirects().invidious.normal,
-    ...youtubeHelper.getCustomRedirects().piped.normal,
-
-    ...twitterHelper.getCustomRedirects().nitter.normal,
-
-    ...youtubeMusicHelper.getCustomRedirects().beatbump.normal,
-
-    ...instagramHelper.getCustomRedirects().bibliogram.normal,
-
-    ...redditHelper.getCustomRedirects().libreddit.normal,
-    ...redditHelper.getCustomRedirects().teddit.normal,
-    redditHelper.getCustomRedirects().desktop,
-    redditHelper.getCustomRedirects().mobile,
-
-    ...searchHelper.getCustomRedirects().searx.normal,
-    ...searchHelper.getCustomRedirects().whoogle.normal,
-
-    ...translateHelper.getCustomRedirects().simplyTranslate.normal,
-    ...translateHelper.getCustomRedirects().lingva.normal,
-
-    ...mediumHelper.getCustomRedirects().scribe.normal,
-
-    ...imgurHelper.getCustomRedirects().rimgo.normal,
-
-    ...wikipediaHelper.getCustomRedirects().wikiless.normal
-  ];
-}
+  });
\ No newline at end of file
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index d86dacd2..9cb247ef 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -23,7 +23,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
@@ -126,6 +126,12 @@
       </a>
     </div>
 
+    <!-- <div class="buttons buttons-inline">
+      <a class="button button-inline" id="export-settings">
+        <span>Export Settings</span>
+      </a>
+    </div> -->
+
     <div class="some-block option-block">
       <h4>Exceptions</h4>
     </div>
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 7fa85a3a..2796bba1 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -31,6 +31,11 @@ document.querySelector("#update-instances").addEventListener("click", () => {
   else
     document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });
+
+document.querySelector("#export-settings").addEventListener("click", () => {
+  browser.storage.local.get(null, result => console.log(result))
+});
+
 let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
 let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
 let instanceType = "url"
diff --git a/src/pages/options/imgur/imgur.html b/src/pages/options/imgur/imgur.html
index 35e7707b..65c35b64 100644
--- a/src/pages/options/imgur/imgur.html
+++ b/src/pages/options/imgur/imgur.html
@@ -24,7 +24,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/instagram/instagram.html b/src/pages/options/instagram/instagram.html
index 2d4b79c5..a4f33a7c 100644
--- a/src/pages/options/instagram/instagram.html
+++ b/src/pages/options/instagram/instagram.html
@@ -25,7 +25,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/maps/maps.html b/src/pages/options/maps/maps.html
index 2fedc4d3..8a07b50f 100644
--- a/src/pages/options/maps/maps.html
+++ b/src/pages/options/maps/maps.html
@@ -25,7 +25,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/medium/medium.html b/src/pages/options/medium/medium.html
index 5cdd223b..69fff984 100644
--- a/src/pages/options/medium/medium.html
+++ b/src/pages/options/medium/medium.html
@@ -24,7 +24,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index 4da143c5..fce58192 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -24,7 +24,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 549822a5..ac629e44 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -23,7 +23,7 @@ let redditFrontendElement = document.getElementById("reddit-frontend");
 redditFrontendElement.addEventListener("change",
     (event) => {
         let frontend = event.target.options[redditFrontendElement.selectedIndex].value
-        redditHelper.setRedditFrontend(frontend)
+        redditHelper.setFrontend(frontend)
         changeFrontendsSettings(frontend);
     }
 );
@@ -60,7 +60,7 @@ function changeProtocolSettings(protocol) {
 redditHelper.init().then(() => {
     disableRedditElement.checked = !redditHelper.getDisableReddit();
 
-    let frontend = redditHelper.getRedditFrontend();
+    let frontend = redditHelper.getFrontend();
     redditFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
 
diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index 81ac9f0c..91f1069f 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -24,7 +24,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/tiktok/tiktok.html b/src/pages/options/tiktok/tiktok.html
index 77dc5d95..42b99330 100644
--- a/src/pages/options/tiktok/tiktok.html
+++ b/src/pages/options/tiktok/tiktok.html
@@ -24,7 +24,7 @@
       <a href="../youtube/youtube.html">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 2240bc3b..a51b459e 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -19,12 +19,12 @@
             </svg>
             <a href="../general/general.html">General</a>
         </div>
-         <div class="title">
+        <div class="title">
             <img src="../../../assets/images/youtube-icon.png" />
             <a href="../youtube/youtube.html">YouTube</a>
         </div>
         <div class="title">
-            <img src="../../../assets/images/youtube-icon.png" />
+            <img src="../../../assets/images/youtube-music-icon.png" />
             <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
         </div>
         <div class="title">
diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html
index 304ccecc..b5ff73ce 100644
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@@ -20,12 +20,12 @@
             </svg>
             <a href="../general/general.html">General</a>
         </div>
-         <div class="title">
+        <div class="title">
             <img src="../../../assets/images/youtube-icon.png" />
             <a href="../youtube/youtube.html">YouTube</a>
         </div>
         <div class="title">
-            <img src="../../../assets/images/youtube-icon.png" />
+            <img src="../../../assets/images/youtube-music-icon.png" />
             <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
         </div>
         <div class="title">
@@ -186,4 +186,4 @@
     <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/options/wikipedia/wikipedia.html b/src/pages/options/wikipedia/wikipedia.html
index 53d46df4..d76480ef 100644
--- a/src/pages/options/wikipedia/wikipedia.html
+++ b/src/pages/options/wikipedia/wikipedia.html
@@ -24,7 +24,7 @@
             <a href="../youtube/youtube.html">YouTube</a>
         </div>
         <div class="title">
-            <img src="../../../assets/images/youtube-icon.png" />
+            <img src="../../../assets/images/youtube-music-icon.png" />
             <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
         </div>
         <div class="title">
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 0fb4f195..4aa75f22 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -25,7 +25,7 @@
       <a href="../youtube/youtube.html" class="selected">YouTube</a>
     </div>
     <div class="title">
-      <img src="../../../assets/images/youtube-icon.png" />
+      <img src="../../../assets/images/youtube-music-icon.png" />
       <a href="../youtubeMusic/youtubeMusic.html">YT Music</a>
     </div>
     <div class="title">
diff --git a/src/pages/options/youtubeMusic/youtubeMusic.html b/src/pages/options/youtubeMusic/youtubeMusic.html
index bf98692b..d9b8b89b 100644
--- a/src/pages/options/youtubeMusic/youtubeMusic.html
+++ b/src/pages/options/youtubeMusic/youtubeMusic.html
@@ -25,7 +25,7 @@
             <a href="../youtube/youtube.html">YouTube</a>
         </div>
         <div class="title">
-            <img src="../../../assets/images/youtube-icon.png" />
+            <img src="../../../assets/images/youtube-music-icon.png" />
             <a href="../youtubeMusic/youtubeMusic.html" class="selected">YT Music</a>
         </div>
         <div class="title">
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html
index fca93ab4..93d9d19c 100644
--- a/src/pages/popup/popup.html
+++ b/src/pages/popup/popup.html
@@ -152,15 +152,22 @@
     <input id="disable-medium" type="checkbox" checked />
   </div>
 
+
+
   <div class="buttons">
+    <a class="button" id="change-instance">
+      Change Instance&nbsp;
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+        <path
+          d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
+      </svg>
+    </a>
     <a class="button" id="more-options">
-      <span>Settings&nbsp;</span>
+      Settings&nbsp;
       <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
         width="24px" fill="currentColor">
-        <g>
-          <path
-            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
-        </g>
+        <path
+          d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
       </svg>
     </a>
   </div>
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index dfbee60b..9c5f28f3 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -109,3 +109,38 @@ disableMediumElement.addEventListener("change",
 document.getElementById("more-options").addEventListener("click",
   () => browser.runtime.openOptionsPage()
 );
+
+document.getElementById("change-instance").addEventListener("click",
+  () => browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    let currTab = tabs[0];
+    if (currTab) {
+      changeInstance(currTab.url)
+    }
+  })
+);
+
+function changeInstance(url) {
+  var tabUrl = new URL(url);
+  var protocolHost = `${tabUrl.protocol}//${tabUrl.host}`;
+  var newUrl;
+
+  newUrl = youtubeHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = twitterHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = instagramHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = redditHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = searchHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = translateHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = mediumHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = imgurHelper.changeInstance(tabUrl);
+
+  if (!newUrl) newUrl = wikipediaHelper.changeInstance(tabUrl)
+
+  if (newUrl) browser.tabs.update({ url: tabUrl.href.replace(protocolHost, newUrl) });
+}
diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css
index f223ec52..477035bb 100644
--- a/src/pages/popup/style.css
+++ b/src/pages/popup/style.css
@@ -1,4 +1,4 @@
 body {
-    width: 230px;
+    width: 240px;
     min-height: auto;
 }
\ No newline at end of file
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 6293184f..ab300d4a 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -17,6 +17,7 @@ body {
   font-family: Sans-Serif;
   background-color: var(--bg-main);
   color: var(--text);
+  overflow-x:hidden
 }
 
 div.some-block input[type="checkbox"] {
@@ -60,9 +61,9 @@ select {
   border-radius: 3px;
 }
 
-a.button * {
+/* a.button * {
   vertical-align: middle;
-}
+} */
 
 a.button:hover {
   background-color: var(--active);
@@ -209,19 +210,22 @@ div.some-block input[type="checkbox"]:checked::before {
 
 div.buttons {
   margin-bottom: 15px;
+  margin-top: 15px;
 }
 
 a.button {
   stroke: var(--text);
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 5px;
   border: var(--active) solid 1px;
   color: var(--text);
   font-size: 12px;
   font-weight: bold;
-  margin: 7.5px 15px;
+  /* width: 180px; */
+  margin: 8px 20px;
   padding: 10px;
-  text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition-duration: 0.1s;