call-minimal.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .videos-container {
  2. padding-bottom: 60px;
  3. }
  4. .main-view {
  5. }
  6. .main-view .video-view {
  7. margin: 0.25rem;
  8. position: relative;
  9. background: #444;
  10. }
  11. .main-view .video-view .name-bar {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. background: #00000066;
  17. font-size: 11px;
  18. text-align: right;
  19. padding: 3px 6px;
  20. color: #fff;
  21. z-index: 1;
  22. font-weight: bold;
  23. }
  24. #call-actions {
  25. justify-content: center;
  26. align-items: center;
  27. background: #00000033;
  28. position: fixed;
  29. width: 100%;
  30. height: 60px;
  31. left: 0;
  32. bottom: 0;
  33. }
  34. #call-actions .btn {
  35. padding: 0;
  36. display: inline-flex;
  37. align-items: center;
  38. justify-content: center;
  39. width: 50px;
  40. height: 50px;
  41. border-radius: 100%;
  42. }
  43. @media all and (min-width: 768px) {
  44. .main-view {
  45. display: flex;
  46. flex-wrap: wrap;
  47. align-items: start;
  48. justify-content: center;
  49. }
  50. .main-view .video-view {
  51. width: 480px;
  52. height: 360px !important;
  53. }
  54. }
  55. @media all and (max-width: 767px) {
  56. #video-container {
  57. padding: 0;
  58. }
  59. }
  60. .muted-icon {
  61. z-index: 2;
  62. position: absolute;
  63. top: 4px;
  64. left: 6px;
  65. font-size: 14px;
  66. display: none;
  67. }
  68. [participant-muted] .muted-icon {
  69. display: block;
  70. }