0.4.06A1

src/components/Layout/Overlay/components/layout/__pri.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as app from 'app'
 import * as antd from 'antd'
 import * as Icons from '@ant-design/icons'
 import styles from '../../index.less'

src/components/Layout/Overlay/components/main/__searchBar.less

@@ -7,20 +7,27 @@
     input {
      height: 100%;
      width: 100%;
-     display: block;
      background-color: transparent;
-     border: none;
-     color: @body-color;
+     border: 0!important;
+     outline: 0!important;
+     color: #273346;
      padding: 0 48px;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 16px;
      background-position: 0 48%;
-     font-family: @body-font;
+     font-family: @__Global_texted_font;
      font-weight: 600;
      font-size: 15px;
      &::placeholder {
-      color: @input-chat-color;
+      color: #a2a2a2;
      }
+     transition: all 150ms ease-in-out;
+
+    }
+
+    input:focus{
+        background-position: 20px 48%;
+        transition: all 150ms ease-in-out;
     }
    }

src/components/Layout/Overlay/components/swapper/__priSearch.js

@@ -72,12 +72,16 @@ export default class __priSearch extends React.PureComponent {
       }
     }
     EntryComponent = (t, source) => {
+      function onclick(e){
+        if(!e) return false
+        app.router.go(`@${e}`)
+      }
       try {
         return (
               <antd.List
                 dataSource={source}
                 renderItem={item => 
-                  <div id={item.id} className={styles.search_card} onClick={() => {app.router.go(`@${item.username}`)}}>
+                  <div id={item.id} className={styles.search_card} onClick={() => onclick(item.username) }>
                     <div className={styles.search_title}>
                       <img src={item.avatar} />
                       <p className={styles.search_user_username}>

src/components/Layout/Overlay/components/swapper/__priSearch.less

@@ -7,10 +7,10 @@
     margin: auto;
     :global{
       .ant-result-title{
-        color: @Overlay_container_1_color!important;
+        color: #fff;
       }
       .ant-result-subtitle{
-        color: @Overlay_container_1_color!important;
+        color: #fff;
   
       }
       .ant-list-items{
@@ -27,7 +27,7 @@
     border-radius: 8px;
     padding: 10px;
     word-break: break-all;
-    color: #201F23;
+    color: #fff;
     cursor: pointer;
   
     .search_title {
@@ -44,7 +44,7 @@
         margin: 0 5px 0 8px;
         vertical-align: middle;
         height: 100%;
-        color: #201F23;      
+        color: #fff;      
         line-height: 25px;
       }
     }

src/components/Layout/Overlay/components/swapper/__secComments.less

@@ -2,9 +2,9 @@
 
 .comments_body {
     height: 100%;
-    font-family: "Poppins", sans-serif;
     padding: 50px 10px 10px 20px;
-  
+    font-family: @__Global_general_font_family;
+
     .comments_body_title {
       font-size: 12px;
   
@@ -17,21 +17,18 @@
     .comments_cards_wrapper {
       z-index: 50;
       overflow-y: scroll!important;
-      height: 84%;
-      :global {
-        overflow-y: scroll!important;
-      }
+      height: 70vh; //84%;
   
       .comment_card {
         overflow-y: scroll!important;
         position: relative;
         width: 100%;
-        background-color: #201F23;
+        max-height: 100px;
         word-break: break-all;
-  
+        margin: 0 0 10px 0;
+        
         .comment_title {
           display: flex;
-  
           img {
             float: left;
             width: 30px;
@@ -56,9 +53,7 @@
           }
         }
   
-        .comment_text {
-          margin: 10px 0 0 0;
-        }
+   
   
       }
     }
@@ -69,7 +64,6 @@
       right: 0;
       position: absolute;
       z-index: 100;
-      background-color: #201F23d7;
       padding-top: 20px;
       padding-bottom: 60px;
       border-radius: 0 0 0 32px;

src/components/Layout/Overlay/index.js

@@ -18,6 +18,9 @@ import {
 } from './components'
 
 export const SwapMode = {
+  loose_focus: () => {
+    OverlayLayoutComponent.loose_focus()
+  },
   close: () => {
     OverlayLayoutComponent.Swapper.close()
   },
@@ -108,7 +111,7 @@ export const SwapMode = {
       <h2>
         <Icons.SearchOutlined /> Results of {id || '... nothing ?'}
       </h2>
-      <__priSearch payload={tmp} />
+      <__priSearch lost_focus={() => SwapMode.close()} payload={tmp} />
     </div>
 
     return OverlayLayoutComponent.setState({
@@ -135,6 +138,8 @@ export default class Overlay extends React.PureComponent {
         __sec_active: false,
         __sec_full: false,
       })
+      this.setWrapperRef = this.setWrapperRef.bind(this);
+      this.handleClickOutside = this.handleClickOutside.bind(this);
   }
 
   Swapper = {
@@ -156,6 +161,12 @@ export default class Overlay extends React.PureComponent {
     }
   }
 
+  loose_focus(){
+    if (this.isOpen()) {
+      SwapMode.close()
+    }
+  }  
+
   handle_genData() {
     app.comty_data.general_data((err, res) => {
       if (err) return false
@@ -206,8 +217,25 @@ export default class Overlay extends React.PureComponent {
   componentDidUpdate() {
     if (this.isOpen()) {
       document.addEventListener('keydown', this.handle_Exit, false)
+      document.addEventListener('mousedown', this.handleClickOutside);
+
     } else {
-      document.removeEventListener('keydown', this.handle_Exit, false)
+      document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+  }
+   /**
+   * Set the wrapper ref
+   */
+  setWrapperRef(node) {
+    this.wrapperRef = node;
+  }
+
+  /**
+   * Alert if clicked on outside of element
+   */
+  handleClickOutside(event) {
+    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+     SwapMode.close()
     }
   }
 
@@ -279,8 +307,6 @@ export default class Overlay extends React.PureComponent {
         </React.Fragment>
       )
     }
- 
-
     
   }
   render() {
@@ -289,12 +315,14 @@ export default class Overlay extends React.PureComponent {
     if (!this.state.loading)
       return (
         <>
-          {isMobile ? null : <div className={styles.__Overlay_colider}></div>}
           <div
-            id="Overlay_layout__wrapper"
+            id="Overlay_layout"
+            ref={this.setWrapperRef}
             className={classnames(styles.Overlay_wrapper, {
               [styles.mobile]: isMobile,
-              [styles.active]: this.isOpen()
+              [styles.active]: this.isOpen(),
+              [styles.expand]: this.state.__pri_half
+          
             })}
           >
         

src/components/Layout/Overlay/index.less

@@ -20,13 +20,6 @@
   }
 }
 
-.__Overlay_colider{
-  position: relative;
-  float: right;
-  width: @__Overlay_colider_width;
-  height: 100vh;
-  background-color: @__Global_layout_backgroud;
-}
 .mobile_drag{
   width: 100%;
   height: auto;
@@ -39,42 +32,6 @@
   }
 }
 
-.Overlay_userholder {
-  right: 20px;
-  top: 25px;
-  display: flex;
-  position: absolute;
-  z-index: 53;
-
-  img {
-    border-radius: 15px;
-    width: 40px;
-    transition: all 150ms linear;
-    box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0);
-  }
-
-  img:hover {
-    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
-    transition: all 150ms linear;
-  }
-
-  transition: all 150ms linear;
-
-  .notif_box {
-    margin: 0 15px 0 5px;
-    width: 40px;
-    height: 40px;
-    border-radius: 15px;
-    background-color: #78CFED;
-    h1{
-      line-height: 40px;
-      font-size: 16px;
-      color: #ffffff;
-      text-align: center;
-      margin: 0;
-    }
-  }
-}
 
 .exit_button{
   position: relative;
@@ -94,8 +51,11 @@
 .Overlay_wrapper {
   right: 0;
   top: 0;
+  overflow: hidden;
 
-  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+  max-width: @Overlay_wrapper_maxwidth;
 
   &.mobile{
     overflow-y: scroll;
@@ -107,37 +67,37 @@
       position: absolute;
       width: 100%;
       height: 100%;
+      max-width: none;
     }
   }
 
+  &.expand{
+    max-width: calc(@Overlay_wrapper_maxwidth + 150px);
+  }
+
   transition: all @__Global_SwapAnimDuration ease-in-out;
 }
 
 .Overlay_container_1 {
-  width: @Overlay_wrapper_hidden_width;
   height: 100%;
-  z-index: 50;
-  position: absolute;
-  display: flex;
+  width: 100%;
+
+  display: flex;
+  z-index: 50;
 
-  position: absolute;
   right: 0;
   padding: 30px 30px 30px 35px;
   
-  color: @Overlay_container_1_color;
+  color: @Overlay_container1_def_color;
   background-color: #F8F6F8;
-  
+
+  &.half {
+    background-color: #2d2d2d;
+    color: @Overlay_container1_active_color;
+  }
 
   &.full_open {
     width: @Overlay_wrapper_showFull_width;
-    .pri_body{
-      width: calc(100% - 25% - 5%);
-      // margin: 30px 0 25px 0;
-    }
-  }
-
-  &.half {
-    width: calc(@Overlay_wrapper_hidden_width + 150px);
   }
 
   &.mobile {
@@ -172,6 +132,7 @@
       height: 95vh;
     }
 
+    transition: all @__Global_Components_transitions_dur linear;
   }
 
   :global {
@@ -198,42 +159,25 @@
 }
 
 
-
-.renderSearch_wrapper {
-  height: 87vh;
-  overflow: hidden;
-  margin: 20px 0 0 0;
-  font-family: @__Global_general_font_family;
-  h2 {
-    color: #ffffff;
-  }
-}
-
-
-.Overlay_main{
-  width: 100%;
-}
-
-
-
 .Overlay_container_2 {
     position: absolute;
-    z-index: 51;
+    z-index: 55;
     height: 100vh;
+    right: 0;
     width: 0;
-    right: -500px;
-    padding: @secondaty_container_2_padding;
-    
     opacity: 0;
-    color: @Overlay_container_2_color!important;
-    background-color: @Overlay_container_2_backgroud;
+
+    padding: @Overlay_container2_padding;
+    
+    color: @Overlay_container2_color!important;
+    background-color: @Overlay_container2_backgroud;
   
     border-radius: 32px 0 0 32px;
   
     &.active {
-      width: 25%;
+      width: @Overlay_container2_active_width;
       opacity: 1;
-      right: 0;
+ 
     }
      
     &.mobile {
@@ -282,17 +226,22 @@
       }
     }
   
-    .sec_body{
-  
-    }
   
     transition: all @__Global_SwapAnimDuration ease-in-out;
     
   }
 
-
-
   .Overlay_body_component{
     // Spacing between components
     margin-bottom: 35px;
+  }
+
+  .renderSearch_wrapper {
+    height: 87vh;
+    overflow: hidden;
+    margin: 20px 0 0 0;
+    font-family: @__Global_general_font_family;
+    h2 {
+      color: #ffffff;
+    }
   }

src/components/Layout/Overlay/reducers.js

@@ -0,0 +1,35 @@
+import * as app from 'app'
+
+export async function post(id,callback){
+    if(!id) return false
+    const payload = { post_id: id }
+    app.comty_post.get((err, response) => {
+      try {
+        return callback(JSON.parse(response)['post_data'])
+      } catch (error) {
+        console.log(error)
+      }
+    }, payload)
+}
+
+export async function comments(id,callback){
+    if(!id) return false
+    const payload = { post_id: id }
+    app.comty_post.get((err, response) => {
+     try {
+        return callback(JSON.parse(response)['post_comments'])
+     }catch (error) {
+        console.log(error)
+     }
+    }, payload)
+}
+
+export function search(key,callback){
+    if (!key) return false
+
+    const payload = { key: key }
+    app.comty_search.keywords((err, response) => {
+      return callback(response)
+    }, payload)
+}
+

src/components/PostCreator/index.less

@@ -11,7 +11,9 @@
   :global {
     textarea {
       font-weight: 500;
-      resize: none;
+      resize: none; 
+      outline: none !important;
+      border: 0 !important;
     }
 
     textarea:focus {

src/components/UserProfile/index.js

@@ -56,7 +56,7 @@ class UserProfile extends React.PureComponent {
 
   componentDidMount() {
     this.initUser(this.props.regx)
-   
+    app.SwapMode.loose_focus()
   }
 
   initUser = e => {

src/pages/chats/styles.less

@@ -18,66 +18,10 @@
     padding: 30px;
 }
 
-.dark-mode {
-    @body-bg-color: #1d1d1d;
-    @theme-bg-color: #27292d;
-    @border-color: #323336;
-    @body-color: #d1d1d2;
-    @active-conversation-bg: linear-gradient(
-     to right,
-     rgba(47, 50, 56, 0.54),
-     rgba(238, 242, 244, 0) 100%
-    );
-    @msg-hover-bg: rgba(47, 50, 56, 0.54);
-    @chat-text-bg: #383b40;
-    @chat-text-color: #b5b7ba;
-    @msg-date: #626466;
-    @msg-message: var(@msg-date);
-    @overlay-bg: linear-gradient(
-     to bottom,
-     rgba(0, 0, 0, 0) 0%,
-     #27292d 65%,
-     #27292d 100%
-    );
-    @input-bg: #2f3236;
-    @chat-header-bg: linear-gradient(
-     to bottom,
-     #27292d 0%,
-     #27292d 78%,
-     rgba(255, 255, 255, 0) 100%
-    );
-    @settings-icon-color: #7c7e80;
-    @developer-color: var(@border-color);
-    @button-bg-color: #393b40;
-    @button-color: var(@body-color);
-    @input-chat-color: #6f7073;
-    @detail-font-color: var(@input-chat-color);
-}
-   
-* {
- outline: none;
- box-sizing: border-box;
-}
-
-img {
- max-width: 100%;
-}
-
-body {
- background-color: @body-bg-color;
- font-family: @body-font;
- color: @body-color;
-}
-
-html {
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
-}
-
 .app {
  display: flex;
  flex-direction: column;
- background-color: @theme-bg-color;
+ background-color: @chats-bg-color;
  max-width: 1600px;
  height: 100%;
  width: 100%;
@@ -102,7 +46,7 @@ html {
 }
 
 .conversation_area {
- border-right: 1px solid @border-color;
+ border-right: 1px solid @chat-border-color;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
@@ -120,7 +64,7 @@ html {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: @border-color;
+  background-color: @chat-border-color;
 
   svg {
    width: 60%;
@@ -140,7 +84,7 @@ html {
  }
  &.active {
   background: @active-conversation-bg;
-  border-left: 4px solid @theme-color;
+  border-left: 4px solid @chat-theme-color;
  }
  &.online:before {
   content: "";
@@ -149,7 +93,7 @@ html {
   width: 9px;
   height: 9px;
   border-radius: 50%;
-  border: 2px solid @theme-bg-color;
+  border: 2px solid @chats-bg-color;
   left: 50px;
   bottom: 19px;
  }
@@ -175,7 +119,7 @@ html {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
- color: @msg-message;
+ color: @chat-msg-message;
 }
 
 .msg_date {
@@ -268,7 +212,7 @@ html {
      align-items: flex-end;
     }
     .chat_msg_text {
-     background-color: @theme-color;
+     background-color: @chat-theme-color;
      color: #fff;
      border-radius: 20px 20px 0 20px;
     }
@@ -291,50 +235,23 @@ html {
 
 .chat_area_footer {
  display: flex;
- border-top: 1px solid @border-color;
+ border-top: 1px solid @chat-border-color;
  width: 100%;
  padding: 10px 20px;
  height: @chat_footer_height;
  align-items: center;
- background-color: @theme-bg-color;
+ background-color: @chats-bg-color;
  position: sticky;
  bottom: 0;
  left: 0;
 }
 
-.chat_area_footer svg {
- color: @settings-icon-color;
- width: 20px;
- flex-shrink: 0;
- cursor: pointer;
- &:hover {
-  color: @settings-icon-hover;
- }
-
- & + svg {
-  margin-left: 12px;
- }
-}
-
-.chat_area_footer input {
- border: none;
- color: @body-color;
- background-color: @input-bg;
- padding: 12px;
- border-radius: 6px;
- font-size: 15px;
- margin: 0 12px;
- width: 100%;
- &::placeholder {
-  color: @input-chat-color;
- }
-}
 
 .chat_area_group {
  flex-shrink: 0;
  display: flex;
  * {
-  border: 2px solid @theme-bg-color;
+  border: 2px solid @chats-bg-color;
  }
  * + * {
   margin-left: -5px;
@@ -343,8 +260,8 @@ html {
  span {
   width: 32px;
   height: 32px;
-  background-color: @button-bg-color;
-  color: @theme-color;
+  background-color: @chat-button-bg-color;
+  color: @chat-theme-color;
   border-radius: 50%;
   display: flex;
   justify-content: center;

src/themes/base/ColorScheme1.less

@@ -0,0 +1,44 @@
+@import '~themes/index.less';
+
+@primaryColor: #373F51;
+@primaryShade1: #ffe2d1;
+@primaryShade2: #ffceb2;
+@primaryShade3: #ffb184;
+@primaryShade4: #e88850;
+@primaryShade5: #d17a48;
+@OverlayColor: #ffcc67;
+@OverlayShade1: #fff1d5;
+@OverlayShade2: #ffde9e;
+@OverlayShade3: #ffd074;
+@OverlayShade4: #e8ba5e;
+@OverlayShade5: #ba954b;
+@accentColor: #4e5166;
+@accentShade1: #cecfd5;
+@accentShade2: #aeafb9;
+@accentShade3: #8e909d;
+@accentShade4: #6e7081;
+@accentShade5: #404354;
+@accent2Color: #588b8b;
+@accent2Shade1: #c2d4d4;
+@accent2Shade2: #a3bfbf;
+@accent2Shade3: #85aaaa;
+@accent2Shade4: #507f7f;
+@accent2Shade5: #497272;
+@accent3Color: #fe5f55;
+@accent3Shade1: #fec4c1;
+@accent3Shade2: #fea7a2;
+@accent3Shade3: #fe7c73;
+@accent3Shade4: #e7574e;
+@accent3Shade5: #b9463e;
+
+@neutralShade0: #f8f8f8;
+@neutralShade1: #f2f2f2;
+@neutralShade2: #e8e9e9;
+@neutralShade3: #d1d3d4;
+@neutralShade4: #babdbf;
+@neutralShade5: #808488;
+@neutralShade6: #666a6d;
+@neutralShade7: #4d5052;
+@neutralShade8: #212122;
+@grayColor: #999;
+@lightGrayColor: #ddd;

src/themes/base/components/Menssaging.less

@@ -0,0 +1,32 @@
+@import '~themes/index.less';
+
+@chat_footer_height: 67px;
+@chats-bg-color: #fff;
+@chats-input-bg: #f8f8fa;
+@input-chat-color: #a2a2a2;
+@chat-border-color: #eef2f4;
+@chat-body-color: #273346;
+@chat-msg-message: #969eaa;
+@chat-text-bg: #f1f2f6;
+@chat-text-color: rgb(39, 51, 70);
+@chat-theme-color: #0086ff;
+@msg-date: #c0c7d2;
+@chat-button-bg-color: #f0f7ff;
+@msg-hover-bg: rgba(238, 242, 244, 0.4);
+@active-conversation-bg: linear-gradient(
+ to right,
+ rgba(238, 242, 244, 0.4) 0%,
+ rgba(238, 242, 244, 0) 100%
+);
+@overlay-bg: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 1) 65%,
+ rgba(255, 255, 255, 1) 100%
+);
+@chat-header-bg: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 78%,
+ rgba(255, 255, 255, 0) 100%
+);

src/themes/base/components/PostCard.less

@@ -0,0 +1,19 @@
+@import '~themes/index.less';
+// .post_card*
+@post_card_general_border-rd: 7px;
+@post_card_wrapper_shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+@post_card_wrapper_actions_backgroud: rgb(235, 235, 235);
+@post_card_wrapper_actions_icon_backgroud: #fff;
+
+@post_card_wrapper_tags_color_default: rgb(249, 179, 64);
+@post_card_wrapper_tags_color_nsfw: #111;
+@post_card_wrapper_tags_color_flag: #111;
+
+@post_card_wrapper_post_content_color: #555555;
+@post_card_wrapper_post_content_weight: 400;
+@post_card_wrapper_post_content_fontSize: 15px;
+@post_card_wrapper_post_content_letterSpacing: -0.3px;
+
+@post_card_flaggedWarning_backgroud: #ffffff60;
+@post_card_flaggedWarning_padding: 20px 15px 25px 15px;
+@post_card_flaggedWarning_iconSize: 40px;

src/themes/base/index.less

@@ -1,8 +1,16 @@
 @import './resolutions.less';
 
-// FOR LAYOUTS
+@import './layout/Overlay.less';
+@import './layout/Primary_Layout.less';
+@import './layout/LeftSider.less';
+
+@import './components/Menssaging.less';
+@import './components/PostCard.less';
+
+
 @__Global_general_font_family: "Poppins", sans-serif;
 @__Global_texted_font: "Manrope", sans-serif;
+@__Global_alternative_font: "Netflix Sans";
 
 @__Global_layout_backgroud: #F8F6F8;
 @__Global_layout_color: #2d2d2d;
@@ -10,14 +18,25 @@
 @__Global_layout_transitions-dur: 200ms; 
 @__Global_Components_transitions_dur: 150ms;
 
-@mamamia: #85858570;
-// FOR Overlay
+
 @__Global_SwapAnimDuration: 170ms;
 
 @transition-ease-in: all 0.3s ease-out;
 @transition-ease-out: all 0.3s ease-out;
 @ease-in: ease-in;
 
+
+@Overlay_wrapper_hidden_width: 22vw;
+@Overlay_wrapper_showFull_width: 94.2%;
+@Overlay_wrapper_showHalf_width: 35vw;
+@Overlay_container_bg_background: #F8F6F8;
+
+
+@Overlay_container_1_btn_backgroud: #4c4c4c;
+@Overlay_container_1_btn_color: #fff;
+@Overlay_container_1_btn_shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
+
+
 ::-webkit-scrollbar {
     position: absolute;
     width: 14px;
@@ -41,11 +60,13 @@
     background-color: transparent;
 }
 
-// Global Documents
+#root {
+  overflow: hidden;
+}
+
 body {
   scroll-behavior: smooth;
   height: 100%;
-  //  min-width: 430px;
   background-color: transparent;
 
   overflow: hidden;
@@ -53,11 +74,9 @@ body {
   font-size: @base-font-size;
   line-height: @base-line-height;
 
+  font-family: @__Global_texted_font;
 }
 
-#root {
-  overflow: hidden;
-}
 
 @media (max-width: @bp-small){
   ::-webkit-scrollbar{
@@ -86,183 +105,6 @@ body {
 }
 
 
-// @media (min-width: 770px){
-//   >#Overlay_layout{
-//     width: 0px!important;
-//   }
-// }
-// @media (min-width: 1600px) {
-//   :global {
-//     .ant-col-xl-48 {
-//       width: 20%;
-//     }
 
-//     .ant-col-xl-96 {
-//       width: 40%;
-//     }
-//   }
-// }
 
-// @media (max-width: 767px) {
-//   :global {
-//     .ant-card {
-//       .ant-card-head {
-//         padding: 0 12px;
-//       }
 
-//       .ant-card-body {
-//         padding: 12px;
-//       }
-//     }
-//   }
-// }
-
-// // PrimaryLayout 
-// @media (max-width: 767px) {
-//     .primary_layout_content {
-//       padding: 12px;
-//     }
-  
-//     .primary_layout {
-//       height: 100vh;
-//       flex: 1;
-//     }
-// }
-
-// .primary_layout_*
-@primary_layout_backgroud: #F8F6F8; // #2d2d2d;
-
-@primary_layout_container_backgroud: @__Global_layout_backgroud;
-@primary_layout_container_border-rd: @__Global_layout_border-rd;
-
-@primary_layout_content_padding: 35px 25px 15px 40px;
-
-// .Overlay_*
-@__Overlay_colider_width: 31.2vw;
-@Overlay_wrapper_hidden_width: 22vw;
-@Overlay_wrapper_showFull_width: 94.2%;
-@Overlay_wrapper_showHalf_width: 35vw;
-@Overlay_container_bg_background: #F8F6F8;
-@Overlay_container_1_color: #201F23;
-@Overlay_container_2_color: #201F23;
-@Overlay_container_2_backgroud: #fff;
-@Overlay_container_1_btn_backgroud: #4c4c4c;
-@Overlay_container_1_btn_color: #fff;
-@Overlay_container_1_btn_shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
-
-@Overlay_container_1_padding: 30px 70px 30px 75px;
-@secondaty_container_2_padding: 20px 15px 15px 15px;
-
-// .left_sider*
-@left_sider_backgroud: #F8F6F8;
-@left_sider_color: #fff;
-@left_sider_sizeIcons: 19px;
-@left_sider_menu__onhover_backgroud: rgb(80, 80, 80);
-@left_sider_menu__onhover_color: #fff;
-
-// .post_card*
-@post_card_general_border-rd: 7px;
-@post_card_wrapper_shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-@post_card_wrapper_actions_backgroud: rgb(235, 235, 235);
-@post_card_wrapper_actions_icon_backgroud: #fff;
-
-@post_card_wrapper_tags_color_default: rgb(249, 179, 64);
-@post_card_wrapper_tags_color_nsfw: #111;
-@post_card_wrapper_tags_color_flag: #111;
-
-@post_card_wrapper_post_content_color: #555555;
-@post_card_wrapper_post_content_weight: 400;
-@post_card_wrapper_post_content_fontSize: 15px;
-@post_card_wrapper_post_content_letterSpacing: -0.3px;
-
-@post_card_flaggedWarning_backgroud: #ffffff60;
-@post_card_flaggedWarning_padding: 20px 15px 25px 15px;
-@post_card_flaggedWarning_iconSize: 40px;
-
-// YulioID
-@canvasColor: #f9f9f9;
-@backgroundColor: #fff;
-@foregroundColor: #111;
-@primaryColor: #373F51;
-@primaryShade1: #ffe2d1;
-@primaryShade2: #ffceb2;
-@primaryShade3: #ffb184;
-@primaryShade4: #e88850;
-@primaryShade5: #d17a48;
-@OverlayColor: #ffcc67;
-@OverlayShade1: #fff1d5;
-@OverlayShade2: #ffde9e;
-@OverlayShade3: #ffd074;
-@OverlayShade4: #e8ba5e;
-@OverlayShade5: #ba954b;
-@accentColor: #4e5166;
-@accentShade1: #cecfd5;
-@accentShade2: #aeafb9;
-@accentShade3: #8e909d;
-@accentShade4: #6e7081;
-@accentShade5: #404354;
-@accent2Color: #588b8b;
-@accent2Shade1: #c2d4d4;
-@accent2Shade2: #a3bfbf;
-@accent2Shade3: #85aaaa;
-@accent2Shade4: #507f7f;
-@accent2Shade5: #497272;
-@accent3Color: #fe5f55;
-@accent3Shade1: #fec4c1;
-@accent3Shade2: #fea7a2;
-@accent3Shade3: #fe7c73;
-@accent3Shade4: #e7574e;
-@accent3Shade5: #b9463e;
-
-@neutralShade0: #f8f8f8;
-@neutralShade1: #f2f2f2;
-@neutralShade2: #e8e9e9;
-@neutralShade3: #d1d3d4;
-@neutralShade4: #babdbf;
-@neutralShade5: #808488;
-@neutralShade6: #666a6d;
-@neutralShade7: #4d5052;
-@neutralShade8: #212122;
-@grayColor: #999;
-@lightGrayColor: #ddd;
-@borderRadius: 6px;
-@boxShadow: 0 2px 5px rgba(#333, 0.2);
-
-// DSP2
-@chat_footer_height: 67px;
-@body-bg-color: #e5ecef;
-@theme-bg-color: #fff;
-@settings-icon-hover: #9fa7ac;
-@developer-color: #f9fafb;
-@input-bg: #f8f8fa;
-@input-chat-color: #a2a2a2;
-@border-color: #eef2f4;
-@body-font: "Manrope", sans-serif;
-@body-color: #273346;
-@settings-icon-color: #c1c7cd;
-@msg-message: #969eaa;
-@chat-text-bg: #f1f2f6;
-@chat-text-color: rgb(39, 51, 70);
-@theme-color: #0086ff;
-@msg-date: #c0c7d2;
-@button-bg-color: #f0f7ff;
-@button-color: var(@theme-color);
-@detail-font-color: #919ca2;
-@msg-hover-bg: rgba(238, 242, 244, 0.4);
-@active-conversation-bg: linear-gradient(
- to right,
- rgba(238, 242, 244, 0.4) 0%,
- rgba(238, 242, 244, 0) 100%
-);
-@overlay-bg: linear-gradient(
- to bottom,
- rgba(255, 255, 255, 0) 0%,
- rgba(255, 255, 255, 1) 65%,
- rgba(255, 255, 255, 1) 100%
-);
-@chat-header-bg: linear-gradient(
- to bottom,
- rgba(255, 255, 255, 1) 0%,
- rgba(255, 255, 255, 1) 78%,
- rgba(255, 255, 255, 0) 100%
-);

src/themes/base/layout/LeftSider.less

@@ -0,0 +1,8 @@
+@import '~themes/index.less';
+
+// .left_sider*
+@left_sider_backgroud: #F8F6F8;
+@left_sider_color: #fff;
+@left_sider_sizeIcons: 19px;
+@left_sider_menu__onhover_backgroud: rgb(80, 80, 80);
+@left_sider_menu__onhover_color: #fff;

src/themes/base/layout/Overlay.less

@@ -0,0 +1,16 @@
+@import '~themes/index.less';
+// .Overlay_*
+@Overlay_wrapper_maxwidth: 23vw;
+
+@Overlay_container1_def_color: #201F23;
+@Overlay_container1_active_color: #fff;
+@Overlay_container1_def_backgroud: @primary_layout_backgroud;
+@Overlay_container1_active_backgroud: #2d2d2d;
+
+@Overlay_container2_active_width: 35vw;
+@Overlay_container2_color: #201F23;
+@Overlay_container2_backgroud: #fff;
+
+
+@Overlay_container1_padding: 30px 70px 30px 75px;
+@Overlay_container2_padding: 20px 15px 15px 15px;

src/themes/base/layout/Primary_Layout.less

@@ -0,0 +1,9 @@
+@import '~themes/index.less';
+// .primary_layout_*
+@primary_layout_backgroud: #F8F6F8; // #2d2d2d;
+
+@primary_layout_container_backgroud: @__Global_layout_backgroud;
+@primary_layout_container_border-rd: @__Global_layout_border-rd;
+
+@primary_layout_content_padding: 35px 25px 15px 40px;
+