/* Login Page */ .login-page { .container { max-width: 960px; } .navbar-gitlab .container { max-width: none; } .flash-container { margin-bottom: $gl-padding; } .brand-holder { font-size: 18px; line-height: 1.5; p { font-size: 16px; color: $login-brand-holder-color; } h1:first-child { font-weight: $gl-font-weight-normal; margin-bottom: 0.68em; margin-top: 0; font-size: 34px; } h3 { font-size: 22px; } img { max-width: 100%; margin-bottom: 30px; } a { font-weight: $gl-font-weight-bold; } } p { font-size: 13px; } .login-box, .omniauth-container { box-shadow: 0 0 0 1px $border-color; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; padding: 15px; .login-heading h3 { font-weight: $gl-font-weight-normal; line-height: 1.5; margin: 0 0 10px; } .login-footer { margin-top: 10px; p:last-child { margin-bottom: 0; } } a.forgot { float: right; padding-top: 6px; } .nav .active a { background: transparent; } // Styles the glowing border of focused input for username async validation .login-body { font-size: 13px; input + p { margin-top: 5px; } .username .validation-success { color: $green-600; } .username .validation-error { color: $red-500; } } } .omniauth-container { font-size: 13px; p { margin: 0; } } .new-session-tabs { display: -webkit-flex; display: flex; box-shadow: 0 0 0 1px $border-color; border-top-right-radius: $border-radius-default; border-top-left-radius: $border-radius-default; // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long). // These styles prevent this from breaking the layout, and only applied when providers are configured. &.custom-provider-tabs { flex-wrap: wrap; li { min-width: 85px; flex-basis: auto; // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen. // We are making somewhat of an assumption about the configuration here: that users do not have more than // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border // above one of the bottom row elements. If you know a better way, please implement it! &:nth-child(n+5) { border-top: 1px solid $border-color; } } a { font-size: 16px; } } li { flex: 1; text-align: center; border-left: 1px solid $border-color; &:first-of-type { border-left: 0; border-top-left-radius: $border-radius-default; } &:last-of-type { border-top-right-radius: $border-radius-default; } &:not(.active) { background-color: $gray-light; } a { width: 100%; font-size: 18px; margin-right: 0; &:hover { border: 1px solid transparent; } } &.active { border-bottom: 1px solid $border-color; a { border: 0; border-bottom: 2px solid $link-underline-blue; margin-right: 0; color: $black; &:hover { border-bottom: 2px solid $link-underline-blue; } } } } } .form-control { &:active, &:focus { background-color: $white-light; } } label { font-weight: $gl-font-weight-normal; } .submit-container { margin-top: 16px; } input[type="submit"] { @extend .btn-block; margin-bottom: 0; } .devise-errors { h2 { margin-top: 0; font-size: 14px; color: $login-devise-error-color; } } } @media (max-width: $screen-xs-max) { .login-page { .col-sm-5.pull-right { float: none !important; margin-bottom: 45px; } } } .oauth-image-link { margin-right: 10px; img { width: 32px; height: 32px; } } .devise-layout-html { margin: 0; padding: 0; height: 100%; // Fixes footer container to bottom of viewport body { // offset height of fixed header + 1 to avoid scroll height: calc(100% - 51px); margin: 0; padding: 0; .page-wrap { min-height: 100%; position: relative; } .footer-container, hr.footer-fixed { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: $white-light; } .navless-container { padding: 65px 15px; // height of footer + bottom padding of email confirmation link @media (max-width: $screen-xs-max) { padding: 0 15px 65px; } } } }