diff options
| -rw-r--r-- | src/pages/options/options.html | 552 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 113 |
2 files changed, 393 insertions, 272 deletions
diff --git a/src/pages/options/options.html b/src/pages/options/options.html index f1934ff1..869b5930 100644 --- a/src/pages/options/options.html +++ b/src/pages/options/options.html @@ -11,284 +11,306 @@ <body class="option"> - <div class="some-block option-block"> - <h4 data-localise="__MSG_theme__">Theme</h4> - <select id="theme"> - <option value="">System</option> - <option value="light-theme">Light</option> - <option value="dark-theme">Dark</option> - </select> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Youtube (Invidious)</h1> - <input id="disable-invidious" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random Instance Pool (comma-separated)</h4> - <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea> - </section> - - <div class="some-block option-block"> - <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> - <input id="use-freetube" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4> - <input id="always-proxy" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> - <input id="only-embed" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Video Quality</h4> - <select id="video-quality"> - <option value="">Default</option> - <option value="hd720">720p</option> - <option value="medium">480p</option> - <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> - </option> - </select> - </div> - - <div class="some-block option-block"> - <h4>Dark mode</h4> - <input id="invidious-dark-mode" type="checkbox" checked /> - </div> - - <div class="some-block"> - <h4>Volume: <span id="volume-value">50%</span></h4> - <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> - </div> - - <div class="some-block option-block"> - <h4>Player Style</h4> - <select id="invidious-player-style"> - <option value="">Invidious</option> - <option value="youtube">YouTube</option> - </select> - </div> - - <div class="some-block option-block"> - <h4>Subtitles - language codes</h4> - <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> - </div> - - <div class="some-block option-block"> - <h4>Automatically play video on load</h4> - <input id="invidious-autoplay" type="checkbox" checked /> - </div> - - <div class="some-block option-block"> - <h4>Persist preferences (as cookie)</h4> - <input id="persist-invidious-prefs" type="checkbox" checked /> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Twitter (Nitter)</h1> - <input id="disable-nitter" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="nitter-instance" type="url" name="nitter-instance" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random instance pool (comma-separated)</h4> - <textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea> - </section> - <div class="some-block option-block"> - <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4> - <input id="remove-twitter-sw" type="checkbox" checked /> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Instagram (Bibliogram)</h1> - <input id="disable-bibliogram" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - <section class="settings-block"> - <h4>Random instance pool (comma-separated)</h4> - <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea> - </section> - - <hr> - - <div class="some-block option-block"> - <h1>Reddit (LibReddit)</h1> - <input id="disable-reddit" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="reddit-instance" type="url" placeholder="https://libredd.it" /> - </div> - </div> - <section class="settings-block"> - <h4>Random instance pool (comma-separated)</h4> - <textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea> - </section> - - <hr> - - <div class="some-block option-block"> - <h1>Search</h1> - <input id="disable-searchEngine" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" /> - </div> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Translate (SimplyTranslate)</h1> - <input id="disable-simplyTranslate" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" /> - </div> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Maps (OpenStreetMap)</h1> - <input id="disable-osm" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" /> - </div> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Wikipedia (Wikiless)</h1> - <input id="disable-wikipedia" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" /> - </div> - </div> - - <hr> - - <div class="some-block option-block"> - <h1>Medium (Scribe)</h1> - <input id="disable-scribe" type="checkbox" checked /> - </div> - <div class="some-block option-block"> - <h4>Instance</h4> - <div class="autocomplete"> - <input id="scribe-instance" type="url" name="scribe-instance" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" /> - </div> - </div> - <div class="buttons"> - <a class="button" id="update-instances"> - <span data-localise="__MSG_updateInstances__">Update Instances</span> - </a> - </div> - - </div> - - <section class="settings-block"> - <p data-localise="__MSG_exceptionsDescriptionP1__"> - Enter a URL or Regular Expression to be excluded from redirects. - </p> - <p data-localise="__MSG_exceptionsDescriptionP2__"> - All requests for or initiating from a URL that matches your exception - will be excluded from redirects. - </p> - <p data-localise="__MSG_exceptionsDescriptionP3__"> - Note - Supports JavaScript regular expressions, excluding the - enclosing forward slashes. - </p> - </section> - <section class="settings-block"> - <table class="exceptions option"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_addException__">Add Exception</h1> - </td> - </tr> - <tr> - <td> - <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" /> - </td> - <td> - <input type="radio" id="url" name="type" value="URL" checked /> - <label class="radio" for="url">URL</label> - <input type="radio" id="regExp" name="type" value="RegExp" /> - <label class="radio" for="regExp">RegExp</label> - </td> - <td> - <button id="add-to-exceptions"> - <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> - <line x1="256" y1="112" x2="256" y2="400" style=" + <div class="option"> + <section class="general"> + <div class="some-block option-block"> + <h4 data-localise="__MSG_theme__">Theme</h4> + <select id="theme"> + <option value="">System</option> + <option value="light-theme">Light</option> + <option value="dark-theme">Dark</option> + </select> + </div> + <div class="buttons buttons-inline"> + <a class="button button-inline" id="update-instances"> + <span data-localise="__MSG_updateInstances__">Update Instances</span> + </a> + </div> + <hr> + <section class="settings-block"> + <p data-localise="__MSG_exceptionsDescriptionP1__"> + Enter a URL or Regular Expression to be excluded from redirects. + </p> + <p data-localise="__MSG_exceptionsDescriptionP2__"> + All requests for or initiating from a URL that matches your exception + will be excluded from redirects. + </p> + <p data-localise="__MSG_exceptionsDescriptionP3__"> + Note - Supports JavaScript regular expressions, excluding the + enclosing forward slashes. + </p> + </section> + <section class="settings-block"> + <table class="exceptions option"> + <tbody> + <tr> + <td> + <h1 data-localise="__MSG_addException__">Add Exception</h1> + </td> + </tr> + <tr> + <td> + <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" /> + </td> + <td> + <input type="radio" id="url" name="type" value="URL" checked /> + <label class="radio" for="url">URL</label> + <input type="radio" id="regExp" name="type" value="RegExp" /> + <label class="radio" for="regExp">RegExp</label> + </td> + <td> + <button id="add-to-exceptions"> + <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> + <line x1="256" y1="112" x2="256" y2="400" style=" fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px; " /> - <line x1="400" y1="256" x2="112" y2="256" style=" + <line x1="400" y1="256" x2="112" y2="256" style=" fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px; " /> - </svg> - </button> - </td> - </tr> - </tbody> - </table> - </section> - <ul id="exceptions-items"></ul> + </svg> + </button> + </td> + </tr> + </tbody> + </table> + </section> + <ul id="exceptions-items"></ul> + </section> + + <section class="youtube"> + <div class="some-block option-block"> + <h1>Youtube (Invidious)</h1> + <input id="disable-invidious" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + + <section class="settings-block"> + <h4>Random Instance Pool (comma-separated)</h4> + <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea> + </section> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> + <input id="use-freetube" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4> + <input id="always-proxy" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> + <input id="only-embed" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Video Quality</h4> + <select id="video-quality"> + <option value="">Default</option> + <option value="hd720">720p</option> + <option value="medium">480p</option> + <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> + </option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Dark mode</h4> + <input id="invidious-dark-mode" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4>Volume: <span id="volume-value">50%</span></h4> + <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> + </div> + + <div class="some-block option-block"> + <h4>Player Style</h4> + <select id="invidious-player-style"> + <option value="">Invidious</option> + <option value="youtube">YouTube</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Subtitles - language codes</h4> + <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> + </div> + + <div class="some-block option-block"> + <h4>Automatically play video on load</h4> + <input id="invidious-autoplay" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Persist preferences (as cookie)</h4> + <input id="persist-invidious-prefs" type="checkbox" checked /> + </div> + + + </section> + + <section class="twitter"> + + <div class="some-block option-block"> + <h1>Twitter (Nitter)</h1> + <input id="disable-nitter" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="nitter-instance" type="url" name="nitter-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + + <section class="settings-block"> + <h4>Random instance pool (comma-separated)</h4> + <textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea> + </section> + <div class="some-block option-block"> + <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4> + <input id="remove-twitter-sw" type="checkbox" checked /> + </div> + + + + </section> + + <section class="instagram"> + <div class="some-block option-block"> + <h1>Instagram (Bibliogram)</h1> + <input id="disable-bibliogram" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + + <section class="settings-block"> + <h4>Random instance pool (comma-separated)</h4> + <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea> + </section> + + + </section> + + <section class="reddit"> + <div class="some-block option-block"> + <h1>Reddit (LibReddit)</h1> + <input id="disable-reddit" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="reddit-instance" type="url" placeholder="https://libredd.it" /> + </div> + </div> + <section class="settings-block"> + <h4>Random instance pool (comma-separated)</h4> + <textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea> + </section> + + </section> + + <section class="search"> + <div class="some-block option-block"> + <h1>Search</h1> + <input id="disable-searchEngine" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + + + </section> + + <section class="translate"> + <div class="some-block option-block"> + <h1>Translate (SimplyTranslate)</h1> + <input id="disable-simplyTranslate" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" /> + </div> + </div> + + + </section> + + <section class="maps"> + <div class="some-block option-block"> + <h1>Maps (OpenStreetMap)</h1> + <input id="disable-osm" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" /> + </div> + </div> + + + </section> + + <section class="wikipedia"> + <div class="some-block option-block"> + <h1>Wikipedia (Wikiless)</h1> + <input id="disable-wikipedia" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" /> + </div> + </div> + + + </section> + + <section class="medium"> + <div class="some-block option-block"> + <h1>Medium (Scribe)</h1> + <input id="disable-scribe" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="scribe-instance" type="url" name="scribe-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> + </section> + + </div> <script type="module" src="./options.js"></script> <script src="../../assets/javascripts/localise.js"></script> </body> diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 23b53c3d..aeca8009 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -102,17 +102,17 @@ input:checked+label:after { padding: 5px 15px; } -.button * { +a.button * { vertical-align: middle; } -.button:hover { +a.button:hover { background-color: var(--active); color: var(--text); stroke: var(--text); } -.button:active { +a.button:active { background-color: var(--active); box-shadow: 0 var(--space) var(--bg-main); transform: translateY(4px); @@ -317,11 +317,52 @@ textarea { height: 200px; } -body.option { - width: 600px; - float: left; + +section { + background-color: var(--bg-main); +} + +section.youtube { + grid-area: youtube; +} + +section.twitter { + grid-area: twitter; +} + +section.instagram { + grid-area: instagram; +} + +section.reddit { + grid-area: reddit; +} + +section.search { + grid-area: search; +} + +section.translate { + grid-area: translate; +} + +section.maps { + grid-area: maps; +} + +section.wikipedia { + grid-area: wikipedia; } +section.medium { + grid-area: medium; +} + +section.exception { + grid-area: general; +} + + div.some-block { padding: 0 15px; justify-content: space-between; @@ -400,7 +441,6 @@ div.buttons { margin-bottom: 15px; } - a.button { stroke: var(--text); display: block; @@ -417,6 +457,17 @@ a.button { transition-duration: 0.1s; } +div.buttons-inline { + display: flex; + justify-content: end; + padding: 0 15px; +} + +a.button-inline { + display: inline-block; + margin: 7.5px 0; +} + a.button:hover { background-color: var(--active); color: var(--text); @@ -429,6 +480,54 @@ a.button:active { transform: translateY(1px); } +div.option { + box-sizing: border-box; + margin: auto; + max-width: 1800px; + display: grid; + grid-template-columns: 33.3% 33.3% 33.3%; + gap: 2px; + /* border: 3px solid var(--active); */ + background-color: rgb(58, 58, 58); + grid-template-areas: + "general twitter instagram" + "youtube reddit search" + "youtube maps wikipedia" + "translate medium wikipedia" +} + +@media (max-width: 1590px) { + div.option { + max-width: 1200px; + grid-template-columns: 50% 50%; + grid-template-areas: + "general twitter" + "youtube instagram" + "youtube reddit" + "search maps" + "translate wikipedia" + "medium wikipedia" + } +} + +@media (max-width: 1090px) { + div.option { + max-width: 600px; + grid-template-columns: 100%; + grid-template-areas: + "general" + "youtube" + "twitter" + "instagram" + "search" + "reddit" + "maps" + "translate" + "wikipedia" + "medium" + } +} + @media (prefers-color-scheme: light) { body { --text: #000; |