nextcloud/core/css/styles.scss

/**
 * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
 * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
 * @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
 * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
 * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
 * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
 * @copyright Copyright (c) 2016, Christoph Wurst <christoph@winzerhof-wurst.at>
 * @copyright Copyright (c) 2016, Raghu Nayyar <hey@raghunayyar.com>
 * @copyright Copyright (c) 2011-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
 *
 * @license GNU AGPL version 3 or any later version
 *
 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	cursor: default;
}

html, body {
	height: 100%;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display: block;
}

body {
	line-height: 1.5;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	white-space: nowrap;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

table, td, th {
	vertical-align: middle;
}

a {
	border: 0;
	color: var(--color-main-text);
	text-decoration: none;
	cursor: pointer;
	* {
		cursor: pointer;
	}
}

a.external {
	margin: 0 3px;
	text-decoration: underline;
}

input {
	cursor: pointer;
	* {
		cursor: pointer;
	}
}

select, .button span, label {
	cursor: pointer;
}

ul {
	list-style: none;
}

body {
	background-color: var(--color-main-background);
	font-weight: 400;
	font-size: .8em;
	line-height: 1.6em;
	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
	color: var(--color-main-text);
	height: auto;
}

#body-login {
	text-align: center;
	background-color: var(--color-primary);
	background-image: url('../img/background.png?v=2');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.two-factor-header {
	text-align: center;
}

.two-factor-provider {
	text-align: center;
	width: 258px !important;
	display: inline-block;
	margin-bottom: 0 !important;
	background-color: rgba(var(--color-main-text), 0.3) !important;
	border: none !important;
}

.two-factor-link {
	display: inline-block;
	padding: 12px;
	color: rgba(var(--color-main-background), 0.75);
}

.float-spinner {
	height: 32px;
	display: none;
}

#body-login .float-spinner {
	margin-top: -32px;
	padding-top: 32px;
}

#nojavascript {
	position: fixed;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
	text-align: center;
	background-color: rgba(var(--color-main-text), 0.5);
	color: var(--color-primary-text);
	line-height: 125%;
	font-size: 24px;
	div {
		display: block;
		position: relative;
		width: 50%;
		top: 35%;
		margin: 0px auto;
	}
	a {
		color: var(--color-primary-text);
		border-bottom: 2px dotted var(--color-main-background);
		&:hover, &:focus {
			color: var(--color-primary-text-dark);
		}
	}
}

/* SCROLLING */

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track-piece {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--color-background-darker);
	border-radius: var(--border-radius);
}

/* Searchbox */

.searchbox {
	position: relative;
	input[type='search'] {
		position: relative;
		font-size: 1.2em;
		padding: 3px;
		padding-left: 25px;
		padding-right: 20px;
		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
		color: var(--color-primary-text);
		border: 0;
		border-radius: var(--border-radius);
		margin-top: 9px;
		width: 0;
		cursor: pointer;
		-webkit-transition: all 100ms;
		transition: all 100ms;
		opacity: .6;
		&:focus, &:active, &:valid {
			background-position-x: 6px;
			color: var(--color-primary-text);
			width: 155px;
			cursor: text;
			background-color: var(--color-primary) !important;
			border: 1px solid rgba(var(--color-primary-text), 0.5) !important;
		}
		&:hover, &:focus, &:active {
			opacity: 1;
		}
		& ~ .icon-close-white {
			display: inline;
			position: absolute;
			width: 30px;
			height: 100%;
			right: 0;
			top: 0;
			margin: 0;
			&, &:focus, &:active, &:hover {
				border: none;
				background-color: transparent;
			}
		}
		&:not(:valid) ~ .icon-close-white {
			display: none;
		}
		&::-webkit-search-cancel-button {
			-webkit-appearance: none;
		}
	}
}

/* CONTENT ------------------------------------------------------------------ */

#controls {
	box-sizing: border-box;
	position: -webkit-sticky;
	position: sticky;
	height: 44px;
	padding: 0;
	margin: 0;
	background-color: rgba(var(--color-main-background), 0.95);
	z-index: 60;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: flex;
	top: 0;
}

/* position controls for apps with app-navigation */

.viewer-mode #app-navigation + #app-content #controls {
	left: 0;
}

#app-navigation * {
	box-sizing: border-box;
}

#controls .actions {
	> div,
	& {
		> .button, button {
			box-sizing: border-box;
			display: inline-block;
			display: flex;
			height: 36px;
			width: 36px;
			align-items: center;
			justify-content: center;
		}
		.button.hidden {
			display: none;
		}
	}
}

#content {
	position: relative;
	height: 100%;
	width: 100%;
	.hascontrols {
		margin-top: 45px;
	}
}

#content-wrapper {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	/* prevent horizontal scrollbar */
	padding-top: 50px;
	box-sizing: border-box;
}

/* allow horizontal scrollbar for personal and admin settings */

#body-settings:not(.snapjs-left) .app-settings {
	overflow-x: auto;
}

/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */

#emptycontent,
.emptycontent {
	color: var(--color-text-maxcontrast);
	text-align: center;
	margin-top: 30vh;
	width: 100%;
	#app-sidebar & {
		margin-top: 10vh;
	}
	.emptycontent-search {
		position: static;
	}
	h2 {
		margin-bottom: 10px;
		line-height: 150%;
	}
	[class^='icon-'],
	[class*='icon-'] {
		background-size: 64px;
		height: 64px;
		width: 64px;
		margin: 0 auto 15px;
		&:not([class^='icon-loading']),
		&:not([class*='icon-loading']) {
			opacity: .4;
		}
	}
}

/* LOG IN & INSTALLATION ------------------------------------------------------------ */

/* Some whitespace to the top */

#body-login {
	#header {
		padding-top: 100px;
	}
	background-attachment: fixed;
	/* fix background gradient */
	height: 100%;
	/* fix sticky footer */
	p.info, form fieldset legend, #datadirContent label {
		text-align: center;
		color: var(--color-primary-text);
	}
	form {
		fieldset .warning-info, input[type='checkbox'] + label {
			text-align: center;
			color: var(--color-primary-text);
		}
		.warning input[type='checkbox'] {
			&:hover + label, &:focus + label, + label {
				color: var(--color-primary-text) !important;
			}
		}
	}
	.update {
		h2 {
			margin: 0 0 20px;
		}
		a {
			color: var(--color-primary-text);
			border-bottom: 1px solid var(--color-background-darker);
		}
	}
	.infogroup {
		margin-bottom: 15px;
	}
	p#message img {
		vertical-align: middle;
		padding: 5px;
	}
	div.buttons {
		text-align: center;
	}
	p.info {
		margin: 0 auto;
		padding-top: 20px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		a {
			font-weight: 600;
			padding: 13px;
			margin: -13px;
		}
	}
	form {
		position: relative;
		width: 280px;
		margin: 16px auto;
		padding: 0;
		fieldset {
			margin-bottom: 20px;
			text-align: left;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		#sqliteInformation {
			margin-top: -20px;
			margin-bottom: 20px;
		}
		#adminaccount {
			margin-bottom: 15px;
		}
		fieldset legend {
			width: 100%;
		}
	}
}

/* Dark subtle label text */

/* overrides another !important statement that sets this to unreadable black */

#datadirContent label {
	width: 100%;
}

#body-login {
	#datadirContent label {
		display: block;
		margin: 0;
	}
	form #datadirField legend {
		margin-bottom: 15px;
	}
	#showAdvanced {
		padding: 13px;
		/* increase clickable area of Advanced dropdown */
		img {
			vertical-align: bottom;
			/* adjust position of Advanced dropdown arrow */
			margin-left: -4px;
		}
	}
	.icon-info-white {
		padding: 10px;
	}
	.strengthify-wrapper {
		display: inline-block;
		position: relative;
		left: 5px;
		top: -20px;
		width: 269px;
		border-radius: 0 0 2px 2px;
		overflow: hidden;
		height: 3px;
	}
	input {
		&[type='text'], &[type='password'], &[type='email'] {
			border: none;
			font-weight: 300;
		}
	}
}

/* strengthify wrapper */

/* General new input field look */

/* Nicely grouping input field sets */

.grouptop, .groupmiddle, .groupbottom {
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#body-login .grouptop input, .grouptop input {
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

#body-login .groupmiddle input, .groupmiddle input {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
}

#body-login .groupbottom input, .groupbottom input {
	margin-top: 0 !important;
	border-top: 0 !important;
	border-top-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
}

#body-login .groupbottom input[type=submit] {
	box-shadow: none !important;
}

/* keep the labels for screen readers but hide them since we use placeholders */

label.infield {
	display: none;
}

#body-login {
	form {
		input[type='checkbox'] + label {
			position: relative;
			margin: 0;
			padding: 14px;
			vertical-align: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.errors {
			background: rgba(var(--color-error), .35);
			border: 1px solid var(--color-error);
			list-style-indent: inside;
			margin: 0 0 2em;
			padding: 1em;
		}
	}
	.success {
		background: rgba(var(--color-success), .35);
		border: 1px solid var(--color-success);
		width: 35%;
		margin: 30px auto;
		padding: 1em;
		text-align: center;
	}
	#showAdvanced > img {
		padding: 4px;
		box-sizing: border-box;
	}
	p.info a, #showAdvanced {
		color: var(--color-primary-text);
	}
	#remember_login {
		&:hover + label, &:focus + label {
			opacity: .6;
		}
	}
	#forgot-password {
		&:hover, &:focus {
			opacity: .6;
		}
	}
	p.info a {
		&:hover, &:focus {
			opacity: .6;
		}
	}
}

/* Show password toggle */

#show, #dbpassword {
	position: absolute;
	right: 1em;
	top: .8em;
	float: right;
}

#show, #dbpassword, #personal-show {
	display: none;
}

#show + label, #dbpassword + label {
	right: 21px;
	top: 15px !important;
	margin: -14px !important;
	padding: 14px !important;
}

#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
	opacity: .8;
}

#show + label, #dbpassword + label, #personal-show + label {
	position: absolute !important;
	height: 20px;
	width: 24px;
	background-image: url('../img/actions/toggle.svg?v=1');
	background-repeat: no-repeat;
	background-position: center;
	opacity: .3;
}

#show + label:before, #dbpassword + label:before, #personal-show + label:before {
	display: none;
}

#pass2, input[name='personal-password-clone'] {
	padding-right: 30px;
}

.personal-show-container {
	position: relative;
	display: inline-block;
	margin-right: 6px;
}
#personal-show + label {
	display: block;
	right: 0;
	margin-top: -36px;
    padding: 6px 4px;
}

/* Database selector */
#body-login {
	form #selectDbType {
		text-align: center;
		white-space: nowrap;
		margin: 0;
		.info {
			white-space: normal;
		}
		label {
			position: static;
			margin: 0 -3px 5px;
			font-size: 12px;
			background: var(--color-background-dark);
			color: var(--color-text-lighter);
			cursor: pointer;
			border: 1px solid var(--color-border-dark);
			span {
				cursor: pointer;
				padding: 10px 20px;
			}
			&.ui-state-hover, &.ui-state-active {
				color: var(--color-main-text);
				background-color: var(--color-border);
			}
		}
	}
	.warning, .update, .error {
		display: block;
		padding: 10px;
		background-color: rgba(var(--color-main-text), 0.3);
		color: var(--color-primary-text);
		text-align: left;
		border-radius: var(--border-radius);
		cursor: default;
	}
	.update {
		width: inherit;
		text-align: center;
		.appList {
			list-style: disc;
			text-align: left;
			margin-left: 25px;
			margin-right: 25px;
		}
	}
	.v-align {
		width: inherit;
	}
	.update img.float-spinner {
		float: left;
	}
}

/* Warnings and errors are the same */

#body-user .warning, #body-settings .warning {
	margin-top: 8px;
	padding: 5px;
	background: rgba(var(--color-error), .15);
	border-radius: var(--border-radius);
}

.warning {
	legend, a {
		color: var(--color-primary-text) !important;
		font-weight: 600 !important;
	}
}

.error {
	a {
		color: var(--color-primary-text) !important;
		font-weight: 600 !important;
		&.button {
			color: var(--color-text-lighter) !important;
			display: inline-block;
			text-align: center;
		}
	}
	pre {
		white-space: pre-wrap;
		text-align: left;
	}
}

.error-wide {
	width: 700px;
	margin-left: -200px !important;
	.button {
		color: black !important;
	}
}

.warning-input {
	border-color: var(--color-error) !important;
}

/* Fixes for log in page, TODO should be removed some time */

#body-login {
	ul.error-wide {
		margin-top: 35px;
	}
	.warning {
		margin: 0 7px 5px 4px;
		legend {
			opacity: 1;
		}
	}
	a.warning {
		cursor: pointer;
	}
	.updateProgress .error {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}

/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */

/* Alternative Logins */

#alternative-logins {
	legend {
		margin-bottom: 10px;
	}
	li {
		height: 40px;
		display: inline-block;
		white-space: nowrap;
	}
}

/* Log in and install button */

#body-login #submit-wrapper {
	position: relative; /* Make the wrapper the containing block of its
						   absolutely positioned descendant icons */

	.icon-confirm-white {
		position: absolute;
		top: 23px;
		right: 23px;
	}
	.icon-loading-small {
		position: absolute;
		top: 22px;
		right: 24px;
	}

	#submit-icon {
		pointer-events: none; /* The submit icon is positioned on the submit
								 button. From the user point of view the icon is
								 part of the button, so the clicks on the icon
								 have to be applied to the button instead. */
	}
}

#body-login input {
	font-size: 20px;
	margin: 5px;
	padding: 10px 10px 8px;
	&[type='text'], &[type='password'] {
		width: calc(100% - 10px); /* 5px margin */
	}
	&.login {
		width: 269px;
		background-position: right 16px center;
	}
	&[type='submit'] {
		padding: 10px 20px;
		/* larger log in and installation buttons */
	}
}

#remember_login {
	margin: 18px 5px 0 16px !important;
}

#body-login {
	.remember-login-container {
		display: inline-block;
		margin: 10px 0;
		text-align: center;
		width: 100%;
	}
	#forgot-password {
		padding: 11px;
		float: right;
		color: var(--color-primary-text);
	}
	.wrapper {
		min-height: 100%;
		margin: 0 auto -70px;
		width: 300px;
	}
	footer, .push {
		height: 70px;
	}
}

/* Sticky footer */

/* round profile photos */

.avatar, .avatardiv {
	border-radius: 50%;
	flex-shrink: 0;
	img {
		border-radius: 50%;
		flex-shrink: 0;
	}
}

td.avatar {
	border-radius: 0;
}

#notification-container {
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
}

#notification {
	margin: 0 auto;
	max-width: 60%;
	z-index: 8000;
	background-color: var(--color-main-background);
	border: 0;
	padding: 1px 8px;
	display: none;
	position: relative;
	top: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	opacity: .9;
	span {
		cursor: pointer;
		margin-left: 1em;
	}
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 100px;
	.row {
		position: relative;
		.close {
			display: inline-block;
			vertical-align: middle;
			position: absolute;
			right: 0;
			top: 0;
			margin-top: 2px;
		}
		&.closeable {
			padding-right: 20px;
		}
	}
}

tr .action:not(.permanent), .selectedActions a {
	opacity: 0;
}

tr {
	&:hover .action, &:focus .action, .action.permanent {
		opacity: .5;
	}
}

.selectedActions a {
	opacity: .5;
}

tr .action {
	width: 16px;
	height: 16px;
}

.header-action {
	opacity: .8;
}

tr {
	&:hover .action:hover, &:focus .action:focus {
		opacity: 1;
	}
}

.selectedActions a {
	&:hover, &:focus {
		opacity: 1;
	}
}

.header-action {
	&:hover, &:focus {
		opacity: 1;
	}
}

tbody tr {
	&:hover, &:focus, &:active {
		background-color: var(--color-background-dark);
	}
}

code {
	font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
}

.pager {
	list-style: none;
	float: right;
	display: inline;
	margin: .7em 13em 0 0;
	li {
		display: inline-block;
	}
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-icon-circle-triangle-e {
	background-image: url('../img/actions/play-next.svg?v=1');
}

.ui-icon-circle-triangle-w {
	background-image: url('../img/actions/play-previous.svg?v=1');
}

/* ---- jQuery UI datepicker ---- */
.ui-widget.ui-datepicker {
	margin-top: 10px;
	padding: 4px 8px;
	width: auto;
	border-radius: var(--border-radius);
	border: none;

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
		border: 1px solid transparent;
		background: inherit;
	}
	.ui-widget-header {
		padding: 7px;
		font-size: 13px;
		border:	none;
		background-color: var(--color-main-background);
		color: var(--color-main-text);

		.ui-datepicker-title {
			line-height: 1;
			font-weight: 300;
		}
		.ui-icon {
			opacity: .5;

			&.ui-icon-circle-triangle-e {
				background: url("../img/actions/arrow-right.svg") center center no-repeat;
			}
			&.ui-icon-circle-triangle-w {
				background: url("../img/actions/arrow-left.svg") center center no-repeat;
			}
		}
		.ui-state-hover .ui-icon {
			opacity: 1;
		}
	}
	.ui-datepicker-calendar {
		th {
			font-weight: normal;
			color: var(--color-text-lighter);
			opacity: .8;
			width: 26px;
			padding: 2px;
		}
		tr:hover {
			background-color: inherit;
		}
		td {
			&.ui-datepicker-today a:not(.ui-state-hover) {
				background-color: var(--color-background-darker);
			}

			&.ui-datepicker-current-day a.ui-state-active,
			.ui-state-hover,
			.ui-state-focus {
				background-color: var(--color-primary);
				color: var(--color-primary-text);
				font-weight: bold;
			}

			&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
			.ui-priority-secondary:not(.ui-state-hover) {
				color: var(--color-text-lighter);
				opacity: .8;
			}
		}
	}
}

.ui-datepicker-prev, .ui-datepicker-next {
	border: var(--color-border-dark);
	background: var(--color-main-background);
}


/* ---- jQuery UI timepicker ---- */
.ui-widget.ui-timepicker {
	margin-top: 10px !important;
	width: auto !important;
	border-radius: var(--border-radius);

	.ui-widget-content {
		border: none !important;
	}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
		border: 1px solid transparent;
		background: inherit;
	}
	.ui-widget-header {
		padding: 7px;
		font-size: 13px;
		border:	none;
		background-color: var(--color-main-background);
		color: var(--color-main-text);

		.ui-timepicker-title {
			line-height: 1;
			font-weight: 300;
		}
	}
	/* AM/PM fix */
	table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
		margin-left: 30px;
	}
	.ui-timepicker-table {
		th {
			font-weight: normal;
			color: var(--color-text-lighter);
			opacity: .8;
			&.periods {
				padding: 0;
				width: 30px;
				line-height: 30px;
			}
		}
		tr:hover {
			background-color: inherit;
		}
		td {
			&.ui-timepicker-hour-cell a.ui-state-active,
			&.ui-timepicker-minute-cell a.ui-state-active,
			.ui-state-hover,
			.ui-state-focus {
				background-color: var(--color-primary);
				color: var(--color-primary-text);
				font-weight: bold;
			}

			&.ui-timepicker-minutes:not(.ui-state-hover) {
				color: var(--color-text-lighter);
			}

			&.ui-timepicker-hours {
				border-right: 1px solid var(--color-border);
			}
		}
	}
}

/* ---- jQuery UI datepicker & timepicker global rules ---- */
.ui-widget.ui-datepicker .ui-datepicker-calendar,
.ui-widget.ui-timepicker table.ui-timepicker {
	tr {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		td {
			flex: 1 1 auto;
			margin: 0;
			padding: 2px;
			height: 26px;
			width: 26px;
			display: flex;
			align-items: center;
			justify-content: center;
			> * {
				border-radius: 50%;
				text-align: center;
				font-weight: normal;
				color: var(--color-main-text);
				display: block;
				line-height: 18px;
				width: 18px;
				height: 18px;
				padding: 3px;
				font-size: .9em;
			}
		}
	}
}

/* ---- DIALOGS ---- */

#oc-dialog-filepicker-content {
	.dirtree {
		width: 92%;
		flex-wrap: wrap;
		div:first-child a {
			background-image: url('../img/places/home.svg?v=1');
			background-repeat: no-repeat;
			background-position: left center;
		}
		span {
			&:not(:last-child) {
				cursor: pointer;
			}
			&:last-child {
				font-weight: bold;
			}
			&:not(:last-child)::after {
				content: '>';
				padding: 3px;
			}
		}
	}
	.filelist-container {
		box-sizing: border-box;
		display: inline-block;
		overflow-y: auto;
		height: 100%;
		/** overflow under the button row */
		width: 100%;
	}
	.emptycontent {
		color: var(--color-text-details);
		text-align: center;
		margin-top: 80px;
		width: 100%;
		display: none;
	}
	.filelist {
		background-color: var(--color-main-background);
		width: 100%;
	}
	#filestable.filelist {
		/* prevent the filepicker to overflow */
		min-width: initial;
		margin-bottom: 50px;
	}
	.filelist {
		td {
			padding: 14px;
			border-bottom: 1px solid var(--color-border);
		}
		tr:last-child td {
			border-bottom: none;
		}
		.filename {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			background-size: 32px;
			background-repeat: no-repeat;
			padding-left: 51px;
			background-position: 7px 7px;
			cursor: pointer;
		}
		.filesize, .date {
			width: 80px;
		}
		.filesize {
			text-align: right;
		}
	}
	.filepicker_element_selected {
		background-color: lightblue;
	}
}

.ui-dialog {
	position: fixed !important;
}

span.ui-icon {
	float: left;
	margin: 3px 7px 30px 0;
}

/* ---- CONTACTS MENU ---- */

#contactsmenu {
	.menutoggle {
		background-size: 16px 16px;
		padding: 14px;
		cursor: pointer;
		opacity: .6;
	}
}

#contactsmenu > .menu {
	/* show ~4.5 entries */
	height: 278px;
	width: 350px;
	max-width: 90%;
	right: 13px;

	&::after {
		right: 61px;
	}

	.emptycontent {
		margin-top: 5vh !important;
		margin-bottom: 2vh;
		.icon-loading,
		.icon-search {
			display: inline-block;
		}
	}

	.content {
		max-height: calc(100% - 50px);
		height: 100%;
		overflow-y: auto;

		.footer {
			text-align: center;

			a {
				display: block;
				width: 100%;
				padding: 12px 0;
				opacity: .5;
			}
		}
	}

	.contact {
		display: flex;
		position: relative;
		align-items: center;
		padding: 3px 3px 3px 10px;
		border-bottom: 1px solid var(--color-border);

		:last-of-type {
			border-bottom: none;
		}

		.avatar {
			height: 32px;
			width: 32px;
			display: inline-block;
		}

		.body {
			flex-grow: 1;
			padding-left: 8px;

			div {
				position: relative;
				width: 100%;
			}

			.full-name, .last-message {
				/* TODO: don't use fixed width */
				max-width: 204px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.last-message {
				opacity: .5;
			}
		}

		.top-action, .second-action, .other-actions {
			width: 16px;
			height: 16px;
			padding: 14px;
			opacity: .5;
			cursor: pointer;

			:hover {
				opacity: 1;
			}
		}

		/* actions menu */
		.menu {
			top: 47px;
			margin-right: 13px;
		}
		.popovermenu::after {
			right: 2px;
		}
	}
}


#contactsmenu-search {
	width: calc(100% - 16px);
	margin: 8px;
	height: 34px;
}

/* ---- TOOLTIPS ---- */

.extra-data {
	padding-right: 5px !important;
}

/* ---- TAGS ---- */

#tagsdialog {
	.content {
		width: 100%;
		height: 280px;
	}
	.scrollarea {
		overflow: auto;
		border: 1px solid var(--color-background-darker);
		width: 100%;
		height: 240px;
	}
	.bottombuttons {
		width: 100%;
		height: 30px;
		* {
			float: left;
		}
	}
	.taglist li {
		background: var(--color-background-dark);
		padding: .3em .8em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-transition: background-color 500ms;
		transition: background-color 500ms;
		&:hover, &:active {
			background: var(--color-background-darker);
		}
	}
	.addinput {
		width: 90%;
		clear: both;
	}
}

/* ---- BREADCRUMB ---- */
.breadcrumb {
	display: inline-flex;
}
div.crumb {
	display: inline-flex;
	background-image: url('../img/breadcrumb.svg?v=1');
	background-repeat: no-repeat;
	background-position: right center;
	height: 44px;
	background-size: auto 24px;
	flex: 0 0 auto;
	order: 1;
	padding-right: 7px;
	&.crumbmenu {
		order: 2;
		position: relative;
		a {
			opacity: 0.5
		}
		&.canDropChildren,
		&.canDrop {
			.popovermenu {
				display: block;
			}
		}
		// Fix because of the display flex
		.popovermenu {
			top: 100%;
			margin-right: 3px;
			ul {
				max-height: 345px;
				overflow-y: auto;
				overflow-x: hidden;
				padding-right: 5px;
				li.canDrop span:first-child {
					background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
				}
			}
			.in-breadcrumb {
				display: none;
			}
		}
	}
	&.hidden {
		display: none;
		~ .crumb {
			order: 3;
		}
	}
	> a,
	> span {
		position: relative;
		padding: 12px;
		opacity: 0.5;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		flex: 0 0 auto;
		&.icon-home {
			// Hide home text
			text-indent: -9999px;
		}
	}
	> a[class^='icon-'] {
		padding: 0;
		width: 44px;
	}
	&:not(:first-child) a {
	}
	&:last-child {
		font-weight: 600;
		margin-right: 10px;
		// Allow multiple span next to the main 'a'
		a ~ span {
			padding-left: 0;
		}
	}
	&:hover, &:focus, a:focus, &:active {
		> a,
		> span {
			opacity: .7;
		}
	}
}

/* some feedback for hover/tap on breadcrumbs */

.appear {
	opacity: 1;
	-webkit-transition: opacity 500ms ease 0s;
	-moz-transition: opacity 500ms ease 0s;
	-ms-transition: opacity 500ms ease 0s;
	-o-transition: opacity 500ms ease 0s;
	transition: opacity 500ms ease 0s;
	&.transparent {
		opacity: 0;
	}
}

/* public footer */

#body-public footer {
	position: relative;
	text-align: center;
	.info {
		color: var(--color-text-lighter);
		text-align: center;
		margin: 0 auto;
		padding: 20px 0;
		a {
			color: var(--color-text-lighter);
			font-weight: 600;
			padding: 13px;
			margin: -13px;
		}
	}
}

/* LEGACY FIX only - do not use fieldsets for settings */

fieldset {
	&.warning legend, &.update legend {
		top: 18px;
		position: relative;
	}
	&.warning legend + p, &.update legend + p {
		margin-top: 12px;
	}
}

/* for IE10 */
@-ms-viewport {
	width: device-width;
}


/* hidden input type=file field */

.hiddenuploadfield {
	display: none;
	width: 0;
	height: 0;
	opacity: 0;
}