review/static/style.less @ eaa63ba9a24e

@font-normal: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
@font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

@c-cream: #edecc7;
@c-green: #648239;
@c-orange: #bf4c18;
@c-dark: #292620;
@c-light: #fcfcfc;

@content-width: 800px;

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.multi-border(@top, @sides, @bottom) {
    border-top: 1px solid @top;
    border-right: 1px solid @sides;
    border-left: 1px solid @sides;
    border-bottom: 1px solid @bottom;
}
.button(@color: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
    font: bold @fsize @font-normal;
    color: @color - #ccc;
    line-height: @lheight;
    display: inline-block;
    text-decoration: none;
    padding: 1px;
    background-color: saturate(lighten(@color, 30%), 10%);
    .border-radius(4px);
    .multi-border(darken(@color, 30%), darken(@color, 40%), darken(@color, 50%));
    &:hover {
        .multi-border(darken(@color, 20%), darken(@color, 30%), darken(@color, 40%));
        background-color: lighten(saturate(lighten(@color, 30%), 10%), 10%);
    }
    span {
        background-color: @color;
        display: inline-block;
        padding: 0 @fsize/2;
        text-shadow: 0px 1px 1px lighten(@color, 5%);
        .border-radius(3px);
        &:hover {
            background-color: lighten(@color, 20%);
        }
    }
    &:active {
        margin-top: 1px;
        margin-bottom: -1px;
    }
}

.group:after {
    clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;
}
* html .group, *:first-child + html .group {
    zoom:1
}

html, body {
    background-color: @c-cream;
}
body {
    color: @c-dark;
    font-family: @font-normal;

    .hr {
        height: 0;
        width: 100%;
        border-top: 1px solid @c-light;
    }
    .wrap {
        width: @content-width;
        margin: 0 auto;
    }
    .header {
        background-color: @c-green;
        padding-bottom: 1px;
        border-bottom: 1px solid darken(@c-green, 10%);

        .hr.one {
            border-top: none;
            height: 3px;
            background-color: lighten(@c-green, 35%);
            border-bottom: 1px solid @c-green;
        }
        .hr.two {
            border-top: none;
            border-bottom: 1px solid lighten(@c-green, 50%);
        }
        h1 {
            color: @c-dark;
            text-shadow: 0px 1px 1px lighten(@c-green, 50%);
            margin-top: 16px;
            float: right;

            a {
                color: black;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .remotes {
            .remote {
                padding-top: 4px;
            }
            form {
                display: inline;
                margin-bottom: 0;

                a {
                    .button(saturate(lighten(@c-green, 60%), 10%), #000, 12px, 1.45);
                }
            }
        }
    }
    .content {
        border-top: 1px solid lighten(@c-cream, 10%);

        .wrap {
            .border-radius(7px);
            @content-padding-horiz: 20px;

            margin-top: 20px;
            padding: 21px @content-padding-horiz;
            width: @content-width - (@content-padding-horiz * 2);
            background-color: #fdfdfd;
        }
    }
}