prism-twilight.css 4.2 KB

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