aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--main/app/sprinkles/core/asset-bundles.json27
-rw-r--r--main/app/sprinkles/core/assets/SiteAssets/css/mainDark.css (renamed from main/app/sprinkles/core/assets/SiteAssets/css/main.css)0
-rw-r--r--main/app/sprinkles/core/assets/SiteAssets/css/mainLight.css456
-rw-r--r--main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig7
-rw-r--r--main/app/sprinkles/core/templates/pages/index.html.twig1
5 files changed, 489 insertions, 2 deletions
diff --git a/main/app/sprinkles/core/asset-bundles.json b/main/app/sprinkles/core/asset-bundles.json
index 93f35b1..0d714e8 100644
--- a/main/app/sprinkles/core/asset-bundles.json
+++ b/main/app/sprinkles/core/asset-bundles.json
@@ -98,8 +98,31 @@
"styles": [
"SiteAssets/css/normalize.css",
"SiteAssets/css/swiper.css",
- "SiteAssets/css/animate.css",
- "SiteAssets/css/main.css"
+ "SiteAssets/css/animate.css"
+ ],
+ "options": {
+ "result": {
+ "type": {
+ "styles": "plain"
+ }
+ }
+ }
+ },
+ "css/DarkTheme": {
+ "styles": [
+ "SiteAssets/css/mainDark.css"
+ ],
+ "options": {
+ "result": {
+ "type": {
+ "styles": "plain"
+ }
+ }
+ }
+ },
+ "css/LightTheme": {
+ "styles": [
+ "SiteAssets/css/mainLight.css"
],
"options": {
"result": {
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;
+}
+
diff --git a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
index fc922bf..0c420e3 100644
--- a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
+++ b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
@@ -24,6 +24,13 @@
<!-- Include main CSS asset bundle -->
{{ assets.css() | raw }}
{{ assets.css('css/main-site') | raw }}
+ {% if current_user.theme == "dark" %}
+ {{ assets.css('css/DarkTheme') | raw }} {# DARK THEME #}
+ {% elseif current_user.theme == "light" %}
+ {{ assets.css('css/LightTheme') | raw }} {# LIGHT THEME #}
+ {% else %}
+ {{ assets.css('css/DarkTheme') | raw }} {# DEFAULT #}
+ {% endif %}
{% endblock %}
{# Override this block in a child layout template or page template to specify or override stylesheets for groups of similar pages. #}
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index 3ef8240..97239de 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -8,6 +8,7 @@
{% block page_description %}{{ translate("WELCOME_TO", {'title': site.title}) }}{% endblock %}
{% block content %}
+ <script>alert("{{ current_user.theme }}")</script>
<div class="main">
<div class="MainTabWindows">