[d24f17c] | 1 | /**
|
---|
| 2 | * prism.js Twilight theme
|
---|
| 3 | * Based (more or less) on the Twilight theme originally of Textmate fame.
|
---|
| 4 | * @author Remy Bach
|
---|
| 5 | */
|
---|
| 6 | code[class*="language-"],
|
---|
| 7 | pre[class*="language-"] {
|
---|
| 8 | color: white;
|
---|
| 9 | background: none;
|
---|
| 10 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
---|
| 11 | font-size: 1em;
|
---|
| 12 | text-align: left;
|
---|
| 13 | text-shadow: 0 -.1em .2em black;
|
---|
| 14 | white-space: pre;
|
---|
| 15 | word-spacing: normal;
|
---|
| 16 | word-break: normal;
|
---|
| 17 | word-wrap: normal;
|
---|
| 18 | line-height: 1.5;
|
---|
| 19 |
|
---|
| 20 | -moz-tab-size: 4;
|
---|
| 21 | -o-tab-size: 4;
|
---|
| 22 | tab-size: 4;
|
---|
| 23 |
|
---|
| 24 | -webkit-hyphens: none;
|
---|
| 25 | -moz-hyphens: none;
|
---|
| 26 | -ms-hyphens: none;
|
---|
| 27 | hyphens: none;
|
---|
| 28 | }
|
---|
| 29 |
|
---|
| 30 | pre[class*="language-"],
|
---|
| 31 | :not(pre) > code[class*="language-"] {
|
---|
| 32 | background: hsl(0, 0%, 8%); /* #141414 */
|
---|
| 33 | }
|
---|
| 34 |
|
---|
| 35 | /* Code blocks */
|
---|
| 36 | pre[class*="language-"] {
|
---|
| 37 | border-radius: .5em;
|
---|
| 38 | border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
|
---|
| 39 | box-shadow: 1px 1px .5em black inset;
|
---|
| 40 | margin: .5em 0;
|
---|
| 41 | overflow: auto;
|
---|
| 42 | padding: 1em;
|
---|
| 43 | }
|
---|
| 44 |
|
---|
| 45 | pre[class*="language-"]::-moz-selection {
|
---|
| 46 | /* Firefox */
|
---|
| 47 | background: hsl(200, 4%, 16%); /* #282A2B */
|
---|
| 48 | }
|
---|
| 49 |
|
---|
| 50 | pre[class*="language-"]::selection {
|
---|
| 51 | /* Safari */
|
---|
| 52 | background: hsl(200, 4%, 16%); /* #282A2B */
|
---|
| 53 | }
|
---|
| 54 |
|
---|
| 55 | /* Text Selection colour */
|
---|
| 56 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
---|
| 57 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
---|
| 58 | text-shadow: none;
|
---|
| 59 | background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
|
---|
| 60 | }
|
---|
| 61 |
|
---|
| 62 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
---|
| 63 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
---|
| 64 | text-shadow: none;
|
---|
| 65 | background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
|
---|
| 66 | }
|
---|
| 67 |
|
---|
| 68 | /* Inline code */
|
---|
| 69 | :not(pre) > code[class*="language-"] {
|
---|
| 70 | border-radius: .3em;
|
---|
| 71 | border: .13em solid hsl(0, 0%, 33%); /* #545454 */
|
---|
| 72 | box-shadow: 1px 1px .3em -.1em black inset;
|
---|
| 73 | padding: .15em .2em .05em;
|
---|
| 74 | white-space: normal;
|
---|
| 75 | }
|
---|
| 76 |
|
---|
| 77 | .token.comment,
|
---|
| 78 | .token.prolog,
|
---|
| 79 | .token.doctype,
|
---|
| 80 | .token.cdata {
|
---|
| 81 | color: hsl(0, 0%, 47%); /* #777777 */
|
---|
| 82 | }
|
---|
| 83 |
|
---|
| 84 | .token.punctuation {
|
---|
| 85 | opacity: .7;
|
---|
| 86 | }
|
---|
| 87 |
|
---|
| 88 | .token.namespace {
|
---|
| 89 | opacity: .7;
|
---|
| 90 | }
|
---|
| 91 |
|
---|
| 92 | .token.tag,
|
---|
| 93 | .token.boolean,
|
---|
| 94 | .token.number,
|
---|
| 95 | .token.deleted {
|
---|
| 96 | color: hsl(14, 58%, 55%); /* #CF6A4C */
|
---|
| 97 | }
|
---|
| 98 |
|
---|
| 99 | .token.keyword,
|
---|
| 100 | .token.property,
|
---|
| 101 | .token.selector,
|
---|
| 102 | .token.constant,
|
---|
| 103 | .token.symbol,
|
---|
| 104 | .token.builtin {
|
---|
| 105 | color: hsl(53, 89%, 79%); /* #F9EE98 */
|
---|
| 106 | }
|
---|
| 107 |
|
---|
| 108 | .token.attr-name,
|
---|
| 109 | .token.attr-value,
|
---|
| 110 | .token.string,
|
---|
| 111 | .token.char,
|
---|
| 112 | .token.operator,
|
---|
| 113 | .token.entity,
|
---|
| 114 | .token.url,
|
---|
| 115 | .language-css .token.string,
|
---|
| 116 | .style .token.string,
|
---|
| 117 | .token.variable,
|
---|
| 118 | .token.inserted {
|
---|
| 119 | color: hsl(76, 21%, 52%); /* #8F9D6A */
|
---|
| 120 | }
|
---|
| 121 |
|
---|
| 122 | .token.atrule {
|
---|
| 123 | color: hsl(218, 22%, 55%); /* #7587A6 */
|
---|
| 124 | }
|
---|
| 125 |
|
---|
| 126 | .token.regex,
|
---|
| 127 | .token.important {
|
---|
| 128 | color: hsl(42, 75%, 65%); /* #E9C062 */
|
---|
| 129 | }
|
---|
| 130 |
|
---|
| 131 | .token.important,
|
---|
| 132 | .token.bold {
|
---|
| 133 | font-weight: bold;
|
---|
| 134 | }
|
---|
| 135 | .token.italic {
|
---|
| 136 | font-style: italic;
|
---|
| 137 | }
|
---|
| 138 |
|
---|
| 139 | .token.entity {
|
---|
| 140 | cursor: help;
|
---|
| 141 | }
|
---|
| 142 |
|
---|
| 143 | /* Markup */
|
---|
| 144 | .language-markup .token.tag,
|
---|
| 145 | .language-markup .token.attr-name,
|
---|
| 146 | .language-markup .token.punctuation {
|
---|
| 147 | color: hsl(33, 33%, 52%); /* #AC885B */
|
---|
| 148 | }
|
---|
| 149 |
|
---|
| 150 | /* Make the tokens sit above the line highlight so the colours don't look faded. */
|
---|
| 151 | .token {
|
---|
| 152 | position: relative;
|
---|
| 153 | z-index: 1;
|
---|
| 154 | }
|
---|
| 155 |
|
---|
| 156 | .line-highlight.line-highlight {
|
---|
| 157 | background: hsla(0, 0%, 33%, 0.25); /* #545454 */
|
---|
| 158 | background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
|
---|
| 159 | border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
|
---|
| 160 | border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
|
---|
| 161 | margin-top: 0.75em; /* Same as .prism’s padding-top */
|
---|
| 162 | z-index: 0;
|
---|
| 163 | }
|
---|
| 164 |
|
---|
| 165 | .line-highlight.line-highlight:before,
|
---|
| 166 | .line-highlight.line-highlight[data-end]:after {
|
---|
| 167 | background-color: hsl(215, 15%, 59%); /* #8794A6 */
|
---|
| 168 | color: hsl(24, 20%, 95%); /* #F5F2F0 */
|
---|
| 169 | }
|
---|