Beautified theme stylesheets

5 files changed, 210 insertions, 502 deletions

diff --git a/main/app/sprinkles/core/asset-bundles.json b/main/app/sprinkles/core/asset-bundles.json
index fd75027..018452d 100644
--- a/main/app/sprinkles/core/asset-bundles.json
+++ b/main/app/sprinkles/core/asset-bundles.json
@@ -99,7 +99,8 @@
             "styles": [
                 "SiteAssets/css/normalize.css",
                 "SiteAssets/css/swiper.css",
-                "SiteAssets/css/animate.css"
+                "SiteAssets/css/animate.css",
+                "SiteAssets/css/main.css"
             ],
             "options": {
                 "result": {
@@ -111,7 +112,7 @@
         },
         "css/DarkTheme": {
             "styles": [
-                "SiteAssets/css/mainDark.css"
+                "SiteAssets/css/DarkTheme.css"
             ],
             "options": {
                 "result": {
@@ -123,7 +124,7 @@
         },
         "css/LightTheme": {
             "styles": [
-                "SiteAssets/css/mainLight.css"
+                "SiteAssets/css/LightTheme.css"
             ],
             "options": {
                 "result": {
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/DarkTheme.css b/main/app/sprinkles/core/assets/SiteAssets/css/DarkTheme.css
new file mode 100644
index 0000000..84c1b82
--- /dev/null
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/DarkTheme.css
@@ -0,0 +1,101 @@
+html, body {
+    background-color: #0c1d34;
+    color: #426A91;
+}
+
+a {
+    color: #4a93c0;
+}
+
+hr {
+    border-top: 1px solid #112a42;
+}
+
+img {
+    pointer-events: none;
+}
+
+.main-carousel {
+    background: #EEE;
+}
+
+.carousel-cell {
+    background: #0c1d34;
+}
+
+.LeftButtonHeader {
+    filter: invert(.5);
+    -webkit-filter: invert(.5);
+    -moz-filter: invert(.5);
+}
+
+.HeaderCaption {
+    color: lightgrey;
+}
+
+.RightButtonHeader {
+    filter: invert(.5);
+    -webkit-filter: invert(.5);
+    -moz-filter: invert(.5);
+}
+
+.UserSearchBar {
+    color: #f3f4f5;
+    background-color: #13223C;
+}
+
+.SearchResults .full_name {
+    grid-column-start: 3;
+    justify-self: center; /* OR start */
+    align-self: center;
+}
+
+.ServerChatMessage {
+    background: linear-gradient(to right, #ad4eff, #7c41f9);
+    color: #FFF;
+}
+
+.TypingIndicatorMessage {
+    background-color: #13223c;
+    color: #a7a8a9;
+}
+
+.MessageSent {
+    background-color: #12213b;
+    color: #537eaf;
+}
+
+.MessageReceived {
+    background-color: #13223c;
+    color: #a7a8a9;
+}
+
+.ChatInput {
+    color: #f3f4f5;
+    background-color: #13223C;
+}
+
+.spinner > div {
+    background-color: #a7a8a9;
+}
+
+.GenderFab {
+    color: white;
+}
+
+.GenderFab.Female {
+    background: linear-gradient(to right, #ff7a88, #ff9676);
+}
+
+.GenderFab.Male {
+    background: linear-gradient(to right, #11c1d5, #1ddcb6);
+}
+
+.Navbar {
+    background-color: #13223c;
+}
+
+.NavbarLine {
+    background: #eb12b5;
+}
+
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/LightTheme.css b/main/app/sprinkles/core/assets/SiteAssets/css/LightTheme.css
new file mode 100644
index 0000000..637172d
--- /dev/null
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/LightTheme.css
@@ -0,0 +1,101 @@
+html, body {
+    background-color: #fdfeff;
+    color: #426A91;
+}
+
+a {
+    color: #4a93c0;
+}
+
+hr {
+    border-top: 1px solid #e7e7e7;
+}
+
+img {
+    pointer-events: none;
+}
+
+.main-carousel {
+    background: #EEE;
+}
+
+.carousel-cell {
+    background: #FDFEFF;
+}
+
+.LeftButtonHeader {
+    filter: invert(.5);
+    -webkit-filter: invert(.5);
+    -moz-filter: invert(.5);
+}
+
+.HeaderCaption {
+    color: #888888;
+}
+
+.RightButtonHeader {
+    filter: invert(.5);
+    -webkit-filter: invert(.5);
+    -moz-filter: invert(.5);
+}
+
+.UserSearchBar {
+    color: #f3f4f5;
+    background-color: #c8c9ca;
+}
+
+.SearchResults .full_name {
+    grid-column-start: 3;
+    justify-self: center; /* OR start */
+    align-self: center;
+}
+
+.ServerChatMessage {
+    background: linear-gradient(to right, #ad4eff, #7c41f9);
+    color: #FFF;
+}
+
+.TypingIndicatorMessage {
+    background-color: #DFDFDF;
+    color: #a7a8a9;
+}
+
+.MessageSent {
+    background-color: #376cf4;
+    color: #efefef;
+}
+
+.MessageReceived {
+    background-color: #dfdfdf;
+    color: #6a6b6c;
+}
+
+.ChatInput {
+    color: #393a3b;
+    background-color: #c8c9ca;
+}
+
+.spinner > div {
+    background-color: #98999a;
+}
+
+.GenderFab {
+    color: white;
+}
+
+.GenderFab.Female {
+    background: linear-gradient(to right, #ff7a88, #ff9676);
+}
+
+.GenderFab.Male {
+    background: linear-gradient(to right, #11c1d5, #1ddcb6);
+}
+
+.Navbar {
+    background-color: #e4e4e4;
+}
+
+.NavbarLine {
+    background: #eb12b5;
+}
+
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index b946e99..0c43d55 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -28,8 +28,6 @@ html, body {
     height: 100%;
     width: 100%;
     overflow: hidden;
-    background-color: #fdfeff;
-    color: #426A91;
     margin: 0;
     padding: 0;
     border: 0;
@@ -37,7 +35,6 @@ html, body {
 
 a {
     text-decoration: none;
-    color: #4a93c0;
 }
 
 hr {
@@ -45,7 +42,6 @@ hr {
     display: block;
     height: 1px;
     border: 0;
-    border-top: 1px solid #e7e7e7;
     margin: 1em 0;
     padding: 0;
 }
@@ -66,14 +62,9 @@ hr.ShorterLine {
 /*******
 SWIPEABLE
 *******/
-.main-carousel {
-    background: #EEE;
-}
-
 .carousel-cell {
     width: 100%;
     height: 100%;
-    background: #FDFEFF;
     counter-increment: carousel-cell;
 }
 
@@ -96,21 +87,11 @@ HEADER
 .LeftButtonHeader {
     width: 20px;
     height: 20px;
-    filter: invert(.5);
-    -webkit-filter: invert(.5);
-    -moz-filter: invert(.5);
-}
-
-.HeaderCaption {
-    color: #888888;
 }
 
 .RightButtonHeader {
     width: 20px;
     height: 20px;
-    filter: invert(.5);
-    -webkit-filter: invert(.5);
-    -moz-filter: invert(.5);
 }
 
 /***********
@@ -171,8 +152,6 @@ EXPLORE WINDOW
     -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
     border-radius: 25px;
-    color: #f3f4f5;
-    background-color: #c8c9ca;
 }
 
 .SearchResults {
@@ -232,8 +211,6 @@ hr.ChatHeaderDivider {
     -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
     border-radius: 25px;
-    background: linear-gradient(to right, #ad4eff, #7c41f9);
-    color: #FFF;
     font-size: x-small;
     animation: fadeIn 1s;
     -webkit-animation: fadeIn 1s;
@@ -251,6 +228,10 @@ hr.ChatHeaderDivider {
     padding: 8px;
     margin-bottom: 5px;
     font-size: 0.85em;
+    -moz-transition: all .7s;
+    -o-transition: all .7s;
+    -webkit-transition: all .7s;
+    transition: all .7s;
 }
 
 .MessageWrapper {
@@ -260,22 +241,16 @@ hr.ChatHeaderDivider {
 
 .TypingIndicatorMessage {
     border-radius: 25px;
-    background-color: #DFDFDF;
-    color: #a7a8a9;
 }
 
 .MessageSent {
     clear: right;
     float: right;
-    background-color: #376cf4;
-    color: #efefef;
 }
 
 .MessageReceived {
     clear: left;
     float: left;
-    background-color: #dfdfdf;
-    color: #6a6b6c;
 }
 
 .AloneMessage {
@@ -315,8 +290,6 @@ hr.ChatHeaderDivider {
     -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
     border-radius: 25px;
-    color: #393a3b;
-    background-color: #c8c9ca;
 }
 
 #ChatTextInput {
@@ -332,7 +305,6 @@ hr.ChatHeaderDivider {
 .spinner > div {
     width: 10px;
     height: 10px;
-    background-color: #98999a;
 
     border-radius: 100%;
     display: inline-block;
@@ -388,16 +360,11 @@ PERSONAL TAB
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
-    color: white;
     font-size: 25px;
     line-height: 50px;
     text-align: center;
 }
 
-.GenderFab.Female {
-    background: linear-gradient(to right, #ff7a88, #ff9676);
-}
-
 .AvatarImage {
     height: 110px;
     width: 110px;
@@ -406,10 +373,6 @@ PERSONAL TAB
     border-radius: 100%;
 }
 
-.GenderFab.Male {
-    background: linear-gradient(to right, #11c1d5, #1ddcb6);
-}
-
 .DisplayNames {
     text-align: center;
 }
@@ -433,7 +396,6 @@ NAVBAR
     left: 0;
     height: 75px;
     width: 100%;
-    background-color: #e4e4e4;
 }
 
 .NavbarIconWrap {
@@ -451,6 +413,5 @@ NAVBAR
     left: 0;
     width: 20% !important;
     height: 2px;
-    background: #eb12b5;
 }
 
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css b/main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css
deleted file mode 100644
index e8dd495..0000000
--- a/main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css
+++ /dev/null
@@ -1,456 +0,0 @@
-/******
-GENERAL
-******/
-@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
-
-* {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-overflow-scrolling: touch;
-
-    outline: none;
-    ie-dummy: expression(this.hideFocus=true);
-}
-
-::-webkit-scrollbar {
-    width: 0;
-    background: transparent;
-}
-
-html, body {
-    font-family: 'Nanum Gothic', sans-serif;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-color: #0c1d34;
-    color: #426A91;
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-a {
-    text-decoration: none;
-    color: #4a93c0;
-}
-
-hr {
-    width: 100%;
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #112a42;
-    margin: 1em 0;
-    padding: 0;
-}
-
-img {
-    pointer-events: none;
-}
-
-hr.ShorterLine {
-    margin: 0 auto;
-    width: 90%;
-}
-
-.main {
-    height: 100%;
-}
-
-/*******
-SWIPEABLE
-*******/
-.main-carousel {
-    background: #EEE;
-}
-
-.carousel-cell {
-    width: 100%;
-    height: 100%;
-    background: #0c1d34;
-    counter-increment: carousel-cell;
-}
-
-.draggable, .slick-track {
-    height: 100%;
-}
-
-/******
-HEADER
-******/
-.header {
-    -js-display: flex;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-content: center;
-    margin: 20px;
-}
-
-.LeftButtonHeader {
-    width: 20px;
-    height: 20px;
-    filter: invert(.5);
-    -webkit-filter: invert(.5);
-    -moz-filter: invert(.5);
-}
-
-.HeaderCaption {
-    color: lightgrey;
-}
-
-.RightButtonHeader {
-    width: 20px;
-    height: 20px;
-    filter: invert(.5);
-    -webkit-filter: invert(.5);
-    -moz-filter: invert(.5);
-}
-
-/***********
-GENERAL TABS
-***********/
-.MainTabWindows, .MainInTab {
-    height: 100%;
-}
-
-/**********
-FEED WINDOW
-**********/
-.FeedTabWindow {
-    position: relative;
-    max-height: calc(100% - 155px); /* navbar + some margin*/
-    max-height: -moz-calc(100% - 155px);
-    max-height: -webkit-calc(100% - 155px);
-    max-width: 100%;
-    margin: 15px;
-    overflow-y: scroll;
-}
-
-.FeedImage {
-    display: block;
-    margin: 0 auto;
-    width: calc(100vw - 30px); /* left + right margin */
-    width: -moz-calc(100vw - 30px);
-    width: -webkit-calc(100vw - 30px);
-    height: calc(100vw - 30px);
-    height: -moz-calc(100vw - 30px);
-    height: -webkit-calc(100vw - 30px);
-    object-fit: cover;
-    -webkit-border-radius: 15px;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-}
-
-/*************
-EXPLORE WINDOW
-*************/
-.ExploreTabWindow {
-    position: relative;
-    height: 100%;
-    margin: 5px;
-}
-
-.UserSearchBar {
-    display: table;
-    box-sizing: border-box;
-    width: 80%;
-    height: 40px;
-    margin: 0 auto;
-    padding-left: 15px;
-    padding-right: 15px;
-    top: 0; /* 75+15 */
-    z-index: 600;
-    border: none;
-    -webkit-border-radius: 25px;
-    -moz-border-radius: 25px;
-    border-radius: 25px;
-    color: #f3f4f5;
-    background-color: #13223C;
-}
-
-.SearchResults {
-    display: grid;
-    grid-template-columns: 10% 20% auto 10%;
-    overflow-y: auto;
-    max-height: 45%;
-    width: 100%;
-}
-
-.SearchResults .avatar {
-    grid-column-start: 2;
-    justify-self: center;
-    align-self: center;
-    height: 50px;
-    width: 50px;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.SearchResults .full_name {
-    grid-column-start: 3;
-    justify-self: center; /* OR start */
-    align-self: center;
-}
-
-/**********
-CHAT WINDOW
-**********/
-.ChatWindow {
-    position: relative;
-    height: 100%;
-    margin: 5px;
-}
-
-hr.ChatHeaderDivider {
-    margin-bottom: 0.6em; /* cause of symmetry things */
-}
-
-.ChatMessages {
-    overflow-y: scroll;
-    max-height: calc(100% - 215px); /* navbar + input + some margin*/
-    max-height: -moz-calc(100% - 215px);
-    max-height: -webkit-calc(100% - 215px);
-    height: 100%;
-    width: 100%;
-}
-
-.ServerChatMessage {
-    display: inline-block;
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    padding: 5px;
-    -webkit-border-radius: 25px;
-    -moz-border-radius: 25px;
-    border-radius: 25px;
-    background: linear-gradient(to right, #ad4eff, #7c41f9);
-    color: #FFF;
-    font-size: x-small;
-    animation: fadeIn 1s;
-    -webkit-animation: fadeIn 1s;
-}
-
-.ChatMessage {
-    display: inline-block;
-    position: relative;
-    min-width: 50px;
-    max-width: 50%;
-    width: auto;
-    height: auto;
-    word-wrap: break-word;
-    text-align: center;
-    padding: 8px;
-    margin-bottom: 5px;
-    font-size: 0.85em;
-}
-
-.MessageWrapper {
-    display: inline-block;
-    width: 100%;
-}
-
-.TypingIndicatorMessage {
-    border-radius: 25px;
-    background-color: #13223c;
-    color: #a7a8a9;
-}
-
-.MessageSent {
-    clear: right;
-    float: right;
-    background-color: #12213b;
-    color: #537eaf;
-}
-
-.MessageReceived {
-    clear: left;
-    float: left;
-    background-color: #13223c;
-    color: #a7a8a9;
-}
-
-.AloneMessage {
-    -webkit-border-radius: 25px;
-    -moz-border-radius: 25px;
-    border-radius: 25px;
-}
-
-.TopMessage {
-    -webkit-border-radius: 25px 25px 10px 10px;
-    -moz-border-radius: 25px 25px 10px 10px;
-    border-radius: 25px 25px 10px 10px;
-}
-
-.MiddleMessage {
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-}
-
-.BottomMessage {
-    -webkit-border-radius: 10px 10px 25px 25px;
-    -moz-border-radius: 10px 10px 25px 25px;
-    border-radius: 10px 10px 25px 25px;
-}
-
-.ChatInput {
-    position: absolute;
-    box-sizing: border-box;
-    width: 100%;
-    height: 40px;
-    padding-left: 15px;
-    padding-right: 15px;
-    bottom: 165px; /* 75+15 MATH GENIUS */
-    z-index: 600;
-    border: none;
-    -webkit-border-radius: 25px;
-    -moz-border-radius: 25px;
-    border-radius: 25px;
-    color: #f3f4f5;
-    background-color: #13223C;
-}
-
-#ChatTextInput {
-    display: none;
-}
-
-/* TYPING INDICATOR ANIMATION */
-.spinner {
-    width: 70px;
-    text-align: center;
-}
-
-.spinner > div {
-    width: 10px;
-    height: 10px;
-    background-color: #a7a8a9;
-
-    border-radius: 100%;
-    display: inline-block;
-    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-}
-
-.spinner .bounce1 {
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-}
-
-.spinner .bounce2 {
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-}
-
-@-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes sk-bouncedelay {
-    0%, 80%, 100% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
-    } 40% {
-          -webkit-transform: scale(1.0);
-          transform: scale(1.0);
-      }
-}
-
-/***********
-PERSONAL TAB
-***********/
-.PersonalTabWindow {
-    position: relative;
-    height: 100%;
-    margin: 5px;
-}
-
-.PersonalOverviewHeader {
-    -js-display: flex;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: flex-end;
-    width: 100%;
-}
-
-.GenderFab {
-    height: 50px;
-    width: 50px;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-    color: white;
-    font-size: 25px;
-    line-height: 50px;
-    text-align: center;
-}
-
-.GenderFab.Female {
-    background: linear-gradient(to right, #ff7a88, #ff9676);
-}
-
-.AvatarImage {
-    height: 110px;
-    width: 110px;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.GenderFab.Male {
-    background: linear-gradient(to right, #11c1d5, #1ddcb6);
-}
-
-.DisplayNames {
-    text-align: center;
-}
-
-.DisplayNames .FullName {
-    font-weight: bold;
-    font-size: 20px;
-}
-
-/*****
-NAVBAR
-*****/
-.Navbar {
-    -js-display: flex;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-content: center;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 75px;
-    width: 100%;
-    background-color: #13223c;
-}
-
-.NavbarIconWrap {
-    margin: auto;
-}
-
-.NavbarIconWrap img {
-    height: 30px;
-    width: 30px;
-}
-
-.NavbarLine {
-    position: absolute;
-    bottom: 73px;
-    left: 0;
-    width: 20% !important;
-    height: 2px;
-    background: #eb12b5;
-}
-