webrtc-preview.css (1110B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 :host { 6 display: flex; 7 flex-direction: column; 8 } 9 10 #preview-container { 11 position: relative; 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 } 16 17 video { 18 width: 100%; 19 height: 5em; 20 display: block; 21 22 border-radius: var(--border-radius-small); 23 border: 1px solid var(--border-color-deemphasized); 24 min-width: 0; 25 26 /* Increase the video element height when the preview is active. */ 27 &.active { 28 height: auto; 29 min-height: 10em; 30 max-height: 250px; 31 } 32 } 33 34 .centered { 35 position: absolute; 36 top: 50%; 37 left: 50%; 38 transform: translate(-50%, -50%); 39 } 40 41 #loading-indicator { 42 -moz-context-properties: fill; 43 fill: currentColor; 44 } 45 46 #stop-preview-button { 47 align-self: flex-end; 48 margin-inline-start: auto; 49 margin-top: var(--space-small); 50 } 51 52 /* Keep the hidden attribute working even when custom display value was set. */ 53 [hidden] { 54 display: none !important; 55 }