cottongin
2abb71fbb8
Replace native color inputs with swatch divs wired to the shared tabbed picker widget for global and per-subreddit color controls. Co-authored-by: Cursor <cursoragent@cursor.com>
77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup-container">
|
|
<h1>Reddit Tweaks</h1>
|
|
|
|
<div class="section">
|
|
<label class="toggle-row">
|
|
<span>Enabled</span>
|
|
<input type="checkbox" id="enabled">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<label for="darkMode">Dark Mode</label>
|
|
<select id="darkMode">
|
|
<option value="auto">Auto (detect RES)</option>
|
|
<option value="light">Force Light</option>
|
|
<option value="dark">Force Dark</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Light Mode Colors</h2>
|
|
<fieldset>
|
|
<legend>Subreddit Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="light.subredditBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="light.subredditBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="light.subredditTextColor"></div></label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Comments Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="light.commentsBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="light.commentsBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="light.commentsTextColor"></div></label>
|
|
</fieldset>
|
|
<button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Dark Mode Colors</h2>
|
|
<fieldset>
|
|
<legend>Subreddit Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="dark.subredditBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="dark.subredditBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="dark.subredditTextColor"></div></label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Comments Badge</legend>
|
|
<label>Background <div class="rt-color-swatch" id="dark.commentsBgColor"></div></label>
|
|
<label>Border <div class="rt-color-swatch" id="dark.commentsBorderColor"></div></label>
|
|
<label>Text <div class="rt-color-swatch" id="dark.commentsTextColor"></div></label>
|
|
</fieldset>
|
|
<button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Per-Subreddit Overrides</h2>
|
|
<p class="section-hint">Set custom subreddit badge colors per mode.</p>
|
|
<div id="subredditList"></div>
|
|
<button id="addSubreddit" class="btn-secondary">+ Add Subreddit</button>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<button id="resetAll" class="btn-danger">Reset All Settings</button>
|
|
</div>
|
|
</div>
|
|
<script src="../lib/settings.js"></script>
|
|
<script src="../content/tweaks/color-picker.js"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|