/* This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) which is licensed under the GNU Affero General Public License (version 3); see /COPYING. Copyright (C) 2023 metamuffin */ .room { overflow-y: auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around; align-content: stretch; padding: 0.5em; } .user { background-color: var(--bg); border: 0px solid transparent; border-radius: 5px; padding: 1em; margin: 0.5em; vertical-align: top; min-width: 15em; position: relative; flex: 1 1; display: flex; flex-direction: column; } .user .info .name { font-weight: 400; } .user.local .info .name { text-decoration: underline; } .user .info { margin-bottom: 1em; } .user .resource { display: inline-block; } .resource { position: relative; margin: 0.5em; } .local-controls { display: inline; } .local-controls::before { content: "|"; } .transfer-status { background-color: #00000040; } .progress-bar { z-index: -1; padding: 0px; margin: 0px; height: 6px; border-radius: 3px; background-color: var(--ac-light); } .resource-track { border-radius: 4px; border: 2px solid transparent; box-sizing: border-box; transition: border 0.15s; } .resource-track.audio-active { border: 2px solid var(--ac-light); } .resource-track.audio-mute { border: 2px solid rgb(255, 86, 86); } .connection-status { font-size: small; } .status-neutral { color: var(--textgrey); } .status-good { color: var(--green); } .status-fail { color: var(--red); } .media-video { border-radius: 5px; transition: filter 0.5s; flex: 1 1 auto; background-color: black; } .media-video button.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 50px 0px rgb(0, 0, 0); } .media-video button.topleft { position: absolute; top: 0px; left: 0px; } .media-video button.topright { position: absolute; top: 0px; right: 0px; } .fullscreen { background-color: rgb(48, 48, 48); z-index: 1; } .media-audio { border-radius: 5px; height: 5em; width: 20em; } .media-freeze { filter: saturate(0%); } video, .preview { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } video { max-width: 100%; max-height: 100%; } .preview { width: 100%; height: 100%; object-fit: contain; filter: blur(5px); }