Skip to content

Commit 174f20a

Browse files
fregantefregante
authored
Update options style (#173)
1 parent 0107a8e commit 174f20a

File tree

3 files changed

+121
-76
lines changed

3 files changed

+121
-76
lines changed

‎source/manifest.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@
1818
"side_panel": {
1919
"default_path": "index.html"
2020
},
21-
"options_ui": {
22-
"page": "options/options.html"
23-
},
21+
"options_page": "options/options.html",
2422
"background": {
2523
"service_worker": "background.js",
2624
"type": "module"

‎source/options/options.html

Lines changed: 83 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,88 @@
11
<!doctype html>
2-
<meta charset="UTF-8" />
3-
<base target="_blank" />
4-
<title>One Click Extension Manager options</title>
5-
<style>
6-
@import './webext-base.css';
7-
label {
8-
display: block;
9-
}
10-
select {
11-
line-height: 2;
12-
height: 2.4em; /* Match the height of the input */
13-
}
14-
ul {
15-
padding-left: 1em;
16-
}
17-
p:has([value='tab']:checked, [value='sidebar']:checked)
18-
~ p:has(label[for='width']) {
19-
display: none;
20-
}
21-
22-
/* TODO: Drop after https://github.com/fregante/webext-base-css/issues/18 */
23-
hr {
24-
--body-margin-h: 8px;
25-
margin-right: calc(-1 * var(--body-margin-h));
26-
margin-left: calc(-1 * var(--body-margin-h));
27-
border: none;
28-
border-bottom: 1px solid #aaa4;
29-
}
30-
</style>
31-
<form id="options-form">
2+
<html class="webext-base-css-modal">
3+
<meta charset="UTF-8" />
4+
<base target="_blank" />
5+
<title>One Click Extension Manager options</title>
6+
<style>
7+
@import './webext-base.css';
8+
body {
9+
padding: 20px !important;
10+
}
11+
hr {
12+
--body-margin-h: 20px;
13+
}
14+
h1 {
15+
font-weight: 100;
16+
line-height: 1;
17+
}
18+
label {
19+
display: block;
20+
}
21+
select {
22+
line-height: 2;
23+
height: 2.4em; /* Match the height of the input */
24+
}
25+
ul {
26+
padding-left: 1em;
27+
}
28+
p:has([value='tab']:checked, [value='sidebar']:checked)
29+
~ p:has(label[for='width']) {
30+
display: none;
31+
}
32+
/* TODO: Drop after https://github.com/fregante/webext-base-css/issues/18 */
33+
hr {
34+
--body-margin-h: 8px;
35+
margin-right: calc(-1 * var(--body-margin-h));
36+
margin-left: calc(-1 * var(--body-margin-h));
37+
border: none;
38+
border-bottom: 1px solid #aaa4;
39+
}
40+
</style>
41+
<script type="module" defer src="options.js"></script>
42+
<h1>One-Click Extensions Manager</h1>
43+
<form id="options-form">
44+
<p>
45+
<label for="showButtons">Show buttons</label>
46+
<select name="showButtons" id="showButtons">
47+
<option value="on-demand">On right click (default)</option>
48+
<option value="always">Always</option>
49+
</select>
50+
</p>
51+
<p>
52+
<label for="position">Position</label>
53+
<select name="position" id="position">
54+
<option value="popup">Menu (default)</option>
55+
<option value="window">Popup window</option>
56+
<option value="tab">Tab</option>
57+
<option value="sidebar">Sidebar</option>
58+
</select>
59+
</p>
60+
<p>
61+
<label for="width"> Width <small>(in pixels)</small> </label>
62+
<input type="text" name="width" id="width" placeholder="400" size="5" />
63+
</p>
64+
</form>
65+
<hr />
3266
<p>
33-
<label for="showButtons">Show buttons</label>
34-
<select name="showButtons" id="showButtons">
35-
<option value="on-demand">On right click (default)</option>
36-
<option value="always">Always</option>
37-
</select>
67+
If you find this useful, consider supporting its development by donating or
68+
leaving a review.
3869
</p>
70+
<ul>
71+
<li>
72+
<a
73+
href="https://chrome.google.com/webstore/detail/one-click-extensions-mana/pbgjpgbpljobkekbhnnmlikbbfhbhmem/reviews"
74+
>Reviews</a
75+
>
76+
</li>
77+
<li><a href="https://github.com/sponsors/fregante">Donations</a></li>
78+
<li>
79+
<a href="https://github.com/hankxdev/one-click-extensions-manager"
80+
>Open source on GitHub</a
81+
>
82+
</li>
83+
</ul>
3984
<p>
40-
<label for="position">Position</label>
41-
<select name="position" id="position">
42-
<option value="popup">Menu (default)</option>
43-
<option value="window">Popup window</option>
44-
<option value="tab">Tab</option>
45-
<option value="sidebar">Sidebar</option>
46-
</select>
85+
Made by <a href="https://fregante.com">fregante</a> 🇮🇹 and
86+
<a href="https://momane.com/">Hank Yang</a> 🇨🇳
4787
</p>
48-
<p>
49-
<label for="width"> Width <small>(in pixels)</small> </label>
50-
<input type="text" name="width" id="width" placeholder="400" size="5" />
51-
</p>
52-
</form>
53-
<hr />
54-
<p>
55-
If you find this useful, consider supporting its development by donating or
56-
leaving a review.
57-
</p>
58-
<ul>
59-
<li>
60-
<a
61-
href="https://chrome.google.com/webstore/detail/one-click-extensions-mana/pbgjpgbpljobkekbhnnmlikbbfhbhmem/reviews"
62-
>Reviews</a
63-
>
64-
</li>
65-
<li><a href="https://github.com/sponsors/fregante">Donations</a></li>
66-
<li>
67-
<a href="https://github.com/hankxdev/one-click-extensions-manager"
68-
>Open source on GitHub</a
69-
>
70-
</li>
71-
</ul>
72-
<p>
73-
Made by <a href="https://fregante.com">fregante</a> 🇮🇹 and
74-
<a href="https://momane.com/">Hank Yang</a> 🇨🇳
75-
</p>
76-
<script type="module" src="options.js"></script>
88+
</html>

‎source/options/webext-base.css

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
color-scheme: light dark;
77
max-width: 700px;
88
margin: auto;
9+
background: var(--background-color);
910
}
1011

1112
body {
@@ -79,10 +80,11 @@ kbd {
7980
}
8081

8182
/* Firefox-only style */
83+
/* stylelint-disable-next-line at-rule-no-vendor-prefix */
8284
@-moz-document url-prefix('') {
8385
@media (prefers-color-scheme: dark) {
8486
:root {
85-
background-color: #23222b;
87+
--background-color: #23222b;
8688
}
8789
}
8890
}
@@ -92,7 +94,7 @@ kbd {
9294
@media (prefers-color-scheme: dark) {
9395
:root {
9496
/* Safari iOS has a black background */
95-
background-color: #1e1e1e;
97+
--background-color: #1e1e1e;
9698
}
9799
}
98100
}
@@ -104,3 +106,36 @@ kbd {
104106
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
105107
monospace !important;
106108
}
109+
110+
:root.webext-base-css-modal {
111+
background: light-dark(#6e9d9f, #194041);
112+
min-height: 100vh;
113+
display: grid;
114+
place-items: center;
115+
116+
body {
117+
max-width: 500px;
118+
border-radius: 8px;
119+
padding: 8px;
120+
background: var(--background-color, light-dark(#fff, #1e1e1e));
121+
box-shadow:
122+
0.3px 2.8px 2.2px rgb(0 0 0 / 2%),
123+
0.8px 6.7px 5.3px rgb(0 0 0 / 2.8%),
124+
1.5px 12.5px 10px rgb(0 0 0 / 3.5%),
125+
2.7px 22.3px 17.9px rgb(0 0 0 / 4.2%),
126+
5px 41.8px 33.4px rgb(0 0 0 / 5%),
127+
12px 100px 80px rgb(0 0 0 / 7%);
128+
}
129+
130+
body > :first-child {
131+
margin-top: 0;
132+
}
133+
134+
body > :last-child {
135+
margin-bottom: 0;
136+
}
137+
138+
hr {
139+
margin-inline: -8px;
140+
}
141+
}

0 commit comments

Comments
 (0)