From dface28c849451f71d94f395feac7b948746ca83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ron=20Hegymegi-Kiss?= Date: Sun, 12 Dec 2021 23:31:09 +0100 Subject: [PATCH 01/22] group settings into tabs --- public/_locales/en/messages.json | 28 + public/options/options.css | 251 ++++- public/options/options.html | 1017 +++++++++---------- src/components/CategoryChooserComponent.tsx | 16 +- src/options.ts | 46 +- 5 files changed, 721 insertions(+), 637 deletions(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index c56b3275..016cc2de 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -845,5 +845,33 @@ "hourAbbreviation": { "message": "h", "description": "100h" + }, + "optionsTabCategories" : { + "message": "Categories", + "description": "Appears in Options as a tab header for setting up categories." + }, + "optionsTabBehavior" : { + "message": "Behavior", + "description": "Appears in Options as a tab header for options related to the general behavior of the extension." + }, + "optionsTabInterface" : { + "message": "Interface", + "description": "Appears in Options as a tab header for options related to GUI and sounds" + }, + "optionsTabKeyBinds" : { + "message": "Key Bindings", + "description": "Appears in Options as a tab header for keybinds" + }, + "optionsTabPrivacy" : { + "message": "Privacy", + "description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server)" + }, + "optionsTabBackup" : { + "message": "Backup/Restore", + "description": "Appears in Options as a tab header for options related to saving/restoring your settings" + }, + "optionsTabAdvanced" : { + "message": "Advanced", + "description": "Appears in Options as a tab header for advanced/niche options" } } diff --git a/public/options/options.css b/public/options/options.css index 708139ab..03e34020 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -1,10 +1,138 @@ /* Options page CSS */ + +/* Dark mode CSS, this is the default if unsupported */ html { color-scheme: dark; } - body { + background-color: #333333; +} +#navigation { + background-color: #181818; + color: white; +} +.tab-heading { + background-color: #242424; + color: white; +} +.tab-heading:hover { + outline: 3px solid white; +} +.medium-description, .switch-container, .text-label-container, .categoryTableElement { + color: white; +} +.small-description, p,li { + color: #dfdfdf; +} +.option-button.disabled { + background-color: #520000; + color: grey; +} +.slider { + background-color: #707070; +} +h1,h2,h3,h4,h5,h6 { + color: #dad8d8; +} +.option-group > div { + border-bottom: 1px solid #484848; + border-image: linear-gradient(to right, #484848, #00000000 80%) 1; +} +.categoryTableElement td { + border-top: 1px solid #484848; +} + +/* Light mode, if requested */ +@media only screen and (prefers-color-scheme: light) { + html { + color-scheme: light; + } + body { + background-color: #f9f9f9; + } + #navigation { + background-color: #dbdbdb; + color: #212121; + } + .tab-heading { + background-color: #ababab; + color: black; + } + .tab-heading:hover { + outline: 3px solid #2e2e2e; + } + .medium-description, .switch-container, .text-label-container, .categoryTableElement { + color: black; + } + .small-description, p,li { + color: #262626; + } + .option-button.disabled { + background-color: #ffcaca; + color: grey; + } + .slider { + background-color: #bfbebe; + } + h1,h2,h3,h4,h5,h6 { + color: #707070; + } + .option-group > div { + border-bottom: 1px solid #d9d9d9; + border-image: linear-gradient(to right, #d9d9d9, #00000000 80%) 1; + } + .categoryTableElement td { + border-top: 1px solid #d9d9d9; + } +} + +html, body { font-family: sans-serif; + margin: 0; +} + +* { + box-sizing: border-box; +} + +#options-container { + display: flex; + justify-content: space-between; +} + +#navigation { + display: flex; + flex-direction: column; + gap: 20px; + flex-basis: 20%; + min-width: 300px; + max-width: 600px; + border-radius: 15px; + margin: 15px; +} + +.tab-heading { + font-size: 18px; + height: 50px; + line-height: 50px; + width: 80%; + margin: 0 auto; + border-radius: 15px; + cursor: pointer; +} + +.tab-heading.selected { + background-color: #c00000; + color: white; +} + +.option-group > div { + min-height: 50px; + padding: 20px 0; +} + +.option-group > div:last-child { + border-bottom: inherit; } .center { @@ -27,13 +155,20 @@ body { display: inline; } -.small-description { - color: white; +.small-description{ font-size: 13px; + padding: 15px 0 0 20px; +} + +.small-description td { + padding: 10px 0 20px 20px; +} + +.categoryTableElement td { + padding-top: 10px; } .medium-description { - color: white; font-size: 15px; } @@ -53,21 +188,23 @@ body { width: max-content; } -.option-button:hover { +.option-button:hover:not(.disabled) { background-color: #fc0303; } .option-button.disabled { cursor: default; - - background-color: #520000; - color: grey; } #options { - max-width: 60%; + height: 100vh; + flex-basis: 80%; + overflow: auto; text-align: left; - display: inline-block; + padding: 80px 15px 0 3%; + box-sizing: border-box; + + transition: padding 0.3s; } #options.embed { @@ -76,13 +213,15 @@ body { display: inline-block; } +#title .profilepic { + height: 60px; +} + .switch-container { content: attr(label-name); - position: absolute; width: max-content; font-size: 14px; - color: white; display: table; } @@ -96,7 +235,6 @@ body { .text-label-container { font-size: 14px; - color: white; } .switch { @@ -119,7 +257,6 @@ body { left: 0; right: 0; bottom: 0; - background-color: #707070; } .animated * { @@ -162,11 +299,8 @@ input:checked + .slider:before { } -/* Boilerplate CSS from https://ajay.app */ -body { - background-color: #333333; -} +/* Boilerplate CSS from https://ajay.app (edited) */ .projectPreview { position: relative; @@ -196,29 +330,21 @@ body { transform: translateY(-50%); } -.createdBy { +#createdBy { font-size: 14px; text-align: center; - padding-top: 0px; - padding-bottom: 0px; - - display: inline-block; + margin-top: auto; } #title { - background-color: #636363; - text-align: center; vertical-align: middle; - font-size: 50px; - color: #212121; + font-size: 40px; padding: 20px; text-decoration: none; - - transition: font-size 1s; } .subtitle { @@ -237,7 +363,6 @@ body { } .profilepic { - background-color: #636363 !important; vertical-align: middle; } @@ -281,21 +406,9 @@ a { p,li { font-size: 20px; - color: #c4c4c4; - padding: 10px; } -@media screen and (orientation:portrait) { - #options { - max-width: 100%; - } - - .previewColorOption { - display: none; - } -} - .previewImage { max-height: 200px; } @@ -316,10 +429,6 @@ img { color: #dad8d8; } -h1,h2,h3,h4,h5,h6 { - color: #dad8d8; -} - svg { text-decoration: none; } @@ -337,8 +446,6 @@ svg { .categoryTableElement { font-size: 16px; - - color: white; } .categoryTableElement > * { @@ -368,4 +475,50 @@ svg { #sbDonate { font-size: 10px; -} \ No newline at end of file +} + + +/* Handle smaller screensizes */ +@media only screen and (max-height: 770px), only screen and (max-width: 1200px) { + #options-container { + flex-direction: column; + } + #navigation { + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + gap: 8px; + min-width: unset; + max-width: unset; + padding: 8px; + } + #options { + padding: 0 50px; + } + .tab-heading { + width: unset; + min-width: 150px; + height: 40px; + line-height: 40px; + margin: 0; + flex-grow: 1; + } + #title { + width: 100%; + font-size: 30px; + } + #title .profilepic { + height: 40px; + } + #createdBy { + margin: unset; + width: 100%; + } + } + + @media only screen and (max-width: 800px) { + #options { + padding: 0 15px; + } + } \ No newline at end of file diff --git a/public/options/options.html b/public/options/options.html index 1fbcf1b1..94f76c2e 100644 --- a/public/options/options.html +++ b/public/options/options.html @@ -13,592 +13,483 @@ -
- - SponsorBlock -
+
-
-

- - __MSG_createdBy__ - Ajay Ramachandran - (__MSG_Donate__) -

+