spreed/css/style.scss

#body-public {
	height: 100%;
}

.app-spreed #app-content,
#body-public #app-content {
	overflow: hidden;
}

.app-spreed #app-navigation {
	padding-top: 45px;
	padding-bottom: 0;
}

#oca-spreedme-add-room {
	position: absolute;
	width: 249px;
	top: 0;
	border-bottom: 1px solid #eee;
}

.oca-spreedme-add-person {
	width: 100%;
	border: 1px solid #eee;
}

.contactsmenu-popover li > a > img {
	/* The app uses border-box sizing, so the size of the icon is the
	 * width/height plus the padding set by default in the server
	 * (16px + 11px*2). */
	width: 38px;
	height: 38px;
}

/**
 * Sidebar styles
 */

#select2-drop {
	margin-top: -44px !important;
}
#oca-spreedme-add-room .select2-container,
.oca-spreedme-add-person .select2-container {
	width: 100%;
	margin: 0 !important;
	border: none;
	padding: 9px;
}
#oca-spreedme-add-room .select2-container .select2-choice,
.oca-spreedme-add-person .select2-container .select2-choice {
	border: none;
}
#oca-spreedme-add-room .select2-arrow,
.oca-spreedme-add-person .select2-arrow {
	display: none !important;
}
#select2-drop .select2-search input {
	padding: 13px 12px 13px 43px !important;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: none;
	background-image: none !important;
}
#select2-drop .select2-results .select2-result {
	padding: 0;
}

.app-navigation-entry-menu li {
	display: block !important;
}

.participantWithList .avatar,
#app-navigation .avatar,
#app-navigation .icon-contacts-dark,
#app-navigation .app-navigation-entry-link .icon-public {
	position: absolute;
	left: 6px;
	top: 6px;
}

.participantWithList li > a:first-child img,
#app-navigation li > a:first-child img {
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
}

#app-navigation .icon-contacts-dark,
#app-navigation .app-navigation-entry-link .icon-public,
.icon-add  {
	background-color: transparent !important;
	color: transparent !important;
	border-radius: 0;
	width: 32px;
	height: 32px;
}

#app-navigation .app-navigation-entry-utils-counter {
	overflow: hidden;
	text-align: right;
	font-size: 9pt;
	line-height: 44px;
	padding: 0 12px; /* Same padding as all li > a in the app-navigation */

	&.highlighted {
		padding-right: 0;
		text-align: center;

		span {
			padding: 2px 5px;
			border-radius: 10px;
			background-color: $color-primary;
			color: $color-primary-text;
		}
	}
}

.public-room {
	display: block !important;
}

.private-room,
.hidden-important {
	display: none !important;
}

.icon-clippy.public-room {
	background-size: 16px;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 16px;
}

.icon-delete.public-room {
	background-size: 16px;
	position: absolute;
	right: 0;
	top: 4px;
	padding: 16px;
	opacity: .5;
}

.icon-clippy.public-room {
	background-position-y: 8px !important;
}

/**
 * Main view chat styles
 */
#app-content-wrapper {
	height: 100%;
}

#app-content-wrapper #commentsTabView {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
}

#app-content-wrapper #commentsTabView .comment:first-child {
	padding-top: 15px;
}

/* The lateral padding is set for each child instead of for the chat view as a
   whole to prevent showing the scroll bar padded from the border of the chat
   view (which could be fixed by using a negative margin and a positive padding
   in the list of messages) and to ensure that the contacts menu is not clipped
   due to overflowing the chat view on its left (much harder to fix). */
#app-content-wrapper #commentsTabView .newCommentRow {
	padding-left: 44px;
	padding-right: 44px;
}

#app-content-wrapper #commentsTabView .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;

	padding-left: 44px;
	padding-right: 44px;
}

/* Hide all siblings of the chat view when shown as the main view */
#app-content-wrapper #commentsTabView ~ *:not(#video-fullscreen):not([id^=tooltip]) {
	display: none !important;
}

/**
 * Video styles
 */

#videos {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.videoContainer,
#app-content.screensharing .videoContainer {
	position: relative;
	width: 100%;
	padding: 0 2%;
	-webkit-box-flex: auto;
	-moz-box-flex: auto;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.videoContainer.hidden,
#app-content.screensharing .videoContainer.hidden {
	display: none;
}

#app-content.screensharing .videoContainer {
	max-height: 200px;
}

video {
	z-index: 0;
	max-height: 100%;
	/* default filter for slightly better look */
	-webkit-filter: contrast(1.1) saturate(1.1) sepia(.1);
	filter: contrast(1.1) saturate(1.1) sepia(.1);
	vertical-align: top; /* fix white line below video */
}

#app-content.screensharing .videoContainer video {
	max-height: 200px;
	background-color: transparent;
	box-shadow: 0;
}

#screens video {
	width: 100%;
	-webkit-filter: none;
	filter: none;
}

#videos .videoContainer:not(.promoted) video {
	max-height: 200px;
	max-width: 100%;
	background-color: transparent;
	border-radius: $border-radius $border-radius 0 0;
	box-shadow: 0 0 15px $color-box-shadow;
}

#videos .videoContainer .avatar {
	box-shadow: 0 0 15px $color-box-shadow;
}

.participants-1 #videos .videoContainer video,
.participants-2 #videos .videoContainer video {
	padding: 0;
}

.videoContainer .avatar-container {
	position: absolute;
	text-align: center;
	bottom: 44px;
	left: 0;
	width: 100%;
}
.videoContainer .avatar-container .avatar {
	display: inline-block;
}
.videoContainer.promoted .avatar-container {
	top: 30%;
}
.videoContainer.promoted .avatar-container + .nameIndicator {
	display: none;
}

.videoContainer.promoted .mediaIndicator {
	display: none !important;
}

#emptycontent {
	position: absolute;
	z-index: 40;
}

#emptycontent-icon {
	width: 128px;
	margin: 0 auto;
	padding-bottom: 20px;
}


#shareRoomContainer {
	position: relative;
}
#shareRoomInput {
	width: 250px;
	padding-right: 32px;
	text-overflow: ellipsis;
}
#shareRoomClipboardButton {
	position: absolute;
	right: 0;
	padding: 18px;
	background-size: 16px !important;
	height: 16px !important;
	width: 16px !important;
	margin: 0 !important;
	opacity: .8 !important;
}

.participants-1:not(.screensharing) #emptycontent {
	display: block !important;
}

#screensharing-menu {
	bottom: 44px;
	left: calc(50% - 40px);
	right: initial;
	color: initial;
	text-shadow: initial;
	font-size: 13px;
}

#screensharing-menu.app-navigation-entry-menu:after {
	top: 100%;
	left: calc(50% - 5px);
	border-top-color: #fff;
	border-bottom-color: transparent;
}

/* big speaker video */
.participants-1 .videoContainer,
.participants-2 .videoContainer,
.videoContainer.promoted {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1;
}
.videoContainer.promoted video,
.participants-2 .videoContainer:not(.videoView) video {
	position: absolute;
	width: initial;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}

/* own video */
.participants-1 .videoView,
.participants-2 .videoView {
	position: absolute;
	width: 33%;
	min-width: 200px;
	overflow:visible;
	right: 0;
	bottom: 0;
	top: initial;
	left: initial;
	z-index: 10;
}
@media only screen and (max-width: 768px) {
	.participants-1 .videoView,
	.participants-2 .videoView {
		max-height: 35%;
	}
}
.participants-1 .videoView video,
.participants-2 .videoView video {
	position: absolute;
	max-height: 100% !important;
	bottom: 0;
	border-top-right-radius: 3px;
}

.videoContainer.promoted,
#app-content.incall,
#app-content.screensharing {
	background-color: #000;
}

/* Use dark icons when not in a call (= white background) */
#app-content:not(.incall):not(.screensharing) .icon-white.icon-shadow {
	/* Still use white icons outside of calls when local video shows */
	&#hideVideo.video-disabled,
	&#mute.video-disabled,
	&#screensharing-button.video-disabled {
		filter: none;
	}

	&.icon-menu-people,
	&.icon-fullscreen {
		filter: none;
		opacity: .5;

		&:hover,
		&:focus {
			opacity: 1;
		}
	}
}

#app-content.screensharing #screens {
	position: absolute;
	width: 100%;
	height: calc(100% - 200px);
	top: 0;
	overflow-y: scroll;
	background-color: transparent;
}

#app-content.screensharing .screenContainer {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.nameIndicator {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 12px;
	color: #fff;
	text-shadow: 3px 3px 10px rgba(0, 0, 0, .5), 3px -3px 10px rgba(0, 0, 0, .5), -3px 3px 10px rgba(0, 0, 0, .5), -3px -3px 10px rgba(0, 0, 0, .5);
	width: 100%;
	text-align: center;
	font-size: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.videoView .nameIndicator {
	padding: 0;
	overflow: visible;
}

.participants-1 .videoView .nameIndicator,
.participants-2 .videoView .nameIndicator {
	left: initial;
}

.participants-1 .videoView .avatar-container,
.participants-2 .videoView .avatar-container {
	left: initial;
}

/* ellipsize name in 1on1 calls */
.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
	padding: 12px 35%;
}

#video-fullscreen {
	position: absolute;
	top: 44px;
	right: 0;
	z-index: 90;
}

#video-fullscreen,
.nameIndicator button,
#app-sidebar-trigger {
	background-color: transparent;
	border: none;
	margin: 0;
	width: 44px;
	height: 44px;
	background-size: 24px;
}

.nameIndicator button.audio-disabled,
.nameIndicator button.video-disabled,
.nameIndicator button.screensharing-disabled {
	opacity: .7;
}

.nameIndicator button.no-audio-available,
.nameIndicator button.no-video-available {
	opacity: .7;
	cursor: not-allowed;
}

.nameIndicator button.no-audio-available:active,
.nameIndicator button.no-video-available:active {
	background-color: transparent;
}

.mediaIndicator {
	position: absolute;
	width: 100%;
	bottom: 44px;
	left: 0;
	background-size: 22px;
	text-align: center;
}

.muteIndicator,
.screensharingIndicator,
.iceFailedIndicator {
	position: relative;
	display: inline-block;
	background-color: transparent !important;
	border: none;
	width: 32px;
	height: 32px;
	background-size: 22px;
}

.muteIndicator.audio-on,
.screensharingIndicator.screen-off,
.iceFailedIndicator.not-failed {
	display: none;
}

.muteIndicator.audio-off {
	opacity: .7;
}

.iceFailedIndicator {
	opacity: .8 !important;
}


/* Fullscreen handling */

/**
 * Different browsers handle fullscreen elements with a margin in different
 * ways: Firefox ignores the margin and uses the full width, while Chromium uses
 * a strange mix which is neither the full width nor the full margin. Due to
 * this the margin is removed to unify the appearance across browsers; visually,
 * this causes the sidebar to slide on the content instead of "pushing" it to
 * the left.
 */
#app-content:-webkit-full-screen {
	width: 100%;
	margin-right: 0;

	&.participants-1 {
		background: #fff;
	}
}
#app-content:-moz-full-screen {
	width: 100%;
	margin-right: 0;

	&.participants-1 {
		background: #fff;
	}
}
#app-content:-ms-fullscreen {
	width: 100%;
	margin-right: 0;

	&.participants-1 {
		background: #fff;
	}
}
#app-content:fullscreen {
	width: 100%;
	margin-right: 0;

	&.participants-1 {
		background: #fff;
	}
}

/* No switching between rooms in fullscreen, focus on the current call. */
#app-content:-webkit-full-screen #app-navigation-toggle {
	display: none !important;
}
#app-content:-moz-full-screen #app-navigation-toggle {
	display: none !important;
}
#app-content:-ms-fullscreen #app-navigation-toggle {
	display: none !important;
}
#app-content:fullscreen #app-navigation-toggle {
	display: none !important;
}

/**
 * In fullscreen mode there is no header, so the sidebar has to be moved to the
 * top.
 */
#app-content:-webkit-full-screen #app-sidebar {
	top: 0;
}
#app-content:-moz-full-screen #app-sidebar {
	top: 0;
}
#app-content:-ms-fullscreen #app-sidebar {
	top: 0;
}
#app-content:fullscreen #app-sidebar {
	top: 0;
}

/* In the public page the header is inside the app-content, so it has to be
   hidden explicitly. */
#app-content:-webkit-full-screen #header {
	display: none !important;
}
#app-content:-moz-full-screen #header {
	display: none !important;
}
#app-content:-ms-fullscreen #header {
	display: none !important;
}
#app-content:fullscreen #header {
	display: none !important;
}


.localmediaerror h2 {
	color: red;
	font-weight: bold;
}

.localmediaerror .uploadmessage {
	display: none;
}

.participantWithList li > a,
#app-navigation li > a {
	padding-right: 44px !important;
}
#app-navigation .utils {
	padding: 0;
}
#app-navigation .utils .action {
	display: inline-block;
	padding: 22px;
	cursor: pointer;
	opacity: .3;
}

.bubble:not(.contactsmenu-popover),
#app-navigation .app-navigation-entry-menu {
	right: 4px;
}

#app-navigation .app-navigation-entry-menu li {
	width: auto !important;
	float: inherit;
}

#app-navigation .app-navigation-entry-menu li button {
	float: inherit !important;
	margin: 0;
	padding: 0;
	width: 100% !important;
	min-height: 44px;
}

#app-navigation .app-navigation-entry-menu input {
	margin-left: 5px !important;
	margin-top: -5px;
	min-width: 150px;
	padding-right: 26px;
	text-overflow: ellipsis;
	overflow: hidden;
}

#app-navigation .app-navigation-entry-menu input.first-option {
	margin-top: 5px;
}

#app-navigation .app-navigation-entry-menu li span {
	display: inline-block;
	height: 36px;
	line-height: 36px;
	padding-right: 10px;
	font-weight: 400;
	float: left;
}

#app-navigation .app-navigation-entry-menu li span[class^='icon-'],
#app-navigation .app-navigation-entry-menu li span[class*=' icon-'] {
	padding: 16px;
	box-sizing: border-box;
}

#app-navigation .app-navigation-entry-utils-menu-button {
	display: inline-block;
}

#app-sidebar-trigger {
	position: absolute;
	top: 0;
	right: 0;
	/* Higher than the z-index of the emptycontent */
	z-index: 50;
	cursor: pointer;
}

.icon-menu-people {
	background-image: url('../img/menu-people.svg?v=1');
}

.icon-no-password {
	background-image: url('../img/no-password.svg?v=1');
}

#app-sidebar .close {
	position: absolute;
	top: 0;
	right: 0;
	/* The app uses border-box sizing, so the padding is 15px like in the Files
	 * app plus 8px of half the size of the icon */
	padding: 23px;
	opacity: 0.5;
	/* Higher index than the trigger to hide it when the sidebar is open */
	z-index: 20;
}

#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
	animation: pulse 1s;
	animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: .3;
	}
	100% {
		opacity: 1;
	}
}

/* The header element contains the header div; as the header div uses a fixed
   position the header element has no height, and as #app-content-wrapper uses a
   "100%" height its contents must be padded to prevent them from overlapping
   with the header element */
#body-public #app-content-wrapper {
	padding-top: 45px;
}

/* make blue header bar transparent in shared room */
#body-public #app-content:not(.participants-1) #header.spreed-public {
	background: transparent;
}

/* Correctly position icons below header in public chat. */
#body-public {
	#app-sidebar-trigger {
		top: 45px;
	}
	#video-fullscreen {
		top: 89px;
	}
}

/* As the header is hidden (except for the logo), move the fullscreen button and
 * sidebar to the top during calls */
#body-public #app-content:not(.participants-1) #app-sidebar,
#body-public #app-content:not(.participants-1) #app-sidebar-trigger,
#body-public #app-content:not(.participants-1) #video-fullscreen {
	top: 0;
	z-index: 3000;
}
#body-public #app-content:not(.participants-1) #video-fullscreen {
	top: 44px;
}

/**
 * Right sidebar
 */

#app-sidebar .detailCallInfoContainer {
	padding: 15px;
	clear: both;
}

.tabHeaders {
	display: inline-block;
}

/* START: move padding fixes and icons-for-tabs capability into core */
.tabHeaders {
	display: flex;
	margin-top: 0;
	margin-bottom: 10px;
	min-height: 44px;
}

.tabHeaders .tabHeader {
	flex-basis: 50%;
	flex-grow: 0;
	padding: 12px;
	text-align: center;
	border-bottom: 1px solid $color-border;
	margin-bottom: 0;

	a {
		padding-left: 32px;
		background: no-repeat 12px;
		color: $color-main-text;
		opacity: .5;
	}
}

.tabHeaders .tabHeader.selected a,
.tabHeaders .tabHeader:hover a,
.tabHeaders .tabHeader:focus a {
	opacity: 1;
}
/* END: move padding fixes and icons-for-tabs capability into core */

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

.participantWithList .participant-moderator-indicator {
	opacity: .5;
	font-weight: 300;
	padding-left: 5px;
}

.participantWithList .icon {
	width: 16px;
	display: inline-block;
	opacity: 0.4;
	margin-left: 5px;
	margin-bottom: -4px;
}

.participantWithList .participant-offline > a {
	opacity: .5;
}

.participantWithList li {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.participantWithList li > a {
	display: block;
	width: 100%;
	line-height: 44px;
	min-height: 44px;
	overflow: hidden;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left: 44px;
	background-size: 16px 16px;
	background: no-repeat 14px center;
}



/**
 * App navigation utils, buttons and counters for drop down menu
 */
.participantWithList .participant-entry-utils {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 105;
}

.participantWithList .active > .participant-entry-utils li {
	display: inline-block;
}

.participantWithList .participant-entry-utils button {
	height: 100%;
	width: 100%;
	margin: 0;
	box-shadow: none;
}

.participantWithList .participant-entry-utils-menu-button button {
	border: 0;
	opacity: .5;
}

/**
 * Sidebar details view
 */
.detailCallInfoContainer,
.authorRow {
	.room-name {
		display: inline-block;
	}
	.guest-name p {
		display: inline-block;
		padding: 9px 0;
	}
	.editable-text-label {
		.label-wrapper {
			display: flex;
			align-items: center;
			.edit-button {
				margin-left: 5px;
				display: none;
			}
			&:hover .edit-button {
				display: block;
			}
		}
		.input-wrapper {
			display: flex;
			align-items: center;
		}
		.label {
			margin-left: 5px;
		}
	}
	.share-link-options {
		display: flex;
		align-items: center;
		.link-checkbox-label {
			margin-left: 6px;
		}
		.button {
			cursor: pointer;
			width: 44px;
			height: 44px;
			display: block;
		}
		.password-button {
			position: relative;
		}
	}
}

/**
 * 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 {
	display: flex;
	flex-direction: column;
}

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

	flex-grow: 1;
}

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

	flex-grow: 1;
}

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

	flex-grow: 1;
}

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

	flex-grow: 1;
}

#app-sidebar .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;
}

#app-sidebar #commentsTabView .newCommentRow,
#app-sidebar #commentsTabView .comments {
	padding-left: 15px;
	padding-right: 15px;
}

/**
 * Limiting the scroll bar in the sidebar to the list of chat messages causes
 * the scroll bar to be removed from the whole sidebar in other tabs too.
 * Therefore, the scroll bars must be explicitly enabled in the other tab
 * contents that need them.
 */
#app-sidebar #participantsTabView {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#app-sidebar .participantWithList {
	overflow-y: auto;
}

#app-sidebar .participantWithList .participant:last-child {
	/* Add room for the popovermenu on last user */
	padding-bottom: 64px;
}

/**
 * Place the scroll bar of the participants list on the right edge of the
 * sidebar, but keeping the padding of the tab view.
 *
 * The bottom padding is removed to extend the participant view to the bottom
 * edge of the sidebar.
 */
#app-sidebar .tab-participants {
	padding-right: 0;
	padding-bottom: 0;
}

#app-sidebar #participantsTabView form,
#app-sidebar #participantsTabView .participantWithList {
	padding-right: 15px;
}

/**
 * Add a little margin so the participants do not "touch" the form when they are
 * scrolled, in the same way that the chat messages do not disappear directly
 * below the new message input.
 */
#app-sidebar #participantsTabView form {
	margin-bottom: 15px;
}

/**
 * Add a little margin to the last participant so the list is nicely framed with
 * the sides when fully scrolled to the bottom.
 */
#app-sidebar #participantsTabView .participant:last-child {
	margin-bottom: 15px;
}