Suppress-able broadcasts

src/scss/components/_images.scss

@@ -79,7 +79,7 @@
 
 	&.blur {
 		canvas {
-			filter: blur(15px);
+			@include blur();
 		}
 	}
 }

src/scss/components/_notifications.scss

@@ -6,23 +6,34 @@
 	right: 30px;
 	z-index: 97;
 	pointer-events: none;
-	width: 200px;
+	width: 300px;
 
 	.notification {
+		@include fadein();
 		display: block;
 		position: relative;
-		background: $blue;
-		padding: 12px 32px 12px 18px;
+		background: $darkest_grey;
+		padding: 16px 40px 16px 22px;
 		margin: 10px 0 0 0;
-		color: #FFFFFF;
+		color: $white;
 		pointer-events: all;
+		
+		h4 {
+			padding-top: 0;
+		}
+
+		p a {
+			color: inherit;
+			text-decoration: none;
+			border-bottom: 1px dotted $black;
+		}
 
 		.close-button {
 			position: absolute;
-			top: 10px;
-			right: 11px;
-			font-size: 11px;
-			padding: 4px;
+			top: 4px;
+			right: 0;
+			font-size: 12px;
+			padding: 14px;
 			cursor: pointer;
 			opacity: 0.5;
 
@@ -35,9 +46,9 @@
 			background: $green;
 		}
 
-		&.info {
+		&.broadcast {
 			background: $yellow;
-			color: #000000;
+			color: $black;
 		}
 
 		&.bad {
@@ -56,7 +67,7 @@
 				position: absolute;
 				display: block;
 				content: '';
-				background: rgba(0,0,0,0.35);
+				background: $blue;
 				opacity: 1;
 			    animation: slideloader 1s infinite;
 				bottom: 0;

src/scss/components/_player.scss

@@ -173,9 +173,10 @@
 
 			.slider.progress {
 				position: absolute;
-				top: 0;
+				top: auto;
 				left: 0;
 				right: 0;
+				bottom: 0;
 				margin: 0;
 				height: 2px;
 

src/scss/global/_variables.scss

@@ -100,6 +100,18 @@ $bp_shallow: 650px;
     animation-iteration-count: infinite;
 }
 
+@keyframes fadein {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@mixin fadein( $duration: 0.2s ){
+    animation-name: fadein;
+    animation-duration: $duration;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+}
+
 @mixin blur( $size: 10px ) {
 	-webkit-filter: blur( $size );
 	filter: blur( $size );