diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..31f62d6 --- /dev/null +++ b/TODO.md @@ -0,0 +1,41 @@ +# TODO + +## Quick Wins + +| Issue | Effort | +|-------|--------| +| Remove debug `console.log` in `options/main.js:174-175` | 1 min | +| Sync manifest versions (4.3.65 vs 4.3.66) | 1 min | +| Delete unused `TEMPLATE_FIELDSET` in `options/main.js:8` | 1 min | +| Delete dead `setCookie`/`getCookie` in `content-script/main.js:657-678` | 1 min | +| Fix `SEC_IN_WEEK` naming in `utils.js:69` (it's actually minutes) | 1 min | +| Move duplicated regexes to `shared/utils.js` | 5 min | +| Delete commented-out code blocks in `content-script/main.js` | 5 min | +| Add Page Visibility API to pause polling when tab is hidden | 10 min | + +## Code Quality + +- [ ] Auto-generate `idToShortId` map from `SECTIONS` instead of manual maintenance +- [ ] Add storage validation/migration for schema changes between versions +- [ ] Improve error handling beyond `console.log(error)` +- [ ] Clean up event listeners in `options/main.js` to prevent memory leaks + +## i18n / Localization + +Hardcoded English strings that break for non-English YouTube: +- `content-script/main.js:171` — `'for you'` comparison +- `content-script/main.js:211` — `'Streamed'` check +- `content-script/main.js:467-468` — `'All'`, `'Related'` chip names + +## Incomplete Features + +- `utils.js:14` — TODO: validate start time < end time for schedules +- `utils.js:32` — TODO: force endTime to come after startTime + +## Fragility + +YouTube frequently changes their DOM structure. Monitor these selectors: +- `ytd-rich-grid-row` +- `#metadata-line span` +- `ytd-thumbnail-overlay-time-status-renderer` +- `yt-chip-cloud-chip-renderer` diff --git a/src/chrome_manifest.json b/src/chrome_manifest.json index b333955..fe1498f 100644 --- a/src/chrome_manifest.json +++ b/src/chrome_manifest.json @@ -3,7 +3,7 @@ "description": "Spend less time on YouTube. Customize YouTube's user interface to be less engaging.", "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions", "manifest_version": 3, - "version": "4.3.65", + "version": "4.3.66", "icons": { "16": "/images/16.png", diff --git a/src/firefox_manifest.json b/src/firefox_manifest.json index 71f757a..b1b1e35 100644 --- a/src/firefox_manifest.json +++ b/src/firefox_manifest.json @@ -3,7 +3,7 @@ "description": "Spend less time on YouTube. Customize YouTube's user interface to be less engaging.", "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions", "manifest_version": 2, - "version": "4.3.65", + "version": "4.3.66", "icons": { "16": "/images/16.png", diff --git a/src/options/body.css b/src/options/body.css index b19d143..447a2d1 100644 --- a/src/options/body.css +++ b/src/options/body.css @@ -439,29 +439,30 @@ html[foo=bar] { #sidebar { height: calc(6px + var(--body-height)); - width: 150px; - padding: 10px 3px; + width: 140px; + padding: 8px 6px; overflow: hidden; box-sizing: border-box; user-select: none; - border-radius: 1px; - border-right: 1.5px solid var(--box-shadow-color); -/* box-shadow: 0px 0px 1px 0.5px var(--box-shadow-color);*/ + border-right: 1px solid var(--box-shadow-color); display: flex; flex-direction: column; - gap: 0px; + gap: 2px; } #sidebar .sidebar_section { - padding: 7px; - border-radius: var(--border-radius); + padding: 8px 10px; + border-radius: 6px; box-sizing: border-box; - font-size: 16px; + font-size: 14px; + font-weight: 500; + transition: background-color 0.15s ease; } #sidebar .sidebar_section:hover { + background-color: var(--box-shadow-color); } #sidebar .sidebar_section[selected] { background-color: var(--label-color); @@ -478,5 +479,5 @@ html[foo=bar] { display: flex; flex-direction: column; - gap: 3px; + gap: 1px; } diff --git a/src/options/donors/donors.css b/src/options/donors/donors.css index c253fca..56bcca2 100644 --- a/src/options/donors/donors.css +++ b/src/options/donors/donors.css @@ -1,210 +1,317 @@ :root { - --header-height: 120px; - --footer-height: 60px; -} - -html[dark_mode='false'], html:not([dark_mode]) { - --body-color: #161616; - --body-background-color: #FAFAFA; - --label-color: #101010; - --box-shadow-color: rgba(0, 0, 0, 0.30); + --accent: #E91E63; + --accent-light: #FCE4EC; } html[dark_mode='true'] { - --body-color: #DDDDDD; - --body-background-color: #393939; - --label-color: #E9E9E9; - --box-shadow-color: rgba(127, 127, 127, 0.90); + --body-color: #E0E0E0; + --body-background-color: #1a1a2e; + --card-background: #16213e; + --card-border: #0f3460; + --label-color: #E9E9E9; + --box-shadow-color: rgba(0, 0, 0, 0.4); + --accent-light: rgba(233, 30, 99, 0.15); +} + +html[dark_mode='false'], html:not([dark_mode]) { + --body-color: #333; + --body-background-color: #f8f9fa; + --card-background: #fff; + --card-border: #e9ecef; + --label-color: #212529; + --box-shadow-color: rgba(0, 0, 0, 0.08); +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + height: 600px; + overflow: hidden; } body { - padding: var(--header-height) 10px calc(30px + var(--footer-height)); - - display: flex; - justify-content: center; - align-items: center; -} - -html, html * { - font-family: serif; -} - -#back-button { - position: absolute; - top: 5px; - left: 5px; - - text-decoration: none; -} -#info { -/* position: relative;*/ -/* left: 30px;*/ -} - -header { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: var(--header-height); - background-color: var(--body-background-color); - border-bottom: 1px solid var(--label-color); - box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + color: var(--body-color); + line-height: 1.4; +} +.page-container { + height: 600px; + max-width: 640px; + margin: 0 auto; + padding: 12px 16px; display: flex; flex-direction: column; - justify-content: center; +} + +/* Back Button */ +#back-button { + display: inline-flex; align-items: center; + gap: 4px; + padding: 5px 10px; + text-decoration: none; + color: var(--body-color); + background: var(--card-background); + border: 1px solid var(--card-border); + border-radius: 6px; + font-size: 12px; + font-weight: 500; + transition: all 0.2s ease; + width: fit-content; +} + +#back-button:hover { + background: var(--accent-light); + border-color: var(--accent); + color: var(--accent); +} + +#back-button svg { + width: 14px; + height: 14px; +} + +/* Header */ +header { + flex-shrink: 0; + margin-bottom: 16px; +} + +.header-content { + text-align: center; + margin-top: 12px; +} + +.header-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + background: var(--accent-light); + border-radius: 50%; + margin-bottom: 10px; +} + +.header-icon svg { + width: 22px; + height: 22px; + color: var(--accent); } header h1 { - margin-top: 10px; - margin-bottom: 10px; - font-size: 26px; + margin: 0 0 6px; + font-size: 22px; + font-weight: 700; + color: var(--label-color); } -header p { - margin-top: 2px; - margin-bottom: 2px; -} - - -main { - width: 500px; - margin-bottom: 20px; - - display: flex; - flex-direction: column; - gap: 30px; -} - -.donors-list { - padding-left: 20px; - padding-right: 20px; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - column-gap: 25px; - row-gap: 10px; -} - -.donors-list p { +.subtitle { margin: 0; + font-size: 13px; + color: var(--body-color); + opacity: 0.85; } - -footer { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - max-height: var(--footer-height); - - padding: 5px 20px; - - background-color: var(--body-background-color); - border-top: 1px solid var(--label-color); - box-sizing: border-box; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 20px; -} -footer p { - margin: 0; - font-size: 1rem; - text-align: center; +.subtitle.secondary { + margin-top: 4px; + font-size: 12px; + opacity: 0.7; } -#button-container { - width: 100%; - - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; -} - -#info { - position: relative; -} -#tooltip { - visibility: hidden; - width: 300px; - - position: absolute; - bottom: 100%; - left: 0; - transform: translateX(-50%); - z-index: 10; - opacity: 0.98; - - padding: 10px; - - background-color: var(--body-color); - color: var(--body-background-color); - - font-weight: normal; - font-size: 1rem; -} -#info:hover #tooltip, #tooltip:hover { - visibility: visible; -} - -#donate_button { - padding: 3px 10px; - font-size: 1rem; - +.subtitle a { + color: var(--accent); text-decoration: none; - background-color: white; - color: black; - - border: 1px solid rgba(127, 127, 127, 0.90); - outline: none; + font-weight: 500; } + +.subtitle a:hover { + text-decoration: underline; +} + +/* Main content */ +main { + flex: 1; + display: flex; + flex-direction: column; + gap: 12px; + min-height: 0; +} + +/* Tier Cards */ +.tier { + flex: 1; + background: var(--card-background); + border: 1px solid var(--card-border); + border-radius: 12px; + padding: 14px 16px; + box-shadow: 0 1px 4px var(--box-shadow-color); + display: flex; + align-items: flex-start; + gap: 14px; +} + +.tier-header { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; +} + +.tier-badge { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + flex-shrink: 0; + background: var(--accent); + color: white; + font-size: 15px; + font-weight: 700; +} + +.tier-info h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + color: var(--label-color); +} + +.tier-amount { + font-size: 12px; + color: var(--body-color); + opacity: 0.7; +} + +/* Donors List */ +.donors-list { + flex: 1; + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + align-content: center; +} + +.donor-name { + display: inline-block; + padding: 5px 12px; + background: var(--body-background-color); + border-radius: 16px; + font-size: 13px; + color: var(--body-color); +} + +.donor-placeholder { + font-size: 13px; + color: var(--body-color); + opacity: 0.5; + font-style: italic; +} + +/* Footer */ +footer { + flex-shrink: 0; + background: var(--card-background); + border: 1px solid var(--card-border); + border-radius: 12px; + padding: 14px 18px; + margin-top: 16px; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; +} + +.footer-text h3 { + margin: 0; + font-size: 15px; + font-weight: 600; + color: var(--label-color); +} + +/* Donate Button */ +#donate_button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 24px; + background: linear-gradient(135deg, var(--accent) 0%, #C2185B 100%); + color: white; + border: none; + border-radius: 24px; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 3px 10px rgba(233, 30, 99, 0.3); + flex-shrink: 0; +} + #donate_button:hover { - --accent-color: #F5D5D7; - - background-color: var(--accent-color); - border: 1px solid var(--accent-color); - box-shadow: 0px 0px 1px 1px var(--accent-color); + transform: translateY(-1px); + box-shadow: 0 5px 16px rgba(233, 30, 99, 0.4); } +#donate_button svg { + width: 18px; + height: 18px; +} +/* Donate Modal */ #donate-links-container { position: fixed; top: 0; left: 0; - width: 100vw; - height: 100vh; - z-index: 20; - - background-color: rgba(0, 0, 0, 0.5); -} -#donate-links { - position: absolute; - padding: 0; - z-index: 25; - - background-color: var(--body-background-color); - border: 1px solid var(--body-color); - + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + z-index: 1000; display: flex; - flex-direction: column; + align-items: center; justify-content: center; - align-items: stretch; } -#donate-links > * { - padding: 10px 20px; + +#donate-links { + background: var(--card-background); + border-radius: 12px; + padding: 6px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + min-width: 220px; +} + +#donate-links a { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 16px; + color: var(--body-color); text-decoration: none; - box-sizing: border-box; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + transition: background 0.2s ease; +} + +#donate-links a:hover { + background: var(--accent-light); + color: var(--accent); +} + +#donate-links a svg { + width: 20px; + height: 20px; + flex-shrink: 0; } -#donate-links > *:hover { - --accent-color: #F5D5D7; - background-color: var(--accent-color); - color: #303030; -} \ No newline at end of file diff --git a/src/options/donors/donors.html b/src/options/donors/donors.html index 3325f5e..bd130c1 100644 --- a/src/options/donors/donors.html +++ b/src/options/donors/donors.html @@ -23,63 +23,89 @@ +
+
+ + + Back + -
- Back - -

Donors

-

RYS is made possible by donations from people like you.

-

You can also show your support by sharing it with a friend or leaving a review :)

- -
- -
- - - -
-

Tier 1 • $25

-
-

None yet, be the first

+
+
+ +
+

Supporters

+

RYS is made possible by generous donations from people like you.

+

You can also support by sharing with a friend or leaving a review

-
+
-
-

Tier 2 • $10

-
-

None yet, be the first

+
+ + +
+
+
1
+
+

Tier 1

+ $25+ +
+
+
+ Be the first +
+
+ +
+
+
2
+
+

Tier 2

+ $10+ +
+
+
+ Be the first +
+
+ +
+
+
3
+
+

Tier 3

+ $5+ +
+
+
+ Be the first +
+
+ +
+ +
+
+
+

Join our supporters

+
+
-
- -
-

Tier 3 • $5

-
-

None yet, be the first

-
-
- - - - - - - - - - - + +
diff --git a/src/options/donors/donors.js b/src/options/donors/donors.js index 80831ff..c7c9a1b 100644 --- a/src/options/donors/donors.js +++ b/src/options/donors/donors.js @@ -74,8 +74,8 @@ sendGetDonorsRequest().then(x => { const appendDonorNode = name => { const donorNode = templateDonor.cloneNode(true); - const pNode = donorNode.querySelector('p'); - pNode.innerText = name; + const nameNode = donorNode.querySelector('.donor-name') || donorNode.querySelector('p'); + nameNode.innerText = name; donorList.appendChild(donorNode); } diff --git a/src/options/feedback/feedback.css b/src/options/feedback/feedback.css index fd713ca..e8d2ade 100644 --- a/src/options/feedback/feedback.css +++ b/src/options/feedback/feedback.css @@ -1,65 +1,304 @@ :root { - --header-height: 60px; -} - -html[dark_mode='false'], html:not([dark_mode]) { - --body-color: #161616; - --body-background-color: #FAFAFA; - --label-color: #101010; - --box-shadow-color: rgba(0, 0, 0, 0.30); + --accent: #2196F3; + --accent-light: #E3F2FD; + --github: #333; + --discord: #5865F2; + --form: #4CAF50; + --email: #FF5722; } html[dark_mode='true'] { - --body-color: #DDDDDD; - --body-background-color: #393939; - --label-color: #E9E9E9; - --box-shadow-color: rgba(127, 127, 127, 0.90); + --body-color: #E0E0E0; + --body-background-color: #1a1a2e; + --card-background: #16213e; + --card-border: #0f3460; + --label-color: #E9E9E9; + --box-shadow-color: rgba(0, 0, 0, 0.4); + --accent-light: rgba(33, 150, 243, 0.15); + --github: #E0E0E0; +} + +html[dark_mode='false'], html:not([dark_mode]) { + --body-color: #333; + --body-background-color: #f8f9fa; + --card-background: #fff; + --card-border: #e9ecef; + --label-color: #212529; + --box-shadow-color: rgba(0, 0, 0, 0.08); +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + height: 600px; + overflow: hidden; } body { - padding: var(--header-height) 10px 0; - - display: flex; - justify-content: center; - align-items: center; -} - -html, html * { - font-family: serif; -} - -#back-button { - position: absolute; - top: 5px; - left: 5px; - - text-decoration: none; -} -header { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: var(--header-height); - background-color: var(--body-background-color); - border-bottom: 1px solid var(--label-color); - box-sizing: border-box; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 15px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + color: var(--body-color); + line-height: 1.4; } -header h1 { - font-size: 26px; -} - -main { - width: 500px; - +.page-container { + height: 600px; + max-width: 640px; + margin: 0 auto; + padding: 12px 16px; display: flex; flex-direction: column; } + +/* Back Button */ +#back-button { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 5px 10px; + text-decoration: none; + color: var(--body-color); + background: var(--card-background); + border: 1px solid var(--card-border); + border-radius: 6px; + font-size: 12px; + font-weight: 500; + transition: all 0.2s ease; + width: fit-content; +} + +#back-button:hover { + background: var(--accent-light); + border-color: var(--accent); + color: var(--accent); +} + +#back-button svg { + width: 14px; + height: 14px; +} + +/* Header */ +header { + flex-shrink: 0; + margin-bottom: 12px; +} + +.header-content { + text-align: center; + margin-top: 8px; +} + +.header-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: var(--accent-light); + border-radius: 50%; + margin-bottom: 6px; +} + +.header-icon svg { + width: 18px; + height: 18px; + color: var(--accent); +} + +header h1 { + margin: 0; + font-size: 18px; + font-weight: 700; + color: var(--label-color); +} + +.subtitle { + display: none; +} + +/* Main content */ +main { + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; + min-height: 0; +} + +/* Section Cards */ +.section-card { + background: var(--card-background); + border: 1px solid var(--card-border); + border-radius: 10px; + padding: 12px 14px; + box-shadow: 0 1px 4px var(--box-shadow-color); +} + +.section-card h2 { + display: flex; + align-items: center; + gap: 6px; + margin: 0 0 8px; + font-size: 14px; + font-weight: 600; + color: var(--label-color); +} + +.section-card h2 svg { + width: 16px; + height: 16px; + color: var(--accent); + flex-shrink: 0; +} + +.section-card > p { + margin: 0 0 10px; + font-size: 12px; + color: var(--body-color); + opacity: 0.85; +} + +/* Contact Grid */ +.contact-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; +} + +.contact-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + padding: 10px 6px; + background: var(--body-background-color); + border-radius: 8px; + text-decoration: none; + transition: all 0.2s ease; +} + +.contact-card:hover { + transform: translateY(-1px); + box-shadow: 0 3px 10px var(--box-shadow-color); +} + +.contact-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 8px; + flex-shrink: 0; +} + +.contact-icon svg { + width: 18px; + height: 18px; +} + +.contact-icon.github { + background: rgba(51, 51, 51, 0.1); + color: var(--github); +} + +.contact-icon.form { + background: rgba(76, 175, 80, 0.1); + color: var(--form); +} + +.contact-icon.discord { + background: rgba(88, 101, 242, 0.1); + color: var(--discord); +} + +.contact-icon.email { + background: rgba(255, 87, 34, 0.1); + color: var(--email); +} + +.contact-info { + display: flex; + flex-direction: column; + align-items: center; +} + +.contact-name { + font-size: 11px; + font-weight: 600; + color: var(--label-color); + text-align: center; +} + +.contact-desc { + display: none; +} + +/* Troubleshooting */ +.troubleshoot-steps { + margin-bottom: 8px; +} + +.troubleshoot-steps p { + margin: 0 0 4px; + font-size: 12px; + color: var(--body-color); +} + +.troubleshoot-steps ol { + margin: 0; + padding-left: 18px; +} + +.troubleshoot-steps li { + margin-bottom: 2px; + font-size: 12px; + color: var(--body-color); +} + +.divider { + height: 1px; + background: var(--card-border); + margin: 8px 0; +} + +/* Help Request */ +.help-request p { + margin: 0 0 6px; + font-size: 12px; + color: var(--body-color); +} + +.info-box { + background: var(--body-background-color); + border-radius: 8px; +} + +.info-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 6px 12px; +} + +.info-row:not(:last-child) { + border-bottom: 1px solid var(--card-border); +} + +.info-label { + font-size: 12px; + font-weight: 600; + color: var(--label-color); +} + +.info-value { + font-size: 12px; + color: var(--body-color); + opacity: 0.8; +} diff --git a/src/options/feedback/feedback.html b/src/options/feedback/feedback.html index 7bada4e..b7535b0 100644 --- a/src/options/feedback/feedback.html +++ b/src/options/feedback/feedback.html @@ -21,39 +21,115 @@ -
- Back -

Feedback

-
+
+
+ + + Back + -
+
+
+ +
+

Feedback & Support

+

We'd love to hear from you

+
+
-
-

Have a feature idea?

-

I'd love to hear it. Here are some ways to get in touch:

-

Github • Google Form • Discord • or simply email me

-
+
-
-

Is RYS not working?

+
+

+ + Have a feature idea? +

+

Share your thoughts through any of these channels:

-

Try the following:

-
    -
  • refresh the YouTube page
    • -
  • disable and re-enable RYS
    • -
  • uninstall and reinstall RYS
    • -
+
+ +
+ +
+
+ GitHub Issues + Report bugs or request features +
+ -

If that doesn't work, email me at lawrencehook@gmail.com.

-

To help me diagnose the issue, please include the following:

-
    -
  • description of the issue
    • -
  • screenshot or video
    • -
  • browser: ex. firefox
    • -
  • version of RYS: 1.0.0
    • -
-
+ +
+ +
+
+ Google Form + Quick anonymous feedback +
+ -
+ +
+ +
+
+ Discord + Join our community +
+ + + + +
+ Email + lawrencehook@gmail.com +
+ +
+ + +
+

+ + RYS not working? +

+ +
+

Try these quick fixes:

+
    +
  1. Refresh the YouTube page
    2. +
  2. Disable and re-enable RYS
    3. +
  3. Uninstall and reinstall RYS
    4. +
+
+ +
+ +
+

Still having issues? Email us with the following details:

+
+
+ Description + What's happening? +
+
+ Screenshot + A visual helps a lot +
+
+ Browser + detecting... +
+
+ RYS Version + detecting... +
+
+
+
+ + + diff --git a/src/options/footer.css b/src/options/footer.css index d116cce..e3a6a75 100644 --- a/src/options/footer.css +++ b/src/options/footer.css @@ -12,29 +12,33 @@ html[dark_mode='true'] #donate_button .footer-path { position: relative; text-align: center; height: var(--footer-height); + padding: 0 8px; - border-top: 1.5px solid var(--box-shadow-color); - /*border: 1px groove gray;*/ + border-top: 1px solid var(--box-shadow-color); + background-color: var(--body-background-color); display: flex; align-items: center; - /*justify-content: center;*/ + gap: 4px; } #footer svg { width: 20px; - /*height: 90%;*/ cursor: pointer; } #footer a { flex: 1; - flex-shrink: 1; - flex-grow: 1; + padding: 4px 8px; + border-radius: var(--border-radius); + font-size: 0.85rem; + font-weight: 500; + transition: background-color 0.15s ease; } #footer a:hover { - cursor: pointer; + cursor: pointer; + background-color: var(--box-shadow-color); } #donate_button:hover > svg > .footer-path { diff --git a/src/options/general.css b/src/options/general.css index 64c6289..ff6e358 100644 --- a/src/options/general.css +++ b/src/options/general.css @@ -2,9 +2,9 @@ --header-height: 30px; --header-padding: 5px; --body-height: 400px; - --footer-height: 25px; + --footer-height: 28px; - --border-radius: 1px; + --border-radius: 4px; --red-color: hsl(358 100% 49%); --blue-color: hsl(238 100% 49%); @@ -70,7 +70,7 @@ body { } body, body * { - font-family: Helvetica; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } .hidden { diff --git a/src/options/header.css b/src/options/header.css index 967e3bc..ee75725 100644 --- a/src/options/header.css +++ b/src/options/header.css @@ -16,16 +16,17 @@ html[dark_mode='false'] #header-light { display: none } #header { height: var(--header-height); - padding: var(--header-padding); + padding: var(--header-padding) 8px; - border-bottom: 1.5px solid var(--box-shadow-color); + border-bottom: 1px solid var(--box-shadow-color); + background-color: var(--body-background-color); display: flex; justify-content: space-between; align-items: center; - gap: 7px; + gap: 10px; - --icon-dim: 30px; + --icon-dim: 28px; } #header-logo-link { @@ -47,15 +48,18 @@ html[dark_mode='false'] #header-light { display: none } margin-right: auto; } #search_bar input { - padding: 3px 10px; - font-size: 1rem; + padding: 4px 12px; + font-size: 0.9rem; background-color: var(--body-background-color); border: 1px solid var(--box-shadow-color); - border-radius: var(--border-radius); - box-shadow: 0px 0px 0px 0px var(--box-shadow-color); - + border-radius: 6px; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +#search_bar input:focus { + border-color: var(--light-blue); + box-shadow: 0 0 0 2px rgba(117, 102, 204, 0.15); } #power-icon { @@ -99,36 +103,39 @@ html[schedule='true'] #power-icon:hover #power-pop-up { max-width: var(--power-icon-dim); } #power-options { - font-size: 16px; + font-size: 14px; position: fixed; z-index: 10; top: calc(5px + var(--header-height) + 2 * var(--header-padding)); - padding: 3px 1px; + padding: 6px; user-select: none; background-color: var(--body-background-color); color: var(--body-color); - border-radius: var(--border-radius); - box-shadow: 0px 0px 6px 3px var(--box-shadow-color); + border-radius: 8px; + border: 1px solid var(--box-shadow-color); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; } #power-options hr { - width: 92%; - margin: 3px auto; + width: 100%; + margin: 4px 0; + border: none; + border-top: 1px solid var(--box-shadow-color); } #power-options > *:not(hr) { - border-radius: var(--border-radius); - margin: 1px 3px; - padding: 4px 6px; + border-radius: 6px; + padding: 6px 10px; cursor: default; + transition: background-color 0.15s ease; } #power-options > *:not(hr):hover, #power-options > *:not(hr):hover * { - background-color: #0600FB; + background-color: var(--blue-color); color: white !important; } #power-options a, #power-options span { @@ -167,35 +174,38 @@ html[foo=bar] max-width: var(--icon-dim); } #settings-menu { - font-size: 16px; + font-size: 14px; position: fixed; z-index: 10; top: calc(5px + var(--header-height) + 2 * var(--header-padding)); - padding: 3px 1px; + padding: 6px; user-select: none; background-color: var(--body-background-color); color: var(--body-color); - border-radius: var(--border-radius); - box-shadow: 0px 0px 6px 3px var(--box-shadow-color); + border-radius: 8px; + border: 1px solid var(--box-shadow-color); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; } #settings-menu hr { - width: 92%; - margin: 3px auto; + width: 100%; + margin: 4px 0; + border: none; + border-top: 1px solid var(--box-shadow-color); } #settings-menu > *:not(hr) { - border-radius: var(--border-radius); - margin: 1px 3px; - padding: 4px 6px; + border-radius: 6px; + padding: 6px 10px; cursor: default; + transition: background-color 0.15s ease; } #settings-menu > *:not(hr):hover { - background-color: #0600FB; + background-color: var(--blue-color); color: white; } #settings-menu a { diff --git a/src/options/options.css b/src/options/options.css index aa83ad0..3012f5c 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -1,24 +1,24 @@ #primary_options .section_container { - margin: 0px 2px; - padding: 5px; + margin: 0px 4px; + padding: 4px 6px; box-sizing: border-box; background-color: var(--body-background-color); - border-radius: 1px; -/* box-shadow: 0px 0px 0.5px 0.5px var(--box-shadow-color);*/ + border-radius: 6px; display: flex; flex-direction: column; - gap: 1px; + gap: 0px; } #primary_options .section_label { - margin-bottom: 3px; - margin-left: 35px; + margin-bottom: 2px; + margin-left: 33px; width: fit-content; - font-size: 1rem; + font-size: 0.9rem; + font-weight: 600; text-align: left; color: var(--label-color); @@ -34,7 +34,17 @@ div.option { cursor: default; display: flex; align-items: flex-start; - padding-left: 2px; + padding: 1px 4px; + border-radius: 4px; + transition: background-color 0.1s ease; +} + +div.option:hover { + background-color: rgba(0, 0, 0, 0.03); +} + +html[dark_mode='true'] div.option:hover { + background-color: rgba(255, 255, 255, 0.03); } /* Visual cues when the extension is enabled vs. disabled */ @@ -56,7 +66,7 @@ div.option { position: relative; top: 2px; margin-left: 8px; - font-size: 0.95rem; + font-size: 0.9rem; } .noselect {