177 lines
2.6 KiB
SCSS
Executable File
177 lines
2.6 KiB
SCSS
Executable File
@import "../../stylesheets/variables/_all";
|
|
|
|
$navbar-height: 60px; // TODO: Change to NavBar real height
|
|
$actionsbar-height: 50px; // TODO: Change to ActionsBar real height
|
|
$bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is aligned with the presentation title
|
|
|
|
.main {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.navbar {
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 10;
|
|
|
|
font-size: 1.5rem;
|
|
padding: $bars-padding;
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
@include mq($medium-up) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
%full-page {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
|
|
@include mq($small-only) {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
@include mq($medium-up) {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
@extend %full-page;
|
|
|
|
background-color: $color-background;
|
|
padding: 0 .25%;
|
|
// position: relative;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 50%;
|
|
opacity: 0;
|
|
transition: opacity .3s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:before {
|
|
top: 0;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, .45) -20%, transparent 20%);
|
|
}
|
|
|
|
&:after {
|
|
bottom: 0;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, .45) -20%, transparent 20%);
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
&:before,
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include mq($medium-up) {
|
|
flex: 5;
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.userList {
|
|
@extend %full-page;
|
|
z-index: 2;
|
|
overflow: visible;
|
|
|
|
@include mq($small-only) {
|
|
padding-top: $navbar-height;
|
|
}
|
|
|
|
@include mq($medium-up) {
|
|
flex: 0 20vw;
|
|
order: 1;
|
|
}
|
|
|
|
@include mq($xlarge-up) {
|
|
flex-basis: 15vw;
|
|
}
|
|
}
|
|
|
|
.compact {
|
|
flex-basis: 4.6rem;
|
|
}
|
|
|
|
.chat {
|
|
@extend %full-page;
|
|
|
|
@include mq($small-only) {
|
|
z-index: 3;
|
|
padding-top: $navbar-height;
|
|
}
|
|
|
|
@include mq($medium-up) {
|
|
flex: 0 25vw;
|
|
order: 1;
|
|
}
|
|
|
|
@include mq($xlarge-up) {
|
|
flex-basis: 20vw;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
@extend %full-page;
|
|
z-index: 4;
|
|
|
|
@include mq($medium-up) {
|
|
flex: 0 15vw;
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.media {
|
|
@extend %full-page;
|
|
flex: 1;
|
|
order: 1;
|
|
|
|
@include mq($small-only) {
|
|
padding-bottom: $actionsbar-height;
|
|
}
|
|
}
|
|
|
|
.closedCaptions {
|
|
order: 3;
|
|
flex-basis: 20%;
|
|
max-width: 20%;
|
|
}
|
|
|
|
.actionsbar {
|
|
padding: $bars-padding;
|
|
position: relative;
|
|
order: 3;
|
|
|
|
@include mq($small-only) {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
}
|