Replaced bubbles with snowflakes, made a bubbles template.

app/client/app.css

@@ -405,12 +405,13 @@ form button:hover {
     width: 40px;
     height: 40px;
     border-radius: 100px;
-    background-color: rgba(255, 255, 255, 0.15);
+    /*background-color: rgba(255, 255, 255, 0.15);*/
     bottom: 0px;
     -webkit-animation: square 25s infinite;
     animation: square 25s infinite;
     -webkit-transition-timing-function: linear;
     transition-timing-function: linear;
+    opacity: 0.5;
 }
 
 .bg-bubbles li:nth-child(1) {
@@ -439,7 +440,7 @@ form button:hover {
     height: 60px;
     -webkit-animation-duration: 22s;
     animation-duration: 22s;
-    background-color: rgba(255, 255, 255, 0.25);
+    /*background-color: rgba(255, 255, 255, 0.25);*/
 }
 
 .bg-bubbles li:nth-child(5) {
@@ -452,7 +453,7 @@ form button:hover {
     height: 120px;
     -webkit-animation-delay: 3s;
     animation-delay: 3s;
-    background-color: rgba(255, 255, 255, 0.2);
+    /*background-color: rgba(255, 255, 255, 0.2);*/
 }
 
 .bg-bubbles li:nth-child(7) {
@@ -481,7 +482,7 @@ form button:hover {
     animation-delay: 2s;
     -webkit-animation-duration: 40s;
     animation-duration: 40s;
-    background-color: rgba(255, 255, 255, 0.3);
+    /*background-color: rgba(255, 255, 255, 0.3);*/
 }
 
 .bg-bubbles li:nth-child(10) {
@@ -492,6 +493,11 @@ form button:hover {
     animation-delay: 11s;
 }
 
+.bg-bubbles img {
+    width: 100%;
+    height: 100%;
+}
+
 /* Tablet view fix */
 @media (max-width: 768px){
     body{
@@ -524,24 +530,24 @@ form button:hover {
 
 @-webkit-keyframes square {
     0% {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-    }
-    100% {
         -webkit-transform: translateY(-700px) rotate(600deg);
         transform: translateY(-700px) rotate(600deg);
     }
+    100% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
 }
 
 @keyframes square {
     0% {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-    }
-    100% {
         -webkit-transform: translateY(-700px) rotate(600deg);
         transform: translateY(-700px) rotate(600deg);
     }
+    100% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
 }
 
 .fa-github {

app/client/templates/admin.html

@@ -64,17 +64,6 @@
                 </div>
           </div>
 
-          <ul class="bg-bubbles">
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-          </ul>
+        {{> bubbles}}
     </div>
 </template>

app/client/templates/banned.html

@@ -11,16 +11,5 @@
         </div>
     </div>
 
-    <ul class="bg-bubbles">
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-    </ul>
+    {{> bubbles}}
 </template>

app/client/templates/bubbles.html

@@ -0,0 +1,14 @@
+<template name="bubbles">
+    <ul class="bg-bubbles">
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+        <li><img src="/Snowflake 2.png"/></li>
+    </ul>
+</template>

app/client/templates/home.html

@@ -15,16 +15,5 @@
     </div>
     {{> footer}}
 
-    <ul class="bg-bubbles">
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-    </ul>
+    {{> bubbles}}
 </template>

app/client/templates/loading.html

@@ -3,17 +3,6 @@
         <div id="spinner-container">
             <i class="fa fa-spinner fa-pulse" id="spinner"></i>
         </div>
-        <ul class="bg-bubbles">
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-        </ul>
+        {{> bubbles}}
     </div>
 </template>

app/client/templates/login.html

@@ -12,18 +12,7 @@
         <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Login with Github</button>
     </div>
 
-    <ul class="bg-bubbles">
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-    </ul>
+      {{> bubbles}}
 
   </div>
 </template>

app/client/templates/profile.html

@@ -45,17 +45,6 @@
             {{> loading}}
         {{/if}}
       </div>
-      <ul class="bg-bubbles">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-      </ul>
+        {{> bubbles}}
     </div>
 </template>

app/client/templates/register.html

@@ -14,18 +14,7 @@
         <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Signup with Github</button>
     </div>
 
-    <ul class="bg-bubbles">
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-    </ul>
+      {{> bubbles}}
 
   </div>
 </template>

app/client/templates/room.html

@@ -425,18 +425,7 @@
                 </div>
             </div>
 
-            <ul class="bg-bubbles">
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-                <li></li>
-            </ul>
+            {{> bubbles}}
         </div>
     {{else}}
         {{> loading}}

app/client/templates/settings.html

@@ -18,16 +18,5 @@
             </div>
         </div>
     </div>
-    <ul class="bg-bubbles">
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-        <li></li>
-    </ul>
+    {{> bubbles}}
 </template>