diff options
-rw-r--r-- | core/css/installation.css | 1033 |
1 files changed, 557 insertions, 476 deletions
diff --git a/core/css/installation.css b/core/css/installation.css index b57024336e4..69c98f1ea22 100644 --- a/core/css/installation.css +++ b/core/css/installation.css @@ -5,717 +5,798 @@ * 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; + 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%; + height: 100%; } article, aside, dialog, figure, footer, header, hgroup, nav, section { - display: block; + display: block; } body { - line-height: 1.5; + line-height: 1.5; } table { - border-collapse: separate; - border-spacing: 0; - white-space: nowrap; + border-collapse: separate; + border-spacing: 0; + white-space: nowrap; } caption, th, td { - text-align: left; - font-weight: normal; + text-align: left; + font-weight: normal; } table, td, th { - vertical-align: middle; + vertical-align: middle; } a { - border: 0; - color: #000; - text-decoration: none; - cursor: pointer; + border: 0; + color: #000; + text-decoration: none; + cursor: pointer; } a * { - cursor: pointer; + cursor: pointer; } input { - cursor: pointer; + cursor: pointer; } input * { - cursor: pointer; + cursor: pointer; } select, .button span, label { - cursor: pointer; + cursor: pointer; } ul { - list-style: none; + 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; + 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 */ + 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; + padding-top: 100px; } p.info, form fieldset legend, #datadirContent label { - text-align: center; - color: #fff; + text-align: center; + color: #fff; } form fieldset .warning-info, form input[type='checkbox'] + label { - text-align: center; - color: #fff; + 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; + color: #fff !important; } .infogroup { - margin-bottom: 15px; + margin-bottom: 15px; } p#message img { - vertical-align: middle; - padding: 5px; + vertical-align: middle; + padding: 5px; } div.buttons { - text-align: center; + 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; + 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; + 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; + 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; + margin: 0 7px 5px 4px; } form { - position: relative; - width: 280px; - margin: 16px auto; - padding: 0; + 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; + 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; + margin-top: -20px; + margin-bottom: 20px; } form #adminaccount { - margin-bottom: 15px; + margin-bottom: 15px; } form fieldset legend { - width: 100%; + width: 100%; } form fieldset.warning legend, form fieldset.update legend { - top: 18px; - position: relative; + top: 18px; + position: relative; } form fieldset.warning legend + p, form fieldset.update legend + p { - margin-top: 12px; + 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; + 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; + 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; + 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; + padding: 4px; + box-sizing: border-box; } form p.info a, form #showAdvanced { - color: #fff; + color: #fff; } form #remember_login:hover + label, form #remember_login:focus + label { - opacity: .6; + opacity: .6; } form #forgot-password:hover, form #forgot-password:focus { - opacity: .6; + opacity: .6; } form p.info a:hover, form p.info a:focus { - opacity: .6; + opacity: .6; } form footer .info { - white-space: nowrap; + white-space: nowrap; } #datadirContent label { - display: block; - width: 100%; - margin: 0; + display: block; + width: 100%; + margin: 0; } form #datadirField legend { - margin-bottom: 15px; + margin-bottom: 15px; } #showAdvanced { - padding: 13px; - /* increase clickable area of Advanced dropdown */ + padding: 13px; + /* increase clickable area of Advanced dropdown */ } #showAdvanced img { - vertical-align: bottom; - /* adjust position of Advanced dropdown arrow */ - margin-left: -4px; + vertical-align: bottom; + /* adjust position of Advanced dropdown arrow */ + margin-left: -4px; } .icon-info-white { - padding: 10px; + padding: 10px; } .float-spinner { - height: 32px; - display: none; + height: 32px; + display: none; } .strengthify-wrapper { - display: inline-block; - position: relative; - left: 15px; - top: -23px; - width: 250px; + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; } .tipsy-inner { - font-weight: bold; - color: #ccc; -} - -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; + font-weight: bold; + color: #ccc; } -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; -} /* 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; + 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; + position: absolute; + right: 1em; + top: .8em; + float: right; } #show, #dbpassword, #personal-show { - display: none; + display: none; } #show + label, #dbpassword + label { - right: 21px; - top: 15px !important; - margin: -14px !important; - padding: 14px !important; + 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; + -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; + 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; + display: none; } #pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; + padding: .6em 2.5em .4em .4em; + width: 8em; } #personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; + height: 14px; + margin-top: -25px; + left: 295px; + display: block; } #passwordbutton { - margin-left: .5em; + margin-left: .5em; } /* LOADER */ #body-login .float-spinner { - margin-top: -32px; - padding-top: 32px; + margin-top: -32px; + padding-top: 32px; } [class^='icon-'], [class*=' icon-'] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; + 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; + 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; + 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; + 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; + 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; + height: 16px; + width: 16px; + margin: -9px 0 0 -9px; } .icon-info-white { - background-image: url(../img/actions/info-white.svg?v=1); + 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); - } + 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); - } + 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) - */ + * 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); + 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); + opacity: 0.9; + filter: alpha(opacity=90); } .tooltip.top { - margin-top: -3px; - padding: 5px 0; + margin-top: -3px; + padding: 5px 0; } .tooltip.right { - margin-left: 3px; - padding: 0 5px; + margin-left: 3px; + padding: 0 5px; } .tooltip.bottom { - margin-top: 3px; - padding: 5px 0; + margin-top: 3px; + padding: 5px 0; } .tooltip.left { - margin-left: -3px; - padding: 0 5px; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; } /* SCROLLING */ ::-webkit-scrollbar { - width: 5px; + width: 5px; } ::-webkit-scrollbar-track-piece { - background-color: transparent; + background-color: transparent; } ::-webkit-scrollbar-thumb { - background: #ddd; - border-radius: 3px; + 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; } |