Skip to content

Commit 11007ac

Browse files
zombieFoxzombieFox
authored
[feature] add data controls
1 parent aafb813 commit 11007ac

File tree

14 files changed

+318
-40
lines changed

14 files changed

+318
-40
lines changed

‎css/animation.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,31 @@
77
opacity:1;
88
}
99
}
10+
11+
@keyframes shake{
12+
0%,to{
13+
transform:translateZ(0);
14+
}
15+
16+
10%,30%,50%,70%,90%{
17+
transform:translate3d(-10px,0,0);
18+
}
19+
20+
20%,40%,60%,80%{
21+
transform:translate3d(10px,0,0);
22+
}
23+
}
24+
25+
@keyframes pop{
26+
0%{
27+
transform:scale(1);
28+
}
29+
30+
50%{
31+
transform:scale(1.1);
32+
}
33+
34+
100%{
35+
transform:scale(1);
36+
}
37+
}

‎css/button.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ input[type="submit"]:focus{
4343
border-bottom-color:rgb(var(--gray-08));
4444
color:rgb(var(--button-text-hover-focus));
4545
outline: none;
46+
text-decoration: none;
4647
}
4748

4849
button:active,
@@ -54,6 +55,7 @@ input[type="submit"]:active{
5455
border-bottom-color:rgb(var(--theme-accent));
5556
color:rgb(var(--button-text-active));
5657
transition: none;
58+
text-decoration: none;
5759
}
5860

5961
button[disabled],
@@ -68,6 +70,7 @@ button[disabled]:active,
6870
border-color: transparent;
6971
color:rgb(var(--button-text-disabled));
7072
cursor: default;
73+
text-decoration: none;
7174
}
7275

7376
.button-text{
@@ -91,6 +94,10 @@ button [class*=" icon-"],
9194
font-size:0.8em;
9295
}
9396

97+
.button-large{
98+
font-size:1.2em;
99+
}
100+
94101
.button-block{
95102
display: flex;
96103
width:100%;

‎css/form.css‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -565,7 +565,8 @@ input[type="range"][disabled]~.input-helper{
565565

566566
.input-buttoninput[type="checkbox"]+label,
567567
.input-buttoninput[type="radio"]+label,
568-
.input-buttoninput[type="color"]+label{
568+
.input-buttoninput[type="color"]+label,
569+
.input-buttoninput[type="file"]+label{
569570
background-color:rgb(var(--gray-02));
570571
padding:0.125em1em;
571572
margin:0;
@@ -597,7 +598,9 @@ input[type="range"][disabled]~.input-helper{
597598
.input-buttoninput[type="radio"]:hover+label,
598599
.input-buttoninput[type="radio"]:focus+label,
599600
.input-buttoninput[type="color"]:hover+label,
600-
.input-buttoninput[type="color"]:focus+label{
601+
.input-buttoninput[type="color"]:focus+label,
602+
.input-buttoninput[type="file"]:hover+label,
603+
.input-buttoninput[type="file"]:focus+label{
601604
background-color:rgb(var(--gray-03));
602605
border-bottom-color:rgb(var(--gray-08));
603606
color:rgb(var(--button-text-hover-focus));
@@ -606,7 +609,8 @@ input[type="range"][disabled]~.input-helper{
606609

607610
.input-buttoninput[type="checkbox"]:active+label,
608611
.input-buttoninput[type="radio"]:active+label,
609-
.input-buttoninput[type="color"]:active+label{
612+
.input-buttoninput[type="color"]:active+label,
613+
.input-buttoninput[type="file"]:active+label{
610614
background-color:rgb(var(--gray-04));
611615
border-bottom-color:rgb(var(--theme-accent));
612616
color:rgb(var(--button-text-active));
@@ -615,7 +619,8 @@ input[type="range"][disabled]~.input-helper{
615619

616620
.input-buttoninput[type="checkbox"]:checked+label,
617621
.input-buttoninput[type="radio"]:checked+label,
618-
.input-buttoninput[type="color"]:checked+label{
622+
.input-buttoninput[type="color"]:checked+label,
623+
.input-buttoninput[type="file"]:checked+label{
619624
background-color:rgb(var(--gray-04));
620625
border-bottom-color:rgb(var(--theme-accent));
621626
color:rgb(var(--button-text-active));
@@ -633,7 +638,11 @@ input[type="range"][disabled]~.input-helper{
633638
.input-buttoninput[type="color"][disabled]+label,
634639
.input-buttoninput[type="color"][disabled]:hover+label,
635640
.input-buttoninput[type="color"][disabled]:focus+label,
636-
.input-buttoninput[type="color"][disabled]:active+label{
641+
.input-buttoninput[type="color"][disabled]:active+label,
642+
.input-buttoninput[type="file"][disabled]+label,
643+
.input-buttoninput[type="file"][disabled]:hover+label,
644+
.input-buttoninput[type="file"][disabled]:focus+label,
645+
.input-buttoninput[type="file"][disabled]:active+label{
637646
background-color:rgb(var(--gray-02));
638647
border-color: transparent;
639648
color:rgb(var(--button-text-disabled));
@@ -642,7 +651,8 @@ input[type="range"][disabled]~.input-helper{
642651

643652
.input-button-linkinput[type="checkbox"]+label,
644653
.input-button-linkinput[type="radio"]+label,
645-
.input-button-linkinput[type="color"]+label{
654+
.input-button-linkinput[type="color"]+label,
655+
.input-button-linkinput[type="file"]+label{
646656
background-color: transparent;
647657
border:0;
648658
color:rgb(var(--button-link-text));
@@ -656,21 +666,26 @@ input[type="range"][disabled]~.input-helper{
656666
.input-button-linkinput[type="radio"]:checked+label,
657667
.input-button-linkinput[type="color"]:hover+label,
658668
.input-button-linkinput[type="color"]:focus+label,
659-
.input-button-linkinput[type="color"]:checked+label{
669+
.input-button-linkinput[type="color"]:checked+label,
670+
.input-button-linkinput[type="file"]:hover+label,
671+
.input-button-linkinput[type="file"]:focus+label,
672+
.input-button-linkinput[type="file"]:checked+label{
660673
background-color: transparent;
661674
color:rgb(var(--button-link-text-hover-focus));
662675
}
663676

664677
.input-button-linkinput[type="checkbox"]:active+label,
665678
.input-button-linkinput[type="radio"]:active+label,
666-
.input-button-linkinput[type="color"]:active+label{
679+
.input-button-linkinput[type="color"]:active+label,
680+
.input-button-linkinput[type="file"]:active+label{
667681
background-color: transparent;
668682
color:rgb(var(--button-link-text-active));
669683
}
670684

671685
.input-button-linkinput[disabled][type="checkbox"]+label,
672686
.input-button-linkinput[disabled][type="radio"]+label,
673-
.input-button-linkinput[disabled][type="color"]+label{
687+
.input-button-linkinput[disabled][type="color"]+label,
688+
.input-button-linkinput[disabled][type="file"]+label{
674689
background-color: transparent;
675690
color: transparent;
676691
pointer-events: none;
@@ -681,7 +696,9 @@ input[type="range"][disabled]~.input-helper{
681696
.input-button-linkinput[disabled][type="radio"]:hover+label,
682697
.input-button-linkinput[disabled][type="radio"]:focus+label,
683698
.input-button-linkinput[disabled][type="color"]:hover+label,
684-
.input-button-linkinput[disabled][type="color"]:focus+label{
699+
.input-button-linkinput[disabled][type="color"]:focus+label,
700+
.input-button-linkinput[disabled][type="file"]:hover+label,
701+
.input-button-linkinput[disabled][type="file"]:focus+label{
685702
background-color: transparent;
686703
color: transparent;
687704
}
@@ -723,11 +740,14 @@ input[type="range"][disabled]~.input-helper{
723740
.input-hideinput[type="checkbox"]+label:before,
724741
.input-hideinput[type="checkbox"]:checked+label:before,
725742
.input-hideinput[type="radio"]+label:before,
726-
.input-hideinput[type="radio"]:checked+label:before{
743+
.input-hideinput[type="radio"]:checked+label:before,
744+
.input-hideinput[type="file"]+label:before,
745+
.input-hideinput[type="file"]:checked+label:before{
727746
content: none;
728747
}
729748

730-
.input-hideinput[type="color"]{
749+
.input-hideinput[type="color"],
750+
.input-hideinput[type="file"]{
731751
opacity:0;
732752
width:1px;
733753
height:1px;
@@ -903,3 +923,14 @@ input[type="range"][disabled]~.input-helper{
903923
.form-group.nested-button*:last-childinput[type="color"]+label{
904924
border-radius:0var(--theme-radius) var(--theme-radius) 0;
905925
}
926+
927+
.form-feedback{
928+
padding:1em1.5em;
929+
background-color:rgb(var(--gray-02));
930+
/* border-bottom: var(--line-width) solid rgb(var(--gray-04)); */
931+
border-radius:var(--theme-radius);
932+
}
933+
934+
.form-feedback:not(:last-child){
935+
margin-bottom:1em;
936+
}

‎css/menu.css‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,6 @@
117117
.menu{
118118
width:80vw;
119119
}
120-
121-
.menu-nav-button{
122-
flex-basis:0;
123-
}
124120
}
125121

126122
@media (min-width:700px){
@@ -175,6 +171,12 @@
175171
}
176172
}
177173

174+
@media (min-width:1100px){
175+
.menu-nav-button{
176+
flex-basis:0;
177+
}
178+
}
179+
178180
@media (min-width:1600px){
179181
.menu{
180182
width:50vw;

‎css/typography.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,14 @@ h6{
4646

4747
p{
4848
color:rgb(var(--style-neutral-text));
49-
margin:001em0;
49+
margin:0;
5050
line-height:1.5;
5151
}
5252

53+
p:not(:last-child){
54+
margin-bottom:0.5em;
55+
}
56+
5357
hr{
5458
border:0;
5559
border-top:1px solid rgb(var(--gray-02));

‎css/utilities.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,11 @@
3030
.scroll-y-disabled{
3131
overflow-y: hidden;
3232
}
33+
34+
.is-shake{
35+
animation: shake var(--animation-speed-slow) 1;
36+
}
37+
38+
.is-pop{
39+
animation: pop var(--animation-speed-fast) 1;
40+
}

‎index.html‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,15 @@
107107

108108
<divclass="menu-nav">
109109
<divclass="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
110-
<buttonclass="menu-nav-button button button-large active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
111-
<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-header" tabindex="1">Header</button>
112-
<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
113-
<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
114-
<buttonclass="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
110+
<buttonclass="menu-nav-button button active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
111+
<buttonclass="menu-nav-button button" data-target=".menu-content-area-header" tabindex="1">Header</button>
112+
<buttonclass="menu-nav-button button" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
113+
<buttonclass="menu-nav-button button" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
114+
<buttonclass="menu-nav-button button" data-target=".menu-content-area-background" tabindex="1">Background</button>
115+
<buttonclass="menu-nav-button button" data-target=".menu-content-area-data" tabindex="1">Data</button>
115116
</div>
116117
<divclass="menu-nav-area">
117-
<buttonclass="menu-close button button-block button-large mb-0" tabindex="1"><spanclass="icon-close"></span></button>
118+
<buttonclass="menu-close button button-block mb-0" tabindex="1"><spanclass="icon-close"></span></button>
118119
</div>
119120
</div>
120121

@@ -996,6 +997,45 @@ <h1 class="menu-item-header-text">Image</h1>
996997
</div>
997998
</div>
998999

1000+
<divclass="menu-content-area menu-content-area-data is-hidden">
1001+
<divclass="menu-item">
1002+
<divclass="menu-item-header">
1003+
<h1class="menu-item-header-text">Restore</h1>
1004+
</div>
1005+
<divclass="menu-item-form">
1006+
<divclass="input-wrap input-button input-hide">
1007+
<inputid="control-data-import" class="control-data-import" type="file">
1008+
<labelfor="control-data-import">Import data</label>
1009+
</div>
1010+
<pclass="input-helper small muted">Restore a previously exported nightTab backup.</p>
1011+
<divclass="control-data-import-feedback form-feedback is-hidden"></div>
1012+
</div>
1013+
</div>
1014+
<divclass="menu-item">
1015+
<divclass="menu-item-header">
1016+
<h1class="menu-item-header-text">Backup</h1>
1017+
</div>
1018+
<divclass="menu-item-form">
1019+
<divclass="button-wrap">
1020+
<buttonclass="control-data-export button mb-0" href="#">Export data</button>
1021+
</div>
1022+
<pclass="input-helper small muted">Download a backup of your nightTab Bookmarks and Settings.</p>
1023+
<pclass="input-helper small muted">This file can later be imported on this or another deivce.</p>
1024+
</div>
1025+
</div>
1026+
<divclass="menu-item">
1027+
<divclass="menu-item-header">
1028+
<h1class="menu-item-header-text">Clear</h1>
1029+
</div>
1030+
<divclass="menu-item-form">
1031+
<divclass="button-wrap">
1032+
<buttonclass="control-data-clear button mb-0" href="#">Clear data</button>
1033+
</div>
1034+
<pclass="input-helper small muted">Wipe all data and restore nightTab to default state.</p>
1035+
</div>
1036+
</div>
1037+
</div>
1038+
9991039
</div>
10001040

10011041
</div>

0 commit comments

Comments
(0)