Mercurial > agora
view static/css/agora.less @ 107:2bca07be6e51
Add login popup box
So you can log in and immediately be redirected to the same page. Sort
of like what reddit has. If Javascript is disabled, the user is simply
taken to the standard login page.
author | dellsystem <ilostwaldo@gmail.com> |
---|---|
date | Tue, 11 Sep 2012 20:23:51 -0400 |
parents | 2602f54c018d |
children | 0fd8fb20033e |
line wrap: on
line source
* { margin: 0; padding: 0; } a { color: @mediumBlue; text-decoration: none; &:hover { color: @darkBlue; text-decoration: underline; } } img { border: 0; } body { font-family: "Helvetica Neue", "Helvetica LT Std", Helvetica, Arial, sans-serif; font-size: 13px; } #header { #gradient(@offWhite, @lighterGrey); height: @headerHeight; line-height: @headerHeight; .box-shadow(0 5px 27px 0 rgba(77, 77, 77, 0.3)); position: relative; z-index: 100; .logo { display: inline-block; padding-top: 15px; padding-left: 15px; } .nav { float: right; list-style-type: none; text-transform: lowercase; li { float: left; a { background-image: url('../img/header_icons.png'); background-repeat: no-repeat; display: block; margin: 20px 7px; padding: 0 10px; height: 47px; color: @darkGrey; font-size: 1.1em; &:hover { text-decoration: none; color: @darkerGrey; } } &:last-child a { margin-right: 0; padding-right: 0; } } // Because Firefox/Opera don't do background-position-x/y .header-icon(@xPosition) { background-position: @xPosition 0px; &:hover { background-position: @xPosition @headerIconHoverY; } } .code { .header-icon(-62px); } .discuss { .header-icon(-125px); } .help { .header-icon(-209px); } .about { .header-icon(12px); } .login { background-position-x: -267px; } } } #billboard { .grid { padding: 30px 0; background-image: url('../img/grid.png'); background-repeat: repeat; } #gradient(@darkBlue, @mediumBlue); h1 { color: @white; font-weight: normal; text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 0; font-size: 2.1em; padding: 0 100px; a { color: @white; font-weight: bold; } } } #login-box { margin: 0 auto; margin-top: 10px; width: 300px; height: 70px; .border-radius(5px); .box-shadow(0 0 7px rgba(0, 0, 0, 0.3)); #gradient(@white, @offWhite); } #billboard-below { height: 20px; margin-bottom: 10px; #gradient(@lighterGrey, @white); } #header-below { border-top: 1px solid @lightGrey; height: 30px; position: relative; z-index: 101; background: @white; } #breadcrumbs { border-bottom: 1px solid @lightGrey; margin-bottom: 10px; padding-bottom: 5px; } #info-box { margin-top: 20px; clear: both; h2 { font-weight: normal; font-size: 1.9em; } } #content { .wrap; padding-bottom: 30px; color: @darkerGrey; } #footer { .wrap; .center-align; padding: 15px 0; } h1, h2, h3, h4, h5, h6 { padding: 10px 0; } h1 { font-size: 2.1em; } h2 { font-size: 1.7em; } p { padding-bottom: 5px; } .snippetform { input[type=text], textarea { width: @nonSidebarWidth - @inputPadding * 2 - 2; padding: 5px; margin: 10px 0; outline: none; border: 1px solid @mediumGrey; .border-radius(3px); line-height: 20px; &:focus { border-color: @lightBlue; } } } #sidebar { margin-top: 10px; width: @sidebarWidth - @sidebarPadding * 2 - 2; border: 1px solid @lightGrey; padding: @sidebarPadding; background: @offWhite; .inline-block; } #non-sidebar { .inline-block; width: @nonSidebarWidth; padding-right: @sidebarLeftSpace; vertical-align: top; } .hint { border: 1px solid @lightBlue; background: lighten(@mediumBlue, 40%); padding: 10px; margin-bottom: 10px; } hr { border: 0; border-top: 1px solid @mediumGrey; margin: 5px 0; } .tree { ul { list-style-type: none; } } #diff { .hidden; border: 1px solid @lightGrey; padding: 10px; background: @offWhite; .gi { background: #DFD; } .gu { color: @mediumGrey; } .gd { background: #FDD; } } table &.default { width: 100%; border: 1px solid @lightGrey; thead th { padding: 5px 0; border-bottom: 1px solid @lightGrey; } } ul { padding: 5px 0; margin-left: 20px; } #login-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 200; } #login-form { @width: 600px; @height: 300px; @verticalPadding: 20px; .box-shadow(0 0 5px 1px rgba(0, 0, 0, 0.3)); width: @width; height: @height - (@verticalPadding * 2); position: absolute; top: 50%; left: 50%; margin-left: -@width / 2; margin-top: -@height / 2; background: @white; .border-radius(5px); padding: @verticalPadding 30px; } .errors { padding-top: 5px; padding-left: 5px; background: @lightOrange; margin-bottom: 10px; border: 1px solid @orange; .border-radius(5px); } form { .form-line { label { float: left; text-align: right; } } .form-input { margin-left: 180px; } .errors { clear: both; } }