ITS CHRISTMASSSSS!!

fallback.html

@@ -44,7 +44,7 @@
             .social #discord {
                 display: inline-block;
                 vertical-align: middle;
-                color: #03a9f4;
+                color: #ff4545;
                 font-size: 22px;
                 background-color: transparent;
                 height: 40px;
@@ -54,7 +54,7 @@
                 transition: all ease-in-out 0.5s
             }
             .social #discord .st0 {
-                fill:#03a9f4;
+                fill:#ff4545;
                 transition: all ease-in-out 0.5s
             }
             .social #discord:hover .st0 {
@@ -64,7 +64,7 @@
             .social .fa {
                 display: inline-block;
                 vertical-align: middle;
-                color: #03a9f4;
+                color: #ff4545;
                 font-size: 28px;
                 background-color: transparent;
                 height: 40px;
@@ -92,7 +92,7 @@
         		visibility: hidden;
         		width: 120px;
         		font-size: 18px;
-        		background-color: rgba(3, 169, 244,0.8);
+        		background-color: rgba(255, 69, 69, 0.8);
         		color: #fff;
         		text-align: center;
         		border-radius: 6px;
@@ -116,7 +116,7 @@
                 margin-left: -5px;
         	    border-width: 5px;
         	    border-style: solid;
-        	    border-color: rgba(3, 169, 244,0.8) transparent transparent transparent;
+        	    border-color: rgba(255, 69, 69, 0.8) transparent transparent transparent;
         	}
 
         	.socialIcon:hover .icon-purpose {

frontend/App.vue

@@ -289,7 +289,7 @@
 	}
 
 	.button:focus, .button:active { border-color: #dbdbdb !important; }
-	.input:focus, .input:active { border-color: #03a9f4 !important; }
+	.input:focus, .input:active { border-color: #ff4545 !important; }
 	button.delete:focus { background-color: rgba(10, 10, 10, 0.3); }
 
 	.tag { padding-right: 6px !important; }

frontend/build/index.css

@@ -75,7 +75,7 @@ h6 {
 }
 
 .light-blue {
-	background-color: #03a9f4 !important;
+	background-color: #ff4545 !important;
 }
 
 .white {
@@ -92,7 +92,7 @@ a.nav-item.is-tab {
 }
 
 .button.is-info {
-	background-color: #03a9f4;
+	background-color: #ff4545;
 	border-width: 0;
 	color: #fff;
 }

frontend/build/index.tpl.html

@@ -25,11 +25,11 @@
 	<link rel='icon' type='image/png' href='/android-chrome-192x192.png?v=06042016' sizes='192x192'>
 	<link rel='icon' type='image/png' href='/favicon-16x16.png?v=06042016' sizes='16x16'>
 	<link rel='manifest' href='/manifest.json?v=06042016'>
-	<link rel='mask-icon' href='/safari-pinned-tab.svg?v=06042016' color='#03a9f4'>
+	<link rel='mask-icon' href='/safari-pinned-tab.svg?v=06042016' color='#ff4545'>
 	<link rel='shortcut icon' href='/favicon.ico?v=06042016'>
-	<meta name='msapplication-TileColor' content='#03a9f4'>
+	<meta name='msapplication-TileColor' content='#ff4545'>
 	<meta name='msapplication-TileImage' content='/mstile-144x144.png?v=06042016'>
-	<meta name='theme-color' content='#03a9f4'>
+	<meta name='theme-color' content='#ff4545'>
 	<meta name='google' content='nositelinkssearchbox' />
 
 
@@ -41,7 +41,7 @@
 	<script type='text/javascript' src='/vendor/jquery.min.js'></script>
 	<script type='text/javascript' src='/vendor/moment.min.js'></script>
 	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js'></script>
-	<script type='text/javascript' src='https://cdn.rawgit.com/atjonathan/lofig/master/dist/lofig.min.js'></script>
+	<script type='text/javascript' src='https://musare.com/lofig.min.js'></script>
 	<script>
 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 					(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -50,6 +50,67 @@
 
 		ga('create', 'UA-93460758-1', 'auto');
 	</script>
+	<style>
+	/*Snow courtesy of iamjamie on codepen.io*/
+	.winter-is-coming, .snow {
+  z-index: 100;
+  pointer-events: none;
+}
+
+.winter-is-coming {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  background: transparent;
+}
+
+.snow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  animation: falling linear infinite both;
+  transform: translate3D(0, -100%, 0);
+}
+.snow--near {
+  animation-duration: 10s;
+  background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
+  background-size: contain;
+}
+.snow--near + .snow--alt {
+  animation-delay: 5s;
+}
+.snow--mid {
+  animation-duration: 20s;
+  background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
+  background-size: contain;
+}
+.snow--mid + .snow--alt {
+  animation-delay: 10s;
+}
+.snow--far {
+  animation-duration: 30s;
+  background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
+  background-size: contain;
+}
+.snow--far + .snow--alt {
+  animation-delay: 15s;
+}
+
+@keyframes falling {
+  0% {
+    transform: translate3D(-7.5%, -100%, 0);
+  }
+  100% {
+    transform: translate3D(7.5%, 100%, 0);
+  }
+}
+
+	</style>
 </head>
 <body>
 	<script src='https://www.google.com/recaptcha/api.js'></script>

frontend/components/Admin/News.vue

@@ -226,5 +226,5 @@
 
 	.is-info:focus { background-color: #0398db; }
 
-	.card-footer-item { color: #03A9F4; }
+	.card-footer-item { color: #ff4545; }
 </style>

frontend/components/MainHeader.vue

@@ -1,4 +1,15 @@
 <template>
+<div class="winter-is-coming">
+
+<div class="snow snow--near"></div>
+<div class="snow snow--near snow--alt"></div>
+
+<div class="snow snow--mid"></div>
+<div class="snow snow--mid snow--alt"></div>
+
+<div class="snow snow--far"></div>
+<div class="snow snow--far snow--alt"></div>
+</div>
 	<nav class="nav is-info">
 		<div class="nav-left">
 			<a class="nav-item is-brand" href="#" v-link="{ path: '/' }">
@@ -68,7 +79,7 @@
 
 <style lang="scss" scoped>
 	.nav {
-		background-color: #03a9f4;
+		background-color: #ff4545;
 		height: 64px;
 
 		.nav-menu.is-active {
@@ -150,7 +161,7 @@
 				}
 			}
 			.admin strong {
-				color: #03a9f4;
+				color: #ff4545;
 			}
 		}
 	}

frontend/components/Modals/EditNews.vue

@@ -130,7 +130,7 @@
 		height: 19px;
 		width: 19px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: #ff4545;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: -6.5px;
@@ -152,7 +152,7 @@
 		height: 19px;
 		width: 19px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: #ff4545;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: -6.5px;
@@ -187,7 +187,7 @@
 		height: 15px;
 		width: 15px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: #ff4545;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: 1.5px;

frontend/components/Modals/EditSong.vue

@@ -414,7 +414,7 @@
 		height: 19px;
 		width: 19px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: #ff4545;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: -6.5px;
@@ -436,7 +436,7 @@
 		height: 19px;
 		width: 19px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: #ff4545;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: -6.5px;
@@ -471,7 +471,7 @@
 		height: 15px;
 		width: 15px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: #ff4545;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: 1.5px;
@@ -519,7 +519,7 @@
 	.tag:not(:last-child) { margin-right: 5px; }
 
 	.reports-length {
-		color: #03A9F4;
+		color: #ff4545;
 		font-weight: bold;
 		display: flex;
 		justify-content: center;

frontend/components/Modals/Report.vue

@@ -236,6 +236,6 @@
 	}
 
 	.is-highlight-active {
-		border: 3px #03a9f4 solid;
+		border: 3px #ff4545 solid;
 	}
 </style>

frontend/components/Sidebars/Playlist.vue

@@ -135,7 +135,7 @@
 	.slide-enter, .slide-leave { transform: translateX(100%); }
 
 	.title {
-		background-color: rgb(3, 169, 244);
+		background-color: rgb(255, 69, 69);
 		text-align: center;
 		padding: 10px;
 		color: white;

frontend/components/Sidebars/SongsList.vue

@@ -112,7 +112,7 @@
 	.slide-enter, .slide-leave { transform: translateX(100%); }
 
 	.title {
-		background-color: rgb(3, 169, 244);
+		background-color: rgb(255, 69, 69);
 		text-align: center;
 		padding: 10px;
 		color: white;
@@ -136,7 +136,7 @@
 		margin-top: 25px;
 		height: 40px;
 		border-radius: 0;
-		background: rgb(3, 169, 244);
+		background: rgb(255, 69, 69);
 		color: #fff !important;
 		border: 0;
 		&:active, &:focus { border: 0; }

frontend/components/Sidebars/UsersList.vue

@@ -41,7 +41,7 @@
 	}
 
 	.title {
-		background-color: rgb(3, 169, 244);
+		background-color: rgb(255, 69, 69);
 		text-align: center;
 		padding: 10px;
 		color: white;

frontend/components/Station/CommunityHeader.vue

@@ -1,4 +1,15 @@
 <template>
+<div class="winter-is-coming">
+
+<div class="snow snow--near"></div>
+<div class="snow snow--near snow--alt"></div>
+
+<div class="snow snow--mid"></div>
+<div class="snow snow--mid snow--alt"></div>
+
+<div class="snow snow--far"></div>
+<div class="snow snow--far snow--alt"></div>
+</div>
 	<nav class='nav'>
 		<div class='nav-left'>
 			<a class='nav-item is-brand' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
@@ -143,7 +154,7 @@
 
 <style lang='scss' scoped>
 	.nav {
-		background-color: #03a9f4;
+		background-color: #ff4545;
 		line-height: 64px;
 
 		.is-brand {
@@ -217,7 +228,7 @@
 	.nav-center {
 		display: flex;
     align-items: center;
-		color: #03A9F4;
+		color: #ff4545;
 		font-size: 22px;
 		position: absolute;
 		margin: auto;
@@ -227,7 +238,7 @@
 	}
 
 	.nav-right.is-active .nav-item {
-		background: #03a9f4;
+		background: #ff4545;
     	border: 0;
 	}
 
@@ -238,7 +249,7 @@
 		left: 0;
 		width: 64px;
 		height: 100vh;
-		background-color: #03a9f4;
+		background-color: #ff4545;
 		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
 		@media (max-width: 998px) {
@@ -307,7 +318,7 @@
 		visibility: hidden;
 		width: 160px;
 		font-size: 12px;
-		background-color: rgba(3, 169, 244,0.8);
+		background-color: rgba(255, 69, 69, 0.8);
 		color: #fff;
 		text-align: center;
 		border-radius: 6px;
@@ -328,7 +339,7 @@
 	    margin-top: -5px;
 	    border-width: 5px;
 	    border-style: solid;
-	    border-color: transparent rgba(3, 169, 244,0.8) transparent transparent;
+	    border-color: transparent rgba(255, 69, 69, 0.8) transparent transparent;
 	}
 
 	.sidebar-item:hover .icon-purpose {

frontend/components/Station/OfficialHeader.vue

@@ -1,4 +1,15 @@
 <template>
+<div class="winter-is-coming">
+
+<div class="snow snow--near"></div>
+<div class="snow snow--near snow--alt"></div>
+
+<div class="snow snow--mid"></div>
+<div class="snow snow--mid snow--alt"></div>
+
+<div class="snow snow--far"></div>
+<div class="snow snow--far snow--alt"></div>
+</div>
 	<nav class='nav'>
 		<div class='nav-left'>
 			<a class='nav-item is-brand' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
@@ -149,7 +160,7 @@
 
 <style lang='scss' scoped>
 	.nav {
-		background-color: #03a9f4;
+		background-color: #ff4545;
 		line-height: 64px;
 
 		.is-brand {
@@ -223,7 +234,7 @@
 	.nav-center {
 		display: flex;
     	align-items: center;
-		color: #03A9F4;
+		color: #ff4545;
 		font-size: 22px;
 		position: absolute;
 		margin: auto;
@@ -233,7 +244,7 @@
 	}
 
 	.nav-right.is-active .nav-item {
-		background: #03a9f4;
+		background: #ff4545;
     	border: 0;
 	}
 
@@ -248,7 +259,7 @@
 		left: 0;
 		width: 64px;
 		height: 100vh;
-		background-color: #03a9f4;
+		background-color: #ff4545;
 		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
 		@media (max-width: 998px) {
@@ -317,7 +328,7 @@
 		visibility: hidden;
 		width: 160px;
 		font-size: 12px;
-		background-color: rgba(3, 169, 244,0.8);
+		background-color: rgba(255, 69, 69, 0.8);
 		color: #fff;
 		text-align: center;
 		border-radius: 6px;
@@ -338,7 +349,7 @@
 	    margin-top: -5px;
 	    border-width: 5px;
 	    border-style: solid;
-	    border-color: transparent rgba(3, 169, 244,0.8) transparent transparent;
+	    border-color: transparent rgba(255, 69, 69, 0.8) transparent transparent;
 	}
 
 	.sidebar-item:hover .icon-purpose {

frontend/components/pages/Admin.vue

@@ -136,7 +136,7 @@
 
 <style lang='scss' scoped>
 	.is-active a {
-		color: #03a9f4 !important;
-		border-color: #03a9f4 !important;
+		color: #ff4545 !important;
+		border-color: #ff4545 !important;
 	}
 </style>

frontend/components/pages/Home.vue

@@ -276,7 +276,7 @@
 		color: #4a4a4a;
 	}
 
-	.community-button:hover { color: #03a9f4; }
+	.community-button:hover { color: #ff4545; }
 
 	.station-privacy { text-transform: capitalize; }
 
@@ -349,7 +349,7 @@
 			color: #e6e6e6;
 		}
 
-		.community-button:hover { color: #03a9f4; }
+		.community-button:hover { color: #ff4545; }
 
 		.station-card {
 			margin: 10px;