216 lines
4.2 KiB
SCSS
216 lines
4.2 KiB
SCSS
@import "../_base.scss";
|
|
@import "../components/_panel.scss";
|
|
|
|
.conversations-view-head {
|
|
height: 100%;
|
|
width: 1px;
|
|
|
|
flex-shrink: 0;
|
|
scroll-snap-align: end;
|
|
}
|
|
|
|
.conversations-view-tail {
|
|
height: 100%;
|
|
width: 1px;
|
|
|
|
flex-shrink: 0;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
$inner-panel-height-ratio: 0.95;
|
|
|
|
.conversations-view {
|
|
$height: 100vh;
|
|
$width: 100vw;
|
|
$conversations-panel-height: calc($height * $inner-panel-height-ratio);
|
|
$conversations-panel-width: calc($conversations-panel-height * $aspect-ratio);
|
|
$gap: 1%;
|
|
$content-height: 95%;
|
|
$ratio: 2;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
top: -100vh;
|
|
margin-bottom: -100vh;
|
|
|
|
&__small {
|
|
scroll-snap-type: x mandatory;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: $gap;
|
|
|
|
justify-content: safe center;
|
|
align-items: safe center;
|
|
|
|
overflow-x: scroll;
|
|
|
|
&__conversations-panel {
|
|
height: $content-height;
|
|
width: 100%;
|
|
|
|
flex-shrink: 0;
|
|
scroll-snap-align: center;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&__inner {
|
|
height: 100%;
|
|
|
|
// TODO: Is aspect-ratio the best criteria to defined that inner shall take all the available space ?
|
|
@media (max-aspect-ratio: $aspect-ratio) {
|
|
width: 100%;
|
|
}
|
|
@media (min-aspect-ratio: $aspect-ratio) {
|
|
aspect-ratio: $aspect-ratio;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__panel {
|
|
flex-shrink: 0;
|
|
|
|
height: $content-height;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
scroll-snap-align: center;
|
|
|
|
&__inner {
|
|
height: 100%;
|
|
width: calc(100% - (2 * $gap));
|
|
}
|
|
}
|
|
}
|
|
|
|
&__big {
|
|
height: 100%;
|
|
width: 100%;
|
|
width: calc(100% - (2 * $gap));
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: safe center;
|
|
gap: $gap;
|
|
|
|
margin: 0 $gap;
|
|
|
|
&__conversations-panel {
|
|
height: $content-height;
|
|
aspect-ratio: $aspect-ratio;
|
|
}
|
|
|
|
&__conversations {
|
|
height: $content-height;
|
|
min-width: 64px;
|
|
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap;
|
|
|
|
&__tabs-bar {
|
|
height: 5%;
|
|
width: 100%;
|
|
|
|
flex-grow: 0;
|
|
}
|
|
|
|
&__panels {
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: scroll;
|
|
|
|
justify-content: safe center;
|
|
align-items: safe center;
|
|
scroll-snap-type: x mandatory;
|
|
|
|
gap: $gap;
|
|
|
|
&__panel {
|
|
flex-shrink: 0;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
scroll-snap-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-bar {
|
|
$gap: min(1vw, 8px);
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
gap: $gap;
|
|
overflow: scroll;
|
|
|
|
scrollbar-width: none;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab {
|
|
$gap: min(1vw, 8px);
|
|
|
|
height: 100%;
|
|
min-width: 0px;
|
|
max-width: 100%;
|
|
|
|
flex-shrink: 0;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: $gap;
|
|
|
|
border: $border-normal;
|
|
border-color: get-color(primary, 90);
|
|
border-radius: $border-radius;
|
|
|
|
padding: calc($gap / 2) $gap;
|
|
|
|
font-size: 2vh;
|
|
|
|
background-color: get-color(greyscale, 0);
|
|
|
|
&__avatar-image {
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
|
|
border: $border-thin;
|
|
border-color: get-color(greyscale, 90);
|
|
border-radius: $border-radius;
|
|
|
|
background-size: cover;
|
|
}
|
|
|
|
&__name {
|
|
display: inline-block;
|
|
margin: 0px;
|
|
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
cursor: default3;
|
|
}
|
|
}
|