src/components/templates/Jazzbar/JazzBar/JazzBar.scss
@import "scss/constants";
.music-bar {
margin-top: $spacing--xxl;
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100%;
.VenueWithOverlay {
margin: 0;
}
.table-header {
grid-area: header;
justify-content: center;
.header {
width: 100%;
.lock-button-container {
justify-content: center;
}
}
}
.music-bar-content {
display: grid;
padding: 10px 70px 40px;
justify-content: center;
grid-gap: 0.5rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
". video video ."
". video video .";
@media (max-width: $media-breakpoint--lg) {
display: flex;
flex-flow: wrap;
}
.video-wrapper {
display: flex;
flex-direction: column;
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 0 10px;
min-height: 395px;
&--seated {
min-height: 600px;
}
grid-area: video;
.iframe-container {
width: 100%;
display: flex;
border-radius: 28px;
box-shadow: 0 0px 20px rgba(255, 255, 255, 0.4);
background-color: $secondary--dark;
overflow: hidden;
position: relative;
height: 100%;
.iframe-video {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.actions-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(25, 24, 26);
width: 90%;
overflow: hidden;
padding: 0 10px 15px;
border-radius: 0px 0px 28px 28px;
z-index: z(user-reactions-emoji);
.emoji-container {
display: flex;
justify-content: space-around;
margin: 10px 0;
font-size: 27px;
letter-spacing: 0.5rem;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}
.form-message {
display: flex;
margin-bottom: 5px;
justify-content: space-between;
input[type="submit"] {
margin-bottom: 0px;
margin-left: 10px;
width: 100px;
&[type="submit"]:disabled {
color: opaque-white(0.2);
background-color: rgba(green, 0.5);
}
}
}
}
}
.ControlBar__container {
width: 100%;
}
}
&--tableview {
padding-top: 0;
& .TableHeader__leave-table {
z-index: z(jazzbar-header);
}
& .TableHeader__lock-button {
z-index: z(jazzbar-header);
}
& .TableHeader__topic-info {
z-index: z(jazzbar-header);
}
.music-bar-content {
@media (min-width: $media-breakpoint--lg) {
grid-template-columns: $video-participant-optimal-width 1fr 1fr $video-participant-optimal-width;
grid-template-rows: repeat(
auto-fill,
$video-participant-optimal-height
);
// Note: "items" grid area is used in Jazzbar room component
grid-template-areas:
". video video ."
". video video ."
". video video ."
"items items items items";
}
}
}
.seated-area {
border: 0px solid $content--over;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex: 0 0 auto;
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding-bottom: 150px;
}
.mute-button {
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
align-self: center;
}
.table-footer {
.switch {
margin: 0 30px;
}
.actions {
display: flex;
justify-content: center;
align-items: baseline;
.action {
display: flex;
align-items: baseline;
.focus {
margin-right: 30px;
}
}
}
}
}