Work more on settings and update modal etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>

src/scss/index.scss

@@ -8,3 +8,13 @@
 @import 'modules/modal';
 @import 'modules/settings';
 @import 'modules/miscellaneous';
+
+#backgroundImage {
+    height:100vh;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    z-index: 0;
+    border: none;
+}

src/scss/modules/_greeting.scss

@@ -1,5 +1,5 @@
 .greeting {
     margin: 0;
     font-size: 1.6em;
-    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+    text-shadow: 250px 250px 250px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_miscellaneous.scss

@@ -15,6 +15,12 @@ body {
   justify-content: center;
   font-size: calc(10px + 2vmin);
   text-align: center;
+  position:absolute;
+  top: 0; 
+  bottom: 0; 
+  left: 0; 
+  right: 0;
+  margin: auto;
 }
 
 ::placeholder {

src/scss/modules/_modal.scss

@@ -71,4 +71,23 @@
   .slider.round:before {
     border-radius: 50%;
   }
+
+  ::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track /
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+/ Handle /
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+/ Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
   

src/scss/modules/_navbar.scss

@@ -15,4 +15,10 @@
     @extend %navbar;
     top: 50px;
     right: 50px;
+}
+
+.navbar3 {
+    @extend %navbar;
+    top: 50px;
+    right: 100px;
 }

src/scss/modules/_quote.scss

@@ -14,10 +14,11 @@
   font-size: 0.9em;
   letter-spacing: 0.5px;
   margin: 0;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+  text-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
 }
 
 i.material-icons,
 h1.quoteauthor {
   display: inline;
+  text-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_settings.scss

@@ -4,6 +4,7 @@
   background-color: #fff;
   max-width: 500px;
   box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
+  z-index: 4;
 }
 
 .Modal:focus {
@@ -75,15 +76,21 @@ input:checked + .slider:before {
 }
 
 
-h4, .switch {
+h4, .switch, .expandIcons {
   display: inline;
   font-size: 1.4em;
+  font-weight: 100;
+}
+
+h4, #engines {
+  display: inline;
 }
 
 .section {
   margin-bottom: 20px;
 }
 
+
 .apply {
   height: 45px;
   width: 130px;
@@ -122,4 +129,67 @@ h4, .switch {
   &:active {
     outline: none;
   }
+}
+
+.expandIcons {
+  position: relative;
+  font-size: 25px;
+  vertical-align: middle;
+  display: inline-flex;
+  cursor: pointer;
+  transition-duration: 0.5s;
+}
+
+$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+
+.extraSettings {
+  display: none;
+  border-left: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
+}
+
+ul {
+  padding-left: 5px;
+  margin: 0;
+}
+
+li {
+  margin-top: 1px;
+}
+
+.extraSettings > p {
+  margin: 0;
+  padding: 0;
+}
+
+.range {
+  -webkit-appearance: none;
+  width: 200px;
+  height: 15px;
+  background: #ccc;
+  border-radius: 12px;
+  outline: none;
+  background: #ecf0f1;
+  border-radius: 12px;
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+}
+
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 12px;
+  background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
+  cursor: pointer;
+}
+
+.range::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 12px;
+  background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
+  cursor: pointer;
 }