Skip to content

Commit 0dba145

Browse files
maro114510maro114510
authored
Merge pull request #1 from maro114510/update-styling
style: Update popup styling
2 parents e1db277 + a26a329 commit 0dba145

3 files changed

Lines changed: 171 additions & 36 deletions

File tree

‎popup.css‎

Lines changed: 124 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,25 @@ body {
1111

1212
.panel {
1313
width: 320px;
14-
padding: 16px;
14+
padding: 14px 16px 8px;
1515
}
1616

1717
.title {
18-
margin: 0 0 4px;
18+
margin: 0 0 6px;
1919
font-size: 18px;
20+
display: flex;
21+
align-items: center;
22+
gap: 8px;
2023
}
2124

2225
.subtitle {
23-
margin: 0 0 16px;
26+
margin: 0 0 12px;
2427
font-size: 12px;
2528
color: #596273;
2629
}
2730

2831
.section {
29-
margin-bottom: 16px;
32+
margin-bottom: 12px;
3033
}
3134

3235
.group {
@@ -36,6 +39,9 @@ body {
3639
}
3740

3841
.legend {
42+
display: inline-flex;
43+
align-items: center;
44+
gap: 6px;
3945
font-size: 12px;
4046
color: #596273;
4147
padding: 0 6px;
@@ -44,23 +50,43 @@ body {
4450
.option {
4551
display: flex;
4652
align-items: center;
47-
gap: 8px;
48-
margin-bottom: 8px;
53+
gap: 10px;
54+
margin-bottom: 6px;
4955
font-size: 13px;
5056
}
5157

52-
.count-row {
53-
display: flex;
58+
.option-radio {
59+
padding: 6px 8px;
60+
border-radius: 8px;
61+
transition: background 0.15s ease, border-color 0.15s ease;
62+
}
63+
64+
.option-radio:has(input[type="radio"]:checked) {
65+
background: rgba(26, 115, 232, 0.08);
66+
}
67+
68+
.option-radio:has(input[type="radio"]:focus-visible) {
69+
background: rgba(26, 115, 232, 0.12);
70+
}
71+
72+
.option-inline {
73+
flex-wrap: wrap;
74+
gap: 8px 10px;
75+
}
76+
77+
.inline-count {
78+
display: inline-flex;
5479
align-items: center;
55-
gap: 8px;
56-
margin-left: 24px;
80+
gap: 6px;
81+
margin-left: 4px;
5782
}
5883

5984
#count {
60-
width: 72px;
61-
padding: 4px 6px;
62-
border-radius: 6px;
85+
width: 64px;
86+
padding: 4px 10px;
87+
border-radius: 999px;
6388
border: 1px solid #c5c9d3;
89+
background: #ffffff;
6490
}
6591

6692
.count-label {
@@ -75,8 +101,61 @@ body {
75101
font-size: 13px;
76102
}
77103

104+
input[type="radio"],
105+
input[type="checkbox"] {
106+
appearance: none;
107+
width: 16px;
108+
height: 16px;
109+
border: 1.5px solid #b8c0cc;
110+
border-radius: 50%;
111+
display: grid;
112+
place-content: center;
113+
margin: 0;
114+
background: #ffffff;
115+
transition: border-color 0.15s ease, box-shadow 0.15s ease,
116+
background 0.15s ease;
117+
}
118+
119+
input[type="checkbox"] {
120+
border-radius: 4px;
121+
}
122+
123+
input[type="radio"]::before,
124+
input[type="checkbox"]::before {
125+
content: "";
126+
width: 8px;
127+
height: 8px;
128+
transform: scale(0);
129+
transition: transform 0.12s ease;
130+
background: #1a73e8;
131+
border-radius: 50%;
132+
}
133+
134+
input[type="checkbox"]::before {
135+
width: 10px;
136+
height: 10px;
137+
border-radius: 2px;
138+
}
139+
140+
input[type="radio"]:checked::before,
141+
input[type="checkbox"]:checked::before {
142+
transform: scale(1);
143+
}
144+
145+
input[type="radio"]:focus-visible,
146+
input[type="checkbox"]:focus-visible {
147+
outline: none;
148+
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
149+
border-color: #1a73e8;
150+
}
151+
152+
label:hover input[type="radio"],
153+
label:hover input[type="checkbox"] {
154+
border-color: #8fa3bf;
155+
}
156+
78157
.actions {
79-
margin-top: 8px;
158+
margin-top: 6px;
80159
}
81160

82161
.primary {
@@ -88,6 +167,10 @@ body {
88167
color: #ffffff;
89168
font-size: 14px;
90169
cursor: pointer;
170+
display: flex;
171+
align-items: center;
172+
justify-content: center;
173+
gap: 8px;
91174
}
92175

93176
.primary:disabled {
@@ -96,8 +179,33 @@ body {
96179
}
97180

98181
.status {
99-
margin: 8px 0 0;
100-
min-height: 16px;
182+
margin: 4px 0 0;
183+
min-height: 0;
101184
font-size: 12px;
102185
color: #374151;
103186
}
187+
188+
.status:empty {
189+
display: none;
190+
}
191+
192+
.icon {
193+
width: 16px;
194+
height: 16px;
195+
stroke: currentColor;
196+
fill: none;
197+
stroke-width: 2;
198+
stroke-linecap: round;
199+
stroke-linejoin: round;
200+
color: #52607a;
201+
}
202+
203+
.title .icon {
204+
color: #1a73e8;
205+
width: 18px;
206+
height: 18px;
207+
}
208+
209+
.primary .icon {
210+
color: #ffffff;
211+
}

‎popup.html‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,69 @@
88
</head>
99
<body>
1010
<main class="panel">
11-
<h1 class="title">Feedly Read Later</h1>
12-
<p class="subtitle">Open saved items in background tabs and unsave them.</p>
11+
<h1 class="title">
12+
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
13+
<path d="M12 7v14" />
14+
<path
15+
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
16+
/>
17+
</svg>
18+
Feedly Read Later
19+
</h1>
20+
<p class="subtitle">
21+
Open saved items in background tabs, then unsave them.
22+
</p>
1323

1424
<section class="section">
1525
<fieldset class="group">
16-
<legend class="legend">Open mode</legend>
17-
<label class="option">
26+
<legend class="legend">
27+
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
28+
<path d="M13 5h8" />
29+
<path d="M13 12h8" />
30+
<path d="M13 19h8" />
31+
<path d="m3 17 2 2 4-4" />
32+
<path d="m3 7 2 2 4-4" />
33+
</svg>
34+
Open range
35+
</legend>
36+
<label class="option option-radio">
1837
<input type="radio" name="mode" value="all" />
1938
Open all saved items
2039
</label>
21-
<label class="option">
40+
<label class="option option-inline option-radio">
2241
<input type="radio" name="mode" value="count" />
2342
Open only this many
43+
<span class="inline-count">
44+
<input
45+
id="count"
46+
type="number"
47+
min="1"
48+
max="999"
49+
inputmode="numeric"
50+
aria-label="Number of items to open"
51+
/>
52+
<span class="count-label">items</span>
53+
</span>
2454
</label>
25-
<div class="count-row">
26-
<input
27-
id="count"
28-
type="number"
29-
min="1"
30-
max="999"
31-
inputmode="numeric"
32-
/>
33-
<span class="count-label">items</span>
34-
</div>
3555
</fieldset>
3656
</section>
3757

3858
<section class="section">
3959
<label class="toggle">
4060
<input type="checkbox" id="reload" />
41-
Reload Read Later page after opening
61+
Reload Read Later after opening
4262
</label>
4363
</section>
4464

4565
<section class="section actions">
46-
<button id="run" class="primary">Open and Unsave</button>
66+
<button id="run" class="primary">
67+
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
68+
<path
69+
d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
70+
/>
71+
</svg>
72+
Open and unsave
73+
</button>
4774
<p id="status" class="status" role="status" aria-live="polite"></p>
4875
</section>
4976
</main>

‎popup.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,9 @@ function applySettingsToForm(settings) {
138138
function updateCountDisabled(mode) {
139139
const disabled = mode !== "count";
140140
countInput.disabled = disabled;
141-
const row = countInput.closest(".count-row");
142-
if (row) {
143-
row.style.opacity = disabled ? "0.5" : "1";
141+
const inlineGroup = countInput.closest(".inline-count");
142+
if (inlineGroup) {
143+
inlineGroup.style.opacity = disabled ? "0.5" : "1";
144144
}
145145
}
146146

0 commit comments

Comments
 (0)
⚡