Mercurial > agora
view static/css/agora.less @ 87:e0348cfbdf48
Update styling of snippets page
Some other CSS changes too.
Work-in-progress.
author | dellsystem <ilostwaldo@gmail.com> |
---|---|
date | Fri, 24 Aug 2012 23:45:48 -0400 |
parents | 343d79b20dd5 |
children | f872c643b056 |
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; } #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: 5px 0; } .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 { width: @sidebarWidth - @sidebarPadding * 2; padding: @sidebarPadding; min-height: 300px; background: @lighterGrey; .inline-block; } #non-sidebar { .inline-block; width: @nonSidebarWidth; padding-right: @sidebarLeftSpace; vertical-align: top; } .hint { border: 1px solid @lightBlue; background: lighten(@mediumBlue, 40%); padding-left: 10px; margin-bottom: 10px; padding-top: 10px; } hr { border: 0; border-top: 1px solid @mediumGrey; & + p { margin-top: 10px; } }