jiti-meet/css/_audio-preview.scss

193 lines
3.8 KiB
SCSS
Raw Normal View History

.audio-preview {
2021-02-23 11:09:22 +00:00
display: inline-block;
&-content {
2021-02-23 11:09:22 +00:00
background: $menuBG;
border-radius: 3px;
font-size: 14px;
line-height: 24px;
max-height: 456px;
overflow: auto;
2021-02-23 11:09:22 +00:00
width: 300px;
&-ul {
margin:0;
padding:0;
list-style-type: none;
}
}
&-header {
color: #fff;
2021-02-23 11:09:22 +00:00
align-items: center;
display: flex;
2021-02-23 11:09:22 +00:00
margin-top: 8px;
padding: 8px 16px;
&-icon {
display: inline-block;
2021-02-23 11:09:22 +00:00
svg {
fill: #fff;
}
}
&--bordered {
border-bottom: 1px solid #4C4D50;
}
&-text {
2021-02-23 11:09:22 +00:00
margin-left: 12px;
}
}
&-entry {
align-items: center;
color: #fff;
cursor: pointer;
display: flex;
2021-02-23 11:09:22 +00:00
padding: 8px 0;
margin-left: 48px;
&--selected {
2021-02-23 11:09:22 +00:00
background: #131519;
cursor: initial;
margin-left: 0;
2021-02-23 11:09:22 +00:00
padding-left: 18px;
}
&-text {
color: #fff;
display: inline-block;
line-height: 24px;
text-overflow: ellipsis;
max-width: 213px;
overflow: hidden;
white-space: nowrap;
}
}
&-speaker {
position: relative;
&-ul {
margin:0;
padding:0;
list-style-type: none;
}
&:hover, &:focus-within, &:focus {
.audio-preview-entry {
2021-02-23 11:09:22 +00:00
background: #36383C;
margin-left: 0;
padding-left: 48px;
&--selected {
2021-02-23 11:09:22 +00:00
padding-left: 18px;
background: $newToolbarBackgroundColor;
}
}
.audio-preview-test-button {
display: inline-block;
}
.audio-preview-entry-text {
max-width: 178px;
}
}
2021-02-23 11:09:22 +00:00
&:last-child {
padding-bottom: 8px;
}
.audio-preview-entry-text {
max-width: 238px;
}
}
&-microphone {
position: relative;
&:hover {
.audio-preview-entry {
2021-02-23 11:09:22 +00:00
background: #36383C;
margin-left: 0;
padding-left: 48px;
&--selected {
background: $newToolbarBackgroundColor;
2021-02-23 11:09:22 +00:00
padding-left: 18px;
}
}
}
&--nometer {
.audio-preview-entry-text {
max-width: 238px;
}
}
&--withmeter {
.audio-preview-entry-text {
max-width: 178px;
}
}
}
&-icon {
border-radius: 50%;
display: inline-block;
width: 14px;
& svg {
fill: #1C2025;
}
&--check {
background: #31B76A;
2021-02-23 11:09:22 +00:00
margin-right: 16px;
}
&--exclamation {
margin-left: 6px;
& svg {
fill: #E54B4B;
}
}
}
2021-02-23 11:09:22 +00:00
&-hr {
border-top: 1px solid #4C4D50;
border-bottom: 0;
}
&-test-button {
display: none;
background: #FFF;
border: 1px solid #D1DBE8;
border-radius: 3px;
color: #1C2025;
cursor: pointer;
font-weight: 600;
font-size: 0.8rem;
line-height: 24px;
padding: 2px 8px;
position: absolute;
right: 16px;
2021-02-23 11:09:22 +00:00
top: 5px;
}
&-meter-mic {
position: absolute;
right: 16px;
2021-02-23 11:09:22 +00:00
top: 14px;
}
// Override @atlaskit/InlineDialog container which is made with styled components
& > div:nth-child(2) {
outline: none;
padding: 0;
}
}