add new components for chat in shared

2026-04-19 13:02:56 +00:00 · 2021-03-04 18:50:26 +01:00
parent f71f732beb
commit 570ccabb26
47 changed files with 2778 additions and 26 deletions
@@ -0,0 +1,136 @@
+
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+ 
+   .main-header{
+     width: 100%; /* 400px */
+     height: 100%;
+     font-family: Roboto;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+ 
+     .div-icon{
+       width: 40px;
+       float: right;
+       font-size: 35px;
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         width: 360px;
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+     
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: 35px;
+       overflow: auto;
+         
+       }
+     .div-title{
+         width: 221px;
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: 25px;
+     }
+   }
+ }
+ .toolbar-search{
+   --padding-top:0 !important;
+   --padding-bottom:0 !important;
+   --padding-start:0 !important;
+   --padding-end:0 !important;
+   
+   .search{
+     border: 1px solid #ebebeb;
+     margin: 5px 20px 5px 20px;
+     border-radius: 5px;
+     height: auto;
+     padding: 0 !important;
+   }
+   .search ion-searchbar{
+     /* border: 1px solid green; */
+     width: 100%;
+     margin: 0 !important;
+     padding: 0 !important;
+     --border-radius: 5px;
+     --box-shadow: none;
+     overflow: hidden;
+     --icon-color:#0d89d1;
+   }
+ 
+ }
+ ion-content{
+   --background:transparent;
+ }
+ .main-content{
+   width: 100%;
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background-color: #fff;
+   overflow:auto;
+   padding: 0 0 0 0;
+ 
+     .item-divider{
+       background: #ebebeb;
+       font-size: 15px;
+       margin: 10px 0 10px 0;
+       padding:5px 0 5px 20px;
+  
+     }
+ 
+     .item-user{
+       display: flex;
+       margin: 10px 20px 10px 20px !important;
+       overflow: auto;
+       align-items: center;
+     }
+ 
+     .item-user p{
+        display: block;
+        margin: 0 !important;
+        width: 90%;
+        font-size: 15px;
+        color: #0d89d1;
+        float: left;
+     }
+     .item-user .icon{
+        width: 10%;
+        font-size: 10px;
+        display: block;
+        text-align: right;
+        overflow: auto;
+      }
+      .online{
+        color:#99e47b;
+      }
+     .offline{
+       color:#cbced1;
+      }
+     .away{
+      color:#ffd21f;
+      }
+      .invisible{
+        color:#cbced1;
+      }
+      .busy{
+        color:#f5455c;
+      }
+   }