mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-23 12:39:22 +00:00
195 lines
2.9 KiB
CSS
195 lines
2.9 KiB
CSS
/**
|
|
* Call window
|
|
*/
|
|
|
|
#callsTarget {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0px;
|
|
visibility: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.call-window {
|
|
width: 338px;
|
|
min-width: 300px;
|
|
max-width: 100%;
|
|
min-height: 174px;
|
|
position: absolute;
|
|
top: 100px;
|
|
right: 10px;
|
|
z-index: 100;
|
|
border: 1px black solid;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #000000b3;
|
|
visibility: visible;
|
|
}
|
|
|
|
.call-window.audio-only {
|
|
min-height: unset;
|
|
}
|
|
|
|
/* This could be moved to conversation page stylesheet also */
|
|
.call-window.embedded {
|
|
position: unset;
|
|
top: unset !important;
|
|
left: unset !important;
|
|
width: 90%;
|
|
height: 150px;
|
|
margin: 10px auto;
|
|
}
|
|
.call-window.embedded.audio-only {
|
|
height: 90px;
|
|
}
|
|
|
|
.call-window .head {
|
|
color: white;
|
|
padding: 5px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.call-window .head .fa-phone {
|
|
margin-right: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.call-window .head .title {
|
|
cursor: default;
|
|
}
|
|
|
|
.call-window .head a {
|
|
color: inherit;
|
|
}
|
|
|
|
.call-window .head .time {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.call-window .record-label {
|
|
color: red;
|
|
margin-left: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.call-window .record-label a {
|
|
margin-left: 5px;
|
|
background-color: darkred !important;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.call-window .members-area {
|
|
color: white;
|
|
font-size: 80%;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.call-window .members-area span {
|
|
margin: 0px 5px;
|
|
}
|
|
|
|
.call-window .members-area span.ready {
|
|
color: rgb(1, 218, 1);
|
|
}
|
|
|
|
.call-window .videos-area {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: 100%;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.call-window .videos-area .video {
|
|
flex-shrink: 1;
|
|
flex: 1;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.call-window .videos-area .video video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.call-window .window-bottom {
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background-color: black;
|
|
}
|
|
|
|
.call-window .window-bottom div {
|
|
color: #fff6;
|
|
flex: 1;
|
|
text-align: center;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.call-window .window-bottom div.selected {
|
|
color: white;
|
|
}
|
|
|
|
.call-window .window-bottom div:hover {
|
|
background-color: #ffffff4d;
|
|
}
|
|
|
|
.call-window .window-bottom div:active {
|
|
background-color: #fff3;
|
|
}
|
|
|
|
.call-window .window-bottom div i {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.call-window .window-bottom div.hang-up-button {
|
|
color: #dd4b39;
|
|
}
|
|
|
|
.call-window .window-bottom .dropdown-menu {
|
|
left: -125px;
|
|
}
|
|
|
|
.call-window .window-bottom .dropdown-menu i {
|
|
display: inline;
|
|
}
|
|
|
|
/**
|
|
* Responsive mode
|
|
*/
|
|
@media screen and (max-width: 730px) {
|
|
|
|
#callsTarget {
|
|
z-index: 1030;
|
|
}
|
|
|
|
.call-window {
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0px;
|
|
}
|
|
|
|
.call-window .videos-area {
|
|
flex-direction: column;
|
|
}
|
|
} |