Skip to content

Commit 734cf41

Browse files
ttaylordevttaylordev
committed
added day to night slider, changing color of sky, and terrain
1 parent 4a15216 commit 734cf41

File tree

9 files changed

+459
-219
lines changed

9 files changed

+459
-219
lines changed

‎main/home/homeStyles.scss‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
$darkBlue: #406BB2;
1+
@import "./../variables";
2+
@import "./../inputSlider";
23

34
/////////////////////////////
45
// ----- home styles ----- //
@@ -14,29 +15,9 @@ $darkBlue: #406BB2;
1415
align-items: center;
1516
z-index: -1;
1617
}
17-
// .home-top {
18-
// width: 0;
19-
// height: 0;
20-
// border-left: 19em solid transparent;
21-
// border-right: 19em solid transparent;
22-
// border-bottom: 21em solid #FFE3A8;
23-
// margin-bottom: 8vh;
24-
// margin-top: 8vh;
25-
// svg {
26-
// margin-top: 20vh;
27-
// }
18+
2819
.home-top {
29-
// width: 650px;
30-
// height: 360px;
31-
// background: #FFE3A8;
32-
// width: 0;
33-
// height: 0;
34-
// border-left: 300px solid transparent;
35-
// border-right: 300px solid transparent;
36-
// border-bottom: 350px solid #FFE3A8;
37-
// margin-bottom: 8vh;
3820
margin-top: 10vh;
39-
4021
div {
4122
font-weight: bold;
4223
// position: absolute;

‎main/inputSlider.scss‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@import "variables";
2+
////////////////////////////
3+
// <----- Trackbar -----> //
4+
////////////////////////////
5+
6+
input[type=range] {
7+
-webkit-appearance: none;
8+
width: 70%;
9+
margin: 2.05px 0;
10+
}
11+
input[type=range]:focus {
12+
outline: none;
13+
}
14+
input[type=range]::-webkit-slider-runnable-track {
15+
width: 70%;
16+
height: 10.9px;
17+
cursor: pointer;
18+
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
19+
background: $darkGrey;
20+
border: 2.6px solid rgba(152, 152, 152, 0.3);
21+
}
22+
input[type=range]::-webkit-slider-thumb {
23+
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
24+
border: 0 solid rgba(0, 0, 0, 0);
25+
height: 15px;
26+
width: 32px;
27+
border-radius: 5px;
28+
background: $darkBlue;
29+
cursor: pointer;
30+
-webkit-appearance: none;
31+
margin-top: -4.65px;
32+
}
33+
input[type=range]:focus::-webkit-slider-runnable-track {
34+
background: rgba(126, 126, 126, 0.9);
35+
}
36+
input[type=range]::-moz-range-track {
37+
width: 70%;
38+
height: 10.9px;
39+
cursor: pointer;
40+
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
41+
background: $darkGrey;
42+
border: 2.6px solid rgba(152, 152, 152, 0.3) rgba(152, 152, 152, 0.3);
43+
}
44+
input[type=range]::-moz-range-thumb {
45+
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
46+
border: 0 solid rgba(0, 0, 0, 0);
47+
height: 15px;
48+
width: 32px;
49+
border-radius: 5px;
50+
background: $darkBlue;
51+
cursor: pointer;
52+
}
53+
input[type=range]::-ms-track {
54+
width: 70%;
55+
height: 10.9px;
56+
cursor: pointer;
57+
background: transparent;
58+
border-color: transparent;
59+
color: transparent;
60+
}
61+
input[type=range]::-ms-fill-lower {
62+
background: #000000;
63+
border: 2.6px solid rgba(152, 152, 152, 0.3);
64+
border-radius: 13px;
65+
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
66+
}
67+
input[type=range]::-ms-fill-upper {
68+
background: $darkGrey;
69+
border: 2.6px solid rgba(152, 152, 152, 0.3);
70+
border-radius: 13px;
71+
box-shadow: 0 0 15px rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
72+
}
73+
input[type=range]::-ms-thumb {
74+
box-shadow: 0 0 0.1px $navFontColor, 0 0 0 $navFontColor;
75+
border: 0 solid rgba(0, 0, 0, 0);
76+
height: 15px;
77+
width: 32px;
78+
border-radius: 5px;
79+
background: $darkBlue;
80+
cursor: pointer;
81+
height: 10.9px;
82+
}
83+
input[type=range]:focus::-ms-fill-lower {
84+
background: $darkGrey;
85+
}
86+
input[type=range]:focus::-ms-fill-upper {
87+
background: rgba(126, 126, 126, 0.9);
88+
}
89+
// end of trackbar...

‎main/main.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
// @import url(https://fonts.googleapis.com/css?family=Lato:300|Quicksand);
22
// replaced font import with index.html link
3-
4-
$darkBlue: #406BB2;
5-
$lightBlue: #8FB9FF;
6-
$navFontColor: #FFF;
3+
@import "variables";
74

85
@mixin menuBorder() {
96
border-left: 1px solid grey;

0 commit comments

Comments
 (0)