$form-color: scale-color(desaturate($base, 15%), $lightness: 91%) // Login screen .login background: url(asset-path('login/imac.png', image)) 0 0 no-repeat background-size: 940px 778px color: $inverse margin-bottom: 77px padding: 38px 38px 267px position: relative .login-screen background-color: $firm min-height: 317px padding: 123px 199px 33px 306px .login-icon left: 200px position: absolute top: 160px width: 96px > img display: block margin-bottom: 6px width: 100% > h4 font-size: 17px font-weight: 200 line-height: 34px opacity: .95 small color: inherit display: block font-size: inherit font-weight: 700 // Login form .login-form background-color: $form-color border-radius: 6px padding: 24px 23px 20px position: relative // Ear &:before content: '' border-style: solid border-width: 12px 12px 12px 0 border-color: transparent $form-color transparent transparent height: 0px position: absolute left: -12px top: 35px width: 0 // Make corners smooth -webkit-transform: rotate(360deg) .control-group margin-bottom: 6px position: relative .login-field border-color: transparent font-size: 17px padding-bottom: 11px padding-top: 11px text-indent: 3px width: 299px &:focus & + .login-field-icon color: $firm .login-field-icon color: scale-color($gray, $lightness: 40%) font-size: 16px position: absolute right: 13px top: 14px +transition(.25s) .login-link color: scale-color($gray, $lightness: 40%) display: block font-size: 13px margin-top: 15px text-align: center // Serving 2x images @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) .login background-image: url(asset-path('login/imac-2x.png', image))