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