From: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Date: Thu, 22 Dec 2016 10:17:58 +0000 (+0100)
Subject: Styles scss
X-Git-Tag: v12.0.0beta1~732^2~14
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=59731acf38bd84a9d6573f3c30d7f830f3541f0d;p=nextcloud-server.git

Styles scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---

diff --git a/core/css/styles.scss b/core/css/styles.scss
new file mode 100644
index 00000000000..affaec14342
--- /dev/null
+++ b/core/css/styles.scss
@@ -0,0 +1,1274 @@
+/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
+ This file is licensed under the Affero General Public License version 3 or later.
+ See the COPYING-README file. */
+
+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: #000;
+	text-decoration: none;
+	cursor: pointer;
+	* {
+		cursor: pointer;
+	}
+}
+
+input {
+	cursor: pointer;
+	* {
+		cursor: pointer;
+	}
+}
+
+select, .button span, label {
+	cursor: pointer;
+}
+
+ul {
+	list-style: none;
+}
+
+body {
+	background-color: #ffffff;
+	font-weight: 400;
+	font-size: .8em;
+	line-height: 1.6em;
+	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+	color: #000;
+	height: auto;
+}
+
+#body-login {
+	text-align: center;
+	background-color: #0082c9;
+	background-image: url('../img/background.jpg?v=1');
+	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(0, 0, 0, 0.3) !important;
+	border: none !important;
+}
+
+.two-factor-link {
+	display: inline-block;
+	padding: 12px;
+	color: rgba(255, 255, 255, 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(0, 0, 0, 0.5);
+	color: #fff;
+	line-height: 125%;
+	font-size: 24px;
+	div {
+		display: block;
+		position: relative;
+		width: 50%;
+		top: 35%;
+		margin: 0px auto;
+	}
+	a {
+		color: #fff;
+		border-bottom: 2px dotted #fff;
+		&:hover, &:focus {
+			color: #ddd;
+		}
+	}
+}
+
+/* SCROLLING */
+
+::-webkit-scrollbar {
+	width: 5px;
+}
+
+::-webkit-scrollbar-track-piece {
+	background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #ddd;
+	border-radius: 3px;
+}
+
+/* Searchbox */
+
+.searchbox 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: #fff;
+	border: 0;
+	border-radius: 3px;
+	margin-top: 9px;
+	float: right;
+	width: 0;
+	cursor: pointer;
+	-webkit-transition: all 100ms;
+	transition: all 100ms;
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
+	opacity: .7;
+	&:focus, &:active, &:valid {
+		color: #fff;
+		width: 155px;
+		max-width: 50%;
+		cursor: text;
+		background-color: #0082c9;
+		border: 1px solid rgba(255, 255, 255, 0.5);
+	}
+}
+
+/* CONTENT ------------------------------------------------------------------ */
+
+#controls {
+	box-sizing: border-box;
+	position: fixed;
+	top: 45px;
+	right: 0;
+	left: 0;
+	height: 44px;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	background-color: rgba(255, 255, 255, 0.95);
+	z-index: 50;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+/* position controls for apps with app-navigation */
+
+#app-navigation + #app-content #controls {
+	left: 250px;
+}
+
+.viewer-mode #app-navigation + #app-content #controls {
+	left: 0;
+}
+
+#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: #888;
+	text-align: center;
+	margin-top: 30vh;
+	width: 100%;
+}
+
+#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;
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
+	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: #fff;
+	}
+	form {
+		fieldset .warning-info, input[type='checkbox'] + label {
+			text-align: center;
+			color: #fff;
+		}
+		.warning input[type='checkbox'] {
+			&:hover + label, &:focus + label, + label {
+				color: #fff !important;
+			}
+		}
+	}
+	.update {
+		h2 {
+			margin: 0 0 20px;
+		}
+		a {
+			color: #fff;
+			border-bottom: 1px solid #aaa;
+		}
+	}
+	.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;
+	}
+	.tipsy-inner {
+		font-weight: bold;
+		color: #ccc;
+	}
+	input {
+		&[type='text'], &[type='password'], &[type='email'] {
+			border: none;
+			font-weight: 300;
+		}
+	}
+}
+
+/* strengthify wrapper */
+
+/* tipsy for the strengthify wrapper looks better with following font settings */
+
+/* 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(0, 0, 0, 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(0, 0, 0, 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: #fed7d7;
+			border: 1px solid #f00;
+			list-style-indent: inside;
+			margin: 0 0 2em;
+			padding: 1em;
+		}
+	}
+	.success {
+		background: #d7fed7;
+		border: 1px solid #0f0;
+		width: 35%;
+		margin: 30px auto;
+		padding: 1em;
+		text-align: center;
+	}
+	#showAdvanced > img {
+		padding: 4px;
+		box-sizing: border-box;
+	}
+	p.info a, #showAdvanced {
+		color: #fff;
+	}
+	#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 {
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
+	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;
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
+	opacity: .3;
+}
+
+#show + label:before, #dbpassword + label:before, #personal-show + label:before {
+	display: none;
+}
+
+#pass2, input[name='personal-password-clone'] {
+	padding: .6em 2.5em .4em .4em;
+	width: 8em;
+}
+
+#personal-show + label {
+	height: 14px;
+	margin-top: -25px;
+	left: 295px;
+	display: block;
+}
+
+#passwordbutton {
+	margin-left: .5em;
+}
+
+/* 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: #f8f8f8;
+			color: #888;
+			cursor: pointer;
+			border: 1px solid #ddd;
+			span {
+				cursor: pointer;
+				padding: 10px 20px;
+			}
+			&.ui-state-hover, &.ui-state-active {
+				color: #000;
+				background-color: #e8e8e8;
+			}
+		}
+	}
+	.warning, .update, .error {
+		display: block;
+		padding: 10px;
+		background-color: rgba(0, 0, 0, 0.3);
+		color: #fff;
+		text-align: left;
+		border-radius: 3px;
+		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: #fdd;
+	border-radius: 3px;
+}
+
+.warning {
+	legend, a {
+		color: #fff !important;
+		font-weight: 600 !important;
+	}
+}
+
+.error {
+	a {
+		color: #fff !important;
+		font-weight: 600 !important;
+		&.button {
+			color: #555 !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: #ce3702 !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 {
+			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+			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 input {
+	font-size: 20px;
+	margin: 5px;
+	padding: 11px 10px 9px;
+	&[type='text'], &[type='password'] {
+		width: 249px;
+	}
+	&.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: #fff;
+	}
+	.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: #fff;
+	border: 0;
+	padding: 1px 8px;
+	display: none;
+	position: relative;
+	top: 0;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+	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 {
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+	opacity: 0;
+}
+
+tr {
+	&:hover .action, &:focus .action, .action.permanent {
+		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
+		opacity: .5;
+	}
+}
+
+.selectedActions a {
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
+	opacity: .5;
+}
+
+tr .action {
+	width: 16px;
+	height: 16px;
+}
+
+.header-action {
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
+	opacity: .8;
+}
+
+tr {
+	&:hover .action:hover, &:focus .action:focus {
+		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+		opacity: 1;
+	}
+}
+
+.selectedActions a {
+	&:hover, &:focus {
+		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+		opacity: 1;
+	}
+}
+
+.header-action {
+	&:hover, &:focus {
+		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+		opacity: 1;
+	}
+}
+
+tbody tr {
+	&:hover, &:focus, &:active {
+		background-color: #f8f8f8;
+	}
+}
+
+code {
+	font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
+}
+
+#quota {
+	cursor: default;
+	margin: 30px !important;
+	position: relative;
+	padding: 0 !important;
+	div {
+		padding: 0;
+		background-color: rgb(220, 220, 220);
+		font-weight: normal;
+		white-space: nowrap;
+		border-bottom-left-radius: 3px;
+		border-top-left-radius: 3px;
+		min-width: 1%;
+		max-width: 100%;
+	}
+}
+
+#quotatext {
+	padding: .6em 1em;
+}
+
+#quota div.quota-warning {
+	background-color: #fc4;
+}
+
+.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;
+}
+
+.separator {
+	display: inline;
+	border-left: 1px solid #d3d3d3;
+	border-right: 1px solid #fff;
+	height: 10px;
+	width: 0px;
+	margin: 4px;
+}
+
+a.bookmarklet {
+	background-color: #ddd;
+	border: 1px solid #ccc;
+	padding: 5px;
+	padding-top: 0px;
+	padding-bottom: 2px;
+	text-decoration: none;
+	margin-top: 5px;
+}
+
+.exception {
+	color: #000;
+	textarea {
+		width: 95%;
+		height: 200px;
+		background: #ffe;
+		border: 0;
+	}
+}
+
+.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');
+}
+
+.ui-datepicker-prev, .ui-datepicker-next {
+	border: 1px solid #ddd;
+	background: #fff;
+}
+
+/* ---- DIALOGS ---- */
+
+#oc-dialog-filepicker-content {
+	.dirtree {
+		width: 92%;
+		float: left;
+		margin-left: 15px;
+		overflow: hidden;
+		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: #888;
+		text-align: center;
+		margin-top: 80px;
+		width: 100%;
+		display: none;
+	}
+	.filelist {
+		background-color: white;
+		width: 100%;
+	}
+	#filestable.filelist {
+		/* prevent the filepicker to overflow */
+		min-width: initial;
+		margin-bottom: 50px;
+	}
+	.filelist {
+		td {
+			padding: 14px;
+			border-bottom: 1px solid #eee;
+		}
+		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;
+}
+
+.move2trash {
+	/* decrease spinner size */
+	width: 16px;
+	height: 16px;
+}
+
+/* ---- TOOLTIPS ---- */
+
+.extra-data {
+	padding-right: 5px !important;
+}
+
+.tipsy-inner {
+	max-width: 400px !important;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* ---- TAGS ---- */
+
+#tagsdialog {
+	.content {
+		width: 100%;
+		height: 280px;
+	}
+	.scrollarea {
+		overflow: auto;
+		border: 1px solid #ddd;
+		width: 100%;
+		height: 240px;
+	}
+	.bottombuttons {
+		width: 100%;
+		height: 30px;
+		* {
+			float: left;
+		}
+	}
+	.taglist li {
+		background: #f8f8f8;
+		padding: .3em .8em;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-transition: background-color 500ms;
+		transition: background-color 500ms;
+		&:hover, &:active {
+			background: #eee;
+		}
+	}
+	.addinput {
+		width: 90%;
+		clear: both;
+	}
+}
+
+/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */
+
+.popup {
+	background-color: #fff;
+	border-radius: 3px;
+	box-shadow: 0 0 10px #aaa;
+	color: #333;
+	padding: 10px;
+	position: fixed !important;
+	z-index: 100;
+	&.topright {
+		top: 7em;
+		right: 1em;
+	}
+	&.bottomleft {
+		bottom: 1em;
+		left: 33em;
+	}
+	.close {
+		position: absolute;
+		top: 0.2em;
+		right: 0.2em;
+		height: 20px;
+		width: 20px;
+		background: url('../img/actions/close.svg?v=1') no-repeat center;
+	}
+	h2 {
+		font-size: 20px;
+	}
+}
+
+.arrow {
+	border-bottom: 10px solid white;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	display: block;
+	height: 0;
+	position: absolute;
+	width: 0;
+	z-index: 201;
+	&.left {
+		left: -13px;
+		bottom: 1.2em;
+		-webkit-transform: rotate(270deg);
+		-ms-transform: rotate(270deg);
+		transform: rotate(270deg);
+	}
+	&.up {
+		top: -8px;
+		right: 6px;
+	}
+	&.down {
+		-webkit-transform: rotate(180deg);
+		-ms-transform: rotate(180deg);
+		transform: rotate(180deg);
+	}
+}
+
+/* ---- BREADCRUMB ---- */
+
+div.crumb {
+	float: left;
+	display: block;
+	background-image: url('../img/breadcrumb.svg?v=1');
+	background-repeat: no-repeat;
+	background-position: right center;
+	height: 44px;
+	background-size: auto 24px;
+	&.hidden {
+		display: none;
+	}
+	a, > span {
+		position: relative;
+		top: 12px;
+		padding: 14px 24px 14px 17px;
+		color: #555;
+	}
+	&.last a {
+		padding-right: 0;
+	}
+	&:first-child a {
+		position: relative;
+		top: 13px;
+		padding-right: 14px;
+	}
+	&.last {
+		font-weight: 600;
+		margin-right: 10px;
+	}
+	&.ellipsized {
+		padding: 0 10px 0 5px;
+	}
+	a.ellipsislink {
+		padding: 0 !important;
+		position: relative;
+		top: 8px !important;
+	}
+	&:hover, &:focus, a:focus, &:active {
+		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
+		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: #777;
+		text-align: center;
+		margin: 0 auto;
+		padding: 20px 0;
+		a {
+			color: #777;
+			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 {
+	width: 0;
+	height: 0;
+	opacity: 0;
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+}