Skip to content

Commit 1fa622f

Browse files
zombieFoxzombieFox
committed
[feature] add header item and open all opacity controls
1 parent f4e6cc7 commit 1fa622f

File tree

21 files changed

+603
-310
lines changed

21 files changed

+603
-310
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nightTab",
3-
"version": "5.1.0",
3+
"version": "5.2.0",
44
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
55
"main": "index.js",
66
"scripts":{

‎src/css/form.css‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,7 @@ select{
117117
min-height:2.5em;
118118
min-width:0;
119119
width:100%;
120-
border-color:rgb(var(--form-input-border));
121-
border-width:var(--theme-line-width);
122-
border-style: solid;
120+
border-width:0;
123121
border-radius:var(--theme-radius);
124122
cursor: pointer;
125123
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@@ -133,7 +131,6 @@ select:hover{
133131
linear-gradient(45deg, transparent 60%,rgb(var(--form-label-hover)) 60%),
134132
linear-gradient(135deg,rgb(var(--form-label-hover)) 40%, transparent 40%);
135133
background-color:rgb(var(--form-input-background-hover));
136-
border-color:rgb(var(--form-input-border-hover));
137134
color:rgb(var(--form-label-hover));
138135
outline: none;
139136
box-shadow:var(--form-ring-hover);
@@ -145,7 +142,6 @@ select:active{
145142
linear-gradient(45deg, transparent 60%,rgb(var(--form-label-focus-active)) 60%),
146143
linear-gradient(135deg,rgb(var(--form-label-focus-active)) 40%, transparent 40%);
147144
background-color:rgb(var(--form-input-background-border-focus-active));
148-
border-color:rgb(var(--form-input-border-focus-active));
149145
color:rgb(var(--form-label-focus-active));
150146
outline: none;
151147
z-index:2;
@@ -160,7 +156,6 @@ select:disabled:active{
160156
background-image:
161157
linear-gradient(45deg, transparent 50%,rgb(var(--form-input-text-disabled)) 50%),
162158
linear-gradient(135deg,rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
163-
border-color:rgb(var(--form-input-border-disabled));
164159
color:rgb(var(--form-input-text-disabled));
165160
cursor: default;
166161
box-shadow: none;
@@ -169,7 +164,7 @@ select:disabled:active{
169164
/* textarea */
170165
textarea{
171166
background-color:rgb(var(--form-input-background));
172-
padding:0.25em1em;
167+
padding:0.5em1em;
173168
margin:0;
174169
color:rgb(var(--form-input-text));
175170
font-size:1em;
@@ -181,9 +176,7 @@ textarea{
181176
min-height:2.5em;
182177
min-width:0;
183178
width:100%;
184-
border-color:rgb(var(--form-input-border));
185-
border-width:var(--theme-line-width);
186-
border-style: solid;
179+
border-width:0;
187180
border-radius:var(--theme-radius);
188181
cursor: text;
189182
resize: vertical;
@@ -194,7 +187,6 @@ textarea{
194187

195188
textarea:hover{
196189
background-color:rgb(var(--form-input-background-hover));
197-
border-color:rgb(var(--form-input-border-hover));
198190
color:rgb(var(--form-input-text-hover));
199191
outline: none;
200192
box-shadow:var(--form-ring-hover);
@@ -203,15 +195,13 @@ textarea:hover{
203195
textarea:focus,
204196
textarea:active{
205197
background-color:rgb(var(--form-input-background-focus-active));
206-
border-color:rgb(var(--form-input-border-focus-active));
207198
color:rgb(var(--form-input-text-focus-active));
208199
outline: none;
209200
box-shadow:var(--form-ring-accent);
210201
}
211202

212203
textarea:disabled{
213204
background-color:rgb(var(--form-input-background-disabled));
214-
border-color:rgb(var(--form-input-border-disabled));
215205
color:rgb(var(--form-input-text-disabled));
216206
cursor: default;
217207
box-shadow: none;
@@ -261,9 +251,7 @@ input[type="text"]{
261251
height:2.5em;
262252
min-width:0;
263253
width:100%;
264-
border-color:rgb(var(--form-input-border));
265-
border-width:var(--theme-line-width);
266-
border-style: solid;
254+
border-width:0;
267255
border-radius:var(--theme-radius);
268256
cursor: text;
269257
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@@ -287,7 +275,6 @@ input[type="search"]:hover,
287275
input[type="tel"]:hover,
288276
input[type="text"]:hover{
289277
background-color:rgb(var(--form-input-background-hover));
290-
border-color:rgb(var(--form-input-border-hover));
291278
color:rgb(var(--form-input-text-hover));
292279
outline: none;
293280
box-shadow:var(--form-ring-hover);
@@ -306,7 +293,6 @@ input[type="tel"]:active,
306293
input[type="text"]:focus,
307294
input[type="text"]:active{
308295
background-color:rgb(var(--form-input-background-focus-active));
309-
border-color:rgb(var(--form-input-border-focus-active));
310296
color:rgb(var(--form-input-text-focus-active));
311297
outline: none;
312298
z-index:2;
@@ -320,7 +306,6 @@ input[type="search"]:disabled,
320306
input[type="tel"]:disabled,
321307
input[type="text"]:disabled{
322308
background-color:rgb(var(--form-input-background-disabled));
323-
border-color:rgb(var(--form-input-border-disabled));
324309
color:rgb(var(--form-input-text-disabled));
325310
cursor: default;
326311
box-shadow: none;
@@ -397,7 +382,6 @@ input[type="text"]:disabled:focus::placeholder{
397382
.input-clear[type="tel"],
398383
.input-clear[type="text"]{
399384
background-color: transparent;
400-
border-color: transparent;
401385
}
402386

403387
.input-clear[type="email"]:hover,
@@ -407,7 +391,6 @@ input[type="text"]:disabled:focus::placeholder{
407391
.input-clear[type="tel"]:hover,
408392
.input-clear[type="text"]:hover{
409393
background-color: transparent;
410-
border-color: transparent;
411394
box-shadow: none;
412395
}
413396

@@ -424,7 +407,6 @@ input[type="text"]:disabled:focus::placeholder{
424407
.input-clear[type="text"]:focus,
425408
.input-clear[type="text"]:active{
426409
background-color: transparent;
427-
border-color: transparent;
428410
box-shadow:var(--form-ring-accent);
429411
}
430412

‎src/css/group.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,36 @@
152152
font-size:var(--group-openall-size);
153153
}
154154

155+
.group-openall-item{
156+
background-color:rgba(var(--button-background),var(--group-openall-opacity));
157+
}
158+
159+
.group-openall-item:focus,
160+
.group-openall-item:hover{
161+
background-color:rgba(var(--button-background-focus-hover),var(--group-openall-opacity));
162+
}
163+
164+
.group-openall-item:active{
165+
background-color:rgba(var(--button-background-active),var(--group-openall-opacity));
166+
}
167+
168+
.group-openall-item:after{
169+
background-color:rgba(var(--button-border),var(--group-openall-opacity));
170+
}
171+
172+
.group-openall-item:focus:after,
173+
.group-openall-item:hover:after{
174+
background-color:rgba(var(--button-border-focus-hover),var(--group-openall-opacity));
175+
}
176+
177+
.group-openall-item:active:after{
178+
background-color:rgb(var(--button-border-active));
179+
}
180+
181+
.is-group-openall-opacity .group-openall-item:active:after{
182+
background-color: transparent;
183+
}
184+
155185
.group-body{
156186
background-color: transparent;
157187
font-size:var(--link-item-size);

‎src/css/header.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,149 @@
247247
flex-grow:1;
248248
}
249249

250+
.form-input-button .header-edit[type="checkbox"]+label{
251+
background-color:rgba(var(--button-background),var(--header-editadd-opacity));
252+
}
253+
254+
.form-input-button .header-edit[type="checkbox"]:focus+label,
255+
.form-input-button .header-edit[type="checkbox"]:hover+label{
256+
background-color:rgba(var(--button-background-focus-hover),var(--header-editadd-opacity));
257+
}
258+
259+
.form-input-button .header-edit[type="checkbox"]:active+label{
260+
background-color:rgba(var(--button-background-active),var(--header-editadd-opacity));
261+
}
262+
263+
.form-input-button .header-edit[type="checkbox"]:checked+label{
264+
background-color:rgba(var(--button-background-active),var(--header-editadd-opacity));
265+
}
266+
267+
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label,
268+
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label{
269+
background-color: transparent;
270+
}
271+
272+
.form-input-button .header-edit[type="checkbox"]+label:after{
273+
background-color:rgba(var(--button-border),var(--header-editadd-opacity));
274+
}
275+
276+
.form-input-button .header-edit[type="checkbox"]:focus+label:after,
277+
.form-input-button .header-edit[type="checkbox"]:hover+label:after{
278+
background-color:rgba(var(--button-border-focus-hover),var(--header-editadd-opacity));
279+
}
280+
281+
.form-input-button .header-edit[type="checkbox"]:active+label:after{
282+
background-color:rgb(var(--button-border-active));
283+
}
284+
285+
.form-input-button .header-edit[type="checkbox"]:checked+label:after{
286+
background-color:rgb(var(--button-border-active));
287+
}
288+
289+
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label:after,
290+
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label:after{
291+
background-color: transparent;
292+
}
293+
294+
.header-add{
295+
background-color:rgba(var(--button-background),var(--header-editadd-opacity));
296+
}
297+
298+
.header-add:focus,
299+
.header-add:hover{
300+
background-color:rgba(var(--button-background-focus-hover),var(--header-editadd-opacity));
301+
}
302+
303+
.header-add:active{
304+
background-color:rgba(var(--button-background-active),var(--header-editadd-opacity));
305+
}
306+
307+
.header-add:after{
308+
background-color:rgba(var(--button-border),var(--header-editadd-opacity));
309+
}
310+
311+
.header-add:focus:after,
312+
.header-add:hover:after{
313+
background-color:rgba(var(--button-border-focus-hover),var(--header-editadd-opacity));
314+
}
315+
316+
.header-add:active:after{
317+
background-color:rgb(var(--button-border-active));
318+
}
319+
320+
.is-header-add-opacity .header-add:active:after{
321+
background-color: transparent;
322+
}
323+
324+
.form-input-button .header-color[type="color"]+label,
325+
.form-input-button .header-accent[type="color"]+label{
326+
background-color:rgba(var(--button-background),var(--header-coloraccent-opacity));
327+
}
328+
329+
.form-input-button .header-color[type="color"]:focus+label,
330+
.form-input-button .header-color[type="color"]:hover+label,
331+
.form-input-button .header-accent[type="color"]:focus+label,
332+
.form-input-button .header-accent[type="color"]:hover+label{
333+
background-color:rgba(var(--button-background-focus-hover),var(--header-coloraccent-opacity));
334+
}
335+
336+
.form-input-button .header-color[type="color"]:active+label,
337+
.form-input-button .header-accent[type="color"]:active+label{
338+
background-color:rgba(var(--button-background-active),var(--header-coloraccent-opacity));
339+
}
340+
341+
.form-input-button .header-color[type="color"]+label:after,
342+
.form-input-button .header-accent[type="color"]+label:after{
343+
background-color:rgba(var(--button-border),var(--header-coloraccent-opacity));
344+
}
345+
346+
.form-input-button .header-color[type="color"]:focus+label:after,
347+
.form-input-button .header-color[type="color"]:hover+label:after,
348+
.form-input-button .header-accent[type="color"]:focus+label:after,
349+
.form-input-button .header-accent[type="color"]:hover+label:after{
350+
background-color:rgba(var(--button-border-focus-hover),var(--header-coloraccent-opacity));
351+
}
352+
353+
.form-input-button .header-color[type="color"]:active+label:after,
354+
.form-input-button .header-accent[type="color"]:active+label:after{
355+
background-color:rgb(var(--button-border-active));
356+
}
357+
358+
.is-header-coloraccent-opacity .form-input-button .header-color[type="color"]:active+label:after,
359+
.is-header-coloraccent-opacity .form-input-button .header-accent[type="color"]:active+label:after{
360+
background-color: transparent;
361+
}
362+
363+
.header-menu{
364+
background-color:rgba(var(--button-background),var(--header-menu-opacity));
365+
}
366+
367+
.header-menu:focus,
368+
.header-menu:hover{
369+
background-color:rgba(var(--button-background-focus-hover),var(--header-menu-opacity));
370+
}
371+
372+
.header-menu:active{
373+
background-color:rgba(var(--button-background-active),var(--header-menu-opacity));
374+
}
375+
376+
.header-menu:after{
377+
background-color:rgba(var(--button-border),var(--header-menu-opacity));
378+
}
379+
380+
.header-menu:focus:after,
381+
.header-menu:hover:after{
382+
background-color:rgba(var(--button-border-focus-hover),var(--header-menu-opacity));
383+
}
384+
385+
.header-menu:active:after{
386+
background-color:rgb(var(--button-border-active));
387+
}
388+
389+
.is-header-menu-opacity .header-menu:active:after{
390+
background-color: transparent;
391+
}
392+
250393
.is-header-item-newline-search.is-header-search-width-by-custom .header-item-body-search{
251394
flex-grow:0;
252395
width:var(--header-search-width-size);

‎src/css/search.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@
77
width:100%;
88
}
99

10+
.search-input[type="text"]{
11+
background-color:rgba(var(--form-input-background),var(--header-search-opacity));
12+
}
13+
14+
.search-input[type="text"]:hover{
15+
background-color:rgba(var(--form-input-background-hover),var(--header-search-opacity));
16+
}
17+
18+
.search-input[type="text"]:focus,
19+
.search-input[type="text"]:active{
20+
background-color:rgba(var(--form-input-background-focus-active),var(--header-search-opacity));
21+
}
22+
1023
.search-clear{
1124
position: absolute;
1225
top:50%;

‎src/css/variables.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,20 +87,25 @@
8787
--header-color-theme:var(--theme-color-01);
8888
--header-color-custom:rgb(0,0,0);
8989
--header-opacity:0.95;
90-
--header-search-width-size:30%;
9190
--header-border-top:0;
9291
--header-border-bottom:0;
9392
--header-date-size:1em;
9493
--header-clock-size:1em;
9594
--header-search-size:1em;
95+
--header-search-width-size:30%;
96+
--header-search-opacity:1;
9697
--header-editadd-size:1em;
98+
--header-editadd-opacity:1;
9799
--header-coloraccent-size:1em;
100+
--header-coloraccent-opacity:1;
98101
--header-menu-size:1em;
102+
--header-menu-opacity:1;
99103
--header-greeting-size:1em;
100104
--header-transitional-size:1em;
101105
/* group */
102106
--group-name-size:1em;
103107
--group-openall-size:1em;
108+
--group-openall-opacity:1;
104109
--group-border:0;
105110
/* link */
106111
--link-area-width:100%;
@@ -164,10 +169,6 @@
164169
--form-input-background-hover:var(--theme-color-02);
165170
--form-input-background-focus-active:var(--theme-color-01);
166171
--form-input-background-disabled:var(--theme-color-01);
167-
--form-input-border:var(--theme-color-02);
168-
--form-input-border-hover:var(--theme-color-02);
169-
--form-input-border-focus-active:var(--theme-color-01);
170-
--form-input-border-disabled:var(--theme-color-01);
171172
--form-group-text-background:var(--theme-color-02);
172173
--form-group-text-background-focus-hover:var(--theme-color-02);
173174
--form-group-text-background-active:var(--theme-color-02);

0 commit comments

Comments
(0)