Skip to content

Commit 36d8f6d

Browse files
Mika-Mika-
committed
add dark mode, closes #122 
1 parent 50084b1 commit 36d8f6d

File tree

4 files changed

+98
-2
lines changed

4 files changed

+98
-2
lines changed

‎src/view/add_torrent.html

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<link rel="stylesheet" type="text/css" href="chrome://browser/content/extension.css">
6+
<link rel="stylesheet" type="text/css" href="style.css">
67
</head>
78
<body>
89

‎src/view/options.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<link rel="stylesheet" type="text/css" href="style.css">
56
</head>
67
<body>
78

@@ -47,7 +48,7 @@
4748

4849
<div class="panel-formElements-item browser-style" style="align-items:flex-start;flex-direction:column" data-panel="matchregexp">
4950
<label for="matchregexp" data-i18n="regexpMatchLabelsOption"></label>
50-
<textarea id="matchregexp" class="browser-style" style="width:100%"></textarea>
51+
<textarea id="matchregexp" rows="2" class="browser-style" style="width:100%"></textarea>
5152

5253
<div class="panel-formElements-item browser-style">
5354
<label for="test-regexp-url" data-i18n="testUrlOption"></label>
@@ -130,7 +131,7 @@
130131

131132
<div class="panel-formElements-item browser-style" style="align-items:flex-start;flex-direction:column" data-panel="directories">
132133
<label for="directories" data-i18n="serverDirectoriesOption"></label>
133-
<textarea id="directories" class="browser-style" style="width:100%"></textarea>
134+
<textarea id="directories" rows="5" class="browser-style" style="width:100%"></textarea>
134135
</div>
135136

136137
</div>

‎src/view/options.js

+1
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@ document.querySelector('#application').addEventListener('change', (e) => {
290290
let input;
291291
if (option.values) {
292292
input = document.createElement('select');
293+
input.className = 'browser-style';
293294
input.id = 'clientOptions[' + option.name + ']';
294295

295296
for (const [value, description] of Object.entries(option.values)) {

‎src/view/style.css

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
.browser-style > input[type="checkbox"],
2+
.browser-style > input[type="radio"] {
3+
transition-duration: 250ms;
4+
transition-property: box-shadow;
5+
outline: none;
6+
}
7+
.browser-style > input[type="checkbox"]:focus:not(:checked),
8+
.browser-style > input[type="radio"]:focus:not(:checked) {
9+
border-color: #0996f8;
10+
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
11+
}
12+
.browser-style > input[type="text"],
13+
.browser-style > input[type="url"],
14+
.browser-style > input[type="password"],
15+
textarea.browser-style {
16+
background-color: #fff;
17+
border: 1px solid #b1b1b1;
18+
box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
19+
font: caption;
20+
padding: 0 6px 0;
21+
transition-duration: 250ms;
22+
transition-property: box-shadow;
23+
outline: none;
24+
}
25+
textarea.browser-style {
26+
resize: vertical;
27+
}
28+
select.browser-style {
29+
margin-bottom: 0;
30+
}
31+
.browser-style > input[type="text"],
32+
.browser-style > input[type="url"],
33+
.browser-style > input[type="password"] {
34+
height: 24px;
35+
}
36+
.browser-style > input[type="url"] + button {
37+
margin-bottom: 0;
38+
}
39+
.browser-style > input[type="text"]:focus,
40+
.browser-style > input[type="url"]:focus,
41+
.browser-style > input[type="password"]:focus,
42+
textarea.browser-style:focus,
43+
select.browser-style:focus {
44+
border-color: #0996f8;
45+
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
46+
}
47+
.browser-style > input[type="text"]:disabled,
48+
.browser-style > input[type="url"]:disabled,
49+
.browser-style > input[type="password"]:disabled,
50+
textarea.browser-style:disabled {
51+
color: #999;
52+
opacity: .5;
53+
}
54+
.browser-style > input[type="text"]:invalid:not(:focus),
55+
.browser-style > input[type="url"]:invalid:not(:focus),
56+
textarea.browser-style:invalid:not(:focus) {
57+
border-color: #e22850;
58+
box-shadow: 0 0 0 1px #e22850,
59+
0 0 0 4px rgba(251, 0, 34, 0.3);
60+
}
61+
62+
@media (prefers-color-scheme: dark) {
63+
html, body {
64+
background: #23222b;
65+
color: #fbfbfe;
66+
}
67+
.panel-section-header {
68+
border-color: #48484d;
69+
}
70+
.panel-section-separator {
71+
background: #48484d;
72+
}
73+
button.browser-style:not(.default),
74+
select.browser-style {
75+
background: #23222b;
76+
border-color: #7c7b82;
77+
color: #fff;
78+
}
79+
.browser-style > input[type="radio"]:not(:checked),
80+
.browser-style > input[type="checkbox"]:not(:checked) {
81+
background: #2b2a33;
82+
border-color: #7c7b82;
83+
border-width: 2px;
84+
}
85+
.browser-style > input[type="text"],
86+
.browser-style > input[type="url"],
87+
.browser-style > input[type="password"],
88+
textarea.browser-style {
89+
background: #23222b;
90+
border-color: #7c7b82;
91+
color: #fff;
92+
}
93+
}

0 commit comments

Comments
 (0)