78 lines
2.1 KiB
CSS
78 lines
2.1 KiB
CSS
/*
|
|
Copyright 2022-2024 New Vector Ltd
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
.tile {
|
|
--media-view-border-radius: var(--cpd-space-4x);
|
|
transition: outline-color ease 0.15s;
|
|
outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
|
|
}
|
|
|
|
/* Use a pseudo-element to create the expressive speaking border, since CSS
|
|
borders don't support gradients */
|
|
.tile[data-maximised="false"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1; /* Put it below the outline */
|
|
opacity: 0; /* Hidden unless speaking */
|
|
transition: opacity ease 0.15s;
|
|
inset: calc(-1 * var(--cpd-border-width-4));
|
|
border-radius: var(--cpd-space-5x);
|
|
background: linear-gradient(
|
|
119deg,
|
|
rgba(13, 92, 189, 0.7) 0%,
|
|
rgba(13, 189, 168, 0.7) 100%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(13, 92, 189, 0.9) 0%,
|
|
rgba(13, 189, 168, 0.9) 100%
|
|
);
|
|
background-blend-mode: overlay, normal;
|
|
}
|
|
|
|
.tile[data-maximised="false"].speaking {
|
|
/* !important because speaking border should take priority over hover */
|
|
outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
|
|
}
|
|
|
|
.tile[data-maximised="false"].speaking::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tile[data-maximised="false"]:hover {
|
|
outline: var(--cpd-border-width-2) solid
|
|
var(--cpd-color-border-interactive-hovered);
|
|
}
|
|
}
|
|
|
|
.tile[data-maximised="true"] {
|
|
--media-view-border-radius: 0;
|
|
--media-view-fg-inset: 10px;
|
|
}
|
|
|
|
.muteIcon[data-muted="true"] {
|
|
color: var(--cpd-color-icon-secondary);
|
|
}
|
|
|
|
.muteIcon[data-muted="false"] {
|
|
color: var(--cpd-color-icon-primary);
|
|
}
|
|
|
|
.volumeSlider {
|
|
width: 100%;
|
|
}
|