Better handling of # variables + bump simplebar to v5.2.1

style/_fa.scss

@@ -14,7 +14,7 @@ $fa-css-prefix: fa;
 
 .fa {
 	@extend .fas;
-	
+
 	&.push {
 		margin-right: 0.5rem;
 	}
@@ -31,7 +31,7 @@ $fa-css-prefix: fa;
 	color: #CCC;
 	background: none;
 	@extend .fa;
-	
+
 	&:hover {
 		color: white;
 	}
@@ -71,7 +71,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
 .#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
 .#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
-.#{$fa-css-prefix}-drill-picture:before { content: fa-content($fa-var-search); }
+.#{$fa-css-prefix}-drill-image:before { content: fa-content($fa-var-search); }
 .#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
 .#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
 .#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }

style/_mask_project.scss

@@ -292,18 +292,24 @@ $legend-color: $post-color;
 			}
 
 			#poster {
-				textarea#post {
-					margin-bottom: 1em;
-					width: calc(100% - 2em);
-				}
+				display: inline-block;
 
-				input#name {
-					width: calc(100% - 6em);
-				}
+				.post-item {
+					margin-bottom: 0;
 
-				button#submit {
-					margin-left: 1em;
-					margin-bottom: 0.5em;
+					textarea#post {
+						margin-bottom: 1em;
+						width: calc(100% - 2em);
+					}
+
+					input#name {
+						width: calc(100% - 6em);
+					}
+
+					button#submit {
+						margin-left: 1em;
+						margin-bottom: 0.5em;
+					}
 				}
 			}
 
@@ -437,7 +443,7 @@ $legend-color: $post-color;
 
 							&.drill {
 								&:hover {
-									.drill-icon .fa-drill-picture, .drill-icon .fa-drill-video {
+									.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
 										color: rgba($media-bg, 0.75);
 									}
 									.comment {
@@ -448,7 +454,7 @@ $legend-color: $post-color;
 								.drill-icon {
 									font-size: 3em;
 
-									.fa-drill-picture {
+									.fa-drill-image {
 										color: transparent;
 									}
 									.fa-drill-video {
@@ -689,7 +695,7 @@ $legend-color: $post-color;
 					&.drill {
 						font-size: 2em;
 
-						.fa-drill-picture {
+						.fa-drill-image {
 							color: transparent;
 						}
 						.fa-drill-video {
@@ -697,7 +703,7 @@ $legend-color: $post-color;
 						}
 
 						&:hover {
-							.fa-drill-video, .fa-drill-picture {
+							.fa-drill-video, .fa-drill-image {
 								color: rgba(255, 255, 255, 0.75);
 							}
 						}

style/_simplebar.scss

@@ -51,7 +51,6 @@
   display: block;
   height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
   width: auto;
-  visibility: visible;
   max-width: 100%; /* Not required for horizontal scroll to trigger */
   max-height: 100%; /* Needed for vertical scroll to trigger */
   scrollbar-width: none;
@@ -132,8 +131,8 @@
 
 .simplebar-scrollbar {
   position: absolute;
-  right: 2px;
-  width: 7px;
+  left: 0;
+  right: 0;
   min-height: 10px;
 }
 
@@ -142,8 +141,8 @@
   content: '';
   background: black;
   border-radius: 7px;
-  left: 0;
-  right: 0;
+  left: 2px;
+  right: 2px;
   opacity: 0;
   transition: opacity 0.2s linear;
 }