prism-twilight.css 3.5 KB

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