aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
mirotalk/public/css/videoGrid.css
T

413 lines
9.1 KiB
CSS
Raw Permalink Blame History

/*--------------------------------------------------------------
# Video grid
--------------------------------------------------------------*/
#videoMediaContainer {
z-index: 2;
position: absolute;
display: flex;
top: 0;
width: 100%;
height: 100%;
border-radius: 8px;
opacity: 1;
align-content: center;
flex-wrap: wrap;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
transition: opacity 500ms;
}
/* Video container with mouse light effect */
#videoMediaContainer.mouse-light {
background:
radial-gradient(
1024px 1024px at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.18) 20%,
rgba(255, 255, 255, 0.08) 40%,
rgba(0, 0, 0, 0) 60%,
rgba(0, 0, 0, 0.1) 80%,
rgba(0, 0, 0, 0.25) 100%
),
var(--body-bg, linear-gradient(135deg, #222, #444));
background-blend-mode: multiply, normal;
transition: background 0.2s;
}
#videoPinMediaContainer {
z-index: 1;
position: absolute;
display: none;
top: 0;
left: 0;
width: 75%;
height: 100%;
border-radius: 8px;
box-shadow: var(--box-shadow);
overflow: hidden;
/* border: 3px solid lime; */
}
.Camera,
.Screen {
position: relative;
vertical-align: middle;
align-self: center;
border-radius: 10px;
overflow: hidden;
display: inline-block;
background: var(--body-bg);
border: var(--elem-border-color);
box-shadow: var(--box-shadow);
border-radius: 10px;
container-type: inline-size;
container-name: camera;
animation: show 0.4s ease;
}
.video-loading-spinner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
background: var(--body-bg);
}
/*--------------------------------------------------------------
# Video nav Bar
--------------------------------------------------------------*/
.navbar {
z-index: 8;
position: absolute;
top: 0;
width: 100%;
background: var(--navbar-bg);
text-align: right;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
padding: 6px 12px 6px 6px;
gap: 4px;
row-gap: 4px;
box-sizing: border-box;
}
.navbar button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 1.2rem;
text-decoration: none;
border: none;
border-radius: 10px;
background: var(--body-bg);
color: #fff;
margin: 3px;
flex-shrink: 0;
box-sizing: border-box;
transition: transform 0.2s ease;
transform-origin: center;
}
.navbar button:hover {
background: var(--btns-bg-color) !important;
cursor: pointer;
}
.navbar div {
display: inline;
}
/* Dropdown overrides - must beat .navbar div */
.navbar div.navbar-dropdown-content {
display: none !important;
}
.navbar div.navbar-dropdown-item {
display: flex !important;
}
/* Extra small containers (mobile portrait, small screens) */
@container camera (max-width: 250px) {
.navbar {
padding: 4px 10px 4px 4px;
gap: 3px;
row-gap: 3px;
}
.navbar button {
font-size: 0.5rem;
padding: 6px;
min-width: 28px;
min-height: 28px;
margin: 1px;
}
}
/* Small containers (mobile portrait) */
@container camera (min-width: 251px) and (max-width: 350px) {
.navbar {
padding: 5px 10px 5px 5px;
gap: 3px;
row-gap: 3px;
}
.navbar button {
font-size: 0.5rem;
padding: 7px;
min-width: 30px;
min-height: 30px;
margin: 1.5px;
}
}
/* Medium-small containers (mobile landscape, small tablets) */
@container camera (min-width: 351px) and (max-width: 500px) {
.navbar {
padding: 6px 11px 6px 6px;
gap: 4px;
row-gap: 4px;
}
.navbar button {
font-size: 0.7rem;
padding: 8px;
min-width: 32px;
min-height: 32px;
margin: 2px;
}
}
/* Medium containers (tablets portrait) */
@container camera (min-width: 501px) and (max-width: 700px) {
.navbar {
padding: 6px 12px 6px 6px;
gap: 4px;
row-gap: 4px;
}
.navbar button {
font-size: 0.8rem;
padding: 9px;
min-width: 34px;
min-height: 34px;
margin: 2px;
}
}
/* Large containers (tablets landscape, desktop) */
@container camera (min-width: 701px) and (max-width: 900px) {
.navbar {
padding: 7px 13px 7px 7px;
gap: 5px;
row-gap: 5px;
}
.navbar button {
font-size: 0.9rem;
padding: 9.5px;
min-width: 36px;
min-height: 36px;
margin: 2px;
}
}
/* Extra large containers (large desktop) */
@container camera (min-width: 901px) {
.navbar {
padding: 8px 14px 8px 8px;
gap: 6px;
row-gap: 6px;
}
.navbar button {
font-size: 1rem;
padding: 10px;
min-width: 38px;
min-height: 38px;
margin: 3px;
}
}
/*--------------------------------------------------------------
# Navbar dropdown menu
--------------------------------------------------------------*/
.navbar-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.navbar-dropdown-content {
display: none !important;
position: fixed;
z-index: 9999;
min-width: 180px;
background: var(--body-bg);
border-radius: 10px;
border: var(--border);
padding: 6px 0;
box-shadow: var(--box-shadow);
max-height: 70vh;
overflow-y: auto;
}
.navbar-dropdown-content.show {
display: block !important;
}
.navbar-dropdown-item {
display: flex !important;
align-items: center;
gap: 10px;
padding: 8px 14px;
color: #fff;
font-size: 0.85rem;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.navbar-dropdown-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.navbar-dropdown-item button,
.navbar .navbar-dropdown-item button,
.navbar .navbar-dropdown-content .navbar-dropdown-item button {
pointer-events: none;
background: none !important;
border: none !important;
color: #fff !important;
font-size: 1rem !important;
padding: 0 !important;
margin: 0 !important;
min-width: 20px !important;
min-height: auto !important;
flex-shrink: 0;
border-radius: 0 !important;
box-sizing: content-box;
transform: none !important;
}
.navbar-dropdown-item button:hover,
.navbar .navbar-dropdown-item button:hover {
background: none !important;
transform: none !important;
}
.navbar-dropdown-item span {
flex: 1;
}
/*--------------------------------------------------------------
# Peer name
--------------------------------------------------------------*/
.videoPeerName {
z-index: 8;
position: absolute;
padding: 10px;
margin: 10px;
bottom: 0;
right: 0;
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
border-radius: 8px;
background: var(--body-bg);
}
/*--------------------------------------------------------------
# Video Avatar image
--------------------------------------------------------------*/
.videoAvatarImage {
z-index: 7;
position: absolute;
display: none;
width: var(--vmi-wh);
height: var(--vmi-wh);
border-radius: 50%;
/*center*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: box-shadow 0.2s ease;
}
/*--------------------------------------------------------------
# Video
--------------------------------------------------------------*/
.videoCircle {
position: absolute;
width: var(--vmi-wh);
height: var(--vmi-wh);
border-radius: 50%;
/* reliable centering - works in all scenarios */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
transition: box-shadow 0.2s ease;
}
.videoDefault {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
transition: box-shadow 0.2s ease;
}
video {
width: 100%;
height: 100%;
object-fit: var(--video-object-fit);
border-radius: 10px;
cursor: pointer;
transform-origin: center;
transition: transform 0.3s ease-in-out;
}
video:hover {
filter: contrast(105%);
}
video:fullscreen {
object-fit: contain;
}
#myVideo.mirror {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.mirror {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.videoCircle.mirror {
-webkit-transform: translate(-50%, -50%) rotateY(180deg) !important;
-moz-transform: translate(-50%, -50%) rotateY(180deg) !important;
transform: translate(-50%, -50%) rotateY(180deg) !important;
}
@keyframes show {
0% {
opacity: 0;
transform: scale(0.4) translateY(20px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
Reference in New Issue View Git Blame Copy Permalink