Added light theme - needs some work though

2 files changed, 456 insertions, 0 deletions

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css
index e8dd495..e8dd495 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css b/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css
new file mode 100644
index 0000000..b946e99
--- /dev/null
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css
@@ -0,0 +1,456 @@
+/******
+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: #fdfeff;
+    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 #e7e7e7;
+    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: #FDFEFF;
+    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: #888888;
+}
+
+.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: #c8c9ca;
+}
+
+.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: #DFDFDF;
+    color: #a7a8a9;
+}
+
+.MessageSent {
+    clear: right;
+    float: right;
+    background-color: #376cf4;
+    color: #efefef;
+}
+
+.MessageReceived {
+    clear: left;
+    float: left;
+    background-color: #dfdfdf;
+    color: #6a6b6c;
+}
+
+.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: #393a3b;
+    background-color: #c8c9ca;
+}
+
+#ChatTextInput {
+    display: none;
+}
+
+/* TYPING INDICATOR ANIMATION */
+.spinner {
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+    width: 10px;
+    height: 10px;
+    background-color: #98999a;
+
+    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: #e4e4e4;
+}
+
+.NavbarIconWrap {
+    margin: auto;
+}
+
+.NavbarIconWrap img {
+    height: 30px;
+    width: 30px;
+}
+
+.NavbarLine {
+    position: absolute;
+    bottom: 73px;
+    left: 0;
+    width: 20% !important;
+    height: 2px;
+    background: #eb12b5;
+}
+