crayon_style.css 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. /*
  2. Crayon Syntax Highlighter Structure Style Sheet
  3. - This style sheet is used to structure a Crayon's dimensions and visibility, but does not contain any details regarding
  4. coloring etc.
  5. - Attributes, where possible, are kept flexible such that Themes can customise them.
  6. - Themes are used to add coloring to the Crayon and the syntax highlighting itself.
  7. - Themes can be considered as layers on top of this style sheet.
  8. - Several attributes are marked !important where they are required to remain unchanged by CSS precedence,
  9. which may occur from conflicts with certain Wordpress Themes.
  10. - The attributes in Themes are generally all marked !important to ensure styles are not altered by precedence.
  11. */
  12. /* General ========================= */
  13. .crayon-syntax {
  14. overflow: hidden !important;
  15. position: relative !important;
  16. direction: ltr;
  17. text-align: left;
  18. }
  19. .crayon-syntax div {
  20. /* Need !important? */
  21. background: none;
  22. border: none;
  23. padding: 0px;
  24. margin: 0px;
  25. text-align: left;
  26. }
  27. .crayon-syntax.crayon-loading {
  28. visibility: hidden;
  29. }
  30. .crayon-syntax,
  31. .crayon-syntax .crayon-main,
  32. .crayon-syntax .crayon-toolbar,
  33. .crayon-syntax .crayon-info,
  34. .crayon-syntax .crayon-plain,
  35. .crayon-syntax .crayon-code {
  36. /* Dimensions of code */
  37. width: 100%;
  38. }
  39. .crayon-syntax .crayon-main,
  40. .crayon-syntax .crayon-plain {
  41. /* TODO a bug in IE8 causes max-height and overflow:auto to set max-height = height
  42. http://edskes.net/ie8overflowandexpandingboxbugs.htm */
  43. overflow: auto;
  44. }
  45. .crayon-syntax,
  46. .crayon-syntax .crayon-main,
  47. .crayon-syntax .crayon-plain,
  48. .crayon-syntax .crayon-table {
  49. padding: 0px;
  50. margin: 0px;
  51. }
  52. .crayon-syntax-inline {
  53. margin: 0 2px;
  54. padding: 0 2px;
  55. }
  56. .crayon-syntax .crayon-table {
  57. border: none !important;
  58. background: none !important;
  59. padding: 0px !important;
  60. margin-top: 0px !important;
  61. margin-right: 0px !important;
  62. margin-bottom: 0px !important;
  63. width: auto !important;
  64. border-spacing: 0 !important;
  65. border-collapse: collapse !important;
  66. }
  67. .crayon-syntax .crayon-table td,
  68. .crayon-syntax .crayon-table tr {
  69. padding: 0 !important;
  70. border: none !important;
  71. background: none;
  72. vertical-align: top !important;
  73. margin: 0 !important;
  74. }
  75. .crayon-syntax .crayon-invisible {
  76. display: none !important;
  77. }
  78. .crayon-plain-tag {
  79. margin-bottom: 12px;
  80. }
  81. /* End General ===================== */
  82. /* Popup ========================= */
  83. .crayon-popup {
  84. }
  85. .crayon-popup .crayon-plain {
  86. display: block !important;
  87. width: 100% !important;
  88. height: 100% !important;
  89. opacity: 100 !important;
  90. position: relative !important;
  91. }
  92. .crayon-popup-window {
  93. background: #fff;
  94. }
  95. /* End Popup ========================= */
  96. /* Line Numbers ==================== */
  97. .crayon-syntax .crayon-num {
  98. text-align: center;
  99. padding: 0 5px;
  100. margin: 0px;
  101. }
  102. /* End Line Numbers ================ */
  103. /* Toolbar & Info ================== */
  104. .crayon-syntax .crayon-toolbar {
  105. position: relative;
  106. overflow: hidden;
  107. z-index: 4;
  108. }
  109. .crayon-syntax .crayon-info {
  110. position: absolute;
  111. overflow: hidden;
  112. display: none;
  113. z-index: 3;
  114. padding: 0px;
  115. /* Must be able to expand! */
  116. min-height: 18px;
  117. line-height: 18px;
  118. }
  119. .crayon-syntax .crayon-info div {
  120. padding: 2px !important;
  121. text-align: center;
  122. }
  123. .crayon-syntax .crayon-toolbar,
  124. .crayon-syntax .crayon-toolbar * {
  125. height: 18px;
  126. line-height: 18px;
  127. padding: 0px;
  128. }
  129. .crayon-syntax .crayon-toolbar span {
  130. padding: 0 4px !important;
  131. }
  132. .crayon-syntax .crayon-toolbar a.crayon-button {
  133. display: inline;
  134. float: left !important;
  135. min-width: 20px;
  136. background-repeat: no-repeat;
  137. /*height: 16px;*/
  138. line-height: 15px;
  139. padding: 0px 2px !important;
  140. border: none;
  141. /*border-radius: 5px;
  142. -webkit-border-radius: 5px;
  143. -moz-border-radius: 5px;*/
  144. text-decoration: none;
  145. }
  146. .crayon-toolbar a.crayon-button,
  147. .crayon-toolbar a.crayon-button:hover,
  148. .crayon-toolbar a.crayon-button.crayon-pressed:hover {
  149. background-position: 0px center;
  150. }
  151. .crayon-toolbar a.crayon-button.crayon-pressed,
  152. .crayon-toolbar a.crayon-button:active,
  153. .crayon-toolbar a.crayon-button.crayon-pressed:active {
  154. background-position: -24px center;
  155. }
  156. /* Plain Button */
  157. .crayon-toolbar a.crayon-button.crayon-plain-button {
  158. background-image: url('images/toolbar/plain.png');
  159. }
  160. /* Wrap Button */
  161. .crayon-toolbar a.crayon-button.crayon-wrap-button {
  162. background-image: url('images/toolbar/wrap.png');
  163. }
  164. /* Expand Button */
  165. .crayon-toolbar a.crayon-button.crayon-expand-button {
  166. background-image: url('images/toolbar/expand.png');
  167. }
  168. /* Copy Button */
  169. .crayon-toolbar a.crayon-button.crayon-copy-button {
  170. background-image: url('images/toolbar/copy.png');
  171. }
  172. /* Popup Button */
  173. .crayon-toolbar a.crayon-button.crayon-popup-button {
  174. background-image: url('images/toolbar/popup.png');
  175. }
  176. /* Nums Button */
  177. .crayon-toolbar a.crayon-button.crayon-nums-button {
  178. background-image: url('images/toolbar/nums.png');
  179. }
  180. /* Plus Sign */
  181. .crayon-syntax .crayon-toolbar .crayon-mixed-highlight {
  182. background-image: url('images/toolbar/plus.png');
  183. /* background-position: center;*/
  184. background-position: 0px center;
  185. background-repeat: no-repeat;
  186. float: left;
  187. min-width: 15px;
  188. }
  189. /* Language */
  190. .crayon-syntax .crayon-toolbar .crayon-language {
  191. padding-right: 8px !important;
  192. }
  193. /* Tools */
  194. /*.crayon-syntax .crayon-toolbar .crayon-tools {
  195. padding-right: 2px !important;
  196. }*/
  197. .crayon-syntax .crayon-title {
  198. float: left;
  199. }
  200. /* End Toolbar ===================== */
  201. /* Scrollbar ======================= */
  202. .crayon-main::-webkit-scrollbar,
  203. .crayon-plain::-webkit-scrollbar {
  204. height: 6px;
  205. overflow: visible;
  206. width: 6px;
  207. background: #EEE;
  208. }
  209. .crayon-main::-webkit-scrollbar-thumb,
  210. .crayon-plain::-webkit-scrollbar-thumb {
  211. background-color: #CCC;
  212. background-clip: padding-box;
  213. border: 1px solid #AAA;
  214. box-shadow: inset 0 0 2px #999;
  215. min-height: 8px;
  216. padding:0;
  217. border-width: 1px;
  218. }
  219. .crayon-main::-webkit-scrollbar-button,
  220. .crayon-plain::-webkit-scrollbar-button {
  221. height: 0;
  222. width: 0;
  223. padding: 0px;
  224. }
  225. .crayon-main::-webkit-scrollbar-track,
  226. .crayon-plain::-webkit-scrollbar-track {
  227. background-clip: padding-box;
  228. border: solid transparent;
  229. border-width: 0 0 0 4px;
  230. border: 1px solid #BBB;
  231. border-right: none;
  232. border-bottom: none;
  233. }
  234. .crayon-main::-webkit-scrollbar-corner,
  235. .crayon-plain::-webkit-scrollbar-corner {
  236. background: #EEE;
  237. }
  238. .crayon-main::-webkit-scrollbar-thumb:hover,
  239. .crayon-plain::-webkit-scrollbar-thumb:hover {
  240. background: #AAA;
  241. border: 1px solid #777;
  242. box-shadow: inset 0 0 2px #777;
  243. }
  244. /* End Scrollbar =================== */
  245. /* Code ============================ */
  246. .crayon-syntax .crayon-pre,
  247. .crayon-syntax pre {
  248. white-space: pre;
  249. margin: 0;
  250. padding: 0;
  251. overflow: visible;
  252. background: none !important;
  253. border: none !important;
  254. }
  255. .crayon-syntax .crayon-line {
  256. padding: 0 5px;
  257. }
  258. .crayon-syntax.crayon-wrapped .crayon-line {
  259. /* width: 500px !important; */
  260. white-space: pre-wrap !important;
  261. /* word-wrap:break-word !important;*/
  262. }
  263. .crayon-syntax-inline .crayon-pre,
  264. .crayon-syntax-inline pre {
  265. white-space: normal;
  266. }
  267. .crayon-syntax-inline-nowrap .crayon-pre,
  268. .crayon-syntax-inline-nowrap pre {
  269. white-space: pre;
  270. }
  271. /* Default Font */
  272. .crayon-syntax /*,
  273. .crayon-syntax **/ {
  274. font-family: Monaco, 'MonacoRegular', 'Courier New', monospace;
  275. font-weight: 500;
  276. }
  277. /*
  278. This has been disabled to allow more flexibility in changing font sizes.
  279. .crayon-syntax,
  280. .crayon-syntax .crayon-nums,
  281. .crayon-syntax .crayon-plain,
  282. .crayon-syntax .crayon-pre {
  283. font-size: 12px !important;
  284. line-height: 15px !important;
  285. }
  286. */
  287. .crayon-syntax.crayon-wrapped .crayon-line {
  288. /* min-height: 15px;*/
  289. height: auto;
  290. }
  291. .crayon-syntax .crayon-num,
  292. .crayon-syntax .crayon-pre .crayon-line,
  293. .crayon-syntax .crayon-toolbar *,
  294. .crayon-syntax .crayon-pre * {
  295. font-family: inherit;
  296. font-size: inherit !important;
  297. line-height: inherit !important;
  298. font-weight: inherit !important;
  299. }
  300. .crayon-syntax .crayon-pre .crayon-line span {
  301. display: inline-block;
  302. *display: inline;
  303. zoom: 1;
  304. }
  305. .crayon-syntax .crayon-toolbar .crayon-tools,
  306. .crayon-syntax .crayon-toolbar .crayon-tools * {
  307. height: inherit !important;
  308. }
  309. .crayon-syntax .crayon-toolbar .crayon-tools {
  310. position: absolute;
  311. right: 0;
  312. }
  313. .crayon-syntax .crayon-plain-wrap {
  314. height: auto !important;
  315. height: width !important;
  316. padding: 0 !important;
  317. margin: 0 !important;
  318. }
  319. .crayon-syntax .crayon-plain {
  320. width: 100%;
  321. height: 100%;
  322. position: absolute;
  323. opacity: 0;
  324. padding: 0 5px;
  325. margin: 0px;
  326. border: none;
  327. box-sizing: border-box;
  328. -webkit-box-sizing: border-box;
  329. -moz-box-sizing: border-box;
  330. box-shadow: none;
  331. border-radius: 0px;
  332. -webkit-box-shadow: none;
  333. -moz-box-shadow: none;
  334. /*white-space: pre-wrap;*/
  335. white-space: pre;
  336. word-wrap: normal;
  337. overflow: auto;
  338. resize: none;
  339. color: #000;
  340. background: #FFF;
  341. }
  342. .crayon-syntax.crayon-wrapped .crayon-plain {
  343. white-space: pre-wrap;
  344. }
  345. .bbp-body .crayon-syntax {
  346. clear: none !important;
  347. }
  348. /* End Code ======================== */
  349. /* End AK Code Table ============================================= */