From a36e4a7041b342d93f348eb15d9dff1a90b10e14 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sun, 30 Jan 2022 13:20:34 +0300 Subject: Updating options UI --- src/pages/options/options.html | 552 ++++++++++++++++++++------------------- src/pages/stylesheets/styles.css | 113 +++++++- 2 files changed, 393 insertions(+), 272 deletions(-) (limited to 'src/pages') 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 @@ -
-

Theme

- -
- -
- -
-

Youtube (Invidious)

- -
- -
-

Instance

-
- -
-
- -
-

Random Instance Pool (comma-separated)

- -
- -
-

Use FreeTube over Invidious when possible

- -
- -
-

Always proxy videos through Invidious

- -
- -
-

Only redirect embedded video to Invidious

- -
- -
-

Video Quality

- -
- -
-

Dark mode

- -
- -
-

Volume: 50%

- -
- -
-

Player Style

- -
- -
-

Subtitles - language codes

- -
- -
-

Automatically play video on load

- -
- -
-

Persist preferences (as cookie)

- -
- -
- -
-

Twitter (Nitter)

- -
-
-

Instance

-
- -
-
- -
-

Random instance pool (comma-separated)

- -
-
-

Proactively remove Twitter service worker

- -
- -
- -
-

Instagram (Bibliogram)

- -
-
-

Instance

-
- -
-
- -
-

Random instance pool (comma-separated)

- -
- -
- -
-

Reddit (LibReddit)

- -
-
-

Instance

-
- -
-
-
-

Random instance pool (comma-separated)

- -
- -
- -
-

Search

- -
-
-

Instance

-
- -
-
- -
- -
-

Translate (SimplyTranslate)

- -
-
-

Instance

-
- -
-
- -
- -
-

Maps (OpenStreetMap)

- -
-
-

Instance

-
- -
-
- -
- -
-

Wikipedia (Wikiless)

- -
-
-

Instance

-
- -
-
- -
- -
-

Medium (Scribe)

- -
-
-

Instance

-
- -
-
-
- - Update Instances - -
- - - -
-

- Enter a URL or Regular Expression to be excluded from redirects. -

-

- All requests for or initiating from a URL that matches your exception - will be excluded from redirects. -

-

- Note - Supports JavaScript regular expressions, excluding the - enclosing forward slashes. -

-
-
- - - - - - - - - + + +
-

Add Exception

-
- - - - - - - - +
+
+ + + +
+
+

Youtube (Invidious)

+ +
+ +
+

Instance

+
+ +
+
+ +
+

Random Instance Pool (comma-separated)

+ +
+ +
+

Use FreeTube over Invidious when possible

+ +
+ +
+

Always proxy videos through Invidious

+ +
+ +
+

Only redirect embedded video to Invidious

+ +
+ +
+

Video Quality

+ +
+ +
+

Dark mode

+ +
+ +
+

Volume: 50%

+ +
+ +
+

Player Style

+ +
+ +
+

Subtitles - language codes

+ +
+ +
+

Automatically play video on load

+ +
+ +
+

Persist preferences (as cookie)

+ +
+ + +
+ +
+ +
+

Twitter (Nitter)

+ +
+
+

Instance

+
+ +
+
+ +
+

Random instance pool (comma-separated)

+ +
+
+

Proactively remove Twitter service worker

+ +
+ + + +
+ +
+
+

Instagram (Bibliogram)

+ +
+
+

Instance

+
+ +
+
+ +
+

Random instance pool (comma-separated)

+ +
+ + +
+ +
+
+

Reddit (LibReddit)

+ +
+
+

Instance

+
+ +
+
+
+

Random instance pool (comma-separated)

+ +
+ +
+ +
+
+

Search

+ +
+
+

Instance

+
+ +
+
+ + +
+ +
+
+

Translate (SimplyTranslate)

+ +
+
+

Instance

+
+ +
+
+ + +
+ +
+
+

Maps (OpenStreetMap)

+ +
+
+

Instance

+
+ +
+
+ + +
+ +
+
+

Wikipedia (Wikiless)

+ +
+
+

Instance

+
+ +
+
+ + +
+ +
+
+

Medium (Scribe)

+ +
+
+

Instance

+
+ +
+
+
+ + 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; -- cgit 1.4.1