diff options
author | Front <27463495+Frontesque@users.noreply.github.com> | 2021-12-02 02:06:06 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-02 02:06:06 +0300 |
commit | 696e7ce99648c4b3b72cc01863871914f41e5f45 (patch) | |
tree | 2fd889ffb02fefecc9460a2b1e76ec8252f3da46 | |
parent | 1f492b4a076b26fd94d1e439d5d467615dee5dcc (diff) | |
parent | 2b0bfc5471e88c51e6903f2331a97e7b171897f5 (diff) |
Merge pull request #1 from PickleNik/main
UI Settings Label
-rw-r--r-- | Extensions/chrome/popup.css | 138 | ||||
-rw-r--r-- | Extensions/chrome/popup.html | 33 | ||||
-rw-r--r-- | Extensions/chrome/popup.js | 26 |
3 files changed, 103 insertions, 94 deletions
diff --git a/Extensions/chrome/popup.css b/Extensions/chrome/popup.css index cfc556b..a3f88af 100644 --- a/Extensions/chrome/popup.css +++ b/Extensions/chrome/popup.css @@ -1,99 +1,115 @@ /* Variables */ :root { - --primary: #CC2929; - --accent: #581111; + --primary: #cc2929; + --accent: #581111; - --background: #111; - --secondary: #272727; - --lightGrey: #999; - --white: #fff; + --background: #111; + --secondary: #272727; + --tertiary: #333333; + --lightGrey: #999; + --white: #fff; } /* Window Styling */ -html,body { - background-color: var(--background); - color: var(--white); - min-width: 300px; - padding: 0.5em; - font-family: Arial, Helvetica, sans-serif; - font-size: 14px; +html, +body { + background-color: var(--background); + color: var(--white); + min-width: 300px; + padding: 0.5em; + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; } h1 { - font-size: 26px; + 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%); + 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; + margin-top: 1em; + margin-bottom: 2em; } #advancedSettings { - display: none; - border: 2px solid var(--secondary); - border-radius: 4px; - padding: 0.5em; + display: none; + border: 2px solid var(--secondary); + border-radius: 0.5rem; + padding: 1rem; +} + +#advancedLegend { + color: var(--tertiary) !important; + /* margin: auto; */ /* Center the label */ + /* padding: .25rem .5rem; */ + /* border-radius: .25rem; */ + /* border: .25rem solid var(--secondary); */ } /* Switches */ .switch { - position: relative; - display: inline-block; - width: 30px; - height: 17px; - margin-bottom: 0.5em; + position: relative; + display: inline-block; + width: 30px; + height: 17px; + margin-bottom: 1rem; +} + +.switch:last-of-type { + margin-bottom: 0; } .switch input { - display: none; + display: none; } .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--secondary); - transition: .4s; - border-radius: 34px; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--secondary); + transition: 0.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%; + position: absolute; + content: ""; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background: var(--lightGrey); + transition: 0.4s; + border-radius: 50%; } -input:checked+.slider { - background: var(--accent); +input:checked + .slider { + background: var(--accent); } -input:checked+.slider:before { - transform: translateX(13px); - background: var(--primary); +input:checked + .slider:before { + transform: translateX(13px); + background: var(--primary); } .switchLabel { - width: 250px !important; - transform: translateX(35px); - display: inline-block; -}
\ No newline at end of file + margin-left: 0.5rem; + width: 250px !important; + transform: translateX(35px); + display: inline-block; +} diff --git a/Extensions/chrome/popup.html b/Extensions/chrome/popup.html index dd7bfa5..dea7246 100644 --- a/Extensions/chrome/popup.html +++ b/Extensions/chrome/popup.html @@ -1,13 +1,11 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta content="text/html; charset=utf-8"> + <meta content="text/html; charset=utf-8" /> <title>Return YouTube Dislike</title> - <link rel="stylesheet" href="popup.css"> + <link rel="stylesheet" href="popup.css" /> </head> <body> - - <center> <img src="icons/icon48.png" alt="Logo" /> <h1>Return YouTube Dislike</h1> @@ -17,28 +15,25 @@ <button id="link_github">GitHub</button> <button id="link_discord">Discord</button> - <br> + <br /> <button id="advancedToggle">Show Settings</button> - </center> - <div id="advancedSettings"> + <fieldset id="advancedSettings"> + <legend id="advancedLegend">Settings</legend> <label class="switch"> - <input type="checkbox" id="disable_ratio_bar" /> - <span class="slider" /> - <span class="switchLabel">Lorem ipsum dolor sit amet</span> - </label><br> + <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> - - + <input type="checkbox" id="disable_api_unlisted" /> + <span class="slider" /> + <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label + ><br /> + </fieldset> </body> <script src="popup.js"></script> </html> diff --git a/Extensions/chrome/popup.js b/Extensions/chrome/popup.js index 9cde399..cfc64d5 100644 --- a/Extensions/chrome/popup.js +++ b/Extensions/chrome/popup.js @@ -5,29 +5,29 @@ const config = { hideAdvancedMessage: "Hide Settings", links: { - website: 'https://returnyoutubedislike.com', - github: 'https://github.com/Anarios/return-youtube-dislike', - discord: 'https://discord.gg/mYnESY4Md5' + 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_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_github").addEventListener("click", () => { + chrome.tabs.create({ url: config.links.github }); }); -document.getElementById('link_discord').addEventListener('click', () => { - chrome.tabs.create({url: config.links.discord}); +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'); +const advancedToggle = document.getElementById("advancedToggle"); +advancedToggle.addEventListener("click", () => { + const adv = document.getElementById("advancedSettings"); if (config.advanced) { adv.style.display = "none"; advancedToggle.innerHTML = config.showAdvancedMessage; @@ -39,8 +39,6 @@ advancedToggle.addEventListener('click', () => { } }); - - /* popup-script.js document.querySelector('#login') .addEventListener('click', function () { |