95 lines
1.5 KiB
SCSS
95 lines
1.5 KiB
SCSS
@import "../../_base.scss"
|
|
|
|
.chats-window {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
$horizontal-padding-margin: calc((2*100%)/1980);
|
|
|
|
.tabs {
|
|
height: 2%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-flow: row;
|
|
overflow-x: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
height: 0px;
|
|
}
|
|
|
|
.tab {
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
padding: 0 $horizontal-padding-margin;
|
|
|
|
display: flex;
|
|
|
|
button {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
$clamped-horizontal-padding-margin: clamp(5px, $horizontal-padding-margin, $horizontal-padding-margin);
|
|
margin: 0 $clamped-horizontal-padding-margin;
|
|
padding: 0 $clamped-horizontal-padding-margin;
|
|
|
|
white-space: nowrap;
|
|
|
|
background-color: #EFF9F9;
|
|
border: $border-style;
|
|
|
|
$radius: calc((6*100%)/1980);
|
|
$clamped-radius: clamp(6px, $radius, $radius);
|
|
border-radius: $clamped-radius $clamped-radius 0 0;
|
|
|
|
font-size: $font-size;
|
|
|
|
img {
|
|
height: $icon-size;
|
|
aspect-ratio: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat {
|
|
height: 98%;
|
|
width: 100%;
|
|
|
|
background-color: #ECF6F9;
|
|
|
|
.header {
|
|
height: 7%;
|
|
|
|
border: $border-style;
|
|
|
|
.info {
|
|
height: 45%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding-left: 2%;
|
|
|
|
background: linear-gradient(180deg, #BFE3EB, #DEFBFE);
|
|
|
|
font-size: $font-size;
|
|
|
|
.room-name {
|
|
margin: 0;
|
|
margin-top: 1%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.room-topic {
|
|
margin: 0;
|
|
color: darkgrey;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|