Skip to content

Commit 519ad5e

Browse files
zombieFoxzombieFox
authored
[feature] add bookmark groups
1 parent 81f6d16 commit 519ad5e

File tree

18 files changed

+1919
-886
lines changed

18 files changed

+1919
-886
lines changed

‎gulpfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const cssFiles = [
6161
path.src+'/css/transitional.css',
6262
path.src+'/css/search.css',
6363
path.src+'/css/background.css',
64+
path.src+'/css/group.css',
6465
path.src+'/css/link.css',
6566
path.src+'/css/auto-suggest.css',
6667
path.src+'/css/fontawesome.css'

‎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": "3.83.0",
3+
"version": "4.0.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: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,71 @@
1+
/* select */
2+
select{
3+
background-color:rgb(var(--theme-gray-02));
4+
background-image:
5+
linear-gradient(45deg, transparent 50%,rgb(var(--form-input-text)) 50%),
6+
linear-gradient(135deg,rgb(var(--form-input-text)) 50%, transparent 50%);
7+
background-position:
8+
calc(100%-calc(var(--form-arrow-size) *5)) 50%,
9+
calc(100%-calc(var(--form-arrow-size) *4)) 50%;
10+
background-size:
11+
var(--form-arrow-size) var(--form-arrow-size),
12+
var(--form-arrow-size) var(--form-arrow-size);
13+
background-repeat: no-repeat;
14+
padding:0calc(var(--form-arrow-size) *10) 01em;
15+
margin:001em0;
16+
color:rgb(var(--form-input-text));
17+
font-size:1em;
18+
font-family:var(--font-regular);
19+
min-height:2.5em;
20+
min-width:0;
21+
width:100%;
22+
border-width:var(--form-input-border);
23+
border-style: solid;
24+
border-color: transparent;
25+
border-radius:var(--theme-radius);
26+
cursor: pointer;
27+
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
28+
-moz-appearance: none;
29+
-webkit-appearance: none;
30+
appearance: none;
31+
}
32+
33+
select:hover{
34+
background-image:
35+
linear-gradient(45deg, transparent 50%,rgb(var(--form-input-text-hover)) 50%),
36+
linear-gradient(135deg,rgb(var(--form-input-text-hover)) 50%, transparent 50%);
37+
background-color:rgb(var(--theme-gray-03));
38+
color:rgb(var(--form-input-text-hover));
39+
outline: none;
40+
box-shadow:000var(--layout-line-width) rgb(var(--theme-gray-06));
41+
}
42+
43+
select:focus,
44+
select:active{
45+
background-image:
46+
linear-gradient(45deg, transparent 50%,rgb(var(--form-input-text-focus)) 50%),
47+
linear-gradient(135deg,rgb(var(--form-input-text-focus)) 50%, transparent 50%);
48+
background-color:rgb(var(--theme-gray-01));
49+
color:rgb(var(--form-input-text-focus));
50+
outline: none;
51+
z-index:2;
52+
box-shadow:000var(--layout-line-width) rgb(var(--theme-accent)),000calc(var(--layout-line-width) *2) rgba(var(--theme-accent),0.25);
53+
}
54+
55+
select:disabled,
56+
select:disabled:hover,
57+
select:disabled:focus,
58+
select:disabled:active{
59+
background-color: transparent;
60+
background-image:
61+
linear-gradient(45deg, transparent 50%,rgb(var(--form-input-text-disabled)) 50%),
62+
linear-gradient(135deg,rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
63+
color:rgb(var(--form-input-text-disabled));
64+
border-color:rgb(var(--form-input-text-disabled));
65+
cursor: default;
66+
box-shadow: none;
67+
}
68+
169
/* textarea */
270
textarea{
371
background-color:rgb(var(--theme-gray-02));
@@ -420,6 +488,7 @@ input[type="range"]{
420488
color:rgb(var(--theme-style-text));
421489
font-size:1em;
422490
font-family:var(--font-regular);
491+
display: block;
423492
height:2em;
424493
width:100%;
425494
border:0;
@@ -846,7 +915,7 @@ input[type="range"]:disabled::-moz-range-progress{
846915

847916
.form-grid:focus,
848917
.form-grid:focus-within{
849-
outline:0;
918+
outline:none;
850919
border-color:rgb(var(--theme-style-text));
851920
}
852921

@@ -1085,20 +1154,20 @@ input[type="range"]:disabled::-moz-range-progress{
10851154

10861155
.form-group-text:hover,
10871156
.form-group-text:focus{
1088-
background-color:rgb(var(--theme-gray-03));
1089-
border-bottom-color:rgb(var(--theme-gray-08));
1157+
/* background-color: rgb(var(--theme-gray-03)); */
1158+
/* border-bottom-color: rgb(var(--theme-gray-08)); */
10901159
outline: none;
10911160
}
10921161

1093-
.form-group-text:disabled{
1162+
.form-group-text.disabled{
10941163
background-color:rgb(var(--theme-gray-02));
10951164
color:rgb(var(--form-input-placeholder-disabled));
10961165
box-shadow: none;
10971166
cursor: default;
10981167
}
10991168

1100-
.form-group-text:disabled:hover,
1101-
.form-group-text:disabled:focus{
1169+
.form-group-text.disabled:hover,
1170+
.form-group-text.disabled:focus{
11021171
background-color:rgb(var(--theme-gray-02));
11031172
border-color: transparent;
11041173
}
@@ -1138,7 +1207,7 @@ input[type="range"]:disabled::-moz-range-progress{
11381207

11391208
.form-group .form-group-text{
11401209
margin-bottom:0;
1141-
margin-left:calc(-1px*var(--form-input-border));
1210+
/* margin-left: calc(-1px * var(--form-input-border)); */
11421211
border-radius:0;
11431212
z-index:1;
11441213
position: relative;

‎src/css/group.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.group{
2+
padding-top:calc(calc(var(--layout-space) /2) *var(--layout-padding));
3+
padding-bottom:calc(calc(var(--layout-space) /2) *var(--layout-padding));
4+
padding-left:calc(var(--layout-space) *var(--layout-padding));
5+
padding-right:calc(var(--layout-space) *var(--layout-padding));
6+
width:var(--link-area-width);
7+
}
8+
9+
.group:first-child{
10+
padding-top:calc(var(--layout-space) *var(--layout-padding));
11+
}
12+
13+
.group:last-child{
14+
padding-bottom:calc(var(--layout-space) *var(--layout-padding));
15+
}
16+
17+
.group-header{
18+
position: relative;
19+
display: flex;
20+
flex-direction: row;
21+
justify-content: flex-start;
22+
align-items: center;
23+
flex-wrap: wrap;
24+
transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
25+
}
26+
27+
.is-group-name-show .group-header,
28+
.is-link-edit .group-header{
29+
padding-bottom:calc(var(--layout-space) *var(--layout-gutter));
30+
transition: padding var(--layout-timing-extra-fast);
31+
}
32+
33+
.group-name{
34+
margin-right:0;
35+
display: none;
36+
align-items: center;
37+
min-height:2.5em;
38+
font-size:var(--group-name-size);
39+
}
40+
41+
.is-group-name-show .group-name{
42+
display: flex;
43+
}
44+
45+
.group-name-text{
46+
font-family:var(--font-fjalla);
47+
margin-bottom:0;
48+
}
49+
50+
.group-control{
51+
margin-right:0;
52+
margin-bottom:0;
53+
overflow: hidden;
54+
height:0;
55+
width:0;
56+
transition:
57+
width var(--layout-timing-extra-fast),
58+
height var(--layout-timing-extra-fast) var(--layout-duration-04),
59+
margin var(--layout-timing-extra-fast);
60+
}
61+
62+
.is-link-edit .group-control{
63+
height:2.5em;
64+
width:16em;
65+
transition:
66+
width var(--layout-timing-extra-fast) var(--layout-duration-04),
67+
height var(--layout-timing-extra-fast),
68+
margin var(--layout-timing-extra-fast) var(--layout-duration-04);
69+
}
70+
71+
.is-link-edit.is-group-name-show .group-control{
72+
margin-right:1em;
73+
}
74+
75+
.group-control-item{
76+
width:4em;
77+
flex-shrink:0;
78+
}
79+
80+
.group-body{
81+
font-size:calc(var(--link-item-size) *1);
82+
background-color: transparent;
83+
position: relative;
84+
min-height:var(--link-item-height);
85+
display: grid;
86+
grid-auto-rows:1fr;
87+
grid-gap:calc(var(--layout-space) *var(--layout-gutter));
88+
grid-template-columns:repeat(auto-fill,minmax(var(--link-item-width),1fr));
89+
}

0 commit comments

Comments
(0)