Microsoft Teams Video at Top by dorianscholz

/* ==UserStyle==
@name         Microsoft Teams Video at Top
@version      20220916.09.20
@namespace    userstyles.world/user/dorianscholz
@description  show small video views at top of window (close to camera) during screen sharing and gallery mode
@author       dorianscholz
@license      No License
==/UserStyle== */

@-moz-document domain("teams.microsoft.com") {
/* ==UserStyle==
@name           MS Teams Video at Top
@namespace      teams.microsoft.com
@version        1.0.0
==/UserStyle== */

/* move small video bar to the top */
.ts-calling-screen .call-screen-footer {
    top: 0;
}

.ts-calling-screen.OVERLAY.immersive .call-screen-footer:not(.isPiPExpanded) .call-pip-wrapper {
    transform: translateY(-100%);
}

.ts-calling-header {
    padding: 14rem 0 0 0;
}

/* move small videos to the left */
.ts-calling-screen .call-passive-bar-container,
.ts-calling-screen .call-pip-wrapper.myself-video-collapsed {
    flex-direction: row-reverse;
}

.ts-calling-myself-video .switch-camera-icon-container {
    left: 0;
}

/* move large video stage to the bottom */
.ts-calling-screen.GRID.enable-video-stage calling-stage,
.ts-calling-screen.PERSISTENT:not(.GRID) calling-stage,
.ts-calling-screen.closed-captions-on calling-stage,
.ts-calling-screen.docked-ubar.show-myself-preview.PERSISTENT calling-stage,
.ts-calling-screen.docked-ubar.show-participants-in-passive-bar.PERSISTENT calling-stage {
    bottom: 0;
    top: 14rem;
}

/* increase small video size */
.ts-calling-myself-video,
.surface-hub-app .ts-calling-screen.GRIDWITHPRESENTATION calling-dominant-speaker calling-whiteboard-renderer,
.surface-hub-app .ts-calling-screen.HOSTVIEWMODE calling-dominant-speaker calling-whiteboard-renderer,
.surface-hub-app .ts-calling-screen.PRESENTATION calling-dominant-speaker calling-whiteboard-renderer,
.surface-hub-app .ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC calling-dominant-speaker calling-whiteboard-renderer,
.ts-calling-screen.GRIDWITHPRESENTATION calling-dominant-speaker .ts-calling-participant-stream,
.ts-calling-screen.GRIDWITHPRESENTATION calling-dominant-speaker calling-content-sharing-error,
.ts-calling-screen.GRIDWITHPRESENTATION calling-dominant-speaker calling-ppt-sharing,
.ts-calling-screen.HOSTVIEWMODE calling-dominant-speaker .ts-calling-participant-stream,
.ts-calling-screen.HOSTVIEWMODE calling-dominant-speaker calling-content-sharing-error,
.ts-calling-screen.HOSTVIEWMODE calling-dominant-speaker calling-ppt-sharing,
.ts-calling-screen.PRESENTATION calling-dominant-speaker .ts-calling-participant-stream,
.ts-calling-screen.PRESENTATION calling-dominant-speaker calling-content-sharing-error,
.ts-calling-screen.PRESENTATION calling-dominant-speaker calling-ppt-sharing,
.ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC calling-dominant-speaker .ts-calling-participant-stream,
.ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC calling-dominant-speaker calling-content-sharing-error,
.ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC calling-dominant-speaker calling-ppt-sharing {
    width: 25rem;
    min-width: 25rem;
    height: 14rem;
}

.ts-calling-screen calling-passive-bar,
.ts-calling-screen .call-passive-bar-container,
.ts-calling-screen.GRIDWITHPRESENTATION .call-passive-bar-container,
.ts-calling-screen.HOSTVIEWMODE .call-passive-bar-container,
.ts-calling-screen.PRESENTATION .call-passive-bar-container,
.ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC .call-passive-bar-container,
.ts-calling-myself-video .switch-camera-icon-container,
.ts-calling-screen.GRID.enable-video-stage calling-passive-bar,
.ts-calling-screen.GRIDWITHPRESENTATION calling-passive-bar,
.ts-calling-screen.HOSTVIEWMODE calling-passive-bar,
.ts-calling-screen.PRESENTATION calling-passive-bar,
.ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC calling-passive-bar {
    height: 14rem;
}

.ts-calling-screen.GRIDWITHPRESENTATION .ts-calling-passive-bar .ts-calling-participant-stream,
.ts-calling-screen.PRESENTATION .ts-calling-passive-bar .ts-calling-participant-stream,
.ts-calling-screen.PRESENTATIONWITHHOLOGRAPHIC .ts-calling-passive-bar .ts-calling-participant-stream,
.ts-calling-passive-bar .ts-calling-hidden-participants-count .layout-square .layout-square-inner {
    padding: 4.5rem 2.1rem;
}

}