/* * Installation css file. * This file is used on the install page only when the database * isn't set, preventing scss files to be stored using the AppdataController. * It should contain every style needed to correctly display the installation template. * */ /* Reset */ 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; } a * { cursor: pointer; } input { cursor: pointer; } input * { 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; } /* Global */ #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; background-attachment: fixed; /* fix background gradient */ height: 100%; /* fix sticky footer */ } /* heading styles */ h2 { font-size: 20px; font-weight: 300; margin-bottom: 12px; line-height: 140%; } h3 { font-size: 15px; font-weight: 300; margin: 12px 0; } /* do not use italic typeface style, instead lighter color */ em { font-style: normal; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: .5; } #header { padding-top: 100px; } p.info, form fieldset legend, #datadirContent label { text-align: center; color: #fff; } form fieldset .warning-info, form input[type='checkbox'] + label { text-align: center; color: #fff; } form .warning input[type='checkbox']:hover + label, form .warning input[type='checkbox']:focus + label, form .warning input[type='checkbox'] + label { color: #fff !important; } .infogroup { margin-bottom: 15px; } p#message img { vertical-align: middle; padding: 5px; } div.buttons { text-align: center; } 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; } p.info a { font-weight: 600; padding: 13px; margin: -13px; color: #fff; } #body-login .warning, #body-login .update, #body-login .error { display: block; padding: 10px; background-color: rgba(0, 0, 0, 0.3); color: #fff; text-align: left; border-radius: 3px; cursor: default; } #body-login .warning { margin: 0 7px 5px 4px; } form { position: relative; width: 280px; margin: 16px auto; padding: 0; } form fieldset { margin-bottom: 20px; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } form #sqliteInformation { margin-top: -20px; margin-bottom: 20px; } form #adminaccount { margin-bottom: 15px; } form fieldset legend { width: 100%; } form fieldset.warning legend, form fieldset.update legend { top: 18px; position: relative; } form fieldset.warning legend + p, form fieldset.update legend + p { margin-top: 12px; } 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; } form .errors { background: #fed7d7; border: 1px solid #f00; list-style-indent: inside; margin: 0 0 2em; padding: 1em; } form .success { background: #d7fed7; border: 1px solid #0f0; width: 35%; margin: 30px auto; padding: 1em; text-align: center; } form #showAdvanced > img { padding: 4px; box-sizing: border-box; } form p.info a, form #showAdvanced { color: #fff; } form #remember_login:hover + label, form #remember_login:focus + label { opacity: .6; } form #forgot-password:hover, form #forgot-password:focus { opacity: .6; } form p.info a:hover, form p.info a:focus { opacity: .6; } form footer .info { white-space: nowrap; } #datadirContent label { display: block; width: 100%; margin: 0; } form #datadirField legend { margin-bottom: 15px; } #showAdvanced { padding: 13px; /* increase clickable area of Advanced dropdown */ } #showAdvanced img { vertical-align: bottom; /* adjust position of Advanced dropdown arrow */ margin-left: -4px; } .icon-info-white { padding: 10px; } .float-spinner { height: 32px; display: none; } .strengthify-wrapper { display: inline-block; position: relative; left: 15px; top: -23px; width: 250px; } .tipsy-inner { font-weight: bold; color: #ccc; } /* LOGO */ #header .logo { background-image: url(../img/logo-icon.svg?v=1); background-repeat: no-repeat; background-size: 175px; background-position: center; width: 252px; height: 120px; margin: 0 auto; } /* 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; } /* LOADER */ #body-login .float-spinner { margin-top: -32px; padding-top: 32px; } [class^='icon-'], [class*=' icon-'] { background-repeat: no-repeat; background-position: center; min-width: 16px; min-height: 16px; } .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { position: relative; } .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { z-index: 2; content: ''; height: 32px; width: 32px; margin: -17px 0 0 -17px; position: absolute; top: 50%; left: 50%; border-radius: 100%; -webkit-animation: rotate .8s infinite linear; animation: rotate .8s infinite linear; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { border: 2px solid rgba(150, 150, 150, 0.5); border-top-color: #646464; } .icon-loading-dark:after, .icon-loading-small-dark:after { border: 2px solid rgba(187, 187, 187, 0.5); border-top-color: #bbb; } .icon-loading-small:after, .icon-loading-small-dark:after { height: 16px; width: 16px; margin: -9px 0 0 -9px; } .icon-info-white { background-image: url(../img/actions/info-white.svg?v=1); } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*! * Bootstrap v3.3.5 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ .tooltip { position: absolute; z-index: 1070; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal; letter-spacing: normal; line-break: auto; line-height: 1.42857143; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; word-break: normal; word-spacing: normal; word-wrap: normal; font-size: 12px; opacity: 0; filter: alpha(opacity=0); } .tooltip.in { opacity: 0.9; filter: alpha(opacity=90); } .tooltip.top { margin-top: -3px; padding: 5px 0; } .tooltip.right { margin-left: 3px; padding: 0 5px; } .tooltip.bottom { margin-top: 3px; padding: 5px 0; } .tooltip.left { margin-left: -3px; padding: 0 5px; } .tooltip-inner { max-width: 350px; padding: 3px 8px; color: #ffffff; text-align: center; background-color: #000000; border-radius: 4px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000000; } .tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000000; } .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000000; } .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000000; } .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000000; } /* SCROLLING */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track-piece { background-color: transparent; } ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } .error-wide { width: 700px; margin-left: -200px !important; } /* Config write issue */ #body-login .v-align { width: inherit; } #body-login .wrapper { min-height: 100%; margin: 0 auto -70px; width: 300px; } .warning legend, .warning a, .error a { color: #fff !important; font-weight: 600 !important; } #body-login ul.error-wide { margin-top: 35px; } /* Update info */ #body-login .update { width: inherit; text-align: center; } #body-login .update h2 { margin: 0 0 20px; } #body-login .update a { color: #fff; border-bottom: 1px solid #aaa; } /* INPUTS */ input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], input[type="date"], textarea, select, button, .button, input[type="submit"], input[type="button"], #quota, .pager li a { width: 130px; margin: 3px 3px 3px 0; padding: 7px 6px 5px; font-size: 13px; background-color: #fff; color: #333; border: 1px solid #ddd; outline: none; border-radius: 3px; } #body-login input { font-size: 20px; margin: 5px; padding: 11px 10px 9px; } input[type="submit"], input[type="button"], button, .button { width: auto; min-width: 25px; padding: 5px; background-color: rgba(240, 240, 240, 0.9); font-weight: 600; color: #555; border: 1px solid rgba(240, 240, 240, 0.9); cursor: pointer; } input { font-size: 20px; margin: 5px; padding: 11px 10px 9px; } input[type='text'], input[type='password'], input[type='email'] { font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; border: none; font-weight: 300; font-size: 20px; margin: 5px; padding: 11px 10px 9px; -webkit-appearance: textfield; -moz-appearance: textfield; box-sizing: content-box; background: #fff; color: #555; cursor: text; font-family: inherit; outline: none; border-radius: 3px; width: 249px; } input.login { width: 269px; background-position: right 16px center; } input[type='submit'] { padding: 10px 20px; /* larger log in and installation buttons */ } /* 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; } .grouptop input { margin-bottom: 0 !important; border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .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; } .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; } .groupbottom input[type=submit] { box-shadow: none !important; } label.infield { display: none; } /* Primary action button, use sparingly */ .primary { border: 1px solid #0082c9; background-color: #00a2e9; color: #fff; } input[type='submit'].primary, input[type='button'].primary { border: 1px solid #0082c9; background-color: #00a2e9; color: #fff; } button.primary, .button.primary { border: 1px solid #0082c9; background-color: #00a2e9; color: #fff; } .primary:hover { background-color: #0092d9; color: #fff; } input[type='submit'].primary:hover, input[type='button'].primary:hover { background-color: #0092d9; color: #fff; } button.primary:hover, .button.primary:hover, .primary:focus { background-color: #0092d9; color: #fff; } input[type='submit'].primary:focus, input[type='button'].primary:focus { background-color: #0092d9; color: #fff; } button.primary:focus, .button.primary:focus { background-color: #0092d9; color: #fff; } .primary:active { background-color: #00a2e9; color: #bbb; } input[type='submit'].primary:active, input[type='button'].primary:active { background-color: #00a2e9; color: #bbb; } button.primary:active, .button.primary:active, .primary:disabled { background-color: #00a2e9; color: #bbb; } input[type='submit'].primary:disabled, input[type='button'].primary:disabled { background-color: #00a2e9; color: #bbb; } button.primary:disabled, .button.primary:disabled, .primary:disabled:hover { background-color: #00a2e9; color: #bbb; } input[type='submit'].primary:disabled:hover, input[type='button'].primary:disabled:hover { background-color: #00a2e9; color: #bbb; } button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus { background-color: #00a2e9; color: #bbb; } input[type='submit'].primary:disabled:focus, input[type='button'].primary:disabled:focus { background-color: #00a2e9; color: #bbb; } button.primary:disabled:focus, .button.primary:disabled:focus { background-color: #00a2e9; color: #bbb; } input, textarea, select, button { font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; }