1 .device-selection { 2 .device-selectors { 3 font-size: 14px; 4 5 > div { 6 display: block; 7 margin-bottom: 4px; 8 } 9 10 .device-selector-icon { 11 align-self: center; 12 color: inherit; 13 font-size: 20px; 14 margin-left: 3px; 15 } 16 17 .device-selector-label { 18 margin-bottom: 1px; 19 } 20 21 /* device-selector-trigger stylings attempt to mimic AtlasKit button */ 22 .device-selector-trigger { 23 background-color: #0E1624; 24 border: 1px solid #455166; 25 border-radius: 5px; 26 display: flex; 27 height: 2.3em; 28 justify-content: space-between; 29 line-height: 2.3em; 30 overflow: hidden; 31 padding: 0 8px; 32 } 33 .device-selector-trigger-disabled { 34 .device-selector-trigger { 35 color: #a5adba; 36 cursor: default; 37 } 38 } 39 40 .device-selector-trigger-text { 41 overflow: hidden; 42 text-align: center; 43 text-overflow: ellipsis; 44 white-space: nowrap; 45 width: 100%; 46 } 47 } 48 49 .device-selection-column { 50 box-sizing: border-box; 51 display: inline-block; 52 vertical-align: top; 53 54 &.column-selectors { 55 margin-left: 15px; 56 width: 45%; 57 } 58 59 &.column-video { 60 width: 50%; 61 } 62 } 63 64 .device-selection-video-container { 65 border-radius: 3px; 66 margin-bottom: 5px; 67 68 .video-input-preview { 69 margin-top: 2px; 70 position: relative; 71 72 > video { 73 border-radius: 3px; 74 } 75 76 .video-input-preview-error { 77 color: $participantNameColor; 78 display: none; 79 left: 0; 80 position: absolute; 81 right: 0; 82 text-align: center; 83 top: 50%; 84 } 85 86 &.video-preview-has-error { 87 background: black; 88 89 .video-input-preview-error { 90 display: block; 91 } 92 } 93 94 .video-input-preview-display { 95 height: auto; 96 overflow: hidden; 97 width: 100%; 98 } 99 } 100 } 101 102 .audio-output-preview { 103 font-size: 14px; 104 105 a { 106 color: #6FB1EA; 107 cursor: pointer; 108 text-decoration: none; 109 } 110 111 a:hover { 112 color: #B3D4FF; 113 } 114 } 115 116 .audio-input-preview { 117 background: #1B2638; 118 border-radius: 5px; 119 height: 8px; 120 121 .audio-input-preview-level { 122 background: #75B1FF; 123 border-radius: 5px; 124 height: 100%; 125 -webkit-transition: width .1s ease-in-out; 126 -moz-transition: width .1s ease-in-out; 127 -o-transition: width .1s ease-in-out; 128 transition: width .1s ease-in-out; 129 } 130 } 131 } 132 133 .device-selection.video-hidden { 134 display: flex; 135 flex-direction: column; 136 width: 100%; 137 138 .column-selectors { 139 width: 100%; 140 margin-left: 0; 141 } 142 143 .column-video { 144 order: 1; 145 width: 100%; 146 margin-top: 8px; 147 } 148 }