180 lines
2.6 KiB
SCSS
180 lines
2.6 KiB
SCSS
/*
|
|
* Embedded Code
|
|
*
|
|
* Style for embedded code examples
|
|
*/
|
|
|
|
.cp_embed_iframe {
|
|
overflow: hidden;
|
|
|
|
@media handheld and (max-width: $phone-breakpoint),
|
|
screen and (max-device-width: $phone-breakpoint),
|
|
screen and (max-width: $tablet-breakpoint) {
|
|
width: 240px !important;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Code Snippets
|
|
*
|
|
* These Code snippets are transformed by prettify and the code
|
|
* below represents a custom theme that works with their formatting.
|
|
*/
|
|
|
|
.prettyprint {
|
|
background: $steel;
|
|
font-family: $mono-font;
|
|
color: $snow;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 0px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 24px;
|
|
margin-bottom: $unit * 3;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 2px 5px rgba($coal, .3);
|
|
padding: ($unit * 2) ($unit * 4);
|
|
|
|
&.linenums,
|
|
&[class^="linenums:"],
|
|
&[class*=" linenums:"] {
|
|
padding: 0px;
|
|
}
|
|
|
|
&.is-showcase {
|
|
border: 4px solid $regal;
|
|
}
|
|
|
|
code {
|
|
background: none;
|
|
font-size: 15px;
|
|
padding: 0px;
|
|
}
|
|
|
|
ol {
|
|
background: $steel;
|
|
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
|
|
margin: 0px;
|
|
overflow: auto;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
|
|
li {
|
|
color: $metal;
|
|
background: none;
|
|
margin-bottom: 5px;
|
|
line-height: normal;
|
|
list-style-type: decimal;
|
|
font-size: 12px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
code {
|
|
background: none;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Screen Colors
|
|
*
|
|
*/
|
|
|
|
.pnk,
|
|
.blk {
|
|
border-radius: 2px;
|
|
padding: 2px 4px;
|
|
}
|
|
.pnk {
|
|
background: $squid;
|
|
color: $snow;
|
|
}
|
|
.blk {
|
|
background: $coal;
|
|
}
|
|
.otl {
|
|
outline: 1px solid rgba(snow, .56);
|
|
}
|
|
.kwd {
|
|
color: $mist;
|
|
}
|
|
.typ,
|
|
.tag {
|
|
color: $squid;
|
|
}
|
|
.str,
|
|
.atv {
|
|
color: darken($sunshine, 10%);
|
|
}
|
|
.atn {
|
|
color: darken($cactus, 10%);
|
|
}
|
|
.com {
|
|
color: $tin;
|
|
}
|
|
.lit {
|
|
color: darken($sunshine, 10%);
|
|
}
|
|
.pun {
|
|
color: $snow;
|
|
}
|
|
.pln {
|
|
color: $snow;
|
|
}
|
|
.dec {
|
|
color: $grape;
|
|
}
|
|
|
|
|
|
/*
|
|
* Print Colors
|
|
*
|
|
*/
|
|
|
|
@media print {
|
|
background: $snow;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
ol {
|
|
background: $snow;
|
|
}
|
|
|
|
.kwd {
|
|
color: $steel;
|
|
}
|
|
.typ,
|
|
.tag {
|
|
color: $ruby;
|
|
}
|
|
.str,
|
|
.atv {
|
|
color: darken($sunshine, 10%);
|
|
}
|
|
.atn {
|
|
color: darken($cactus, 10%);
|
|
}
|
|
.com {
|
|
color: $cloud;
|
|
}
|
|
.lit {
|
|
color: darken($sunshine, 10%);
|
|
}
|
|
.pun {
|
|
color: $coal;
|
|
}
|
|
.pln {
|
|
color: $coal;
|
|
}
|
|
.dec {
|
|
color: darken($grape, 5%);
|
|
}
|
|
}
|
|
} |