bvandeusen/GallerySubscriber
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

tuning ui and adding adaptive themeing to extension

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-01-25 18:47:06 -05:00
parent dc6755a0c2
commit 997f31ae27
23 changed files with 978 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/icons/icon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#1976D2" d="M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M4,18V6H20V18H4M6,10H8V8H6V10M6,14H8V12H6V14M10,10H18V8H10V10M10,14H18V12H10V14Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 253 B

extension/manifest.json
+3 -10
View File
@@ -19,12 +19,7 @@
"browser_action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "icons/icon-16.png",
"32": "icons/icon-32.png",
"48": "icons/icon-48.png",
"128": "icons/icon-128.png"
},
"default_icon": "icons/icon.svg",
"default_title": "GallerySubscriber"
},
@@ -44,9 +39,7 @@
},
"icons": {
"16": "icons/icon-16.png",
"32": "icons/icon-32.png",
"48": "icons/icon-48.png",
"128": "icons/icon-128.png"
"48": "icons/icon.svg",
"96": "icons/icon.svg"
}
}
extension/options/options.html
+73 -11
View File
@@ -4,8 +4,10 @@
<meta charset="UTF-8">
<title>GallerySubscriber Settings</title>
<style>
/* Light theme (default) */
:root {
--primary-color: #1976d2;
--primary-hover: #1565c0;
--success-color: #4caf50;
--error-color: #f44336;
--bg-color: #f5f5f5;
@@ -13,6 +15,64 @@
--text-color: #212121;
--text-secondary: #757575;
--border-color: #e0e0e0;
--input-bg: #ffffff;
--btn-secondary-bg: #f5f5f5;
--btn-secondary-hover: #eeeeee;
--instructions-bg: #e3f2fd;
--instructions-title: #1565c0;
--code-bg: rgba(0,0,0,0.08);
--result-success-bg: #e8f5e9;
--result-success-text: #2e7d32;
--result-error-bg: #ffebee;
--result-error-text: #c62828;
}
/* Dark theme */
[data-theme="dark"] {
--primary-color: #64b5f6;
--primary-hover: #42a5f5;
--success-color: #81c784;
--error-color: #e57373;
--bg-color: #121212;
--card-bg: #1e1e1e;
--text-color: #e0e0e0;
--text-secondary: #9e9e9e;
--border-color: #424242;
--input-bg: #2d2d2d;
--btn-secondary-bg: #2d2d2d;
--btn-secondary-hover: #3d3d3d;
--instructions-bg: #1a2a3a;
--instructions-title: #64b5f6;
--code-bg: rgba(255,255,255,0.1);
--result-success-bg: #1b3d1b;
--result-success-text: #81c784;
--result-error-bg: #3d1b1b;
--result-error-text: #e57373;
}
/* Auto-detect system theme preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: #64b5f6;
--primary-hover: #42a5f5;
--success-color: #81c784;
--error-color: #e57373;
--bg-color: #121212;
--card-bg: #1e1e1e;
--text-color: #e0e0e0;
--text-secondary: #9e9e9e;
--border-color: #424242;
--input-bg: #2d2d2d;
--btn-secondary-bg: #2d2d2d;
--btn-secondary-hover: #3d3d3d;
--instructions-bg: #1a2a3a;
--instructions-title: #64b5f6;
--code-bg: rgba(255,255,255,0.1);
--result-success-bg: #1b3d1b;
--result-success-text: #81c784;
--result-error-bg: #3d1b1b;
--result-error-text: #e57373;
}
}
* {
@@ -80,6 +140,8 @@
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--input-bg);
color: var(--text-color);
transition: border-color 0.15s;
}
@@ -122,17 +184,17 @@
}
.btn-primary:hover {
background: #1565c0;
background: var(--primary-hover);
}
.btn-secondary {
background: #f5f5f5;
background: var(--btn-secondary-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: #eeeeee;
background: var(--btn-secondary-hover);
}
.btn:disabled {
@@ -159,13 +221,13 @@
}
.result.success {
background: #e8f5e9;
color: #2e7d32;
background: var(--result-success-bg);
color: var(--result-success-text);
}
.result.error {
background: #ffebee;
color: #c62828;
background: var(--result-error-bg);
color: var(--result-error-text);
}
.connection-test {
@@ -179,7 +241,7 @@
width: 10px;
height: 10px;
border-radius: 50%;
background: #9e9e9e;
background: var(--text-secondary);
}
.status-dot.connected {
@@ -191,7 +253,7 @@
}
.instructions {
background: #e3f2fd;
background: var(--instructions-bg);
border-radius: 6px;
padding: 16px;
margin-bottom: 16px;
@@ -201,7 +263,7 @@
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: #1565c0;
color: var(--instructions-title);
}
.instructions ol {
@@ -215,7 +277,7 @@
}
.instructions code {
background: rgba(0,0,0,0.08);
background: var(--code-bg);
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
extension/popup/popup.css
+81 -18
View File
@@ -1,12 +1,75 @@
/* Light theme (default) */
:root {
--primary-color: #1976d2;
--primary-hover: #1565c0;
--success-color: #4caf50;
--warning-color: #ff9800;
--error-color: #f44336;
--bg-color: #ffffff;
--bg-secondary: #f5f5f5;
--bg-hover: #f5f9ff;
--text-color: #212121;
--text-secondary: #757575;
--border-color: #e0e0e0;
--alert-warning-bg: #fff8e1;
--alert-warning-border: #ffcc02;
--alert-warning-text: #795548;
--status-success-bg: #e8f5e9;
--status-success-text: #2e7d32;
--status-success-border: #a5d6a7;
--status-error-bg: #ffebee;
--status-error-text: #c62828;
--status-error-border: #ef9a9a;
}
/* Dark theme */
[data-theme="dark"] {
--primary-color: #64b5f6;
--primary-hover: #42a5f5;
--success-color: #81c784;
--warning-color: #ffb74d;
--error-color: #e57373;
--bg-color: #1e1e1e;
--bg-secondary: #2d2d2d;
--bg-hover: #2a3a4a;
--text-color: #e0e0e0;
--text-secondary: #9e9e9e;
--border-color: #424242;
--alert-warning-bg: #3d3224;
--alert-warning-border: #8b6914;
--alert-warning-text: #ffcc02;
--status-success-bg: #1b3d1b;
--status-success-text: #81c784;
--status-success-border: #2e7d32;
--status-error-bg: #3d1b1b;
--status-error-text: #e57373;
--status-error-border: #c62828;
}
/* Auto-detect system theme preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: #64b5f6;
--primary-hover: #42a5f5;
--success-color: #81c784;
--warning-color: #ffb74d;
--error-color: #e57373;
--bg-color: #1e1e1e;
--bg-secondary: #2d2d2d;
--bg-hover: #2a3a4a;
--text-color: #e0e0e0;
--text-secondary: #9e9e9e;
--border-color: #424242;
--alert-warning-bg: #3d3224;
--alert-warning-border: #8b6914;
--alert-warning-text: #ffcc02;
--status-success-bg: #1b3d1b;
--status-success-text: #81c784;
--status-success-border: #2e7d32;
--status-error-bg: #3d1b1b;
--status-error-text: #e57373;
--status-error-border: #c62828;
}
}
* {
@@ -91,7 +154,7 @@ body {
.platform-card:hover:not(.disabled) {
border-color: var(--primary-color);
background: #f5f9ff;
background: var(--bg-hover);
}
.platform-card.disabled {
@@ -176,17 +239,17 @@ body {
}
.btn-primary:hover {
background: #1565c0;
background: var(--primary-hover);
}
.btn-secondary {
background: #f5f5f5;
background: var(--bg-secondary);
color: var(--text-color);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: #eeeeee;
background: var(--border-color);
}
.btn:disabled {
@@ -205,7 +268,7 @@ body {
}
.btn-icon:hover {
background: #f5f5f5;
background: var(--bg-secondary);
color: var(--text-color);
}
@@ -234,9 +297,9 @@ body {
}
.alert-warning {
background: #fff8e1;
border: 1px solid #ffcc02;
color: #795548;
background: var(--alert-warning-bg);
border: 1px solid var(--alert-warning-border);
color: var(--alert-warning-text);
}
.status-message {
@@ -247,21 +310,21 @@ body {
}
.status-message.success {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
background: var(--status-success-bg);
color: var(--status-success-text);
border: 1px solid var(--status-success-border);
}
.status-message.error {
background: #ffebee;
color: #c62828;
border: 1px solid #ef9a9a;
background: var(--status-error-bg);
color: var(--status-error-text);
border: 1px solid var(--status-error-border);
}
.status-message.warning {
background: #fff8e1;
color: #795548;
border: 1px solid #ffcc02;
background: var(--alert-warning-bg);
color: var(--alert-warning-text);
border: 1px solid var(--alert-warning-border);
}
.footer {
@@ -274,7 +337,7 @@ body {
.version {
font-size: 11px;
color: #9e9e9e;
color: var(--text-secondary);
}
.hidden {
extension/popup/popup.html
+1 -1
View File
@@ -7,7 +7,7 @@
<body>
<div class="popup-container">
<header class="header">
<img src="../icons/icon-32.png" alt="GallerySubscriber" class="logo">
<img src="../icons/icon.svg" alt="GallerySubscriber" class="logo">
<h1>GallerySubscriber</h1>
<span id="connection-status" class="status-indicator" title="Disconnected"></span>
</header>