sakura.css 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. .entry-content blockquote:before,
  2. .entry-content blockquote:after {
  3. display: block
  4. }
  5. .entry-content blockquote blockquote:before,
  6. .entry-content blockquote blockquote:after {
  7. display: none
  8. }
  9. .entry-content .begin,
  10. .single-begin {
  11. float: left;
  12. font-size: 3.6em;
  13. line-height: 1em;
  14. margin-right: 3px;
  15. margin-top: 2px;
  16. font-weight: 700
  17. }
  18. @media screen and (max-width:860px) {
  19. .entry-content .begin,
  20. .single-begin {
  21. margin-top: 6px
  22. }
  23. }
  24. .entry-content ul {
  25. list-style: disc;
  26. border: 1px solid #E4E4E4;
  27. padding: 15px 10px 30px 50px;
  28. color: #616161;
  29. margin-left: 0;
  30. border-radius: 10px
  31. }
  32. .entry-content ul ul {
  33. border: none;
  34. padding: 15px 10px 15px 30px;
  35. }
  36. .entry-content li>ul, .entry-content li>ol {
  37. border: none;
  38. padding: 0 0 0 18px;
  39. margin: 0;
  40. }
  41. .entry-content ol {
  42. list-style: decimal;
  43. border: 1px solid #E4E4E4;
  44. padding: 15px 10px 30px 50px;
  45. color: #616161;
  46. margin-left: 0;
  47. border-radius: 10px
  48. }
  49. .entry-content ol li,
  50. .entry-content ul li {
  51. padding: 15px 0 0 0;
  52. }
  53. .entry-content {
  54. position: relative
  55. }
  56. .entry-content h3,
  57. .entry-content h4,
  58. .entry-content h5 {
  59. padding-left: 16px;
  60. }
  61. .entry-content h3 {
  62. padding-bottom: 10px;
  63. }
  64. .entry-content h3:after {
  65. content: "#";
  66. position: absolute;
  67. left: 0;
  68. }
  69. .entry-content h4:after {
  70. content: ">";
  71. position: absolute;
  72. left: 0;
  73. }
  74. .entry-content h5:after {
  75. content: "~";
  76. position: absolute;
  77. left: 0;
  78. }
  79. .entry-content a {
  80. text-decoration: none;
  81. }
  82. .entry-content a:hover {
  83. text-decoration: underline;
  84. }
  85. h1.entry-title {
  86. font-size: 24px;
  87. font-weight: 300
  88. }
  89. .entry-content p {
  90. color: #3d3d3d
  91. }
  92. .entry-content p {
  93. line-height: 30px
  94. }
  95. .entry-content hr {
  96. margin-top: 40px;
  97. margin-bottom: 40px;
  98. display: block;
  99. border: 0;
  100. text-align: center;
  101. background: 0 0
  102. }
  103. .entry-content hr:before {
  104. content: '...';
  105. display: inline-block;
  106. margin-left: .6em;
  107. color: rgba(0, 0, 0, .8);
  108. position: relative;
  109. top: -30px;
  110. font-size: 28px;
  111. letter-spacing: .6em
  112. }
  113. .entry-content table {
  114. border-collapse: collapse;
  115. width: 100%;
  116. border-radius: 5px
  117. }
  118. .entry-content th,
  119. .entry-content td {
  120. padding: 8px;
  121. }
  122. .entry-content tr:nth-child(even) {
  123. background-color: #f2f2f2
  124. }
  125. body.dark .entry-content tr:nth-child(even) {
  126. background-color: unset
  127. }
  128. .entry-content th {
  129. color: white;
  130. }
  131. /*fix code block*/
  132. .entry-content pre th,
  133. .entry-content pre td {
  134. padding: 0;
  135. }
  136. .entry-content pre tr:nth-child(even) {
  137. background-color: transparent
  138. }
  139. .entry-content pre th {
  140. background-color: transparent !important;
  141. }
  142. .entry-content .highlight-wrap:before {
  143. content: " ";
  144. position: absolute;
  145. -webkit-border-radius: 50%;
  146. border-radius: 50%;
  147. background: #fc625d;
  148. width: 12px;
  149. height: 12px;
  150. left: 12px;
  151. margin-top: -18px;
  152. -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  153. box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  154. z-index: 2
  155. }
  156. .entry-content .highlight-wrap {
  157. position: relative;
  158. background: #21252b;
  159. border-radius: 5px;
  160. font: 15px/22px 'Fira Code', 'Noto Sans SC';
  161. line-height: 1.6;
  162. margin-bottom: 1.6em;
  163. max-width: 100%;
  164. overflow: auto;
  165. text-shadow: none;
  166. color: #000;
  167. padding-top: 30px;
  168. box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
  169. }
  170. .entry-content .highlight-wrap .copy-code {
  171. color: #fff;
  172. position: absolute;
  173. float: right;
  174. right: 10px;
  175. top: 0;
  176. padding-top: 4px;
  177. padding-right: 2px;
  178. z-index: 2;
  179. font-size: 16px;
  180. }
  181. .entry-content .highlight-wrap .copy-code:hover {
  182. color: rgba(255, 255, 255, .5);
  183. }
  184. .hljs-ln-line span::-moz-selection,
  185. .hljs-ln-line::-moz-selection {
  186. background: #fff;
  187. color: #21252b
  188. }
  189. .hljs-ln-line span::selection,
  190. .hljs-ln-line::selection {
  191. background: #fff;
  192. color: #21252b
  193. }
  194. .entry-content .highlight-wrap code {
  195. background: #1d1f21;
  196. color: #fff;
  197. word-break: break-word;
  198. font-family: 'Fira Code', 'Noto Sans SC';
  199. padding: 2px;
  200. text-shadow: none;
  201. border-radius: 0 0 5px 5px;
  202. }
  203. .entry-content .highlight-wrap code[data-rel]:before {
  204. color: #fff;
  205. content: attr(data-rel);
  206. height: 30px;
  207. line-height: 30px;
  208. background: #21252b;
  209. font-size: 16px;
  210. position: absolute;
  211. margin-top: -30px;
  212. left: 0;
  213. width: 100%;
  214. font-family: 'Fira Code', 'Noto Sans SC';
  215. font-weight: 700;
  216. padding: 0 80px;
  217. text-indent: 15px;
  218. text-align: center;
  219. float: left;
  220. z-index: 1;
  221. border-radius: 5px 5px 0 0;
  222. border-top-left-radius: 5px;
  223. border-top-right-radius: 5px;
  224. border-bottom-right-radius: 0;
  225. border-bottom-left-radius: 0;
  226. pointer-events: none
  227. }
  228. .hljs {
  229. display: block;
  230. overflow-x: auto;
  231. padding: .5em;
  232. color: #abb2bf;
  233. background: rgba(254, 250, 199, .5);
  234. border-radius: 10px
  235. }
  236. .hljs-comment,
  237. .hljs-quote {
  238. color: #888f96;
  239. font-style: italic
  240. }
  241. .hljs-doctag,
  242. .hljs-formula,
  243. .hljs-keyword {
  244. color: #c678dd
  245. }
  246. .hljs-deletion,
  247. .hljs-name,
  248. .hljs-section,
  249. .hljs-selector-tag,
  250. .hljs-subst {
  251. color: #e06c75
  252. }
  253. .hljs-literal {
  254. color: #56b6c2
  255. }
  256. .hljs-addition,
  257. .hljs-attribute,
  258. .hljs-meta-string,
  259. .hljs-regexp,
  260. .hljs-string {
  261. color: #98c379
  262. }
  263. .hljs-built_in,
  264. .hljs-class .hljs-title {
  265. color: #e6c07b
  266. }
  267. .hljs-attr,
  268. .hljs-number,
  269. .hljs-selector-attr,
  270. .hljs-selector-class,
  271. .hljs-selector-pseudo,
  272. .hljs-template-variable,
  273. .hljs-type,
  274. .hljs-variable {
  275. color: #d19a66
  276. }
  277. .hljs-bullet,
  278. .hljs-link,
  279. .hljs-meta,
  280. .hljs-selector-id,
  281. .hljs-symbol,
  282. .hljs-title {
  283. color: #61aeee
  284. }
  285. .hljs-emphasis {
  286. font-style: italic
  287. }
  288. .hljs-strong {
  289. font-weight: 700
  290. }
  291. .hljs-link {
  292. text-decoration: underline
  293. }
  294. .hljs-ln {
  295. margin: 6px 0 0 0 !important
  296. }
  297. td.hljs-ln-numbers {
  298. -webkit-touch-callout: none;
  299. -webkit-user-select: none;
  300. -khtml-user-select: none;
  301. -moz-user-select: none;
  302. -ms-user-select: none;
  303. user-select: none;
  304. text-align: center;
  305. color: #888f96;
  306. background: #1d1f21;
  307. font-family: 'Fira Code', 'Noto Sans SC';
  308. vertical-align: top;
  309. position: absolute;
  310. left: 0;
  311. width: 30px
  312. }
  313. .hljs-ln-code.hljs-ln-line {
  314. margin-left: 25px;
  315. padding-left: 30px
  316. }
  317. .hljs-ln-code.hljs-ln-line:hover {
  318. background-color: rgba(255, 255, 255, .1)
  319. }
  320. .code-block-fullscreen {
  321. position: fixed;
  322. top: 0;
  323. left: 0;
  324. width: 100%;
  325. height: 100%;
  326. min-width: 100%;
  327. z-index: 9999999;
  328. margin: 0;
  329. animation: elastic 1s
  330. }
  331. .code-block-fullscreen code {
  332. --widthA: 100%;
  333. --widthB: calc(var(--widthA) - 30px);
  334. height: var(--widthB);
  335. min-height: 99%;
  336. overflow-y: hidden;
  337. overflow-x: auto;
  338. height: auto
  339. }
  340. .code-block-fullscreen-html-scroll {
  341. overflow: hidden
  342. }