This commit is contained in:
Lorito Tiago
2023-07-26 16:48:27 +01:00
parent a08bb5d4f4
commit d31394ad39
7 changed files with 626 additions and 544 deletions
@@ -1,152 +1,163 @@
@import '~src/function.scss';
.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);
.header-toolbar {
--background: transparent;
--opacity: 1;
.header-top{
overflow: auto;
padding: 0 !important;
background: #fff;
.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);
.left{
width: fit-content;
float: left;
//font-size: rem(35);
overflow: hidden;
}
.header-top {
overflow: auto;
padding: 0 !important;
background: #fff;
.middle-container{
display: flex;
overflow: auto;
height: auto;
width:calc(100% - 47px);
float: left;
.left {
width: fit-content;
float: left;
//font-size: rem(35);
overflow: hidden;
}
/* white-space: nowrap;
.middle-container {
display: flex;
overflow: auto;
height: auto;
width: calc(100% - 47px);
float: left;
/* white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important; */
.middle{
width: 100%;
padding: 0!important;
margin: 0 0 0 10px;
font-size: rem(25);
}
}
.middle-container-options{
padding: 0!important;
float: left;
width: calc(100% - 67px);
text-align: right;
.middle-container-options-icons{
color: #0782c9;
font-size: rem(23);
}
}
.right{
padding: 0!important;
float: right;
font-size: rem(25);
color: #0782c9;
}
.header-top-btn{
background: transparent;
font-size: rem(25) !important;
font-weight: 100 !important;
/* color: #0782c9; */
color: #42b9fe;
padding: 0 5px 0 5px;
}
.middle {
width: 100%;
padding: 0 !important;
margin: 0 0 0 10px;
font-size: rem(25);
}
.header-bottom{
padding-left: 10px;
overflow: auto;
margin: 0 auto;
}
.header-bottom-icon{
width: rem(30);
font-size: rem(25);
float: left;
padding: 2px;
.middle-container-options {
padding: 0 !important;
float: left;
width: calc(100% - 67px);
text-align: right;
}
.header-bottom-contacts{
width: calc(100% - 40px);
font-size: rem(15);
color: #797979;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
padding: 5px;
margin: 1px;
.contacts-list{
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
.middle-container-options-icons {
color: #0782c9;
font-size: rem(23);
}
}
.div-icon{
width: rem(40);
float: right;
font-size: rem(35);
overflow: auto;
padding: 1px;
}
.div-icon ion-icon{
float: right;
padding-left: 20px;
}
.right {
padding: 0 !important;
float: right;
font-size: rem(25);
color: #0782c9;
}
.header-top-btn {
background: transparent;
font-size: rem(25) !important;
font-weight: 100 !important;
/* color: #0782c9; */
color: #42b9fe;
padding: 0 5px 0 5px;
}
}
}
ion-content{
.welcome-text{
.header-bottom {
padding-left: 10px;
overflow: auto;
margin: 0 auto;
.header-bottom-icon {
width: rem(30);
font-size: rem(25);
float: left;
padding: 2px;
}
.header-bottom-contacts {
width: calc(100% - 40px);
font-size: rem(15);
color: #797979;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
padding: 5px;
margin: 1px;
.contacts-list {
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
}
.div-icon {
width: rem(40);
float: right;
font-size: rem(35);
overflow: auto;
padding: 1px;
}
.div-icon ion-icon {
float: right;
padding-left: 20px;
}
}
}
ion-content {
.welcome-text {
/* width: 322px; */
width: em(422px);
background: #ebebeb;
text-align: center;
font-size: rem(13);
color: #797979;
padding: 10px;
margin: 0 auto;
line-height: 1.2rem;
margin: 20px 39px 25px;
border-radius: 8px;
}
.info-text{
display: flex;
width: fit-content;
height: auto;
background: var(--chat-alert-msg-color);
text-align: center;
font-size: rem(13);
color: #262420;
padding: 10px;
margin: 10px auto;
line-height: 1.2rem;
border-radius: 8px;
}
.info-text-leave{
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
width: em(422px);
background: #ebebeb;
text-align: center;
font-size: rem(13);
color: #797979;
padding: 10px;
margin: 0 auto;
line-height: 1.2rem;
margin: 20px 39px 25px;
border-radius: 8px;
}
.info-text {
display: flex;
width: fit-content;
height: auto;
background: var(--chat-alert-msg-color);
text-align: center;
font-size: rem(13);
color: #262420;
padding: 10px;
margin: 10px auto;
line-height: 1.2rem;
border-radius: 8px;
}
.info-text-leave {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 10px;
background: #e0e9ee;
border-radius: 8px;
@@ -155,12 +166,13 @@
font-size: rem(13) !important;
/* margin: 15px 0px 15px 0px; */
.info-text-leave ion-label{
.info-text-leave ion-label {
font-size: rem(13) !important;
line-height: 1.2rem;
}
}
.messages{
}
.messages {
font-size: rem(13);
font-family: Roboto;
overflow: auto;
@@ -176,66 +188,74 @@
word-wrap: break-word;
-webkit-overflow-scrolling: touch;
.messages-list-item-wrapper{
.messages-list-item-wrapper {
overflow: hidden;
}
.messages-list-item-wrapper-active{
.messages-list-item-wrapper-active {
background: #e6f6ff75 !important;
}
.message-container{
.message-container {
//border: 1px solid red;
}
.incoming-true, .incoming-false{
.incoming-true,
.incoming-false {
width: 305px;
padding: 15px 20px;
border-radius: 10px;
padding: 15px 20px;
border-radius: 10px;
}
.incoming-true{
.incoming-true {
margin: 10px 75px 10px 20px;
background: #ebebeb;
float: left;
}
}
.incoming-false{
margin: 10px 20px 10px 75px;
background: var(--chat-incoming-msg-color);
float: right;
}
.title{
color: var(--title-text-color);
background: #ebebeb;
float: left;
}
}
font-weight: bold;
margin-bottom: 5px;
.incoming-false {
margin: 10px 20px 10px 75px;
background: var(--chat-incoming-msg-color);
float: right;
}
.time{
color: #797979;
text-align: right;
float: right;
}
}
.title {
color: var(--title-text-color);
.online{
color:#99e47b !important;
}
.offline{
color:#cbced1 !important;
}
.away{
color:#ffd21f !important;
}
.invisible{
color:#cbced1 !important;
}
.busy{
color:#f5455c !important;
}
}
font-weight: bold;
margin-bottom: 5px;
.info-meeting{
.time {
color: #797979;
text-align: right;
float: right;
}
}
.online {
color: #99e47b !important;
}
.offline {
color: #cbced1 !important;
}
.away {
color: #ffd21f !important;
}
.invisible {
color: #cbced1 !important;
}
.busy {
color: #f5455c !important;
}
}
.info-meeting {
/* width: 322px; */
width: em(422);
background: var(--chat-alert-msg-color);
@@ -248,99 +268,104 @@
/* margin: 15px 0px 15px 0px; */
border-radius: 8px;
.info-meeting-small{
.info-meeting-small {
font-size: rem(10);
font-style: italic;
}
.info-meeting-medium{
.info-meeting-medium {
font-size: rem(12);
}
.info-meeting-normal{
.info-meeting-normal {
color: #0782c9;
font-weight: 700;
text-decoration: underline;
}
.info-meeting-normal:hover{
.info-meeting-normal:hover {
text-decoration: underline;
color: #0782c9;
}
}
}
ion-footer{
ion-footer {
padding-top: 7.5px;
padding-bottom: 7.5px;
.container{
justify-content: center;
justify-content: space-evenly;
align-items: center;
padding-bottom: 20px;
.message-box{
margin: 0 5px 0 5px;
}
.container {
justify-content: center;
justify-content: space-evenly;
align-items: center;
}
.message-box {
margin: 0 5px 0 5px;
}
.chat-icon-options{
display:block !important;
font-size: rem(35);
float: right !important;
margin-top: 5px;
}
}
.chat-icon-send{
font-size: rem(40);
margin: 0 auto;
margin-top: 4px;
}
.chat-icon-options {
display: block !important;
font-size: rem(35);
float: right !important;
margin-top: 5px;
}
.type-message{
display: flex;
border: 1px solid #ebebeb;
border-radius: 25px;
padding-left: 15px;
align-items: center;
.chat-icon-send {
font-size: rem(40);
margin: 0 auto;
margin-top: 4px;
}
overflow: auto;
.type-message {
display: flex;
border: 1px solid #ebebeb;
border-radius: 25px;
padding-left: 15px;
align-items: center;
ion-textarea{
margin: 0 !important;
align-self: center;
}
}
overflow: auto;
ion-textarea {
margin: 0 !important;
align-self: center;
}
}
}
.preview-slides {
margin-top: 20%;
background: #e6e6e6;
img {
padding-top: 20px;
padding-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
}
.transparent-modal {
.modal-wrapper {
--background: rgba(44, 39, 45, 0.2);
}
.modal-wrapper {
--background: rgba(44, 39, 45, 0.2);
}
}
.image-slide,
.image-card {
overflow: visible;
overflow: visible;
}
.image-card {
z-index: 9;
z-index: 9;
}
.backdrop {
height: 200%;
width: 100%;
background: black;
position: absolute;
z-index: 10;
height: 200%;
width: 100%;
background: black;
position: absolute;
z-index: 10;
}
@@ -361,14 +386,14 @@
}
.float-status{
.float-status {
position: relative !important;
float: right;
display: flex;
align-items: self-end;
}
.float-status-image{
.float-status-image {
position: relative !important;
float: right;
display: flex;
@@ -385,15 +410,15 @@
}
.float-status-all {
font-size: rem(13) !important;
font-size: rem(13) !important;
}
.try {
color: red;
background: #f3414159;
padding: 6px;
border-radius: 10px;
cursor: pointer;
background: #f3414159;
padding: 6px;
border-radius: 10px;
cursor: pointer;
}