]> source.dussan.org Git - nextcloud-server.git/commitdiff
Styles scss
authorJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Thu, 22 Dec 2016 10:17:58 +0000 (11:17 +0100)
committerRoeland Jago Douma <roeland@famdouma.nl>
Fri, 6 Jan 2017 08:42:14 +0000 (09:42 +0100)
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
core/css/styles.scss [new file with mode: 0644]

diff --git a/core/css/styles.scss b/core/css/styles.scss
new file mode 100644 (file)
index 0000000..affaec1
--- /dev/null
@@ -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)';
+}