snipt/snipt/media/css/style.css

622 lines
18 KiB
CSS

html, body {
background: #f5f2f3 url('https://snipt.s3.amazonaws.com/images/bg.gif') top left repeat;
}
body {
color: #666;
font: normal 14px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
text-rendering: optimizeLegibility;
}
header.main {
background: #12343d url('https://snipt.s3.amazonaws.com/images/header-bg.gif') top left repeat-x;
border-bottom: 1px solid #DDDDDD;
height: 66px;
position: relative;
z-index: 50;
}
header.main div.inner {
border-left: 1px solid rgba(229, 229, 229, 0.25);
height: 65px;
margin: 0 auto;
position: relative;
width: 939px;
}
header.main div.inner div.shadey {
background: transparent url('https://snipt.s3.amazonaws.com/images/header-inner-bg.png') top left no-repeat;
height: 65px;
left: -157px;
position: absolute;
top: 0;
width: 432px;
z-index: 49;
}
header.main div.inner h1 {
float: left;
position: relative;
z-index: 50;
}
header.main div.inner h1 a {
background: transparent url('https://snipt.s3.amazonaws.com/images/logo.png') top left no-repeat;
display: block;
float: left;
height: 35px;
margin: 16px 0 0 16px;
text-indent: -1000em;
width: 87px;
}
header.main div.inner form.search {
float: left;
padding: 17px 0 0 20px;
position: relative;
z-index: 50;
}
header.main div.inner form.search div.infield {
position: relative;
}
header.main div.inner form.search div.infield label {
color: #72979C;
cursor: text;
float: none;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
left: 30px;
position: absolute;
top: 8px;
width: auto;
}
header.main div.inner form.search div.infield input {
background: #17484f url('https://snipt.s3.amazonaws.com/images/search-icon.png') top left no-repeat;
background: rgba(43, 82, 93, 0.5) url('https://snipt.s3.amazonaws.com/images/search-icon.png') 8px center no-repeat;
border: 1px solid #3A5E67;
color: #FFF;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
height: auto;
margin: 0;
padding: 7px;
padding-left: 28px;
width: 175px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-background-clip: padding-box;
-moz-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0px #1d4249;
-moz-box-shadow: inset 0 1px 0px #1d4249;
box-shadow: inset 0 1px 0px #1d4249;
}
header.main div.inner form.search div.infield input:focus {
border-color: #62D5E1;
}
header.main div.inner nav.public {
float: left;
}
header.main div.inner nav.public ul {
margin: 0;
padding: 17px 0 0 20px;
}
header.main div.inner nav.public ul li {
display: block;
float: left;
}
header.main div.inner nav.public ul li a {
border-bottom: 2px solid transparent;
color: #FFF;
display: block;
float: left;
font: 500 14px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
padding: 7px;
padding-bottom: 4px;
margin-right: 20px;
text-decoration: none;
-webkit-transition: border .08s linear;
-moz-transition: border .08s linear;
-o-transition: border .08s linear;
transition: border .08s linear;
}
header.main div.inner nav.public ul li a:hover {
border-bottom: 2px solid #3A5E67;
}
header.main div.inner nav.public ul li a.active {
border-bottom: 2px solid #85D2DD;
}
header.main div.inner aside.nav {
border-left: 1px solid rgba(229, 229, 229, 0.25);
float: right;
height: 65px;
margin: 0;
width: 189px;
}
header.sub {
background: #e4e4e4;
background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#dbdbdb));
background: -moz-linear-gradient(center top, #ececec 0%, #dbdbdb 100%);
background: -moz-gradient(center top, #ececec 0%, #dbdbdb 100%);
}
header.sub div.inner {
border-left: 1px solid #d0d0d0;
margin: 0 auto;
position: relative;
width: 939px;
z-index: 49;
}
header.sub div.inner ul {
border-right: 1px solid #d0d0d0;
padding-left: 16px;
width: 733px;
}
header.sub div.inner ul li {
display: inline-block;
padding: 4px 0 6px 0;
}
header.sub div.inner ul li a {
color: #999999;
font: bold 12px Consolas, Menlo, "Courier New", monospace;
text-shadow: 0 1px 0 #FFF;
}
header.sub div.inner ul li.prompt {
color: #999999;
font: bold 12px Consolas, Menlo, "Courier New", monospace;
margin-right: 3px;
text-shadow: 0 1px 0 #FFF;
}
section.main {
height: 100%;
margin: 0 auto;
position: relative;
width: 940px;
}
section.main div.ruler {
background: #DDDDDD;
height: 100%;
position: fixed;
top: 0;
width: 1px;
z-index: 48;
}
section.main div.left-y {
margin-left: 0;
}
section.main div.right-y {
margin-left: 750px;
}
section.main div.inner {
float: left;
margin-left: 1px;
width: 749px;
}
section.main aside.main {
float: right;
padding-top: 30px;
width: 190px;
}
section.main aside.main section.ad div.asset {
background: #ffffff url('https://snipt.s3.amazonaws.com/images/ad.jpg') center center no-repeat;
border: 1px solid #DDDDDD;
height: 130px;
margin: 0 15px 6px;
width: 158px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-background-clip: padding-box;
-moz-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
}
section.main aside.main section.ad div.meta {
color: #CCC;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
margin-right: 15px;
text-align: right;
text-transform: uppercase;
}
section.main aside.main section.tags {
margin: 0 15px 45px 15px;
}
section.main aside.main section.tags h1 {
background: transparent url('https://snipt.s3.amazonaws.com/images/tags-icon.png') 0 0 no-repeat;
color: #3BAAF3;
font: bold 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
padding-bottom: 5px;
padding-left: 22px;
}
section.main aside.main section.tags ul {
margin: 0 0 15px 0;
}
section.main aside.main section.tags ul li {
margin: 6px 0 6px 22px;
}
section.main aside.main section.tags a {
border-bottom: 1px solid #5AB6F4;
color: #5AB6F4;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
text-decoration: none;
}
section.main aside.main section.tags a:hover {
border-bottom: 1px solid #2B6E9B;
color: #2B6E9B;
}
section.main aside.main section.tags a.view-all {
font-weight: bold;
margin: 0 0 0 22px;
}
section.main aside.main section.tags a.active {
border-bottom: 1px solid #2B6E9B;
color: #2B6E9B;
}
section.main aside.main nav.footer {
margin: 45px 15px 32px;
}
section.main aside.main nav.footer ul {
margin: 0;
}
section.main aside.main nav.footer ul li {
background: transparent url('https://snipt.s3.amazonaws.com/images/api-icon.png') center left no-repeat;
margin: 6px 0 6px 0;
padding-left: 22px;
}
section.main aside.main nav.footer ul li a {
border-bottom: 1px solid #999;
color: #999;
font: bold 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
text-decoration: none;
}
section.main aside.main nav.footer ul li a:hover {
border-bottom: 1px solid #333;
color: #333;
}
section.main aside.main nav.footer ul li.twitter {
background: transparent url('https://snipt.s3.amazonaws.com/images/twitter-icon.png') 4px center no-repeat;
}
section.main aside.main nav.footer ul li.pro {
background: transparent url('https://snipt.s3.amazonaws.com/images/upgrade-icon.png') 2px center no-repeat;
}
section.main aside.main nav.footer ul li.groups {
background: transparent url('https://snipt.s3.amazonaws.com/images/groups-icon.png') 2px center no-repeat;
}
article.snipt {
margin: 30px 0;
position: relative;
}
article.snipt div.number {
color: #CCC;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
left: -115px;
position: absolute;
text-align: right;
top: 4px;
width: 100px;
}
article.snipt div.container {
background: #FFF;
border: 1px solid #DDD;
border-left: 0;
float: left;
position: relative;
width: 618px;
}
article.snipt div.container div.ruler {
background: #DDD;
height: 1px;
left: -3000px;
position: absolute;
top: auto;
width: 3000px;
}
article.snipt div.container div.top-x {
top: -1px;
}
article.snipt div.container div.bottom-x {
bottom: -1px;
}
article.snipt div.container header {
border-bottom: 1px solid #F1F1EE;
-webkit-box-shadow: inset 0 -1px 0 #ffffff;
-moz-box-shadow: inset 0 -1px 0 #ffffff;
box-shadow: inset 0 -1px 0 #ffffff;
background: #fffdf9;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fffaf2));
background: -moz-linear-gradient(center top, #ffffff 0%, #fffaf2 100%);
background: -moz-gradient(center top, #ffffff 0%, #fffaf2 100%);
}
article.snipt div.container header h1 {
clear: left;
font: bold 16px/20px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
margin: 8px 15px 10px 15px;
}
article.snipt div.container header h1 a {
color: #666;
display: block;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
-webkit-transition: color .08s linear;
-moz-transition: color .08s linear;
-o-transition: color .08s linear;
transition: color .08s linear;
}
article.snipt div.container header h1 a:hover {
color: #3BAAF3;
}
article.snipt div.container header h2 {
border: 1px solid #E9E9E9;
border-top: 0;
color: #73BBC5;
display: inline-block;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
margin-left: 15px;
padding: 3px 8px 2px 8px;
}
article.snipt div.container section.code {
height: 200px;
overflow: hidden;
position: relative;
z-index: 51;
}
article.snipt div.container section.code div.highlight pre {
background: transparent;
border: none;
font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
font-weight: normal !important;
overflow-x: auto;
margin: 0 15px;
min-height: 173px;
padding: 13px 0;
}
article.snipt div.container section.code a.expand {
background: #ffffff url('https://snipt.s3.amazonaws.com/images/expand.png') 15px 18px no-repeat;
border-top: 1px solid #F1F1EE;
bottom: 0;
color: #999999;
display: block;
font: bold 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
padding: 15px 40px 15px 40px;
position: absolute;
text-decoration: none;
text-transform: uppercase;
width: 100%;
-webkit-box-shadow: 0 -25px 25px #ffffff;
-moz-box-shadow: 0 -25px 25px #ffffff;
box-shadow: 0 -25px 25px #ffffff;
}
article.snipt div.container section.code a.expand span.collapse {
display: none;
}
article.snipt div.container section.code a.expand span.lines {
font: normal 10px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
margin-left: 5px;
vertical-align: 1px;
}
article.snipt div.container section.code a.expand:hover {
color: #3BAAF3;
font-weight: bold;
}
article.snipt div.container section.code a.expand:focus {
outline: none;
}
article.snipt div.container section.code div.raw {
display: none;
}
article.snipt div.container section.emacs a.expand, article.snipt div.container section.default a.expand {
-webkit-box-shadow: 0 -25px 25px #f8f8f8;
-moz-box-shadow: 0 -25px 25px #f8f8f8;
box-shadow: 0 -25px 25px #f8f8f8;
}
article.snipt div.container section.friendly a.expand {
-webkit-box-shadow: 0 -25px 25px #f0f0f0;
-moz-box-shadow: 0 -25px 25px #f0f0f0;
box-shadow: 0 -25px 25px #f0f0f0;
}
article.snipt div.container section.fruity a.expand {
-webkit-box-shadow: 0 -25px 25px #111111;
-moz-box-shadow: 0 -25px 25px #111111;
box-shadow: 0 -25px 25px #111111;
}
article.snipt div.container section.manni a.expand {
-webkit-box-shadow: 0 -25px 25px #f0f3f3;
-moz-box-shadow: 0 -25px 25px #f0f3f3;
box-shadow: 0 -25px 25px #f0f3f3;
}
article.snipt div.container section.monokai a.expand {
-webkit-box-shadow: 0 -25px 25px #272822;
-moz-box-shadow: 0 -25px 25px #272822;
box-shadow: 0 -25px 25px #272822;
}
article.snipt div.container section.native a.expand {
-webkit-box-shadow: 0 -25px 25px #202020;
-moz-box-shadow: 0 -25px 25px #202020;
box-shadow: 0 -25px 25px #202020;
}
article.snipt div.container section.perldoc a.expand {
-webkit-box-shadow: 0 -25px 25px #eeeedd;
-moz-box-shadow: 0 -25px 25px #eeeedd;
box-shadow: 0 -25px 25px #eeeedd;
}
article.snipt div.container section.tango a.expand {
-webkit-box-shadow: 0 -25px 25px #f8f8f8;
-moz-box-shadow: 0 -25px 25px #f8f8f8;
box-shadow: 0 -25px 25px #f8f8f8;
}
article.snipt div.container:after {
bottom: 8px;
content: "";
height: 20px;
position: absolute;
right: 3px;
width: 50%;
z-index: 48;
-webkit-box-shadow: 0 6px 12px rgba(184, 184, 184, 0.6);
-moz-box-shadow: 0 6px 12px rgba(184, 184, 184, 0.6);
box-shadow: 0 6px 12px rgba(184, 184, 184, 0.6);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
article.snipt aside {
float: right;
margin: 23px 30px 0 0;
width: 100px;
}
article.snipt aside ul.options li {
margin: 2px 0;
}
article.snipt aside ul.options li a {
background: rgba(128, 128, 128, 0.15) url('https://snipt.s3.amazonaws.com/images/edit-icon.png') 14px center no-repeat;
color: #000;
display: block;
font: bold 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
opacity: .5;
padding: 7px 10px 7px 35px;
position: relative;
}
article.snipt aside ul.options li a:hover, article.snipt aside ul.options li a.hover {
background-color: rgba(128, 128, 128, 0.18);
opacity: 1;
text-decoration: none;
}
article.snipt aside ul.options li a.edit:after {
background: #f5f2f3 url('https://snipt.s3.amazonaws.com/images/bg.gif') top left repeat;
content: "";
height: 20px;
position: absolute;
right: 5px;
top: -3px;
width: 3px;
-webkit-transform: rotate(-45deg);
}
article.snipt aside ul.options li a.embed {
background-image: url('https://snipt.s3.amazonaws.com/images/embed-icon.png');
}
article.snipt aside ul.options li a.copy {
background-image: url('https://snipt.s3.amazonaws.com/images/copy-icon.png');
}
article.snipt aside ul.options li a.copy span.done {
display: none;
}
article.snipt aside section.tags {
padding-top: 15px;
}
article.snipt aside section.tags h2 {
background: transparent url('https://snipt.s3.amazonaws.com/images/snipt-tags-icon.png') 15px center no-repeat;
color: #999999;
font: bold 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
padding: 7px 0 7px 35px;
}
article.snipt aside section.tags ul li {
margin: 6px 10px 6px 35px;
}
article.snipt aside section.tags ul li a {
border-bottom: 1px solid #999;
color: #999;
display: inline-block;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
}
article.snipt aside section.tags ul li a:hover {
border-color: #000;
color: #000;
}
article.snipt aside section.tags ul.expanded li {
display: block;
}
article.snipt footer {
clear: both;
padding-bottom: 20px;
}
article.snipt footer ul.attrs {
margin: 15px 0 0 15px;
}
article.snipt footer ul.attrs li {
background: transparent url('https://snipt.s3.amazonaws.com/images/calendar-icon.png') top left no-repeat;
color: #999;
display: inline;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
margin-right: 15px;
padding: 1px 0 0 24px;
}
article.snipt footer ul.attrs li a {
color: #999;
font: normal 12px 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
text-decoration: none;
}
article.snipt footer ul.attrs li a:hover {
text-decoration: underline;
}
article.snipt footer ul.attrs li.author {
background: transparent url('https://snipt.s3.amazonaws.com/images/author-icon.png') 0 1px no-repeat;
}
article.snipt footer ul.attrs li.comments {
background: transparent url('https://snipt.s3.amazonaws.com/images/comments-icon.png') 0 2px no-repeat;
}
article.snipt div.expanded section.code {
height: auto;
}
article.snipt div.expanded section.code div.highlight pre {
padding-bottom: 60px;
}
article.snipt div.expanded section.code a.expand {
background-image: url('https://snipt.s3.amazonaws.com/images/collapse.png');
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
article.snipt div.expanded section.code a.expand span.expand {
display: none;
}
article.snipt div.expanded section.code a.expand span.collapse {
display: inline;
}
article.snipt div.expanded section.code a.expand span.lines {
display: none;
}
article.snipt.selected div.container {
-webkit-box-shadow: 0 0 20px #85D2DD;
-moz-box-shadow: 0 0 20px #85D2DD;
box-shadow: 0 0 20px #85D2DD;
}
article.snipt.selected div.container:after {
display: none;
}
article.private-snipt div.container header {
background: #fffdf9 url('https://snipt.s3.amazonaws.com/images/private-icon.png') top right no-repeat;
background: url('https://snipt.s3.amazonaws.com/images/private-icon.png') top right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fffaf2));
background: url('https://snipt.s3.amazonaws.com/images/private-icon.png') top right no-repeat, -moz-linear-gradient(center top, #ffffff 0%, #fffaf2 100%);
background: url('https://snipt.s3.amazonaws.com/images/private-icon.png') top right no-repeat, -moz-gradient(center top, #ffffff 0%, #fffaf2 100%);
}
div.pagination {
margin: 0 15px 35px 15px;
text-align: center;
}
div.pagination ul {
background: #FFF;
display: inline-block;
float: none;
}
div.pagination ul li a {
color: #3BAAF3;
padding: 0 8px;
}
div.pagination ul li a:hover {
background: #EAE8EB;
}
div.pagination ul li.active a {
background: #E0E1E1;
}
div.pagination ul li.prev {
line-height: 2px;
}
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.hidden {
display: none;
}