@font-normal: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
@font-mono: Monaco, Consolas, "Courier New", monospace;
@c-cream: #edecc7;
@c-green: #648239;
@c-orange: #bf4c18;
@c-green-light: #9AF040;
@c-orange-light: #FF5700;
@c-dark: #292620;
@c-light: #888888;
@c-metal: #eaeaea;
@c-soft-cream: lighten(@c-cream, 12%);
@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;
}
.box-inner-shadow(@horiz, @vert, @blur, @color) {
box-shadow: inset @horiz @vert @blur @color;
-moz-box-shadow: inset @horiz @vert @blur @color;
-webkit-box-shadow: inset @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(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
cursor: pointer;
font: bold @fsize @font-normal;
color: @bgcolor - #ccc;
line-height: @lheight;
display: inline-block;
text-decoration: none;
padding: 1px;
background-color: @bgcolor;
.box-shadow(0px, 1px, 3px, rgba(0,0,0,0.1));
.border-radius(4px);
.multi-border((@bgcolor - #333), (@bgcolor - #444), (@bgcolor - #555));
&:active {
margin-top: 1px;
margin-bottom: -1px;
}
&:focus {
.box-shadow(0px, 0px, 3px, rgba(100,100,200,0.9));
}
}
.button-span(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
display: inline-block;
padding: 0 @fsize/2;
text-shadow: 0px 1px 1px (@bgcolor + #111);
.border-radius(3px);
}
.button-hover(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
.multi-border(desaturate(darken(@bgcolor, 10%), 10%), desaturate(darken(@bgcolor, 20%), 20%), desaturate(darken(@bgcolor, 30%), 30%));
background-color: @bgcolor + #111;
}
.button-hover-span(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
background-color: @bgcolor + #111;
}
.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 {
overflow-y: scroll;
}
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 {
margin-right: 3px;
.button(@c-cream, #000, 12px, 1.45);
span { .button-span(@c-cream, #000, 12px, 1.45); }
&:hover { .button-hover(@c-cream, #000, 12px, 1.45); }
&:hover span { .button-hover-span(@c-cream, #000, 12px, 1.45); }
}
}
}
}
.content {
border-top: 1px solid lighten(@c-cream, 10%);
.navigation {
line-height: 1;
width: @content-width - 20px;
margin: 10px auto;
}
.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;
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;
}
}
.disabled {
display: none;
}
}
form {
.field {
position: relative;
label {
display: inline;
&.radio {
margin-right: 15px;
}
&.infield {
display: block;
font-family: @font-mono;
position: absolute;
top: 5px;
left: 5px;
}
}
textarea {
font-family: @font-mono;
padding: 5px;
.border-radius(2px);
border: 1px solid #444;
}
}
}
#index .content {
table {
width: 100%;
tr {
border: none;
&:nth-child(even) {
background-color: lighten(@c-cream, 8%);
}
td {
border: none;
line-height: 26px;
padding: 1px 5px 0;
a.changeset-link {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.node {
padding-left: 0px;
width: 110px;
.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;
padding-right: 0px;
.badge {
cursor: pointer;
color: white;
font-weight: bold;
display: inline-block;
line-height: 1;
padding: 3px 5px 4px;
margin-left: 4px;
.border-radius(3px);
&.yes {
background-color: green;
}
&.no {
background-color: red;
}
&.neutral {
background-color: #666;
}
&.comments {
background-color: @c-orange-light;
}
&:hover {
text-decoration: none;
}
}
}
}
}
}
.pagination {
a.older {
float: right;
}
}
}
#changeset .content {
.navigation {
.middle {
display: inline-block;
width: 49%;
text-align: center;
}
.right {
display: inline-block;
width: 25%;
text-align: right;
}
.left {
display: inline-block;
width: 25%;
}
}
.head {
position: relative;
h2 {
width: 660px;
color: @c-light;
.desc {
color: @c-dark;
}
}
.committer-avatar {
position: absolute;
top: -22px;
right: -21px;
width: 60px;
height: 60px;
border: 1px solid darken(@c-cream, 30%);
border-top: 1px solid darken(@c-cream, 30%);
border-right: 1px solid darken(@c-cream, 30%);
border: 1px solid #999;
.box-inner-shadow(1px, -1px, 10px, rgba(0,0,0,0.25));
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.fulldesc {
width: 660px;
font-size: 12px;
line-height: 1.25;
margin-bottom: 14px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
white-space: pre;
font-family: @font-mono;
}
}
.review-level-comments {
margin-top: 30px;
}
.activate a {
.button(@c-metal, #000, 12px, 1.45);
span { .button-span(@c-metal, #000, 12px, 1.45); }
&:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
&:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
}
a.submit {
margin-right: 4px;
.button(@c-metal, #000, 12px, 1.45);
span { .button-span(@c-metal, #000, 12px, 1.45); }
&:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
&:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
}
a.cancel, a.cancel-line {
.button(@c-metal, #000, 12px, 1.45);
span { .button-span(@c-metal, #000, 12px, 1.45); }
&:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
&:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
}
.togglebox {
form {
float: left;
border: 1px solid #ccc;
.border-radius(3px);
padding: 15px 10px;
background-color: @c-soft-cream;
.box-shadow(0px, 5px, 5px, rgba(0, 0, 0, 0.02);
}
}
.placeholder {
font-style: italic;
color: @c-light;
}
.item-listing {
background-color: @c-soft-cream;
border: 1px solid #ccc;
margin-bottom: 14px;
.comment, .signoff {
padding: 8px 10px;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
img {
float: right;
}
.message {
font-family: @font-mono;
font-size: 12px;
width: 660px;
padding-top: 3px;
white-space: pre;
}
.avatar img {
height: 30px;
width: 30px;
margin-top: 5px;
}
}
.signoff {
.signoff-opinion {
float: right;
font: bold 30px/1 @font-normal;
text-transform: capitalize;
margin-right: 15px;
margin-top: 5px;
&.yes { color: saturate(@c-green - #111, 20%); }
&.no { color: #c00; }
&.neutral { color: @c-cream - #333; }
}
.author {
.opinion {
font-weight: bold;
}
}
.message {
width: 620px;
}
}
}
.add-review-comment {
margin-bottom: 40px;
}
.add-signoff {
margin-bottom: 40px;
form {
.sign-off-as {
font-weight: bold;
margin-bottom: 0;
}
}
}
.file {
.filename {
h3 {
a {
color: @c-dark;
}
}
}
.add-file-comment {
margin-bottom: 24px;
}
}
.diff {
overflow-x: auto;
border: 1px solid #ddd;
margin-bottom: 24px;
table {
width: 100%;
background-color: #f9f9f9;
margin-bottom: 0;
td.code:after {
color: #ccc;
content: "↩";
vertical-align: -1px;
line-height: 1;
}
tr {
&.rem {
color: #800;
}
&.add {
color: #040;
}
&.viewing {
background-color: lighten(@c-cream, 5%);
}
&.commentable {
cursor: pointer;
}
&.chosen {
background-color: @c-cream;
}
&.comment-form td {
line-height: 15px;
padding: 10px 10px 15px 56px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
background-color: #f4f4f4;
textarea {
width: 500px;
height: 50px;
border: 1px solid @c-light;
}
}
}
td {
border: none;
line-height: 1;
padding: 1px 5px;
&.addrem-add, &.addrem-rem {
font-weight: bold;
text-align: center;
width: 10px;
}
&.linenumber {
width: 25px;
text-align: right;
font-family: @font-mono;
color: @c-light;
}
&.skip {
text-align: right;
color: @c-light;
}
&.code {
white-space: pre;
}
&.comment {
line-height: 15px;
padding: 10px 10px 10px 56px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
background-color: #f4f4f4;
.avatar {
float: right;
margin-top: 2px;
img {
height: 30px;
width: 30px;
}
}
.message {
white-space: pre;
font-family: @font-mono;
}
.author {
padding-bottom: 3px;
}
}
}
}
}
}