Fixes #58 - No longer host YT JS assets

3 files changed, 26 insertions, 10 deletions

diff --git a/pages/popup/open.svg b/pages/popup/open.svg
deleted file mode 100644
index 04f56c15..00000000
--- a/pages/popup/open.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
-  <path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
-  <polyline points='336 64 448 64 448 176' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
-  <line x1='224' y1='288' x2='440' y2='72' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
-</svg>
\ No newline at end of file
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index ede8c411..45a88052 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -112,7 +112,14 @@
   <footer>
     <a class="button" id="more-options">
       <span>More Options&nbsp;</span>
-      <img height="18px" src="open.svg" alt="more-options" />
+      <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
+        <path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48'
+          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+        <polyline points='336 64 448 64 448 176'
+          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+        <line x1='224' y1='288' x2='440' y2='72'
+          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+      </svg>
     </a>
   </footer>
 
@@ -120,4 +127,4 @@
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/pages/styles.css b/pages/styles.css
index 17b5f7f7..c00add43 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -137,7 +137,7 @@ input[type=checkbox] {
 }
 
 .checkbox-label:after {
-  background: #fff;
+  background: var(--text-main);
   border-radius: 90px;
   content: '';
   height: 20px;
@@ -168,6 +168,7 @@ input:checked+label:after {
 .button {
   border: var(--active) solid 1px;
   color: var(--text-main);
+  stroke: var(--text-main);
   display: block;
   font-size: 12px;
   font-weight: bold;
@@ -186,7 +187,8 @@ input:checked+label:after {
 
 .button:hover {
   background-color: var(--active);
-  color: #fff;
+  color: var(--text-main);
+  stroke: var(--text-main);
 }
 
 .button:active {
@@ -237,7 +239,6 @@ input:invalid {
 .tabcontent {
   padding-top: 10px;
   display: none;
-  border: solid 1px var(--dark);
   background-color: var(--dark);
   min-height: 510px;
 }
@@ -286,6 +287,11 @@ li {
   border-radius: 50%;
 }
 
+.button svg {
+  height: 18px;
+  width: 18px;
+}
+
 @media (prefers-color-scheme: dark) {
 
   body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
@@ -321,6 +327,7 @@ li {
 
   a.button {
     color: var(--text-secondary);
+    stroke: var(--text-secondary);
   }
 
   button.tablinks {
@@ -333,4 +340,11 @@ li {
     opacity: 0.7;
   }
 
+  .tab button {
+    border-bottom: solid 1px var(--light);
+  }
+
+  button.tablinks.active {
+    border-bottom: solid 1px var(--lighter);
+  }
 }