src/components/templates/ConversationSpace/ConversationSpace.scss
@import "scss/constants";
// @debt Are all of the jazzbar / emoji related styles actually needed/used here?
.conversation-space {
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 100%;
.userlist-container {
margin-left: 80px;
}
.container-in-grid {
grid-column: 2/7;
grid-row: 1/5;
}
.jazz-container {
transition: all 0.2s linear;
}
.jazz-bar-table {
display: flex;
flex-direction: column;
justify-content: center;
}
.container-in-row {
width: 100%;
display: flex;
justify-content: center;
flex-shrink: 0;
.table-header {
background: $secondary--live;
color: $content--over;
padding: 10px 20px;
border-radius: 22px 22px 0 0;
}
.jazz-video {
.full-height-video {
height: 100%;
}
.form-message {
width: 400px;
}
.emoji-container {
width: 300px;
}
}
.video-wrapper {
width: 100%;
height: fit-content;
}
}
.jazz-container {
// min-height: 400px;
grid-column: 2/7;
grid-row: 1/4;
transition: all 0.1s linear;
margin-bottom: 15px;
&.container-in-row {
margin-bottom: 75px;
}
.call-out-band-container-at-table {
background: $secondary--live;
padding: 10px;
margin-top: 15px;
border-radius: 0px 0px 22px 22px;
}
}
.content.jazz-bar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 30px;
}
.scrollable-area {
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 0;
height: 100%;
overflow: auto;
.description {
font-weight: 700;
text-align: center;
width: 100%;
}
.jazz-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-self: center;
margin-left: 0px;
overflow-y: hidden;
overflow-x: hidden;
}
.table-item {
margin-top: 10px;
}
.full-screen-checkbox {
display: flex;
justify-content: center;
margin-top: 20px;
align-items: baseline;
.switch {
margin-left: 30px;
}
}
.focus {
display: flex;
align-items: baseline;
}
.focus-option {
font-size: 20px;
margin-left: 30px;
}
.centered-row {
justify-content: center;
}
.table-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.video {
height: 90%;
transition: all 0.2s linear;
&.video-not-focused {
height: 374px;
}
}
.youtube-video {
display: flex;
flex-grow: 1;
flex-direction: column;
width: 100%;
height: 100%;
}
.video-focused {
height: 500px;
}
.jazz-bar-table .reaction-bar {
flex-direction: column;
border-radius: 0 22px 22px 0;
&.video-not-focused {
height: 374px;
}
&.video-focused {
height: 500px;
}
}
.jazz-bar-table .emoji-container {
flex-direction: column;
}
.reaction-mute {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
.reaction-mute-text {
font-size: 14px;
}
}
.call-out-band-container {
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 0 0 22px 22px;
padding-top: 4px;
background: $secondary--live;
}
.emoji-container {
display: flex;
justify-content: space-evenly;
margin-right: 10px;
.reaction {
padding: 0 8px;
}
}
.reaction {
background: inherit;
border: none;
font-size: 44px;
padding: 2px 0;
flex-grow: 1;
&:focus {
box-shadow: none;
animation: pulse 0.5s ease 2;
}
}
.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);
}
}
}
}
/************************************************/
/* SeatedArea Component */
/************************************************/
.participants-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 1rem;
margin: 10px 70px;
}
.ControlBar__container {
margin: $spacing--md 40px 0 auto;
padding-right: 40px;
width: max-content;
}
.seated-area {
border: 0px solid $content--over;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex: 0 0 auto;
user-select: none;
margin: $announcement-banner-height 40px 0px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding-bottom: 150px;
}
.chat-drawer {
position: absolute;
right: 0;
top: 100px;
bottom: auto;
}
.mute-button {
display: flex;
align-items: center;
}
.table-header {
.switch {
margin: 0 30px;
}
.action {
display: flex;
}
}
.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;
}
}
}
}
}
.TableHeader {
&__leave-table {
z-index: z(jazzbar-header);
}
&__lock-button {
z-index: z(jazzbar-header);
}
&__topic-info {
z-index: z(jazzbar-header);
}
}