diff options
Diffstat (limited to '')
| -rw-r--r-- | src/pages/options/general/general.html | 188 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 29 |
2 files changed, 104 insertions, 113 deletions
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html index a72c1fb3..ee670e98 100644 --- a/src/pages/options/general/general.html +++ b/src/pages/options/general/general.html @@ -137,26 +137,9 @@ <h4 data-localise="__MSG_exceptions__">Exceptions</h4> </div> - <form id="custom-exceptions-instance-form"> <div class="some-block option-block"> - <div class="some-block" style="padding:0;"> - <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" /> - - <select id="exceptions-custom-instance-type"> - <option value="url">URL</option> - <option value="regex">Regex</option> - </select> - - </div> - <button type="submit" class="add" id="exceptions-add-instance"> - <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> - <path d="M0 0h24v24H0V0z" fill="none" /> - <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> - </svg> - </button> + <h4>Exceptions</h4> </div> - </form> - <div class="checklist" id="exceptions-custom-checklist"></div> <div class="buttons buttons-inline"> <a class="button button-inline" id="update-instances"> @@ -188,10 +171,12 @@ width="24px" fill="currentColor"> <g> <g> - <path - d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z" /> - <path - d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z" /> + <g> + <path + d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z" /> + <path + d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z" /> + </g> </g> </g> </svg> @@ -204,72 +189,75 @@ <div class="some-block option-block"> <h4 data-localise="__MSG_customPopup__">Customize Popup</h4> </div> + <div id="customize-popup"> + <div class="some-block option-block"> + <h4>Customize Popup</h4> + </div> - <div class="checklist-popup" id="popup-frontends-checklist"> - <div> + <div class="checklist-popup" id="popup-frontends-checklist"> <div> - <img src="../../../assets/images/youtube-icon.png"> - YouTube + <div> + <img src="../../../assets/images/youtube-icon.png"> + YouTube + </div> + <input type="checkbox" id="youtube" /> </div> - <input type="checkbox" id="youtube" /> - </div> - <div> <div> - <img src="../../../assets/images/youtube-music-icon.png"> - YoutubeMusic + <div> + <img src="../../../assets/images/youtube-music-icon.png"> + YoutubeMusic + </div> + <input type="checkbox" id="youtubeMusic" /> </div> - <input type="checkbox" id="youtubeMusic" /> - </div> - <div> <div> - <img src="../../../assets/images/twitter-icon.png"> - Twitter + <div> + <img src="../../../assets/images/twitter-icon.png"> + Twitter + </div> + <input type="checkbox" id="twitter" /> </div> - <input type="checkbox" id="twitter" /> - </div> - <div> <div> - <img src="../../../assets/images/instagram-icon.png"> - Instagram + <div> + <img src="../../../assets/images/instagram-icon.png"> + Instagram + </div> + <input type="checkbox" id="instagram" /> </div> - <input type="checkbox" id="instagram" /> - </div> - <div> <div> - <img src="../../../assets/images/tiktok-icon.png"> - TikTok + <div> + <img src="../../../assets/images/tiktok-icon.png"> + TikTok + </div> + <input type="checkbox" id="tikTok" /> </div> - <input type="checkbox" id="tikTok" /> - </div> - <div> <div> - <img src="../../../assets/images/imgur-icon.png"> - Imgur + <div> + <img src="../../../assets/images/imgur-icon.png"> + Imgur + </div> + <input type="checkbox" id="imgur" /> </div> - <input type="checkbox" id="imgur" /> - </div> - <div> <div> - <img src="../../../assets/images/reddit-icon.png"> - Reddit + <div> + <img src="../../../assets/images/reddit-icon.png"> + Reddit + </div> + <input type="checkbox" id="reddit" /> </div> - <input type="checkbox" id="reddit" /> - </div> - <div> <div> - <img src="../../../assets/images/pixiv-icon.svg"> - Pixiv + <div> + <img src="../../../assets/images/pixiv-icon.svg"> + Pixiv + </div> + <input type="checkbox" id="pixiv" /> </div> - <input type="checkbox" id="pixiv" /> - </div> - <div> <div> - <img src="../../../assets/images/spotify-icon.png"> - Spotify + <div> + <img src="../../../assets/images/spotify-icon.png"> + Spotify + </div> + <input type="checkbox" id="spotify" /> </div> - <input type="checkbox" id="spotify" /> - </div> - <div> <div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -278,9 +266,6 @@ </svg> <x data-localise="__MSG_search__">Search</x> </div> - <input type="checkbox" id="search" /> - </div> - <div> <div> <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" /> @@ -289,9 +274,6 @@ </svg> <x data-localise="__MSG_translate__">Translate</x> </div> - <input type="checkbox" id="translate" /> - </div> - <div> <div> <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" /> @@ -300,42 +282,39 @@ </svg> <x data-localise="__MSG_maps__">Maps</x> </div> - <input type="checkbox" id="maps" /> - </div> - <div> <div> - <img src="../../../assets/images/wikipedia-icon.svg"> - Wikipedia + <div> + <img src="../../../assets/images/wikipedia-icon.svg"> + Wikipedia + </div> + <input type="checkbox" id="wikipedia" /> </div> - <input type="checkbox" id="wikipedia" /> - </div> - <div> <div> - <!-- https://markentier.tech/posts/2020/10/medium-icon-svg/ --> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1770 1000" fill="currentColor"> - <circle cx="500" cy="500" r="500" /> - <ellipse ry="475" rx="250" cy="501" cx="1296" /> - <ellipse cx="1682" cy="502" rx="88" ry="424" /> - </svg> - Medium + <div> + <!-- https://markentier.tech/posts/2020/10/medium-icon-svg/ --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1770 1000" fill="currentColor"> + <circle cx="500" cy="500" r="500" /> + <ellipse ry="475" rx="250" cy="501" cx="1296" /> + <ellipse cx="1682" cy="502" rx="88" ry="424" /> + </svg> + Medium + </div> + <input type="checkbox" id="medium" /> </div> - <input type="checkbox" id="medium" /> - </div> - <div> <div> - <img src="../../../assets/images/peertube-icon.svg"> - Peertube + <div> + <img src="../../../assets/images/peertube-icon.svg"> + Peertube + </div> + <input type="checkbox" id="peertube" /> </div> - <input type="checkbox" id="peertube" /> - </div> - <div> <div> - <img src="../../../assets/images/lbry-icon.png"> - LBRY/Odysee + <div> + <img src="../../../assets/images/lbry-icon.png"> + LBRY/Odysee + </div> + <input type="checkbox" id="lbry" /> </div> - <input type="checkbox" id="lbry" /> - </div> - <div> <div> <div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> @@ -345,11 +324,8 @@ </div> Send Files </div> - <input type="checkbox" id="sendTargets" /> </div> </div> - <hr> - </section> <script type="module" src="../init.js"></script> diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 955c1759..7450915a 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -126,7 +126,7 @@ a { section.links a { display: flex; align-items: center; - font-size: 24px; + font-size: 18px; text-decoration: none; color: white; transition: 0.1s; @@ -221,8 +221,8 @@ div.option-block h1 { } div.some-block input[type="checkbox"] { - width: 48px; - height: 25px; + width: 46px; + height: 23px; background-color: var(--light-grey); border-radius: 50px; transition: .4s; @@ -236,13 +236,12 @@ div.some-block input[type="checkbox"]:checked { div.some-block input[type="checkbox"]::before { content: ""; display: inline-block; - width: 20px; - height: 20px; + width: 18px; + height: 18px; box-sizing: border-box; position: relative; top: 2.5px; - left: 4px; - height: 20px; + left: 3.5px; background-color: white; border-radius: 50%; transition: .3s; @@ -419,4 +418,20 @@ body.light-theme textarea:focus { body.light-theme a { color: black; +} + +section.general { + display: flex; + flex-wrap: wrap; + margin-right: 0; + width: 100%; + justify-content: space-between; +} + +section.general div { + margin-right: 20px; +} + +#customize-popup { + width: 250px; } \ No newline at end of file |