Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
175 lines (148 sloc) 3.53 KB
// Cools
$paleblue: #BDDCDC !default;
$blue: #92BFBF !default;
$slate: #5F777E !default;
$palegreen: #D0EDA7 !default;
$green: #B4D388 !default;
$darkgreen: #809161 !default;
// Warms
$paleyellow: #F5F5AE !default;
$yellow: #EDE480 !default;
$orange: #F49D62 !default;
$red: #CF5340 !default;
$darkred: #893121 !default;
$maroon: #55201B !default;
//====================================================
// Code Blocks
//====================================================
pre { margin-bottom: $margin; }
pre[class*="language-"],
code[class*="language-"] {
position: relative;
color: $yellow;
}
pre::-webkit-scrollbar { height: 12px; width: 12px; overflow: visible; }
pre::-webkit-scrollbar-track { background: none; }
pre::-webkit-scrollbar-corner { background: none; }
pre::-webkit-scrollbar-thumb { background: $accent; border: 5px solid $black; }
//====================================================
// Syntax Highlighting
//====================================================
pre[class*="language-"].language-markup,
code[class*="language-"].language-markup,
pre[class*="language-"].language-html,
code[class*="language-"].language-html,
pre[class*="language-"].language-javascript,
code[class*="language-"].language-javascript {
color: $white;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata,
.token.entity,
.language-css .token.string,
.language-scss .token.string,
.style .token.string {
color: $midgrey;
}
.token.property,
.language-markup .token.punctuation {
color: $blue;
}
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted,
.language-css .token.selector,
.language-scss .token.selector {
color: $green;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.language-clike .token.boolean,
.language-javascript .token.keyword,
.language-javascript .token.number,
.language-css .token.keyword,
.language-scss .token.keyword {
color: $yellow;
}
.token.punctuation {
color: $silver;
}
.token.attr-value,
.token.keyword,
.language-clike .token.string,
.language-javascript .token.string {
color: $paleblue;
}
.token.operator,
.token.atrule,
.token.function,
.token.url,
.token.regex,
.token.variable {
color: $orange;
}
.token.important, {
color: $red;
}
.token.entity {
cursor: help;
}
//====================================================
// Lanquage Indicator
//====================================================
pre[class*='language-'][data-language]::before {
content: attr(data-language);
position: absolute;
top: 0;
right: 0;
padding: 4px 8px;
font-family: $base-font;
font-size: 10px;
background: $darkgrey;
color: $grey;
text-transform: uppercase;
border-radius: 0 0 0 5px;
}
.no-indicator:before {
display: none;
}
//====================================================
// Line Numbers
//====================================================
pre.line-numbers {
padding-left: 4.5em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
left: -4.5em;
width: 3em; /* works for line-numbers below 1000 lines */
border-right: 1px solid $darkgrey;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: lighten($darkgrey, 10%) ;
display: block;
padding-right: 0.8em;
text-align: right;
}