No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

prism-twilight.css 4.0KB

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