0d9738b72d
Integrate live streaming inside the jitsi/rtc components. Live streaming works without jitsi, but is using the same components for a fluid integration. A streaming URL can be set in the settings page. Users EITHER consume the live stream OR are presend in a jitsi live conference. To consume both the live stream and the jitsi conference, users may use a dedicated jitsi tab in their session. The jitsi users can be restricted to only allow thouse with the right the manage speakers or being present on the "current list of speakers", automatically simulating a virtual plenum
149 lines
2.8 KiB
SCSS
149 lines
2.8 KiB
SCSS
:host {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Main navigation */
|
|
mat-sidenav-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
mat-sidenav.side-panel {
|
|
border: 0;
|
|
box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
|
width: 260px;
|
|
overflow-x: hidden;
|
|
|
|
mat-toolbar,
|
|
mat-toolbar-row {
|
|
height: 80px;
|
|
}
|
|
|
|
mat-nav-list {
|
|
padding-top: 0;
|
|
padding-bottom: 20px;
|
|
}
|
|
mat-nav-list.main-nav {
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
span {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
mat-icon {
|
|
min-width: 20px; //puts the text to the right on the same level
|
|
margin-right: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-toolbar {
|
|
display: flex;
|
|
margin: auto;
|
|
width: 250px;
|
|
height: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
// CSS for the toggle button
|
|
.nav-toggle-button-container {
|
|
position: fixed;
|
|
z-index: 99;
|
|
bottom: 24px;
|
|
& > div {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-toggle-button {
|
|
bottom: 0;
|
|
|
|
position: absolute;
|
|
visibility: visible;
|
|
transform: none;
|
|
width: 24px;
|
|
min-width: 24px;
|
|
height: 48px;
|
|
padding: 0 0 2px;
|
|
|
|
&.left {
|
|
left: 236px;
|
|
padding-left: 8px;
|
|
border-radius: 50px 0 0 50px;
|
|
}
|
|
|
|
&.right {
|
|
left: 0;
|
|
padding-right: 8px;
|
|
border-radius: 0 50px 50px 0;
|
|
}
|
|
|
|
mat-icon {
|
|
$size: 18px;
|
|
height: $size;
|
|
width: $size;
|
|
font-size: $size;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* The top logo container can contain any logo with any size.
|
|
It needs to always fit.*/
|
|
.os-logo-container {
|
|
margin: auto;
|
|
width: 230px !important;
|
|
margin-left: 10px;
|
|
max-height: 80px;
|
|
display: flex;
|
|
}
|
|
|
|
/* The footer container only appears when custom logo is
|
|
specified. It can only contain the standard logo */
|
|
.os-footer-logo-container {
|
|
width: 150px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.os-logo-container:focus,
|
|
.os-logo-container:active,
|
|
.os-logo-container:hover,
|
|
.os-footer-logo-container:focus,
|
|
.os-footer-logo-container:active,
|
|
.os-footer-logo-container:hover {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* Content container */
|
|
.content {
|
|
min-height: 100%;
|
|
position: relative;
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 50;
|
|
flex: 1;
|
|
> *:not(router-outlet) {
|
|
flex: 1;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbars {
|
|
z-index: 99;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
|
|
* {
|
|
margin-top: auto;
|
|
}
|
|
}
|