From be70086e7e0763e67521fc0a6798d01c026bcfd2 Mon Sep 17 00:00:00 2001 From: Joel Brock Date: Thu, 23 Apr 2026 09:00:53 -0700 Subject: [PATCH] feat: settings popup HTML and CSS with all toggle categories --- popup/popup.css | 246 ++++++++++++++++++++++++++++++++++++++++++++ popup/popup.html | 259 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 499 insertions(+), 6 deletions(-) create mode 100644 popup/popup.css diff --git a/popup/popup.css b/popup/popup.css new file mode 100644 index 0000000..73c731f --- /dev/null +++ b/popup/popup.css @@ -0,0 +1,246 @@ +/* Outlook Relook — Settings Popup */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + width: 360px; + max-height: 540px; + overflow-y: auto; + font-family: system-ui, -apple-system, sans-serif; + font-size: 13px; + line-height: 1.4; + color: #222; + background: #fff; + padding: 0; +} + +/* Header */ +.or-header { + padding: 12px 16px; + border-bottom: 1px solid #e5e5e5; + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + background: #fff; + z-index: 10; +} + +.or-header h1 { + font-size: 15px; + font-weight: 600; + letter-spacing: -0.02em; +} + +.or-header .or-version { + font-size: 11px; + color: #999; +} + +/* Sections */ +.or-section { + border-bottom: 1px solid #f0f0f0; +} + +.or-section-header { + padding: 10px 16px 6px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #888; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; +} + +.or-section-header::after { + content: '\25B6'; /* right-pointing triangle */ + font-size: 8px; + transition: transform 0.15s; +} + +.or-section.open .or-section-header::after { + transform: rotate(90deg); +} + +.or-section-body { + display: none; + padding: 0 16px 10px; +} + +.or-section.open .or-section-body { + display: block; +} + +/* Toggle rows */ +.or-toggle-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 0; + gap: 8px; +} + +.or-toggle-row label { + flex: 1; + cursor: pointer; + font-size: 12.5px; +} + +/* Toggle switch */ +.or-switch { + position: relative; + width: 36px; + height: 20px; + flex-shrink: 0; +} + +.or-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.or-switch .slider { + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background: #ccc; + border-radius: 10px; + cursor: pointer; + transition: background 0.2s; +} + +.or-switch .slider::before { + content: ''; + position: absolute; + width: 16px; + height: 16px; + left: 2px; + top: 2px; + background: #fff; + border-radius: 50%; + transition: transform 0.2s; +} + +.or-switch input:checked + .slider { + background: #1976d2; +} + +.or-switch input:checked + .slider::before { + transform: translateX(16px); +} + +/* Select/dropdown rows */ +.or-select-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 0; + gap: 8px; +} + +.or-select-row label { + flex: 1; + font-size: 12.5px; +} + +.or-select-row select { + padding: 3px 8px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 12px; + background: #fff; + color: #222; + cursor: pointer; +} + +/* Color picker */ +.or-color-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 0; + gap: 8px; +} + +.or-color-row label { + flex: 1; + font-size: 12.5px; +} + +.or-color-row input[type="color"] { + width: 32px; + height: 24px; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; + padding: 0; +} + +/* Radio group */ +.or-radio-group { + display: flex; + gap: 12px; + padding: 5px 0; +} + +.or-radio-group label { + display: flex; + align-items: center; + gap: 4px; + font-size: 12.5px; + cursor: pointer; +} + +/* Footer */ +.or-footer { + padding: 10px 16px; + display: flex; + gap: 8px; + justify-content: flex-end; +} + +.or-footer button { + padding: 5px 12px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + font-size: 12px; + cursor: pointer; + color: #222; +} + +.or-footer button:hover { + background: #f0f0f0; +} + +.or-footer button.danger { + color: #d32f2f; + border-color: #d32f2f; +} + +.or-footer button.danger:hover { + background: #fce4ec; +} + +/* Scrollbar */ +body::-webkit-scrollbar { + width: 6px; +} + +body::-webkit-scrollbar-track { + background: transparent; +} + +body::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 3px; +} diff --git a/popup/popup.html b/popup/popup.html index 7cf824a..ec8cf44 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -2,13 +2,260 @@ - + -

Outlook Relook

-

Settings panel coming soon.

+ +
+

Outlook Relook

+ +
+ + +
+
Theme & Appearance
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+ + +
+
Density & Spacing
+
+
+ + +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
Hide Elements
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
Readability
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+ + +
+
Behavior
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
Keyboard Navigation
+
+
+ +
+
+
+ j/k or arrows to navigate, x/Space to select, # delete, e archive, Shift+i read, Shift+u unread, v move, Esc deselect +
+
+
+ + +
+
Quick Actions
+
+
+ +
+
+
+ +
+
+
+
+ + +
+ + + +
+ + + +