diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-01-08 19:36:01 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-01-08 19:36:01 +0300 |
commit | c971ca59d2bf2fe7a3de90f6d75390d71bea93db (patch) | |
tree | 3c463d05e37ddd89ee5423ab8c3e6be141a22611 | |
parent | 08d11decf7ee0283b5092682f50f031bb405dabe (diff) | |
parent | 489c843583a6057ce380f02230f434ad4ec78546 (diff) |
Merge pull request #410 from PickleNik/ext-settings
Extension popup layout
-rw-r--r-- | Extensions/combined/content-style.css | 20 | ||||
-rw-r--r-- | Extensions/combined/popup.css | 48 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 52 | ||||
-rw-r--r-- | Extensions/combined/popup.js | 13 | ||||
-rw-r--r-- | Extensions/combined/ryd.background.js | 2 |
5 files changed, 114 insertions, 21 deletions
diff --git a/Extensions/combined/content-style.css b/Extensions/combined/content-style.css index c06b29c..e2e5fa2 100644 --- a/Extensions/combined/content-style.css +++ b/Extensions/combined/content-style.css @@ -1,3 +1,23 @@ +:root { + /* --yt-spec-icon-disabled: #f44 !important; + --yt-spec-text-primary: #4f4 !important; */ + /* --yt-spec-general-background-a: #000 !important; + --yt-spec-general-background-b: #000 !important; + --yt-spec-general-background-c: #000 !important; + --yt-spec-brand-background-solid: #000 !important; + --yt-spec-brand-background-primary: #000 !important; + --yt-spec-brand-background-secondary: #000 !important; */ +} + +/* html:not(.style-scope)[dark], :not(.style-scope)[dark] { + --yt-spec-general-background-a: #000 !important; + --yt-spec-general-background-b: #000 !important; + --yt-spec-general-background-c: #000 !important; + --yt-spec-brand-background-solid: #000 !important; + --yt-spec-brand-background-primary: #000 !important; + --yt-spec-brand-background-secondary: #000 !important; +} */ + #ryd-bar-container { background: var(--yt-spec-icon-disabled); border-radius: 2px; diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index 757692d..b56ca6a 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -5,7 +5,7 @@ --background: #111; --secondary: #272727; - --tertiary: #333333; + --tertiary: #424242; --lightGrey: #999; --white: #fff; } @@ -33,8 +33,8 @@ button { 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%); + /* 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%); */ transition: 0.4s; } @@ -42,13 +42,49 @@ button:hover { background: #444; } +#ext-version { + z-index: 69; + position: fixed; + margin: 0; + bottom: 1.15rem; + right: 1.15rem; + background: var(--secondary); + border-radius: .25rem; + padding: .25rem .5rem; +} + #advancedToggle { - margin-top: 1em; - margin-bottom: 2em; + position: fixed; + background: none; + box-shadow: none; + color: var(--lightGrey); + top: 26px; right: 26px; + padding: 2px; + z-index: 69; + height: 2rem; + width: 2rem; +} + +#advancedToggle:hover { + color: var(--white); + transform: rotate(-90deg); +} + +#advancedToggle:active { + transform: scale(1.5); } #advancedSettings { - display: none; + opacity: 0; + pointer-events: none; + transition-duration: .15s; + transition-timing-function: ease-in-out; + transform: scale(1.1); + position: fixed; + background: var(--background); + top: 10px; right: 14px; + width: calc(100% - 65px); + height: calc(100% - 58px); border: 2px solid var(--secondary); border-radius: 0.5rem; padding: 1rem; diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 130f557..e45c915 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -20,26 +20,37 @@ /> <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" /> </svg> - <h1>Return YouTube Dislike</h1> - <img id="server-status" src="./icons/server.svg" alt="" /> - <p>API Status: <span id="status"></span></p> - <p>by Dmitrii Selivanov & Community</p> - <p id="ext-version"></p> - + <h1 style="margin-bottom: .75rem;">Return YouTube Dislike</h1> + <p style="color: var(--lightGrey);">by Dmitrii Selivanov & Community</p> + <button id="link_website">Website</button> <button id="link_github">GitHub</button> <button id="link_discord">Discord</button> - - <br /><br /> - <button id="link_faq">FAQ</button> - <button id="link_donate">Donate</button> + <br /> + <button style="margin-top: .3rem" id="link_faq">FAQ</button> + <button style="margin-top: .3em" id="link_donate">Donate</button> + + <br /> + <br /> + + <p style="display: inline-block;">API Status: <b id="status"></b></p> + <img id="server-status" style="display: inline-block; width: .75rem; height: .75rem;" src="./icons/server.svg" alt="" /> + <br /> - <button id="advancedToggle">Show Settings</button> <br /> </center> + <!-- top-right --> + <button id="advancedToggle"> + <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"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg> + </button> + + <!-- bottom-right --> + <p id="ext-version"></p> + + <!-- dialog box --> <fieldset id="advancedSettings"> <legend id="advancedLegend">Settings</legend> @@ -48,7 +59,26 @@ <span class="slider" /> <span class="switchLabel">Disable like/dislike submission</span> </label> + <!-- <br /> + <label class="switch"> + <input type="checkbox" id="color_ratio" /> + <span class="slider" /> + <span class="switchLabel">Colored Ratio Bar</span> + </label> + <br /> + <label class="switch"> + <input type="checkbox" id="color_thumbs" /> + <span class="slider" /> + <span class="switchLabel">Colored Thumbs</span> + </label> <br /> + <label class="switch"> + <input type="checkbox" id="star_ratio" /> + <span class="slider" /> + <span class="switchLabel">5-star Rating Bar</span> + </label> + <br /> --> + <!-- <label class="switch"> <input type="checkbox" id="disable_api_unlisted" /> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 1e3264a..4ccfdf2 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -1,10 +1,11 @@ /* Config */ const config = { advanced: false, - showAdvancedMessage: "Show Settings", - hideAdvancedMessage: "Hide Settings", disableVoteSubmission: false, + showAdvancedMessage: '<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"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>', + hideAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>', + links: { website: "https://returnyoutubedislike.com", github: "https://github.com/Anarios/return-youtube-dislike", @@ -46,11 +47,15 @@ const advancedToggle = document.getElementById("advancedToggle"); advancedToggle.addEventListener("click", () => { const adv = document.getElementById("advancedSettings"); if (config.advanced) { - adv.style.display = "none"; + adv.style.transform = "scale(1.1)"; + adv.style.pointerEvents = "none"; + adv.style.opacity = "0"; advancedToggle.innerHTML = config.showAdvancedMessage; config.advanced = false; } else { - adv.style.display = "block"; + adv.style.transform = "scale(1)"; + adv.style.pointerEvents = "auto"; + adv.style.opacity = "1"; advancedToggle.innerHTML = config.hideAdvancedMessage; config.advanced = true; } diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js index e332d8d..3954e72 100644 --- a/Extensions/combined/ryd.background.js +++ b/Extensions/combined/ryd.background.js @@ -6,6 +6,8 @@ let api; /** stores extension's global config */ let extConfig = { disableVoteSubmission: false + // coloredThumbs: false, + // coloredBar: false, } if (isChrome()) api = chrome; |