Skip to content

Commit 5ebd94b

Browse files
zombieFoxzombieFox
committed
[feature] adding header shade options
1 parent 64887ec commit 5ebd94b

File tree

12 files changed

+264
-42
lines changed

12 files changed

+264
-42
lines changed

‎css/animation.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@keyframes appear{
2+
0%{
3+
opacity:0;
4+
}
5+
6+
100%{
7+
opacity:1;
8+
}
9+
}

‎css/background.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,3 @@
3535
pointer-events: none;
3636
display: block;
3737
}
38-
39-
@keyframes appear{
40-
0%{
41-
opacity:0;
42-
}
43-
44-
100%{
45-
opacity:1;
46-
}
47-
}

‎css/base.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
--z-index-shade:5000;
4242
--z-index-modal:6000;
4343
--z-index-menu:7000;
44+
--header-shade-color: transparent;
45+
--header-shade-opacity: none;
46+
--header-height:0;
47+
--header-shade-padding:4;
4448
--background-image: none;
4549
--background-opacity:1;
4650
--background-accent-opacity:0;

‎css/header.css‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,52 @@
11
.header{
2+
padding:calc(var(--gutter) *var(--header-shade-padding)) 0;
23
width:100%;
4+
position: relative;
35
z-index:var(--z-index-header);
46
}
57

68
.is-bookmarks-show-link .header{
79
position: fixed;
810
top:0;
911
left:0;
10-
transition: background-color var(--animation-speed-slow) ease-in-out;
1112
}
1213

13-
.header-background{
14-
background-color:rgba(var(--gray-01),0.95);
14+
.header .header-shade,
15+
.header .header-border{
16+
content:"";
17+
display: block;
18+
position: absolute;
19+
width:100%;
20+
height:100%;
21+
top:0;
22+
left:0;
23+
pointer-events: none;
24+
}
25+
26+
.is-header-shade-style-scroll .header .header-shade{
27+
transition: background-color var(--animation-speed-fast) ease-in-out;
28+
animation: none;
29+
}
30+
31+
.is-header-shade-show .header .header-shade{
32+
background-color:rgb(var(--header-shade-color));
33+
opacity:var(--header-shade-opacity);
34+
}
35+
36+
.is-header-shade-border-top .header .header-border{
37+
border-top:var(--line-width) solid rgb(var(--accent));
38+
}
39+
40+
.is-header-shade-border-bottom .header .header-border{
41+
border-bottom:var(--line-width) solid rgb(var(--accent));
1542
}
1643

1744
.header-area{
18-
margin:calc(var(--gutter) *4)calc(var(--gutter) *-1);
45+
margin:0calc(var(--gutter) *-1);
1946
display: flex;
2047
flex-direction: row;
2148
flex-wrap: wrap;
2249
align-items: stretch;
23-
/* display: grid; */
24-
/* grid-template-columns: auto 1fr auto auto auto; */
25-
/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
2650
}
2751

2852
.header-item{

‎css/link.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
.link{
22
margin-bottom:2em;
3+
margin-top:var(--header-height);
34
width:100vw;
45
position: relative;
56
z-index:var(--z-index-link);
67
display: none;
8+
/* transition: margin-top var(--animation-speed-fast) ease-in-out; */
79
}
810

911
.is-bookmarks-show-link .link{

‎index.html‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<title>New Tab</title>
99
<linkrel="stylesheet" href="css/reset.css">
1010
<linkrel="stylesheet" href="css/base.css">
11+
<linkrel="stylesheet" href="css/animation.css">
1112
<linkrel="stylesheet" href="css/fonts.css">
1213
<linkrel="stylesheet" href="css/icons.css">
1314
<linkrel="stylesheet" href="css/state.css">
@@ -37,6 +38,8 @@
3738
</div>
3839

3940
<headerclass="header">
41+
<divclass="header-shade"></div>
42+
<divclass="header-border"></div>
4043
<divclass="container">
4144
<divclass="header-area">
4245
<divclass="header-item header-clock">
@@ -245,6 +248,39 @@ <h1 class="menu-header">Vertical Alignment</h1>
245248
<pclass="input-helper small muted">Available when Bookmarks are not shown.</p>
246249
</div>
247250
</div>
251+
<divclass="menu-item">
252+
<h1class="menu-header">Background Shade</h1>
253+
<divclass="checkbox-wrap">
254+
<inputid="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="1">
255+
<labelfor="control-header-shade-show"><spanclass="label-icon"></span>Show</label>
256+
</div>
257+
<divclass="radio-wrap form-indent-1">
258+
<inputid="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
259+
<labelfor="control-header-shade-style-always"><spanclass="label-icon"></span>Always visible</label>
260+
<pclass="input-helper small muted">Useful for when a Background Image is shown.</p>
261+
</div>
262+
<divclass="radio-wrap form-indent-1">
263+
<inputid="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="1">
264+
<labelfor="control-header-shade-style-scroll"><spanclass="label-icon"></span>Visible on scroll</label>
265+
<pclass="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
266+
</div>
267+
<divclass="input-wrap form-indent-1">
268+
<labelfor="control-header-shade-opacity">Opacity</label>
269+
<inputid="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
270+
</div>
271+
<divclass="input-wrap form-indent-1">
272+
<labelfor="control-header-shade-padding">Top & bottom padding</label>
273+
<inputid="control-header-shade-padding" class="control-header-shade-padding" type="range" min="2" max="20" value="0" tabindex="1">
274+
</div>
275+
<divclass="checkbox-wrap form-indent-1">
276+
<inputid="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
277+
<labelfor="control-header-shade-border-top"><spanclass="label-icon"></span>Top border</label>
278+
</div>
279+
<divclass="checkbox-wrap form-indent-1">
280+
<inputid="control-header-shade-border-bottom" class="control-header-shade-border-bottom" type="checkbox" value="always" tabindex="1">
281+
<labelfor="control-header-shade-border-bottom"><spanclass="label-icon"></span>Bottom border</label>
282+
</div>
283+
</div>
248284
</div>
249285

250286
<divclass="menu-content-area menu-content-area-bookmarks is-hidden">
@@ -371,19 +407,19 @@ <h1 class="menu-header">Image</h1>
371407
</div>
372408
<divclass="input-wrap form-indent-1">
373409
<labelfor="control-background-image-opacity">Opacity</label>
374-
<inputid="control-background-image-opacity" class="control-background-image-opacity mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
410+
<inputid="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
375411
</div>
376412
<divclass="input-wrap form-indent-1">
377413
<labelfor="control-background-image-grayscale">Grayscale</label>
378-
<inputid="control-background-image-grayscale" class="control-background-image-grayscale mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
414+
<inputid="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
379415
</div>
380416
<divclass="input-wrap form-indent-1">
381417
<labelfor="control-background-image-blur">Blur</label>
382-
<inputid="control-background-image-blur" class="control-background-image-blur mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
418+
<inputid="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
383419
</div>
384420
<divclass="input-wrap form-indent-1">
385421
<labelfor="control-background-image-accent">Accent overlay</label>
386-
<inputid="control-background-image-accent" class="control-background-image-accent mb-0" type="range" min="0" max="50" value="0" placeholder="URL or path to file" tabindex="1">
422+
<inputid="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="50" value="0" tabindex="1">
387423
</div>
388424
</div>
389425
</div>

‎js/control.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,64 @@ var control = (function(){
284284
func: function(){
285285
render();
286286
}
287+
},{
288+
element: helper.e(".control-header-shade-show"),
289+
path: "header.shade.show",
290+
type: "checkbox",
291+
func: function(){
292+
render();
293+
dependents();
294+
header.render();
295+
}
296+
},{
297+
element: helper.e(".control-header-shade-style-always"),
298+
path: "header.shade.style",
299+
type: "radio",
300+
func: function(){
301+
render();
302+
header.render();
303+
}
304+
},{
305+
element: helper.e(".control-header-shade-style-scroll"),
306+
path: "header.shade.style",
307+
type: "radio",
308+
func: function(){
309+
render();
310+
header.render();
311+
}
312+
},{
313+
element: helper.e(".control-header-shade-opacity"),
314+
path: "header.shade.opacity",
315+
type: "range",
316+
valueMod: ["reverse","float"],
317+
func: function(){
318+
render();
319+
header.render();
320+
}
321+
},{
322+
element: helper.e(".control-header-shade-padding"),
323+
path: "header.shade.padding",
324+
type: "range",
325+
func: function(){
326+
render();
327+
header.render();
328+
}
329+
},{
330+
element: helper.e(".control-header-shade-border-top"),
331+
path: "header.shade.border.top",
332+
type: "checkbox",
333+
func: function(){
334+
render();
335+
header.render();
336+
}
337+
},{
338+
element: helper.e(".control-header-shade-border-bottom"),
339+
path: "header.shade.border.bottom",
340+
type: "checkbox",
341+
func: function(){
342+
render();
343+
header.render();
344+
}
287345
},{
288346
element: helper.e(".control-bookmarks-show-link"),
289347
path: "bookmarks.show.link",
@@ -441,6 +499,7 @@ var control = (function(){
441499
render();
442500
dependents();
443501
background.render();
502+
header.render();
444503
}
445504
},{
446505
element: helper.e(".control-background-image-url"),
@@ -670,6 +729,28 @@ var control = (function(){
670729
helper.removeClass(html,"is-background-image-show");
671730
};
672731
};
732+
var_header=function(){
733+
if(state.get().header.shade.show){
734+
helper.addClass(html,"is-header-shade-show");
735+
helper.addClass(html,"is-header-shade-style-"+state.get().header.shade.style);
736+
if(state.get().header.shade.border.top){
737+
helper.addClass(html,"is-header-shade-border-top");
738+
}else{
739+
helper.removeClass(html,"is-header-shade-border-top");
740+
};
741+
if(state.get().header.shade.border.bottom){
742+
helper.addClass(html,"is-header-shade-border-bottom");
743+
}else{
744+
helper.removeClass(html,"is-header-shade-border-bottom");
745+
};
746+
}else{
747+
helper.removeClass(html,"is-header-shade-show");
748+
helper.removeClass(html,"is-header-shade-style-always");
749+
helper.removeClass(html,"is-header-shade-style-scroll");
750+
helper.removeClass(html,"is-header-shade-border-top");
751+
helper.removeClass(html,"is-header-shade-border-bottom");
752+
};
753+
};
673754
_menu();
674755
_alignment();
675756
_edit();
@@ -681,6 +762,7 @@ var control = (function(){
681762
_link();
682763
_layout();
683764
_background();
765+
_header();
684766
};
685767

686768
vardependents=function(){
@@ -833,13 +915,35 @@ var control = (function(){
833915
helper.e(".control-background-image-accent").disabled=true;
834916
};
835917
};
918+
var_header=function(){
919+
if(state.get().header.shade.show){
920+
helper.e(".control-header-shade-style-always").disabled=false;
921+
helper.e(".control-header-shade-style-scroll").disabled=false;
922+
helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
923+
helper.e(".control-header-shade-opacity").disabled=false;
924+
helper.e("[for=control-header-shade-padding]").removeAttribute("disabled");
925+
helper.e(".control-header-shade-padding").disabled=false;
926+
helper.e(".control-header-shade-border-top").disabled=false;
927+
helper.e(".control-header-shade-border-bottom").disabled=false;
928+
}else{
929+
helper.e(".control-header-shade-style-always").disabled=true;
930+
helper.e(".control-header-shade-style-scroll").disabled=true;
931+
helper.e("[for=control-header-shade-opacity]").setAttribute("disabled","");
932+
helper.e(".control-header-shade-opacity").disabled=true;
933+
helper.e("[for=control-header-shade-padding]").setAttribute("disabled","");
934+
helper.e(".control-header-shade-padding").disabled=true;
935+
helper.e(".control-header-shade-border-top").disabled=true;
936+
helper.e(".control-header-shade-border-bottom").disabled=true;
937+
};
938+
};
836939
_edit();
837940
_date();
838941
_clock();
839942
_search();
840943
_theme();
841944
_link();
842945
_background();
946+
_header();
843947
};
844948

845949
varupdate=function(){

0 commit comments

Comments
(0)