0.39

Signed-off-by: Magic <[email protected]>
magicoflolis · Aug 6, 2022 · 2975d27 · 2975d27
1 parent 571d238
commit 2975d27
Show file tree

Hide file tree

Showing 10 changed files with 1,078 additions and 970 deletions.
diff --git a/dist/css/twittertranslator.css b/dist/css/twittertranslator.css
diff --git a/dist/css/useSiteColors.css b/dist/css/useSiteColors.css
diff --git a/dist/twittertranslator.dev.user.js b/dist/twittertranslator.dev.user.js
diff --git a/dist/twittertranslator.user.js b/dist/twittertranslator.user.js
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "productName": "Twitter External Translator",
   "description": "Adds external & internal translators to various sites.",
   "author": "Magic <[email protected]>",
-  "version": "0.38",
+  "version": "0.39",
   "license": "GPL-3.0-only",
   "homepage": "https://github.com/magicoflolis/twitter-translator#twitter-external-translator",
   "bugs": {

diff --git a/src/main.js b/src/main.js
diff --git a/src/menu.html b/src/menu.html
@@ -180,6 +180,15 @@ <h1 class="tetAlertTxt tetTextColor css-901oao"><span class="tet-alert-head css-
             <option class="tetBackground" value="5000">5000ms</option>
           </select>
         </div>
+        <section class="tetcheckbox tetst rm">
+          <label class="tetTextColor">
+            <span>Use website theme</span>
+            <div class="tetswitch tetDisplayColor">
+              <input type="checkbox" name="sitetheme" id="sitetheme" />
+              <label for="sitetheme"></label>
+            </div>
+          </label>
+        </section>
         <section class="tetcheckbox">
           <label class="tetTextColor">
             <span>Console log</span>

diff --git a/src/sass/colors.scss b/src/sass/colors.scss
@@ -55,14 +55,17 @@ $tetBShadows:
     }
   };
 
-
+  // border-color: $fg_dark;
+  // background-color: $bg_color;
 $tetColors:
   "tet-29u" rgb(29, 155, 240) rgb(26, 145, 218,.384),
   "tet-186u" rgb(0, 186, 124) rgb(21, 172, 89,.384),
   "tet-122u" rgb(255, 122, 0) rgb(220, 84, 31,.384),
   "tet-120u" rgb(120, 86, 255) rgb(134, 93, 202,.384),
   "tet-249u" rgb(249, 24, 128) rgb(202, 32, 85,.384),
-  "tet-255u" rgb(255, 212, 0) rgb(230, 156, 28,.384);
+  "tet-255u" rgb(255, 212, 0) rgb(230, 156, 28,.384),
+  "nitter" rgb(255, 108, 96) rgb(255, 108, 96,.384),
+  "tweetdeck" rgb(29, 161, 242) rgb(29, 161, 242,.384);
 
   @each $name, $color, $hightlight in $tetColors {
     .tetswitch.#{$name} > input:checked+label {
@@ -140,9 +143,16 @@ $tetColors:
 .r-tetTD {
   border-radius: 14px;
   background-color: #15202b;
+  &#tetSelector.Button--primary:hover {
+    border-color: $td_blue;
+    box-shadow: $td_blue 0px 0px 0px 1px;
+    #tetName span {
+      color: $td_blue;
+    }
+  };
   #tetName span {
     color: $td_color;
-  }
+  };
 };
 
 .prf-header > div > .tet.tet-td {
@@ -294,7 +304,7 @@ $tetColors:
   color: rgb(15, 20, 25) !important;
 };
 
-.tweetdeck {
+.tweetdeck:not(.tetswitch) {
   background-color: $td_blue;
   color: #fff;
   &#tetName {
@@ -329,7 +339,7 @@ $tetColors:
 h1.tetNTextColor {
   color: $grey;
 };
-.nitter {
+.nitter:not(.tetswitch,.tetBtn) {
   border-color: $fg_dark;
   background-color: $bg_color;
   div#tetName span {

diff --git a/src/sass/menu.scss b/src/sass/menu.scss
@@ -42,6 +42,7 @@
 .tet-at,
 .tetAlertTxt,
 .tet-info,
+.btNav label,
 .tetAlertBtns>div,
 #tetSelector > select {
   font-size: 15px !important;
@@ -199,7 +200,6 @@ div.tetAlertTxt {
   left: 0px;
   bottom: 0px;
   #tetAvatar {
-    // background-image: url("//abs.twimg.com/favicons/twitter.ico");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -454,6 +454,9 @@ div.mini>span {
     left: 90% !important;
     top: 0% !important;
   };
+  &.mobile {
+    top: 0% !important;
+  };
   > svg {
     position: relative;
     height: 1.25em;

diff --git a/src/sass/useSiteColors.scss b/src/sass/useSiteColors.scss
@@ -12,10 +12,12 @@
     background-color: var(--fg_dark);
   };
   .tetNitter {
-    border-color: var(--accent_border) !important;
-    box-shadow: var(--accent_border) !important;
-    #tetName {
-      color: var(--fg_dark);
+    &#tetSelector:hover {
+      border-color: var(--accent_border) !important;
+      box-shadow: var(--accent_border) !important;
+      #tetName span {
+        color: var(--fg_dark);
+      }
     };
   };
   .tetBtn.nitter {
@@ -25,7 +27,7 @@
   h1.tetNTextColor {
     color: var(--grey);
   };
-  .nitter {
+  .nitter:not(.tetswitch,.tetBtn) {
     background-color: var(--bg_color);
     div#tetName {
       color: var(--fg_dark);
@@ -47,12 +49,19 @@
   };
 };
 
-.tweetdeck {
+.tweetdeck:not(.tetswitch) {
   background-color: var(--btd-accent-color);
 };
 
 .r-tetTD {
   background-color: var(--btd-theme-background) !important;
+  &#tetSelector.Button--primary:hover {
+    border-color: #1da1f2;
+    box-shadow: #1da1f2 0px 0px 0px 1px;
+    #tetName span {
+      color: #1da1f2;
+    }
+  }
 };
 
 .r-tetBTD {