Просмотр файла documentation/css/prism.css

Размер файла: 5.33Kb
  1. /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=line-numbers+show-language+highlight-keywords+previewer-base+previewer-color+keep-markup */
  2. /**
  3. * okaidia theme for JavaScript, CSS and HTML
  4. * Loosely based on Monokai textmate theme by http://www.monokai.nl/
  5. * @author ocodia
  6. */
  7.  
  8. code[class*="language-"],
  9. pre[class*="language-"] {
  10. color: #f8f8f2;
  11. background: none;
  12. text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  13. font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  14. text-align: left;
  15. white-space: pre;
  16. word-spacing: normal;
  17. word-break: normal;
  18. word-wrap: normal;
  19. line-height: 1.5;
  20.  
  21. -moz-tab-size: 4;
  22. -o-tab-size: 4;
  23. tab-size: 4;
  24.  
  25. -webkit-hyphens: none;
  26. -moz-hyphens: none;
  27. -ms-hyphens: none;
  28. hyphens: none;
  29. }
  30.  
  31. /* Code blocks */
  32. pre[class*="language-"] {
  33. padding: 1em;
  34. margin: .5em 0;
  35. overflow: auto;
  36. border-radius: 0.3em;
  37. }
  38.  
  39. :not(pre) > code[class*="language-"],
  40. pre[class*="language-"] {
  41. background: #272822;
  42. }
  43.  
  44. /* Inline code */
  45. :not(pre) > code[class*="language-"] {
  46. padding: .1em;
  47. border-radius: .3em;
  48. white-space: normal;
  49. }
  50.  
  51. .token.comment,
  52. .token.prolog,
  53. .token.doctype,
  54. .token.cdata {
  55. color: slategray;
  56. }
  57.  
  58. .token.punctuation {
  59. color: #f8f8f2;
  60. }
  61.  
  62. .namespace {
  63. opacity: .7;
  64. }
  65.  
  66. .token.property,
  67. .token.tag,
  68. .token.constant,
  69. .token.symbol,
  70. .token.deleted {
  71. color: #f92672;
  72. }
  73.  
  74. .token.boolean,
  75. .token.number {
  76. color: #ae81ff;
  77. }
  78.  
  79. .token.selector,
  80. .token.attr-name,
  81. .token.string,
  82. .token.char,
  83. .token.builtin,
  84. .token.inserted {
  85. color: #a6e22e;
  86. }
  87.  
  88. .token.operator,
  89. .token.entity,
  90. .token.url,
  91. .language-css .token.string,
  92. .style .token.string,
  93. .token.variable {
  94. color: #f8f8f2;
  95. }
  96.  
  97. .token.atrule,
  98. .token.attr-value,
  99. .token.function {
  100. color: #e6db74;
  101. }
  102.  
  103. .token.keyword {
  104. color: #66d9ef;
  105. }
  106.  
  107. .token.regex,
  108. .token.important {
  109. color: #fd971f;
  110. }
  111.  
  112. .token.important,
  113. .token.bold {
  114. font-weight: bold;
  115. }
  116. .token.italic {
  117. font-style: italic;
  118. }
  119.  
  120. .token.entity {
  121. cursor: help;
  122. }
  123.  
  124. pre.line-numbers {
  125. position: relative;
  126. padding-left: 3.8em;
  127. counter-reset: linenumber;
  128. }
  129.  
  130. pre.line-numbers > code {
  131. position: relative;
  132. }
  133.  
  134. .line-numbers .line-numbers-rows {
  135. position: absolute;
  136. pointer-events: none;
  137. top: 0;
  138. font-size: 100%;
  139. left: -3.8em;
  140. width: 3em; /* works for line-numbers below 1000 lines */
  141. letter-spacing: -1px;
  142. border-right: 1px solid #999;
  143.  
  144. -webkit-user-select: none;
  145. -moz-user-select: none;
  146. -ms-user-select: none;
  147. user-select: none;
  148.  
  149. }
  150.  
  151. .line-numbers-rows > span {
  152. pointer-events: none;
  153. display: block;
  154. counter-increment: linenumber;
  155. }
  156.  
  157. .line-numbers-rows > span:before {
  158. content: counter(linenumber);
  159. color: #999;
  160. display: block;
  161. padding-right: 0.8em;
  162. text-align: right;
  163. }
  164. div.prism-show-language {
  165. position: relative;
  166. }
  167.  
  168. div.prism-show-language > div.prism-show-language-label {
  169. color: black;
  170. background-color: #CFCFCF;
  171. display: inline-block;
  172. position: absolute;
  173. bottom: auto;
  174. left: auto;
  175. top: 0;
  176. right: 0;
  177. width: auto;
  178. height: auto;
  179. font-size: 0.9em;
  180. border-radius: 0 0 0 5px;
  181. padding: 0 0.5em;
  182. text-shadow: none;
  183. z-index: 1;
  184. -webkit-box-shadow: none;
  185. -moz-box-shadow: none;
  186. box-shadow: none;
  187. -webkit-transform: none;
  188. -moz-transform: none;
  189. -ms-transform: none;
  190. -o-transform: none;
  191. transform: none;
  192. }
  193.  
  194. .prism-previewer,
  195. .prism-previewer:before,
  196. .prism-previewer:after {
  197. position: absolute;
  198. pointer-events: none;
  199. }
  200. .prism-previewer,
  201. .prism-previewer:after {
  202. left: 50%;
  203. }
  204. .prism-previewer {
  205. margin-top: -48px;
  206. width: 32px;
  207. height: 32px;
  208. margin-left: -16px;
  209.  
  210. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity)";
  211. filter: alpha(opacity=0);
  212. -khtml-opacity: 0;
  213. -moz-opacity: 0;
  214. opacity: 0;
  215. -webkit-transition: opacity .25s;
  216. -moz-transition: opacity .25s;
  217. -o-transition: opacity .25s;
  218. transition: opacity .25s;
  219. }
  220. .prism-previewer.flipped {
  221. margin-top: 0;
  222. margin-bottom: -48px;
  223. }
  224. .prism-previewer:before,
  225. .prism-previewer:after {
  226. content: '';
  227. position: absolute;
  228. pointer-events: none;
  229. }
  230. .prism-previewer:before {
  231. top: -5px;
  232. right: -5px;
  233. left: -5px;
  234. bottom: -5px;
  235. -webkit-border-radius: 10px;
  236. -moz-border-radius: 10px;
  237. border-radius: 10px;
  238. border: 5px solid #fff;
  239. -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
  240. -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
  241. -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
  242. -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
  243. box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
  244. }
  245.  
  246. .prism-previewer:after {
  247. top: 100%;
  248. width: 0;
  249. height: 0;
  250. margin: 5px 0 0 -7px;
  251. border: 7px solid transparent;
  252. border-color: rgba(255, 0, 0, 0);
  253. border-top-color: #fff;
  254. }
  255. .prism-previewer.flipped:after {
  256. top: auto;
  257. bottom: 100%;
  258. margin-top: 0;
  259. margin-bottom: 5px;
  260. border-top-color: rgba(255, 0, 0, 0);
  261. border-bottom-color: #fff;
  262. }
  263. .prism-previewer.active {
  264. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity)";
  265. filter: alpha(opacity=1);
  266. -khtml-opacity: 1;
  267. -moz-opacity: 1;
  268. opacity: 1;
  269. }
  270. .prism-previewer-color {
  271. background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
  272. background-size: 10px 10px;
  273. background-position: 0 0, 5px 5px;
  274. }
  275. .prism-previewer-color:before {
  276. background-color: inherit;
  277. background-clip: padding-box;
  278. }
  279.