| 1 |
// |
| 2 |
// Code |
| 3 |
// -------------------------------------------------- |
| 4 |
|
| 5 |
|
| 6 |
:not(pre) > code[class*='language-']*='language-'], |
| 7 |
pre[class*='language-']*='language-'], |
| 8 |
pre { |
| 9 |
margin: 0; |
| 10 |
padding: { |
| 11 |
top: $spacer * 1.5; |
| 12 |
bottom: $spacer * 1.5; |
| 13 |
} |
| 14 |
background-color: $pre-bg; |
| 15 |
font-size: $code-font-size; |
| 16 |
} |
| 17 |
pre { |
| 18 |
padding: { |
| 19 |
right: $spacer; |
| 20 |
left: $spacer; |
| 21 |
} |
| 22 |
} |
| 23 |
.code-toolbar { |
| 24 |
:not(pre) > code[class*='language-']*='language-'], |
| 25 |
pre[class*='language-']*='language-'] { |
| 26 |
padding-top: $spacer * 2; |
| 27 |
} |
| 28 |
} |
| 29 |
code[class*="language-"]*="language-""], |
| 30 |
pre[class*="language-"]*="language-""], |
| 31 |
pre { |
| 32 |
color: $pre-color; |
| 33 |
text-shadow: none; |
| 34 |
} |
| 35 |
|
| 36 |
// Line numbers |
| 37 |
.line-numbers .line-numbers-rows { |
| 38 |
border-right: $pre-line-numbers-border-width solid $pre-line-numbers-border-color; |
| 39 |
> span::before { |
| 40 |
color: $pre-line-numbers-color; |
| 41 |
} |
| 42 |
} |
| 43 |
|
| 44 |
// Toolbar (Copy button) |
| 45 |
div.code-toolbar > .toolbar { |
| 46 |
opacity: 1; |
| 47 |
> .toolbar-item > a, |
| 48 |
> .toolbar-item > button, |
| 49 |
.toolbar-item > span { |
| 50 |
display: inline-block; |
| 51 |
margin: .375rem .5rem; |
| 52 |
padding: .25rem .75rem; |
| 53 |
transition: $btn-transition; |
| 54 |
border-radius: $border-radius-sm; |
| 55 |
border: $border-width solid rgba($primary, .35); |
| 56 |
background-color: rgba($primary, .12); |
| 57 |
color: $primary; |
| 58 |
font: { |
| 59 |
size: $font-size-xs; |
| 60 |
weight: $font-weight-bold; |
| 61 |
} |
| 62 |
box-shadow: none; |
| 63 |
&:focus { |
| 64 |
outline: none; |
| 65 |
box-shadow: none; |
| 66 |
} |
| 67 |
&:hover { |
| 68 |
background-color: $primary; |
| 69 |
color: $white !important; |
| 70 |
} |
| 71 |
} |
| 72 |
} |
| 73 |
|
| 74 |
// Code highlighting colors overrides (prism.js) |
| 75 |
.token.boolean, .token.constant, .token.deleted, .token.number, |
| 76 |
.token.property, .token.symbol, .token.tag { |
| 77 |
color: #47abfd; |
| 78 |
} |
| 79 |
.token.cdata, .token.comment, .token.doctype, .token.prolog { |
| 80 |
color: rgba($white, .4); |
| 81 |
} |
| 82 |
.token.attr-name, .token.builtin, .token.char, |
| 83 |
.token.inserted, .token.selector { |
| 84 |
color: #a8e1ff; |
| 85 |
} |
| 86 |
.token.atrule, .token.attr-value, |
| 87 |
.token.keyword, .token.string { |
| 88 |
color: #f69733; |
| 89 |
} |
| 90 |
.language-css .token.string, .style .token.string, |
| 91 |
.token.entity, .token.operator, .token.url { |
| 92 |
color: #35bcba; |
| 93 |
background-color: transparent; |
| 94 |
} |
| 95 |
.token.class-name, .token.function { |
| 96 |
color: #35bcba; |
| 97 |
background-color: transparent; |
| 98 |
} |
| 99 |
|
