From c42b7cb095023b10b077b3b06cea72c7a5b469ed Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Thu, 3 May 2018 18:35:28 +0200 Subject: Beautified theme stylesheets --- main/app/sprinkles/core/asset-bundles.json | 7 +- .../core/assets/SiteAssets/css/DarkTheme.css | 101 +++++ .../core/assets/SiteAssets/css/LightTheme.css | 101 +++++ .../sprinkles/core/assets/SiteAssets/css/main.css | 417 +++++++++++++++++++ .../core/assets/SiteAssets/css/mainDark.css | 456 --------------------- .../core/assets/SiteAssets/css/mainLight.css | 456 --------------------- 6 files changed, 623 insertions(+), 915 deletions(-) create mode 100644 main/app/sprinkles/core/assets/SiteAssets/css/DarkTheme.css create mode 100644 main/app/sprinkles/core/assets/SiteAssets/css/LightTheme.css create mode 100644 main/app/sprinkles/core/assets/SiteAssets/css/main.css delete mode 100644 main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css delete mode 100644 main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css (limited to 'main/app/sprinkles') 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/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css new file mode 100644 index 0000000..0c43d55 --- /dev/null +++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css @@ -0,0 +1,417 @@ +/****** +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; + margin: 0; + padding: 0; + border: 0; +} + +a { + text-decoration: none; +} + +hr { + width: 100%; + display: block; + height: 1px; + border: 0; + margin: 1em 0; + padding: 0; +} + +img { + pointer-events: none; +} + +hr.ShorterLine { + margin: 0 auto; + width: 90%; +} + +.main { + height: 100%; +} + +/******* +SWIPEABLE +*******/ +.carousel-cell { + width: 100%; + height: 100%; + 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; +} + +.RightButtonHeader { + width: 20px; + height: 20px; +} + +/*********** +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; +} + +.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; + 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; + -moz-transition: all .7s; + -o-transition: all .7s; + -webkit-transition: all .7s; + transition: all .7s; +} + +.MessageWrapper { + display: inline-block; + width: 100%; +} + +.TypingIndicatorMessage { + border-radius: 25px; +} + +.MessageSent { + clear: right; + float: right; +} + +.MessageReceived { + clear: left; + float: left; +} + +.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; +} + +#ChatTextInput { + display: none; +} + +/* TYPING INDICATOR ANIMATION */ +.spinner { + width: 70px; + text-align: center; +} + +.spinner > div { + width: 10px; + height: 10px; + + 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%; + font-size: 25px; + line-height: 50px; + text-align: center; +} + +.AvatarImage { + height: 110px; + width: 110px; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; +} + +.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%; +} + +.NavbarIconWrap { + margin: auto; +} + +.NavbarIconWrap img { + height: 30px; + width: 30px; +} + +.NavbarLine { + position: absolute; + bottom: 73px; + left: 0; + width: 20% !important; + height: 2px; +} + 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; -} - diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css b/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css deleted file mode 100644 index b946e99..0000000 --- a/main/app/sprinkles/core/assets/SiteAssets/css/mainLight.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: #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; -} - -- cgit v1.2.3