prism-twilight.css 4.1 KB

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