/* 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;} a, a *, input, input *, 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-provider { text-align: center; width: 100%; display: inline-block; } a.two-factor-cancel { color: #fff; } .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; } #nojavascript div { display: block; position: relative; width: 50%; top: 35%; margin: 0px auto; } #nojavascript a { color: #fff; border-bottom: 2px dotted #fff; } #nojavascript a:hover, #nojavascript a: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; } .searchbox input[type="search"]:focus, .searchbox input[type="search"]:active, .searchbox input[type="search"]:valid { color: #fff; width: 155px; max-width: 50%; cursor: text; background-color: #0082c9; border: 1px solid rgba(255, 255, 255, .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, .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, #controls button, #controls input[type='submit'], #controls input[type='text'], #controls input[type='password'], #controls select { box-sizing: border-box; display: inline-block; height: 36px; padding: 7px 10px } #controls .button.hidden { display: none; } #content { position: relative; height: 100%; width: 100%; } #content .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; } #body-login { background-attachment: fixed; /* fix background gradient */ height: 100%; /* fix sticky footer */ } /* Dark subtle label text */ #body-login p.info, #body-login form fieldset legend, #body-login #datadirContent label, #body-login form fieldset .warning-info, #body-login form input[type="checkbox"]+label { text-align: center; color: #fff; } /* overrides another !important statement that sets this to unreadable black */ #body-login form .warning input[type="checkbox"]:hover+label, #body-login form .warning input[type="checkbox"]:focus+label, #body-login form .warning input[type="checkbox"]+label { color: #fff !important; } #body-login .update h2 { margin: 12px 0 20px; } #body-login .update a { color: #fff; border-bottom: 1px solid #aaa; } #body-login .infogroup { margin-bottom: 15px; } #body-login p#message img { vertical-align: middle; padding: 5px; } #body-login div.buttons { text-align: center; } #body-login p.info { width: 22em; margin: 0 auto; padding-top: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #body-login p.info a { font-weight: 600; padding: 13px; margin: -13px; } /* position log in button as confirm icon in right of password field */ #body-login #submit.login { position: absolute; right: 0; top: 0; border: none; background-color: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; opacity: .3; } #body-login #submit.login:hover, #body-login #submit.login:focus { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; opacity: .7; } #body-login input[type="password"] { padding-right: 40px; box-sizing: border-box; min-width: 269px; } #body-login form { position: relative; width: 280px; margin: 32px auto; padding: 0; } #body-login form fieldset { margin-bottom: 20px; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #body-login form #sqliteInformation { margin-top: -20px; margin-bottom: 20px; } #body-login form #adminaccount { margin-bottom: 15px; } #body-login form fieldset legend, #datadirContent label { width: 100%; } #body-login #datadirContent label { display: block; margin: 0; } #body-login form #datadirField legend { margin-bottom: 15px; } #body-login #showAdvanced { padding: 13px; /* increase clickable area of Advanced dropdown */ } #body-login #showAdvanced img { vertical-align: bottom; /* adjust position of Advanced dropdown arrow */ margin-left: -4px; } #body-login .icon-info-white { padding: 10px; } /* strengthify wrapper */ #body-login .strengthify-wrapper { display: inline-block; position: relative; left: 15px; top: -23px; width: 250px; } /* tipsy for the strengthify wrapper looks better with following font settings */ #body-login .tipsy-inner { font-weight: bold; color: #ccc; } /* General new input field look */ #body-login input[type="text"], #body-login input[type="password"], #body-login input[type="email"] { border: none; font-weight: 300; } /* 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,.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,.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; padding-left: 28px; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; } #body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;} #body-login #showAdvanced > img { padding: 4px; box-sizing: border-box; } #body-login p.info a, #body-login #showAdvanced { color: #fff; } #body-login #remember_login:hover+label, #body-login #remember_login:focus+label, #body-login p.info a:hover, #body-login p.info a:focus { opacity: .6; } #body-login footer .info { white-space: nowrap; } /* 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: 14px; margin-left: -36px; } #passwordbutton { margin-left: .5em; } /* Database selector */ #body-login form #selectDbType { text-align:center; white-space: nowrap; } #body-login form #selectDbType .info { white-space: normal; } #body-login form #selectDbType label { position:static; margin:0 -3px 5px; padding:.4em; font-size:12px; background:#f8f8f8; color:#888; cursor:pointer; border: 1px solid #ddd; } #body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; } /* Warnings and errors are the same */ #body-login .warning, #body-login .update, #body-login .error { display: block; padding: 10px; background-color: rgba(0,0,0,.3); color: #fff; text-align: left; border-radius: 3px; cursor: default; } #body-login .update { width: inherit; text-align: center; } #body-login .update .appList { list-style: disc; text-align: left; margin-left: 25px; margin-right: 25px; } #body-login .v-align { width: inherit; } #body-login .update img.float-spinner { float: left; } #body-user .warning, #body-settings .warning { margin-top: 8px; padding: 5px; background: #fdd; border-radius: 3px; } .warning legend, .warning a, .error a { color: #fff !important; font-weight: 600 !important; } .error a.button { color: #555 !important; display: inline-block; text-align: center; } .error pre { white-space: pre-wrap; text-align: left; } .error-wide { width: 700px; margin-left: -200px !important; } .error-wide .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; } #body-login .warning { margin: 0 7px 5px 4px; } #body-login .warning legend { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } #body-login a.warning { cursor: pointer; } /* 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 */ #body-login .updateProgress .error { margin-top: 10px; margin-bottom: 10px; } /* Alternative Logins */ #alternative-logins legend { margin-bottom:10px; } #alternative-logins 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; } #body-login input[type="text"], #body-login input[type="password"] { width: 249px; } #body-login input.login { width: auto; float: right; } #body-login input[type="submit"] { padding: 10px 20px; /* larger log in and installation buttons */ } #remember_login { margin: 18px 5px 0 16px !important; } #body-login .remember-login-container { margin-top: 10px; text-align: center; } /* Sticky footer */ #body-login .wrapper { min-height: 100%; margin: 0 auto -70px; width: 300px; } #body-login footer, #body-login .push { height: 70px; } /* round profile photos */ .avatar, .avatar img, .avatardiv, .avatardiv img { border-radius: 50%; } 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; } #notification span { cursor: pointer; margin-left: 1em; } #notification { overflow-x: hidden; overflow-y: auto; max-height: 100px; } #notification .row { position: relative; } #notification .row .close { display: inline-block; vertical-align: middle; position: absolute; right: 0; top: 0; margin-top: 2px; } #notification .row.closeable { padding-right: 20px; } tr .action:not(.permanent), .selectedActions a { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } tr:hover .action, tr:focus .action, tr .action.permanent, .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, tr:focus .action:focus, .selectedActions a:hover, .selectedActions a:focus, .header-action:hover, .header-action:focus { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } tbody tr:hover, tbody tr:focus, tbody tr: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; } #quota 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; } .pager 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;} .exception 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; } #oc-dialog-filepicker-content .dirtree div:first-child a { background-image:url('../img/places/home.svg?v=1'); background-repeat:no-repeat; background-position: left center; } #oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; } #oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; } #oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;} #oc-dialog-filepicker-content .filelist { overflow-y:auto; height: 290px; background-color:white; width:100%; } #oc-dialog-filepicker-content .filelist li:first-child { border-top: 1px solid #eee; } #oc-dialog-filepicker-content .filelist li { position: relative; height: 40px; padding: 5px; border-bottom: 1px solid #eee; } #oc-dialog-filepicker-content .filelist .filename { position: absolute; padding-top: 9px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; width: 32px; } #oc-dialog-filepicker-content .filelist .date { float: right; margin-right: 10px; margin-top: 0; padding-top: 9px; } #oc-dialog-filepicker-content .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; } #tagsdialog .scrollarea { overflow:auto; border:1px solid #ddd; width: 100%; height: 240px; } #tagsdialog .bottombuttons { width: 100%; height: 30px; } #tagsdialog .bottombuttons * { float:left;} #tagsdialog .taglist li { background:#f8f8f8; padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; transition:background-color 500ms; } #tagsdialog .taglist li:hover, #tagsdialog .taglist li:active { background:#eee; } #tagsdialog .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; } .popup.topright { top:7em; right:1em; } .popup.bottomleft { bottom:1em; left:33em; } .popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg?v=1') no-repeat center; } .popup 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; } .arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); } .arrow.up { top:-8px; right:6px; } .arrow.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; } div.crumb.hidden { display: none; } div.crumb a, div.crumb span { position: relative; top: 12px; padding: 14px 24px 14px 17px; color: #555; } div.crumb:first-child a { position: relative; top: 13px; } div.crumb.last { font-weight: 600; margin-right: 10px; } div.crumb a.ellipsislink { padding: 0 !important; position: relative; top: 8px !important; } /* some feedback for hover/tap on breadcrumbs */ div.crumb:hover, div.crumb:focus, div.crumb a:focus, div.crumb:active { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; opacity:.7; } .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; } .appear.transparent { opacity: 0; } /* public footer */ #body-public footer { position: relative; text-align: center; } #body-public footer .info { color: #777; text-align: center; margin: 0 auto; padding: 20px 0; } #body-public footer .info a { color: #777; font-weight: 600; padding: 13px; margin: -13px; } /* LEGACY FIX only - do not use fieldsets for settings */ fieldset.warning legend, fieldset.update legend { top: 18px; position: relative; } fieldset.warning legend + p, fieldset.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)"; }