jiti-meet/css/_video-preview.scss

88 lines
1.8 KiB
SCSS
Raw Normal View History

.video-preview {
background: none;
2021-02-23 11:09:22 +00:00
display: inline-block;
2020-04-16 10:47:10 +00:00
&-container {
max-height: 344px;
2021-02-23 11:09:22 +00:00
background: $menuBG;
border-radius: 3px;
2020-04-16 10:47:10 +00:00
overflow: auto;
2021-02-23 11:09:22 +00:00
padding: 8px;
margin-bottom: 8px;
2020-04-16 10:47:10 +00:00
}
&-entry {
cursor: pointer;
2021-02-23 11:09:22 +00:00
height: 168px;
margin-bottom: 8px;
position: relative;
2021-02-23 11:09:22 +00:00
width: 284px;
&:last-child {
margin-bottom: 0;
}
&--selected {
border: 3px solid #31B76A;
2021-02-23 11:09:22 +00:00
border-radius: 3px;
cursor: default;
2021-02-23 11:09:22 +00:00
height: 162px;
width: 278px;
}
}
&-video {
2021-02-23 11:09:22 +00:00
border-radius: 3px;
height: 100%;
object-fit: cover;
width: 100%;
}
&-overlay {
background: rgba(42, 58, 75, 0.6);
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
&-error {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
}
&-label {
2021-02-23 11:09:22 +00:00
bottom: 8px;
color: #fff;
position: absolute;
2021-02-23 11:09:22 +00:00
width: 100%;
z-index: 2;
2021-02-23 11:09:22 +00:00
&-container {
margin: 0 16px;
}
2021-02-23 11:09:22 +00:00
&-text {
background-color: #131519;
border-radius: 3px;
padding: 2px 8px;
2021-02-23 11:09:22 +00:00
font-size: 13px;
line-height: 20px;
margin: 0 auto;
max-width: calc(100% - 16px);
overflow: hidden;
text-overflow: ellipsis;
width: fit-content;
white-space: nowrap;
2021-02-23 11:09:22 +00:00
}
}
// Override @atlaskit/InlineDialog container which is made with styled components
& > div:nth-child(2) {
padding: 0;
}
}