:white_circle: Toggle Switches in Advanced

+ Added themed toggle switches in advanced settings

Extensions/chrome/popup.css

@@ -1,8 +1,11 @@
 /* Variables */
 :root {
+    --primary: #CC2929;
+    --accent: #581111;
+
     --background: #111;
-    --primary: #ff4444;
     --secondary: #272727;
+    --lightGrey: #999;
     --white: #fff;
 }
 
@@ -41,4 +44,56 @@ button {
     border: 2px solid var(--secondary);
     border-radius: 4px;
     padding: 0.5em;
+}
+
+/*   Switches   */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 17px;
+    margin-bottom: 0.5em;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--secondary);
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: '';
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background: var(--lightGrey);
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background: var(--accent);
+}
+
+input:checked+.slider:before {
+    transform: translateX(13px);
+    background: var(--primary);
+}
+
+.switchLabel {
+    width: 250px !important;
+    transform: translateX(35px);
+    display: inline-block;
 }

Extensions/chrome/popup.html

@@ -23,7 +23,19 @@
     </center>
 
     <div id="advancedSettings">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid?
+
+      <label class="switch">
+          <input type="checkbox" id="disable_ratio_bar" />
+          <span class="slider" />
+          <span class="switchLabel">Lorem ipsum dolor sit amet</span>
+      </label><br>
+
+      <label class="switch">
+          <input type="checkbox" id="disable_api_unlisted" />
+          <span class="slider" />
+          <span class="switchLabel">Lorem ipsum dolor sit amet</span>
+      </label><br>
+      
     </div>
 
 

Extensions/firefox/popup.css

@@ -1,8 +1,11 @@
 /* Variables */
 :root {
+    --primary: #CC2929;
+    --accent: #581111;
+
     --background: #111;
-    --primary: #ff4444;
     --secondary: #272727;
+    --lightGrey: #999;
     --white: #fff;
 }
 
@@ -42,4 +45,56 @@ button {
     border-radius: 4px;
     padding: 0.5em;
     margin-right: 1em; /* FIREFOX ONLY */
+}
+
+/*   Switches   */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 17px;
+    margin-bottom: 0.5em;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--secondary);
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: '';
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background: var(--lightGrey);
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background: var(--accent);
+}
+
+input:checked+.slider:before {
+    transform: translateX(13px);
+    background: var(--primary);
+}
+
+.switchLabel {
+    width: 250px !important;
+    transform: translateX(35px);
+    display: inline-block;
 }

Extensions/firefox/popup.html

@@ -23,7 +23,19 @@
     </center>
 
     <div id="advancedSettings">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid?
+      
+      <label class="switch">
+        <input type="checkbox" id="disable_ratio_bar" />
+        <span class="slider" />
+        <span class="switchLabel">Lorem ipsum dolor sit amet</span>
+    </label><br>
+
+    <label class="switch">
+        <input type="checkbox" id="disable_api_unlisted" />
+        <span class="slider" />
+        <span class="switchLabel">Lorem ipsum dolor sit amet</span>
+    </label><br>
+
     </div>
 
 

temp/index.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta content="text/html; charset=utf-8">
-    <title>Return Youtube Dislike</title>
-    <link rel="stylesheet" href="popup.css">
-</head>
-
-<body>
-
-
-    <center>
-        <img src="icons/icon48.png" alt="Logo" />
-        <h1>Return Youtube Dislike</h1>
-        <p>by Dmitrii Selivanov & Community</p>
-
-        <button id="link_website">Website</button>
-        <button id="link_github">Github</button>
-        <button id="link_discord">Discord</button>
-
-        <br>
-        <button id="advancedToggle">Show Advanced</button>
-
-    </center>
-
-    <div id="advancedSettings">
-        <label class="switch">
-            <input type="checkbox" id="disable_ratio_bar" />
-            <span class="slider" />
-            <span class="switchLabel">Disable ratio bar</span>
-        </label><br>
-
-        <label class="switch">
-            <input type="checkbox" id="disable_api_unlisted" />
-            <span class="slider" />
-            <span class="switchLabel">Disable using the API for unlisted videos</span>
-        </label><br>
-
-
-    </div>
-
-</body>
-<script src="popup.js"></script>
-
-</html>

temp/popup.css

@@ -1,107 +0,0 @@
-/* Variables */
-:root {
-    --primary: #ff6666;
-    --accent: #ffaaaa;
-
-    --background: #111;
-    --secondary: #272727;
-    --lightGrey: #999;
-    --white: #fff;
-}
-
-/* Window Styling */
-html,
-body {
-    background-color: var(--background);
-    color: var(--white);
-    width: 300px;
-    padding: 0.5em;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 14px;
-}
-
-h1 {
-    font-size: 26px;
-}
-
-button {
-    color: var(--white);
-    background: var(--secondary);
-    cursor: pointer;
-    padding: 5px 16px;
-    border: none;
-    border-radius: 4px;
-    font-weight: 500;
-    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
-}
-
-#advancedToggle {
-    margin-top: 1em;
-    margin-bottom: 2em;
-}
-
-#advancedSettings {
-    display: none;
-    border: 2px solid var(--secondary);
-    border-radius: 4px;
-    padding: 0.5em;
-    margin-right: 1em; /* FIREFOX ONLY */
-}
-
-#ratio_bar_colour {
-    border: none;
-    outline: none;
-    background: none;
-}
-
-/*   Switches   */
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 30px;
-    height: 17px;
-    margin-bottom: 0.5em;
-}
-
-.switch input {
-    display: none;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--secondary);
-    transition: .4s;
-    border-radius: 34px;
-}
-
-.slider:before {
-    position: absolute;
-    content: '';
-    height: 13px;
-    width: 13px;
-    left: 2px;
-    bottom: 2px;
-    background: var(--lightGrey);
-    transition: .4s;
-    border-radius: 50%;
-}
-
-input:checked+.slider {
-    background: var(--accent);
-}
-
-input:checked+.slider:before {
-    transform: translateX(13px);
-    background: var(--primary);
-}
-
-.switchLabel {
-    width: 250px !important;
-    transform: translateX(35px);
-    display: inline-block;
-}

temp/popup.js

@@ -1,59 +0,0 @@
-/*   Config   */
-const config = {
-    advanced: false,
-    showAdvancedMessage: "Show Advanced",
-    hideAdvancedMessage: "Hide Advanced",
-
-    links: {
-        website: 'https://returnyoutubedislike.com',
-        github: 'https://github.com/Anarios/return-youtube-dislike',
-        discord: 'https://discord.gg/mYnESY4Md5'
-    },
-};
-
-/*   Links   */
-document.getElementById('link_website').addEventListener('click', () => {
-    chrome.tabs.create({
-        url: config.links.website
-    });
-});
-
-document.getElementById('link_github').addEventListener('click', () => {
-    chrome.tabs.create({
-        url: config.links.github
-    });
-});
-
-document.getElementById('link_discord').addEventListener('click', () => {
-    chrome.tabs.create({
-        url: config.links.discord
-    });
-});
-
-/*   Advanced Toggle   */
-const advancedToggle = document.getElementById('advancedToggle');
-advancedToggle.addEventListener('click', () => {
-    const adv = document.getElementById('advancedSettings');
-    if (config.advanced) {
-        adv.style.display = "none";
-        advancedToggle.innerHTML = config.showAdvancedMessage;
-        config.advanced = false;
-    } else {
-        adv.style.display = "block";
-        advancedToggle.innerHTML = config.hideAdvancedMessage;
-        config.advanced = true;
-    }
-});
-
-
-
-/* popup-script.js 
-document.querySelector('#login')
-.addEventListener('click', function () {
-  chrome.runtime.sendMessage({ message: 'get_auth_token' });
-});
-
-document.querySelector("#log_off").addEventListener("click", function () {
-  chrome.runtime.sendMessage({ message: "log_off" });
-});
-*/