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: $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: $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: $color-main-text;
	height: auto;
}

#body-login {
	text-align: center;
	background-color: $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($color-main-text, 0.3) !important;
	border: none !important;
}

.two-factor-link {
	display: inline-block;
	padding: 12px;
	color: rgba($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($color-main-text, 0.5);
	color: $color-primary-text;
	line-height: 125%;
	font-size: 24px;
	div {
		display: block;
		position: relative;
		width: 50%;
		top: 35%;
		margin: 0px auto;
	}
	a {
		color: $color-primary-text;
		border-bottom: 2px dotted $color-main-background;
		&:hover, &:focus {
			color: nc-lighten($color-main-text, 86%);
		}
	}
}

/* SCROLLING */

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

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

::-webkit-scrollbar-thumb {
	background: nc-darken($color-main-background, 14%);
	border-radius: $border-radius;
}

/* Searchbox */

.searchbox {
	position: relative;
	input[type='search'] {
		position: relative;
		font-size: 1.2em;
		padding: 3px;
		padding-left: 25px;
		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
		color: $color-primary-text;
		border: 0;
		border-radius: $border-radius;
		margin-top: 3px;
		width: 0;
		cursor: pointer;
		-webkit-transition: all 100ms;
		transition: all 100ms;
		opacity: .6;
		&:focus, &:active, &:valid {
			color: $color-primary-text;
			width: 155px;
			cursor: text;
			background-color: $color-primary !important;
			border: 1px solid rgba($color-primary-text, 0.5) !important;
		}
		&:hover, &:focus, &:active {
			opacity: 1;
		}
		& ~ .icon-close-white {
			display: inline;
			position: absolute;
			width: 15px;
			height: 32px;
			right: 3px;
			top: 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($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 {
	.button, button {
		box-sizing: border-box;
		display: inline-block;
		height: 36px;
		padding: 7px 10px;
	}
	input {
		&[type='submit'], &[type='text'], &[type='password'] {
			box-sizing: border-box;
			display: inline-block;
			height: 36px;
			padding: 7px 10px;
		}
	}
	select {
		box-sizing: border-box;
		display: inline-block;
		height: 36px;
		padding: 7px 10px;
	}
	.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: 45px;
	box-sizing: border-box;
}

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

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

#emptycontent, .emptycontent {
	color: nc-lighten($color-main-text, 53%);
	text-align: center;
	margin-top: 30vh;
	width: 100%;
}

#app-sidebar #emptycontent, #app-sidebar .emptycontent {
	margin-top: 10vh;
}

#emptycontent.emptycontent-search, .emptycontent.emptycontent-search {
	position: static;
}

#emptycontent h2, .emptycontent h2 {
	margin-bottom: 10px;
	line-height: 150%;
}

#emptycontent [class^='icon-'], .emptycontent [class^='icon-'], #emptycontent [class*=' icon-'], .emptycontent [class*=' icon-'] {
	background-size: 64px;
	height: 64px;
	width: 64px;
	margin: 0 auto 15px;
	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: $color-primary-text;
	}
	form {
		fieldset .warning-info, input[type='checkbox'] + label {
			text-align: center;
			color: $color-primary-text;
		}
		.warning input[type='checkbox'] {
			&:hover + label, &:focus + label, + label {
				color: $color-primary-text !important;
			}
		}
	}
	.update {
		h2 {
			margin: 0 0 20px;
		}
		a {
			color: $color-primary-text;
			border-bottom: 1px solid nc-darken($color-main-background, 27%);
		}
	}
	.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: 15px;
		top: -23px;
		width: 250px;
	}
	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($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($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($color-error, .35);
			border: 1px solid $color-error;
			list-style-indent: inside;
			margin: 0 0 2em;
			padding: 1em;
		}
	}
	.success {
		background: rgba($color-success, .35);
		border: 1px solid $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: $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: nc-darken($color-main-background, 3%);
			color: nc-lighten($color-main-text, 53%);
			cursor: pointer;
			border: 1px solid nc-darken($color-main-background, 14%);
			span {
				cursor: pointer;
				padding: 10px 20px;
			}
			&.ui-state-hover, &.ui-state-active {
				color: $color-main-text;
				background-color: nc-darken($color-main-background, 8%);
			}
		}
	}
	.warning, .update, .error {
		display: block;
		padding: 10px;
		background-color: rgba($color-main-text, 0.3);
		color: $color-primary-text;
		text-align: left;
		border-radius: $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($color-error, .15);
	border-radius: $border-radius;
}

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

.error {
	a {
		color: $color-primary-text !important;
		font-weight: 600 !important;
		&.button {
			color: nc-lighten($color-main-text, 33%) !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: $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: $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: $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: nc-darken($color-main-background, 3%);
	}
}

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

#body-settings #quota {
	cursor: default;
	margin: 30px !important;
	position: relative;
	padding: 0 !important;
	progress {
		height: 36px;
		&::-moz-progress-bar {
			border-radius: 3px 0 0 3px;
		}
		&::-webkit-progress-value {
			border-radius: 3px 0 0 3px;
		}
	}
	div {
		font-weight: normal;
		white-space: nowrap;
		position: absolute;;
		top: 0;
		&.quotatext-bg {
			mix-blend-mode: luminosity;
		}
		&.quotatext-fg {
			color: $color-primary-text;
			overflow: hidden;
			z-index: 50;
			max-width: 100%;
		}
		.quotatext {
			padding: .6em 1em;
		}
	}
}

.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: $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: $color-main-background;
		color: $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: nc-lighten($color-main-text, 33%);
			opacity: .8;
		}
		tr:hover {
			background-color: inherit;
		}
		td {
			&.ui-datepicker-today a:not(.ui-state-hover) {
				background-color: nc-lighten($color-main-text, 86%);
			}

			&.ui-datepicker-current-day a.ui-state-active,
			.ui-state-hover,
			.ui-state-focus {
				background-color: $color-primary;
				color: $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: nc-lighten($color-main-text, 33%);
				opacity: .8;
			}
		}
	}
}

.ui-datepicker-prev, .ui-datepicker-next {
	border: nc-darken($color-main-background, 14%);
	background: $color-main-background;
}


/* ---- jQuery UI timepicker ---- */
.ui-widget.ui-timepicker {
	margin-top: 10px !important;
	width: auto !important;
	border-radius: $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: $color-main-background;
		color: $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: nc-lighten($color-main-text, 33%);
			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: $color-primary;
				color: $color-primary-text;
				font-weight: bold;
			}

			&.ui-timepicker-minutes:not(.ui-state-hover) {
				color: nc-lighten($color-main-text, 33%);
			}

			&.ui-timepicker-hours {
				border-right: 1px solid $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 {
			display: block;
			flex: 1 1;
			margin: 0;
			padding: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			> * {
				border-radius: 50%;
				text-align: center;
				font-weight: normal;
				color: $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: nc-lighten($color-main-text, 53%);
		text-align: center;
		margin-top: 80px;
		width: 100%;
		display: none;
	}
	.filelist {
		background-color: $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 $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 $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 nc-darken($color-main-background, 14%);
		width: 100%;
		height: 240px;
	}
	.bottombuttons {
		width: 100%;
		height: 30px;
		* {
			float: left;
		}
	}
	.taglist li {
		background: nc-darken($color-main-background, 3%);
		padding: .3em .8em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-transition: background-color 500ms;
		transition: background-color 500ms;
		&:hover, &:active {
			background: nc-darken($color-main-background, 8%);
		}
	}
	.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: nc-lighten($color-main-text, 33%);
		text-align: center;
		margin: 0 auto;
		padding: 20px 0;
		a {
			color: nc-lighten($color-main-text, 33%);
			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;
}