review/static/style.less @ c4db1e4882dd

@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-green-light: #9AF040;
@c-orange-light: #FF6F24;

@c-dark: #292620;
@c-light: #888888;

@content-width: 800px;
@content-background: rgb(250, 250, 250);

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.box-shadow(@horiz, @vert, @blur, @color) {
  box-shadow: @horiz @vert @blur @color;
  -moz-box-shadow: @horiz @vert @blur @color;
  -webkit-box-shadow: @horiz @vert @blur @color;
}
.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: @color + #0c0c0c;
    .box-shadow(0px, 1px, 2px, rgba(0,0,0,0.5));
    .border-radius(4px);
    .multi-border((@color - #333), (@color - #444), (@color - #555));

    span {
        background-color: @color;
        display: inline-block;
        padding: 0 @fsize/2;
        text-shadow: 0px 1px 1px (@color + #333);
        .border-radius(3px);
    }
    &:hover {
        .multi-border(desaturate(darken(@color, 10%), 10%), desaturate(darken(@color, 20%), 20%), desaturate(darken(@color, 30%), 30%));
        background-color: @color + #111;
        span {
            background-color: @color + #111;
        }
    }
    &: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;
    background: @c-cream url('bg.png') top left repeat;
}
body {
    color: @c-dark;
    font-family: @font-normal;

    .hr {
        height: 0;
        width: 100%;
        border-top: 1px solid #fcfcfc;
    }
    .wrap {
        width: @content-width;
        margin: 0 auto;
    }
    .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%);
    }
    .header {
        background-color: @c-green;
        border-bottom: 1px solid darken(@c-green, 10%);

        h1 {
            color: @c-dark;
            text-shadow: 0px 1px 1px lighten(@c-green, 50%);
            float: right;
            line-height: 60px;
            margin: 0 10px 0 0;

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

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

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

        .wrap {
            border: 1px solid darken(@c-cream, 20%);
            .border-radius(7px);
            .box-shadow(0px, 5px, 10px, rgba(0, 0, 0, 0.05));
            @content-padding-horiz: 20px;

            margin-top: 20px;
            padding: 21px @content-padding-horiz;
            width: @content-width - (@content-padding-horiz * 2);
            background-color: @content-background;
        }
    }
    .footer {
        text-align: center;
        margin-top: 14px;

        a {
            color: @c-dark;
            font-weight: bold;
            text-decoration: none;

            &:hover {
                color: @c-orange;
            }
        }
    }
    a {
        color: saturate(darken(@c-orange, 10%), 10%);
        text-decoration: none;
        font-weight: bold;

        &:hover {
            text-decoration: underline;
        }
        &:active {
            color: @c-orange - #033;
        }
    }
}

#index {
    .content {
        table {
            width: 100%;

            tr {
                border: none;

                &:nth-child(even) {
                    background-color: lighten(@c-cream, 8%);
                }

                td {
                    border: none;

                    a {
                        width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    &.node {
                        .rev {
                            font-weight: bold;
                        }
                        .sep {
                            font-weight: normal;
                            padding: 0px 2px 0px 1px;
                            color: lighten(@c-light, 40%);
                        }
                        .hash {
                            color: @c-light;
                            font: normal 11px @font-mono;
                        }
                    }
                    &.stats {
                        text-align: right;

                        .badge {
                            color: white;
                            font-weight: bold;
                            display: inline-block;
                            line-height: 1;
                            padding: 4px 5px;
                            margin-left: 4px;

                            .border-radius(3px);

                            &.yes {
                                background-color: green;
                            }
                            &.no {
                                background-color: red;
                            }
                            &.neutral {
                                background-color: #666;
                            }
                            &.comments {
                                background-color: @c-orange-light;
                            }


                        }
                    }
                }
            }
        }
    }
}