mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 03:12:29 +00:00
91437c50e3
Update video thumbnail design Update design of indicators In filmstrip view move Screen Sharing indicator to the top Removed dominant speaker indicator Use ContextMenu component for the connection stats popover Combine Remove video menu and Meeting participant context menu into one component Moved some styles from SCSS to JSS Fix mobile avatars too big Fix mobile horizontal scroll Created button for Send to breakout room action
115 lines
2.6 KiB
SCSS
115 lines
2.6 KiB
SCSS
/**
|
|
* Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths.
|
|
*/
|
|
@mixin full-size-modal-positioner() {
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
@mixin full-size-modal-dialog() {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/**
|
|
* Move the @atlaskit/flag container up a little bit so it does not cover the
|
|
* toolbar with the first notification.
|
|
*/
|
|
.atlaskit-portal > #notifications-container {
|
|
bottom: calc(#{$newToolbarSizeWithPadding}) !important;
|
|
}
|
|
|
|
|
|
/**
|
|
* Keep overflow menu within screen vertical bounds and make it scrollable.
|
|
*/
|
|
.toolbox-button-wth-dialog > div:nth-child(2) {
|
|
background: $menuBG;
|
|
max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
|
|
margin-bottom: 4px;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.audio-preview > div:nth-child(2),
|
|
.video-preview > div:nth-child(2),
|
|
.reactions-menu-popup > div:nth-child(2) {
|
|
margin-bottom: 4px;
|
|
outline: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.reactions-menu-popup > div:nth-child(2) {
|
|
margin-bottom: 6px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/**
|
|
* The following selectors keep the chat modal full-size anywhere between 100px
|
|
* and 580px for desktop or 680px for mobile.
|
|
*/
|
|
@media (min-width: 100px) and (max-width: 320px) {
|
|
.smiley-input {
|
|
display: none;
|
|
}
|
|
.shift-right .focus-lock > div > div {
|
|
@include full-size-modal-positioner();
|
|
}
|
|
|
|
.shift-right .focus-lock [role="dialog"] {
|
|
@include full-size-modal-dialog();
|
|
}
|
|
}
|
|
|
|
@media (min-width: 480px) and (max-width: 580px) {
|
|
.shift-right .focus-lock > div > div {
|
|
@include full-size-modal-positioner();
|
|
}
|
|
|
|
.shift-right .focus-lock [role="dialog"] {
|
|
@include full-size-modal-dialog();
|
|
}
|
|
}
|
|
|
|
@media (max-width: 580px) {
|
|
// Override Atlaskit inline style for the modal background.
|
|
// Important is unfortunately needed for that.
|
|
.shift-right .focus-lock [role="dialog"][style] {
|
|
background-color: $chatBackgroundColor !important;
|
|
}
|
|
|
|
// Remove Atlaskit padding from the chat dialog.
|
|
.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
div.Tooltip {
|
|
color: #fff;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
padding: 8px;
|
|
}
|
|
|
|
// make modal full screen on landscape orientation
|
|
@media (max-height: 420px) {
|
|
.atlaskit-portal {
|
|
.css-1oc7v0j {
|
|
height: 100%;
|
|
padding: 0;
|
|
max-width: 100%;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
&> div {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|