Skip to content

Commit 11007ac

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

14 files changed

Lines changed: 318 additions & 40 deletions

‎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-button input[type="checkbox"]+label,
567567
.input-button input[type="radio"]+label,
568-
.input-button input[type="color"]+label {
568+
.input-button input[type="color"]+label,
569+
.input-button input[type="file"]+label {
569570
background-color: rgb(var(--gray-02));
570571
padding: 0.125em 1em;
571572
margin: 0;
@@ -597,7 +598,9 @@ input[type="range"][disabled]~.input-helper {
597598
.input-button input[type="radio"]:hover+label,
598599
.input-button input[type="radio"]:focus+label,
599600
.input-button input[type="color"]:hover+label,
600-
.input-button input[type="color"]:focus+label {
601+
.input-button input[type="color"]:focus+label,
602+
.input-button input[type="file"]:hover+label,
603+
.input-button input[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-button input[type="checkbox"]:active+label,
608611
.input-button input[type="radio"]:active+label,
609-
.input-button input[type="color"]:active+label {
612+
.input-button input[type="color"]:active+label,
613+
.input-button input[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-button input[type="checkbox"]:checked+label,
617621
.input-button input[type="radio"]:checked+label,
618-
.input-button input[type="color"]:checked+label {
622+
.input-button input[type="color"]:checked+label,
623+
.input-button input[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-button input[type="color"][disabled]+label,
634639
.input-button input[type="color"][disabled]:hover+label,
635640
.input-button input[type="color"][disabled]:focus+label,
636-
.input-button input[type="color"][disabled]:active+label {
641+
.input-button input[type="color"][disabled]:active+label,
642+
.input-button input[type="file"][disabled]+label,
643+
.input-button input[type="file"][disabled]:hover+label,
644+
.input-button input[type="file"][disabled]:focus+label,
645+
.input-button input[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-link input[type="checkbox"]+label,
644653
.input-button-link input[type="radio"]+label,
645-
.input-button-link input[type="color"]+label {
654+
.input-button-link input[type="color"]+label,
655+
.input-button-link input[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-link input[type="radio"]:checked+label,
657667
.input-button-link input[type="color"]:hover+label,
658668
.input-button-link input[type="color"]:focus+label,
659-
.input-button-link input[type="color"]:checked+label {
669+
.input-button-link input[type="color"]:checked+label,
670+
.input-button-link input[type="file"]:hover+label,
671+
.input-button-link input[type="file"]:focus+label,
672+
.input-button-link input[type="file"]:checked+label {
660673
background-color: transparent;
661674
color: rgb(var(--button-link-text-hover-focus));
662675
}
663676

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

671685
.input-button-link input[disabled][type="checkbox"]+label,
672686
.input-button-link input[disabled][type="radio"]+label,
673-
.input-button-link input[disabled][type="color"]+label {
687+
.input-button-link input[disabled][type="color"]+label,
688+
.input-button-link input[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-link input[disabled][type="radio"]:hover+label,
682697
.input-button-link input[disabled][type="radio"]:focus+label,
683698
.input-button-link input[disabled][type="color"]:hover+label,
684-
.input-button-link input[disabled][type="color"]:focus+label {
699+
.input-button-link input[disabled][type="color"]:focus+label,
700+
.input-button-link input[disabled][type="file"]:hover+label,
701+
.input-button-link input[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-hide input[type="checkbox"]+label:before,
724741
.input-hide input[type="checkbox"]:checked+label:before,
725742
.input-hide input[type="radio"]+label:before,
726-
.input-hide input[type="radio"]:checked+label:before {
743+
.input-hide input[type="radio"]:checked+label:before,
744+
.input-hide input[type="file"]+label:before,
745+
.input-hide input[type="file"]:checked+label:before {
727746
content: none;
728747
}
729748

730-
.input-hide input[type="color"] {
749+
.input-hide input[type="color"],
750+
.input-hide input[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-child input[type="color"]+label {
904924
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
905925
}
926+
927+
.form-feedback {
928+
padding: 1em 1.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: 0 0 1em 0;
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
<div class="menu-nav">
109109
<div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
110-
<button class="menu-nav-button button button-large active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
111-
<button class="menu-nav-button button button-large" data-target=".menu-content-area-header" tabindex="1">Header</button>
112-
<button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
113-
<button class="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
114-
<button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
110+
<button class="menu-nav-button button active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
111+
<button class="menu-nav-button button" data-target=".menu-content-area-header" tabindex="1">Header</button>
112+
<button class="menu-nav-button button" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
113+
<button class="menu-nav-button button" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
114+
<button class="menu-nav-button button" data-target=".menu-content-area-background" tabindex="1">Background</button>
115+
<button class="menu-nav-button button" data-target=".menu-content-area-data" tabindex="1">Data</button>
115116
</div>
116117
<div class="menu-nav-area">
117-
<button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
118+
<button class="menu-close button button-block mb-0" tabindex="1"><span class="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+
<div class="menu-content-area menu-content-area-data is-hidden">
1001+
<div class="menu-item">
1002+
<div class="menu-item-header">
1003+
<h1 class="menu-item-header-text">Restore</h1>
1004+
</div>
1005+
<div class="menu-item-form">
1006+
<div class="input-wrap input-button input-hide">
1007+
<input id="control-data-import" class="control-data-import" type="file">
1008+
<label for="control-data-import">Import data</label>
1009+
</div>
1010+
<p class="input-helper small muted">Restore a previously exported nightTab backup.</p>
1011+
<div class="control-data-import-feedback form-feedback is-hidden"></div>
1012+
</div>
1013+
</div>
1014+
<div class="menu-item">
1015+
<div class="menu-item-header">
1016+
<h1 class="menu-item-header-text">Backup</h1>
1017+
</div>
1018+
<div class="menu-item-form">
1019+
<div class="button-wrap">
1020+
<button class="control-data-export button mb-0" href="#">Export data</button>
1021+
</div>
1022+
<p class="input-helper small muted">Download a backup of your nightTab Bookmarks and Settings.</p>
1023+
<p class="input-helper small muted">This file can later be imported on this or another deivce.</p>
1024+
</div>
1025+
</div>
1026+
<div class="menu-item">
1027+
<div class="menu-item-header">
1028+
<h1 class="menu-item-header-text">Clear</h1>
1029+
</div>
1030+
<div class="menu-item-form">
1031+
<div class="button-wrap">
1032+
<button class="control-data-clear button mb-0" href="#">Clear data</button>
1033+
</div>
1034+
<p class="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)