designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: settings popup HTML and CSS with all toggle categories

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 09:00:53 -07:00
parent b59ee18a37
commit be70086e7e
2 changed files with 499 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
popup/popup.css Normal file
View File

@@ -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;
}