path: root/css/files.scss

#talkChatTabView .call-button {
	text-align: center;
	margin-bottom: 10px;

	button {
		padding-left: 26px;
		padding-right: 26px;
	}

	.icon-loading-small {
		/* Prevent the text from being moved when the icon is shown. */
		position: absolute;

		margin-left: 5px;
		margin-top: 1px;

		/* Unset the background image set by the server for loading icons inside
		 * buttons, as in this case the pure CSS icon can be used instead of the
		 * image. */
		background-image: unset;

		&.hidden {
			display: none;
		}
	}
}

#talkChatTabView .file-not-shared button {
	margin-top: 15px;
}




.talkCallInfoView #call-container-wrapper {
	/* Overlap the padding from the sidebar itself to maximize the area of the
	 * video as much as possible */
	margin-left: -15px;
	margin-right: -15px;
	margin-top: -15px;
}

.talkCallInfoView #call-container-wrapper #emptycontent-icon {
	width: 128px;
	margin: 0 auto;
	padding-bottom: 20px;
}

.talkCallInfoView #call-container-wrapper #call-container.incall ~ #emptycontent {
	display: none;
}

.talkCallInfoView #call-container-wrapper #call-container:not(.incall) {
	display: none;
}

.talkCallInfoView #call-container-wrapper #call-container {
	position: relative;

	/* Show the call container in a 16/9 proportion based on the sidebar
	 * width. This is the same proportion used for previews of images by the
	 * SidebarPreviewManager. */
	padding-bottom: 56.25%;
	max-height: 56.25%;

	/* Ensure that the background will be black also in voice only calls. */
	background-color: #000;
}

/* Video in Talk sidebar */
.talkCallInfoView #call-container-wrapper #call-container #videos {
	position: absolute;

	flex-grow: 1;
}

.talkCallInfoView #call-container-wrapper #call-container .videoContainer {
	/* The video container has some small padding to prevent the video from
	 * reaching the edges, but it also uses "width: 100%", so the padding should
	 * be included in the full width of the element. */
	box-sizing: border-box;
}

.talkCallInfoView #call-container-wrapper #call-container .videoContainer.promoted video {
	/* Base the size of the video on its width instead of on its height;
	 * otherwise the video could appear in full height but cropped on the sides
	 * due to the space available in the sidebar being typically larger in
	 * vertical than in horizontal. */
	width: 100%;
	height: auto;
}

.talkCallInfoView #call-container-wrapper #call-container .nameIndicator {
	/* The name indicator has some small padding to prevent the name from
	 * reaching the edges, but it also uses "width: 100%", so the padding should
	 * be included in the full width of the element. */
	box-sizing: border-box;
}

/* Screensharing in Talk sidebar */
.talkCallInfoView #call-container-wrapper #call-container.screensharing #screens {
	/* The row with the participants is shorter in the Talk sidebar to make room
	 * for the promoted video and the shared screens. */
	height: calc(100% - 100px);
}

.talkCallInfoView #call-container-wrapper #call-container.screensharing .videoContainer {
	max-height: 100px;

	/* Avatars slightly overflow the container; although they overlap the shared
	 * screen it is not too bad and it is better than compressing even further
	 * the shared screen. */
	overflow: visible;
}





.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) video {
	/* Make the unpromoted videos smaller to not overlap too much the promoted
	 * video */
	max-height: 100px;
}

/* The avatars are requested with a size of 128px, so reduce it to not overlap
 * too much the promoted video */
.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) .avatardiv,
.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) .avatardiv img {
	width: 64px !important;
	height: 64px !important;
	line-height: 64px !important;
	/* imageplaceholder() sets font-size to "height * 0.55" */
	font-size: 35.2px !important;
}

/* Text avatars need to be forced to 128px when promoted, as imageplaceholder()
 * overrides the given size with the actual height of the element it was called
 * on, so the text avatar may have a hardcoded height of 64px. Note that this
 * does not apply to regular image avatars, as in that case they are always
 * requested with a size of 128px. */
.talkCallInfoView #call-container #videos .videoContainer.promoted .avatardiv {
	width: 128px !important;
	height: 128px !important;
	line-height: 128px !important;
	/* imageplaceholder() sets font-size to "height * 0.55" */
	font-size: 70.4px !important;
}



.talkCallInfoView #call-container.participants-1 .videoView,
.talkCallInfoView #call-container.participants-2 .videoView {
	/* Do not force the width to 200px, as otherwise the video is too tall and
	 * overlaps too much with the promoted video. */
	min-width: initial;
	/* z-index of 10 would put the video on top of the close button. */
	z-index: 1;
}



.talkCallInfoView #call-container .nameIndicator {
	/* Reduce padding to bring the name closer to the bottom */
	padding: 3px;
	/* Use default font size, as it takes too much space otherwise */
	font-size: initial;
}

.talkCallInfoView #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
	/* Reduce padding to bring the name closer to the bottom */
	padding: 3px 35%;
}



.talkCallInfoView #call-container .mediaIndicator {
	/* Move the media indicator closer to the bottom */
	bottom: 16px;
}





/* Helper class to hide other info views during a call; this makes possible to
 * restore their previous visibility once the call stops without having to keep
 * track of their previous visibility. */
#app-sidebar .hidden-by-call {
	display: none;
}

/* Force the white icon during calls, independent from white/dark mode
 * selection, because it is shown on the black calling screen. */
#app-sidebar .icon-close.force-icon-white-in-call.icon-shadow {
	background-image: url(icon-color-path('close', 'actions', 'fff', 1, true));
	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}





/**
 * Cascade parent element height to the chat view in the sidebar to limit the
 * vertical scroll bar only to the list of messages. Otherwise, the vertical
 * scroll bar would be shown for the whole sidebar and everything would be
 * moved when scrolling to see overflown messages.
 *
 * The list of messages should stretch to fill the available space at the bottom
 * of the right sidebar, so the height is cascaded using flex boxes.
 *
 * It is horrible, I know (but better than using JavaScript ;-) ). Please
 * improve it if you know how :-)
 */
#app-sidebar {
	/* Override "display: block" set inline by jQuery. */
	display: flex !important;
	flex-direction: column;
}

#app-sidebar.disappear {
	/* Override "display: flex !important" when the sidebar has to be hidden. */
	display: none !important;
}

#app-sidebar .detailFileInfoContainer {
	display: flex;
	flex-direction: column;

	flex-shrink: 0;
}

#app-sidebar .tabsContainer {
	display: flex;
	flex-direction: column;

	flex-grow: 1;
}

#app-sidebar .tab {
	display: flex;
	flex-direction: column;

	flex-grow: 1;
}

#app-sidebar .tabsContainer.with-inner-scroll-bars,
#app-sidebar .tabsContainer.with-inner-scroll-bars .tab {
	overflow: hidden;
}

/* Force a minimum height to ensure that the chat view will be at least 300px
 * height, even if the info view is large and the screen short; in that case a
 * scroll bar will be shown for the sidebar, but even if that looks really bad
 * it is better than an unusable chat view. */
#app-sidebar .tabsContainer.force-minimum-height {
	min-height: 300px;
}

#app-sidebar .tab.hidden {
	display: none;
}

#app-sidebar #chatView {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;
}

#app-sidebar #chatView .comments {
	overflow-y: auto;

	/* Needed for proper calculation of comment positions in the scrolling
	   container (as otherwise the comment position is calculated with respect
	   to the closest ancestor with a relative position) */
	position: relative;
}

/**
 * Place the scroll bar of the message list on the right edge of the sidebar,
 * but keeping the padding of the tab view.
 *
 * The padding must be set on the left too to ensure that the contacts menu
 * shown when clicking on an author name does not overflow the tab (as it would
 * be hidden).
 *
 * The bottom padding is removed to extend the chat view to the bottom edge of
 * the sidebar.
 */
#app-sidebar .tab-chat {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

/* Hack needed to overcome the padding of the tab container and move the scroll
 * bar of the messages list to the right border of the sidebar. */
#app-sidebar .tabsContainer.with-inner-scroll-bars .tab {
	padding-right: 0px;
}

#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder {
	/* Make the placeholder take the full tab height until the UI is ready. */
	flex-grow: 1;
}

/* Hide other UI elements when there is a "UI not ready" placeholder. */
#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder ~ div,
/* #chatView needs to be set explicitly to override the display property of
 * "#app-sidebar #chatView". */
#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder ~ #chatView {
	display: none;
}

#app-sidebar #chatView .comments {
	padding-right: 15px;
}

#app-sidebar #chatView .comments .wrapper-background,
#app-sidebar #chatView .comments .wrapper {
	/* Padding is not respected in the comment wrapper due to its absolute
	 * positioning, so it must be set through its position. */
	right: 15px;
}

#app-sidebar #chatView .newCommentRow {
	/* The details view in the Files app has a bottom padding of 15px, so the
	 * general bottom margin used for comments should be reduced for the new
	 * comment form. */
	margin-bottom: 5px;
}

#app-sidebar #chatView .newCommentForm {
	/* Make room to show the "Add" button when chat is shown in the sidebar. */
	margin-right: 44px;
}