mirror of
https://github.com/lawrencehook/remove-youtube-suggestions.git
synced 2026-07-25 06:54:31 +00:00
feat(extension): revamp donate/feedback pages and polish options UI (#189)
- Redesign donors page with modern card-based tier system - Redesign feedback page with contact grid and cleaner layout - Both pages now fit within 600px without scrolling - Apply subtle UI improvements to main options page: - System fonts, softer borders, hover states - Improved sidebar, menus, and footer styling - Denser option spacing for info-density Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Lawrence Hook
GitHub
+11
-10
@@ -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;
|
||||
}
|
||||
|
||||
+280
-173
@@ -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;
|
||||
}
|
||||
@@ -23,63 +23,89 @@
|
||||
|
||||
<div hidden id="donate-links-container">
|
||||
<div id="donate-links">
|
||||
<a href="https://paypal.me/lawrencehook" target="_blank">PayPal</a>
|
||||
<a href='https://www.paypal.com/donate/?cmd=_donations&business=FF9K9YD6K6SWG&Z3JncnB0=' target="_blank">Credit or Debit Card</a>
|
||||
<a href="https://paypal.me/lawrencehook" target="_blank">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .757-.63h6.607c2.19 0 3.873.6 5.01 1.782.453.47.79 1.01 1.003 1.605.226.631.32 1.366.278 2.183-.003.063-.007.123-.012.183a6.52 6.52 0 0 1-.07.573c-.455 2.653-2.007 4.478-4.486 5.27a8.148 8.148 0 0 1-2.458.342H9.653a.77.77 0 0 0-.758.63l-.813 5.17a.641.641 0 0 1-.633.54h-.373v-.03z"/></svg>
|
||||
PayPal
|
||||
</a>
|
||||
<a href='https://www.paypal.com/donate/?cmd=_donations&business=FF9K9YD6K6SWG&Z3JncnB0=' target="_blank">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>
|
||||
Credit or Debit Card
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-container">
|
||||
<header>
|
||||
<a href="/options/main.html" id="back-button">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<header>
|
||||
<a href="/options/main.html" id="back-button">Back</a>
|
||||
|
||||
<h1>Donors</h1>
|
||||
<p>RYS is made possible by donations from people like you.</p>
|
||||
<p>You can also show your support by sharing it with a friend or leaving a <a id="review-link" target="_blank">review</a> :)</p>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<template id='template-donor'><p></p></template>
|
||||
|
||||
<article id='tier-1' class="tier" min-amount="25">
|
||||
<h3>Tier 1 • $25</h3>
|
||||
<div class="donors-list">
|
||||
<p>None yet, be the first</p>
|
||||
<div class="header-content">
|
||||
<div class="header-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||||
</div>
|
||||
<h1>Supporters</h1>
|
||||
<p class="subtitle">RYS is made possible by generous donations from people like you.</p>
|
||||
<p class="subtitle secondary">You can also support by sharing with a friend or leaving a <a id="review-link" target="_blank">review</a></p>
|
||||
</div>
|
||||
</article>
|
||||
</header>
|
||||
|
||||
<article id='tier-2' class="tier" min-amount="10">
|
||||
<h3>Tier 2 • $10</h3>
|
||||
<div class="donors-list">
|
||||
<p>None yet, be the first</p>
|
||||
<main>
|
||||
<template id='template-donor'><span class="donor-name"></span></template>
|
||||
|
||||
<article id='tier-1' class="tier" min-amount="25">
|
||||
<div class="tier-header">
|
||||
<div class="tier-badge">1</div>
|
||||
<div class="tier-info">
|
||||
<h3>Tier 1</h3>
|
||||
<span class="tier-amount">$25+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="donors-list">
|
||||
<span class="donor-placeholder">Be the first</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article id='tier-2' class="tier" min-amount="10">
|
||||
<div class="tier-header">
|
||||
<div class="tier-badge">2</div>
|
||||
<div class="tier-info">
|
||||
<h3>Tier 2</h3>
|
||||
<span class="tier-amount">$10+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="donors-list">
|
||||
<span class="donor-placeholder">Be the first</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article id='tier-3' class="tier" min-amount="5">
|
||||
<div class="tier-header">
|
||||
<div class="tier-badge">3</div>
|
||||
<div class="tier-info">
|
||||
<h3>Tier 3</h3>
|
||||
<span class="tier-amount">$5+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="donors-list">
|
||||
<span class="donor-placeholder">Be the first</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-text">
|
||||
<h3>Join our supporters</h3>
|
||||
</div>
|
||||
<button id='donate_button'>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||||
Donate
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article id='tier-3' class="tier" min-amount="5">
|
||||
<h3>Tier 3 • $5</h3>
|
||||
<div class="donors-list">
|
||||
<p>None yet, be the first</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- <article id='acknowledgments'> -->
|
||||
<!-- <h1>Special Acknowledgements</h1> -->
|
||||
<!-- <div class="donors-list"> -->
|
||||
<!-- <p>Sample Donor</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- </article> -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
<div id="button-container">
|
||||
<h3>Join the ranks of our generous donors <a id="info">ⓘ <div id='tooltip'>Names are anonymized by default. Want to add your name to the list? Add a note to your donation or email me at lawrencehook@gmail.com.</div></a></h3>
|
||||
|
||||
<button id='donate_button'>Donate</button>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -21,39 +21,115 @@
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="/options/main.html" id="back-button">Back</a>
|
||||
<h1>Feedback</h1>
|
||||
</header>
|
||||
<div class="page-container">
|
||||
<header>
|
||||
<a href="/options/main.html" id="back-button">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<main>
|
||||
<div class="header-content">
|
||||
<div class="header-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/></svg>
|
||||
</div>
|
||||
<h1>Feedback & Support</h1>
|
||||
<p class="subtitle">We'd love to hear from you</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<h3>Have a feature idea?</h3>
|
||||
<p>I'd love to hear it. Here are some ways to get in touch:</p>
|
||||
<p><a href="https://github.com/lawrencehook/remove-youtube-suggestions/issues">Github</a> • <a href="https://docs.google.com/forms/d/1AzQQxTWgG6M5N87jinvXKQkGS6Mehzg19XV4mjteTK0/edit">Google Form</a> • <a href="https://discord.gg/bBY7FhHYEA">Discord</a> • or simply email me</p>
|
||||
</article>
|
||||
<main>
|
||||
|
||||
<article>
|
||||
<h3>Is RYS not working?</h3>
|
||||
<section class="section-card">
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
|
||||
Have a feature idea?
|
||||
</h2>
|
||||
<p>Share your thoughts through any of these channels:</p>
|
||||
|
||||
<p>Try the following:</p>
|
||||
<ul>
|
||||
<li>refresh the YouTube page</li>
|
||||
<li>disable and re-enable RYS</li>
|
||||
<li>uninstall and reinstall RYS</li>
|
||||
</ul>
|
||||
<div class="contact-grid">
|
||||
<a href="https://github.com/lawrencehook/remove-youtube-suggestions/issues" target="_blank" class="contact-card">
|
||||
<div class="contact-icon github">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<span class="contact-name">GitHub Issues</span>
|
||||
<span class="contact-desc">Report bugs or request features</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<p>If that doesn't work, email me at lawrencehook@gmail.com.</p>
|
||||
<p>To help me diagnose the issue, please include the following:</p>
|
||||
<ul>
|
||||
<li>description of the issue</li>
|
||||
<li>screenshot or video</li>
|
||||
<li>browser: ex. <span id='browser-version'>firefox</span></li>
|
||||
<li>version of RYS: <span id='extension-version'>1.0.0</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
<a href="https://docs.google.com/forms/d/1AzQQxTWgG6M5N87jinvXKQkGS6Mehzg19XV4mjteTK0/edit" target="_blank" class="contact-card">
|
||||
<div class="contact-icon form">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<span class="contact-name">Google Form</span>
|
||||
<span class="contact-desc">Quick anonymous feedback</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</main>
|
||||
<a href="https://discord.gg/bBY7FhHYEA" target="_blank" class="contact-card">
|
||||
<div class="contact-icon discord">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<span class="contact-name">Discord</span>
|
||||
<span class="contact-desc">Join our community</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="mailto:lawrencehook@gmail.com" class="contact-card">
|
||||
<div class="contact-icon email">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<span class="contact-name">Email</span>
|
||||
<span class="contact-desc">lawrencehook@gmail.com</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-card">
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
|
||||
RYS not working?
|
||||
</h2>
|
||||
|
||||
<div class="troubleshoot-steps">
|
||||
<p>Try these quick fixes:</p>
|
||||
<ol>
|
||||
<li>Refresh the YouTube page</li>
|
||||
<li>Disable and re-enable RYS</li>
|
||||
<li>Uninstall and reinstall RYS</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="help-request">
|
||||
<p>Still having issues? Email us with the following details:</p>
|
||||
<div class="info-box">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Description</span>
|
||||
<span class="info-value">What's happening?</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Screenshot</span>
|
||||
<span class="info-value">A visual helps a lot</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Browser</span>
|
||||
<span class="info-value" id='browser-version'>detecting...</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">RYS Version</span>
|
||||
<span class="info-value" id='extension-version'>detecting...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+11
-7
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
+39
-29
@@ -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 {
|
||||
|
||||
+20
-10
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user