pushhub/public/stylesheets/main.css

A github inspired interface to browse your Git repositories, built on top of expressjs and pushover

body {font-family: helvetica, sans-serif; margin: 0 0 20px 0; font-size: 12px }

.main { width:960px; margin: 0 auto; }

a { text-decoration: none; color: #4183c4; }
a:hover { text-decoration: underline; }

strong, .strong { font-weight: bolder; }
.big { font-size: 150%; }
.small { font-size: 75%; }
.center { text-align:center; }
.context { display: inline-block; width: 100%; }
.unit { float: left; }
.unit-right { float: right; }

.margin0 { margin: 0; }
.margin-bottom { margin-bottom: 10px; }

@font-face {
    font-family: 'EntypoRegular';
    src: url('fonts/entypo-webfont.eot');
    src: url('fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/entypo-webfont.woff') format('woff'),
         url('fonts/entypo-webfont.ttf') format('truetype'),
         url('fonts/entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.logo { background: url(images/logo_small.png); width: 130px; height: 25px; display: block; }
.header { padding: 5px 20px; border-bottom: 1px solid #ddd; margin-bottom: 20px; }

nav[role="main"] { list-style-type: none;}

.pictogram {
    font-family: 'EntypoRegular';
    font-size: 20px;
    font-weight: normal;
    vertical-align: middle;
    line-height: 0;
    margin-right: 10px;
}

.blob:after { content: "l"; font-size: 38px; color: #666; }
.tree:after { content: "s"; font-size: 38px; color:#7fabc7; }
.ok:after { content: "W"; font-size: 30px; color: #96c7ae; margin-left: 5px; }
.clock:after { content: "N"; font-size: 30px; color: #666; }

.tree-list-wrapper, .preview { border: 3px solid #ddd; }
.tree-list { border-collapse: collapse; width: 100%; color: #444; }
.tree-list th { text-align: left; height: 20px; background: #f9f9f9; border-bottom: 1px solid #ddd; }
.tree-list td, .tree-list th { padding: 5px; }
.tree-list tbody td { border:1px solid #f3f3f3; border-width: 1px 0 1px 0; padding: 7px 5px; }
.tree-list .name { width: 220px; }
.tree-list .date { width: 150px; }

.commit { clear:left; margin-bottom: 20px; }
.commit .label { font-size: 95%; }
.commit p { margin: 0; padding: 5px; }
.commit .content { border-radius: 3px; border: 1px solid #ccc; margin-top: 10px; }
.commit .message { background: #eaeeff; }

.breadcrumb { color: #888; margin-top: 0; font-size: 190%; }
.breadcrumb span { color: #444; }

.quick-nav { border-bottom: 1px solid #ccc; padding-left:5px;  }
.quick-nav .tabs { padding: 0; margin: 0; margin-bottom: -1px; }
.quick-nav .tabs a { color: #888; }
.quick-nav .tabs .selected a { color: #333; font-weight: bold; }
.quick-nav .tabs li:first-child { margin-left: 10px; }
.quick-nav .tabs li { display: inline-block;  padding:9px 13px; margin-right: 5px; line-height: 18px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.quick-nav .tabs li.selected { border:1px solid #ccc; border-bottom:0; background: #fff; }

.repo { border-radius: 3px; border: 1px solid #ddd; float: left; width: 30%;  height: 150px; padding: 0 5px; margin: 5px; }
.repo .description { width: 100%; }

.code { font-family: 'Bitstream Vera Sans Mono', Courier, monospace; line-height: 16px; }
.preview img { max-width: 100%; display: block; margin: 0 auto; }

/* imported from dropkick.js and slightly modified */
.container {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
    background: -moz-linear-gradient(top, #fff, #f5f5f5);
    background: -o-linear-gradient(top, #fff, #f5f5f5);
    background-color: #f5f5f5;
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    line-height: 14px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    position: relative;
}
.container:focus { outline: 0; }
.container a { outline: 0; cursor: pointer; text-decoration: none; }

.toggle {
    background-image: url('images/dk_arrows.png');
    background-repeat: no-repeat;
    background-position: 90% center;
    border: 1px solid #ccc;
    color: #333;
    padding: 7px 45px 7px 10px;
    text-shadow: #fff 1px 1px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-transition: border-color .5s;
    -moz-transition: border-color .5s;
    -o-transition: border-color .5s;
    transition: border-color .5s;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    position: relative;
    zoom: 1;
}

.open {
    box-shadow: 0 0 5px #40b5e2;
    -moz-box-shadow: 0 0 5px #40b5e2;
    -webkit-box-shadow: 0 0 5px #40b5e2;
    z-index: 10;
    position: relative;
}

.open .toggle {
    background-color: #ececec;
    border-color: #8c8c8c;
    color: #ccc;
    box-shadow: inset 0 -2px 5px #ccc;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}

.open .options { display: block; }
.open .label { color: inherit; }

.options {
    display: none;
    margin-top: -1px;
    position: absolute;
    right: 0;
    width: 100%;
    box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
    -moz-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}

.options .current { padding: 8px 10px;}
.options a { padding: 8px 10px; display: block;}
.options a, .options li { background-color: #fff; font-weight: bold; }
.options li { border-bottom: 1px solid #ccc;}
.options li:last-child a { border-bottom: none; }

.options-inner { overflow: auto; position: relative; border: 1px solid #ccc; color: #333; max-height: 250px; text-shadow: #fff 0 1px 0; margin: 0; padding: 0; max-height: 250px; }
.option-title { padding: 8px 10px; }
.option-title, .options a:hover, .option-current a { background-color: #eee !important; color: #666; text-decoration: none; }