main.css 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441
  1. :root {
  2. --body-bg-color: #fff;
  3. --content-bg-color: #fff;
  4. --card-bg-color: #f5f5f5;
  5. --text-color: #555;
  6. --link-color: #555;
  7. --link-hover-color: #222;
  8. --brand-color: #fff;
  9. --brand-hover-color: #fff;
  10. --table-row-odd-bg-color: #f9f9f9;
  11. --table-row-hover-bg-color: #f5f5f5;
  12. --menu-item-bg-color: #f5f5f5;
  13. }
  14. @media (prefers-color-scheme: dark) {
  15. :root {
  16. --body-bg-color: #121212;
  17. --content-bg-color: #1d1d1d;
  18. --card-bg-color: #282828;
  19. --text-color: #e1e1e1;
  20. --link-color: #e1e1e1;
  21. --link-hover-color: #fff;
  22. --brand-color: #fff;
  23. --brand-hover-color: #fff;
  24. --table-row-odd-bg-color: #282828;
  25. --table-row-hover-bg-color: #363636;
  26. --menu-item-bg-color: #333;
  27. }
  28. img {
  29. opacity: 0.75;
  30. }
  31. img:hover {
  32. opacity: 1;
  33. }
  34. }
  35. html {
  36. line-height: 1.15; /* 1 */
  37. -webkit-text-size-adjust: 100%; /* 2 */
  38. }
  39. body {
  40. margin: 0;
  41. }
  42. main {
  43. display: block;
  44. }
  45. h1 {
  46. font-size: 2em;
  47. margin: 0.67em 0;
  48. }
  49. hr {
  50. box-sizing: content-box; /* 1 */
  51. height: 0; /* 1 */
  52. overflow: visible; /* 2 */
  53. }
  54. pre {
  55. font-family: monospace, monospace; /* 1 */
  56. font-size: 1em; /* 2 */
  57. }
  58. a {
  59. background: transparent;
  60. }
  61. abbr[title] {
  62. border-bottom: none; /* 1 */
  63. text-decoration: underline; /* 2 */
  64. text-decoration: underline dotted; /* 2 */
  65. }
  66. b,
  67. strong {
  68. font-weight: bolder;
  69. }
  70. code,
  71. kbd,
  72. samp {
  73. font-family: monospace, monospace; /* 1 */
  74. font-size: 1em; /* 2 */
  75. }
  76. small {
  77. font-size: 80%;
  78. }
  79. sub,
  80. sup {
  81. font-size: 75%;
  82. line-height: 0;
  83. position: relative;
  84. vertical-align: baseline;
  85. }
  86. sub {
  87. bottom: -0.25em;
  88. }
  89. sup {
  90. top: -0.5em;
  91. }
  92. img {
  93. border-style: none;
  94. }
  95. button,
  96. input,
  97. optgroup,
  98. select,
  99. textarea {
  100. font-family: inherit; /* 1 */
  101. font-size: 100%; /* 1 */
  102. line-height: 1.15; /* 1 */
  103. margin: 0; /* 2 */
  104. }
  105. button,
  106. input {
  107. /* 1 */
  108. overflow: visible;
  109. }
  110. button,
  111. select {
  112. /* 1 */
  113. text-transform: none;
  114. }
  115. button,
  116. [type='button'],
  117. [type='reset'],
  118. [type='submit'] {
  119. -webkit-appearance: button;
  120. }
  121. button::-moz-focus-inner,
  122. [type='button']::-moz-focus-inner,
  123. [type='reset']::-moz-focus-inner,
  124. [type='submit']::-moz-focus-inner {
  125. border-style: none;
  126. padding: 0;
  127. }
  128. button:-moz-focusring,
  129. [type='button']:-moz-focusring,
  130. [type='reset']:-moz-focusring,
  131. [type='submit']:-moz-focusring {
  132. outline: 1px dotted ButtonText;
  133. }
  134. fieldset {
  135. padding: 0.35em 0.75em 0.625em;
  136. }
  137. legend {
  138. box-sizing: border-box; /* 1 */
  139. color: inherit; /* 2 */
  140. display: table; /* 1 */
  141. max-width: 100%; /* 1 */
  142. padding: 0; /* 3 */
  143. white-space: normal; /* 1 */
  144. }
  145. progress {
  146. vertical-align: baseline;
  147. }
  148. textarea {
  149. overflow: auto;
  150. }
  151. [type='checkbox'],
  152. [type='radio'] {
  153. box-sizing: border-box; /* 1 */
  154. padding: 0; /* 2 */
  155. }
  156. [type='number']::-webkit-inner-spin-button,
  157. [type='number']::-webkit-outer-spin-button {
  158. height: auto;
  159. }
  160. [type='search'] {
  161. outline-offset: -2px; /* 2 */
  162. -webkit-appearance: textfield; /* 1 */
  163. }
  164. [type='search']::-webkit-search-decoration {
  165. -webkit-appearance: none;
  166. }
  167. ::-webkit-file-upload-button {
  168. font: inherit; /* 2 */
  169. -webkit-appearance: button; /* 1 */
  170. }
  171. details {
  172. display: block;
  173. }
  174. summary {
  175. display: list-item;
  176. }
  177. template {
  178. display: none;
  179. }
  180. [hidden] {
  181. display: none;
  182. }
  183. ::selection {
  184. background: #262a30;
  185. color: #fff;
  186. }
  187. html,
  188. body {
  189. height: 100%;
  190. }
  191. body {
  192. background: var(--body-bg-color);
  193. color: var(--text-color);
  194. font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  195. font-size: 1em;
  196. line-height: 2;
  197. }
  198. @media (max-width: 991px) {
  199. body {
  200. padding-left: 0 !important;
  201. padding-right: 0 !important;
  202. }
  203. }
  204. h1,
  205. h2,
  206. h3,
  207. h4,
  208. h5,
  209. h6 {
  210. font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  211. font-weight: bold;
  212. line-height: 1.5;
  213. margin: 20px 0 15px;
  214. }
  215. h1 {
  216. font-size: 1.5em;
  217. }
  218. h2 {
  219. font-size: 1.375em;
  220. }
  221. h3 {
  222. font-size: 1.25em;
  223. }
  224. h4 {
  225. font-size: 1.125em;
  226. }
  227. h5 {
  228. font-size: 1em;
  229. }
  230. h6 {
  231. font-size: 0.875em;
  232. }
  233. p {
  234. margin: 0 0 20px 0;
  235. }
  236. a,
  237. span.exturl {
  238. border-bottom: 1px solid #999;
  239. color: var(--link-color);
  240. outline: 0;
  241. text-decoration: none;
  242. overflow-wrap: break-word;
  243. word-wrap: break-word;
  244. cursor: pointer;
  245. }
  246. a:hover,
  247. span.exturl:hover {
  248. border-bottom-color: var(--link-hover-color);
  249. color: var(--link-hover-color);
  250. }
  251. iframe,
  252. img,
  253. video {
  254. display: block;
  255. margin-left: auto;
  256. margin-right: auto;
  257. max-width: 100%;
  258. }
  259. hr {
  260. background-image: repeating-linear-gradient(-45deg, #ddd, #ddd 4px, transparent 4px, transparent 8px);
  261. border: 0;
  262. height: 3px;
  263. margin: 40px 0;
  264. }
  265. blockquote {
  266. border-left: 4px solid #ddd;
  267. color: #666;
  268. margin: 0;
  269. padding: 0 15px;
  270. }
  271. blockquote cite::before {
  272. content: '-';
  273. padding: 0 5px;
  274. }
  275. dt {
  276. font-weight: bold;
  277. }
  278. dd {
  279. margin: 0;
  280. padding: 0;
  281. }
  282. kbd {
  283. background-color: #f5f5f5;
  284. background-image: linear-gradient(#eee, #fff, #eee);
  285. border: 1px solid #ccc;
  286. border-radius: 0.2em;
  287. box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
  288. font-family: inherit;
  289. padding: 0.1em 0.3em;
  290. white-space: nowrap;
  291. }
  292. .table-container {
  293. overflow: auto;
  294. }
  295. table {
  296. border-collapse: collapse;
  297. border-spacing: 0;
  298. font-size: 0.875em;
  299. margin: 0 0 20px 0;
  300. width: 100%;
  301. }
  302. tbody tr:nth-of-type(odd) {
  303. background: var(--table-row-odd-bg-color);
  304. }
  305. tbody tr:hover {
  306. background: var(--table-row-hover-bg-color);
  307. }
  308. caption,
  309. th,
  310. td {
  311. font-weight: normal;
  312. padding: 8px;
  313. text-align: left;
  314. vertical-align: middle;
  315. }
  316. th,
  317. td {
  318. border: 1px solid #ddd;
  319. border-bottom: 3px solid #ddd;
  320. }
  321. th {
  322. font-weight: 700;
  323. padding-bottom: 10px;
  324. }
  325. td {
  326. border-bottom-width: 1px;
  327. }
  328. .btn {
  329. background: #222;
  330. border: 2px solid #222;
  331. border-radius: 0;
  332. color: #fff;
  333. display: inline-block;
  334. font-size: 0.875em;
  335. line-height: 2;
  336. padding: 0 20px;
  337. text-decoration: none;
  338. transition-property: background-color;
  339. transition-delay: 0s;
  340. transition-duration: 0.2s;
  341. transition-timing-function: ease-in-out;
  342. }
  343. .btn:hover {
  344. background: #fff;
  345. border-color: #222;
  346. color: #222;
  347. }
  348. .btn + .btn {
  349. margin: 0 0 8px 8px;
  350. }
  351. .btn .fa-fw {
  352. text-align: left;
  353. width: 1.285714285714286em;
  354. }
  355. .toggle {
  356. line-height: 0;
  357. }
  358. .toggle .toggle-line {
  359. background: #fff;
  360. display: inline-block;
  361. height: 2px;
  362. left: 0;
  363. position: relative;
  364. top: 0;
  365. transition: all 0.4s;
  366. vertical-align: top;
  367. width: 100%;
  368. }
  369. .toggle .toggle-line:not(:first-child) {
  370. margin-top: 3px;
  371. }
  372. .toggle.toggle-arrow .toggle-line-first {
  373. left: 50%;
  374. top: 2px;
  375. transform: rotate(45deg);
  376. width: 50%;
  377. }
  378. .toggle.toggle-arrow .toggle-line-middle {
  379. left: 2px;
  380. width: 90%;
  381. }
  382. .toggle.toggle-arrow .toggle-line-last {
  383. left: 50%;
  384. top: -2px;
  385. transform: rotate(-45deg);
  386. width: 50%;
  387. }
  388. .toggle.toggle-close .toggle-line-first {
  389. transform: rotate(-45deg);
  390. top: 5px;
  391. }
  392. .toggle.toggle-close .toggle-line-middle {
  393. opacity: 0;
  394. }
  395. .toggle.toggle-close .toggle-line-last {
  396. transform: rotate(45deg);
  397. top: -5px;
  398. }
  399. .highlight-container {
  400. position: relative;
  401. }
  402. .highlight-container:hover .copy-btn,
  403. .highlight-container .copy-btn:focus {
  404. opacity: 1;
  405. }
  406. .copy-btn {
  407. color: #333;
  408. cursor: pointer;
  409. display: inline-block;
  410. font-weight: bold;
  411. line-height: 1.6;
  412. opacity: 0;
  413. outline: 0;
  414. padding: 2px 6px;
  415. position: absolute;
  416. vertical-align: middle;
  417. white-space: nowrap;
  418. -moz-user-select: none;
  419. -ms-user-select: none;
  420. -webkit-user-select: none;
  421. user-select: none;
  422. transition-delay: 0s;
  423. transition-duration: 0.2s;
  424. transition-timing-function: ease-in-out;
  425. background-color: #eee;
  426. background-image: linear-gradient(#fcfcfc, #eee);
  427. border: 1px solid #d5d5d5;
  428. border-radius: 3px;
  429. font-size: 0.8125em;
  430. right: 4px;
  431. top: 8px;
  432. }
  433. .highlight,
  434. pre {
  435. background: #1d1f21;
  436. color: #c5c8c6;
  437. line-height: 1.6;
  438. margin: 0 auto 20px;
  439. }
  440. pre,
  441. code {
  442. font-family: consolas, Menlo, monospace, "PingFang SC", "Microsoft YaHei";
  443. }
  444. code {
  445. background: #eee;
  446. border-radius: 3px;
  447. color: #555;
  448. padding: 2px 4px;
  449. overflow-wrap: break-word;
  450. word-wrap: break-word;
  451. }
  452. .highlight *::selection {
  453. background: #373b41;
  454. }
  455. .highlight pre {
  456. border: 0;
  457. margin: 0;
  458. padding: 10px 0;
  459. }
  460. .highlight table {
  461. border: 0;
  462. margin: 0;
  463. width: auto;
  464. }
  465. .highlight td {
  466. border: 0;
  467. padding: 0;
  468. }
  469. .highlight figcaption {
  470. background: #eee;
  471. color: #c5c8c6;
  472. display: flex;
  473. font-size: 0.875em;
  474. justify-content: space-between;
  475. line-height: 1.2;
  476. padding: 0.5em;
  477. }
  478. .highlight figcaption a {
  479. color: #c5c8c6;
  480. }
  481. .highlight figcaption a:hover {
  482. border-bottom-color: #c5c8c6;
  483. }
  484. .highlight .gutter {
  485. -moz-user-select: none;
  486. -ms-user-select: none;
  487. -webkit-user-select: none;
  488. user-select: none;
  489. }
  490. .highlight .gutter pre {
  491. background: #000;
  492. color: #888f96;
  493. padding-left: 10px;
  494. padding-right: 10px;
  495. text-align: right;
  496. }
  497. .highlight .code pre {
  498. background: #1d1f21;
  499. padding-left: 10px;
  500. width: 100%;
  501. }
  502. .gist table {
  503. width: auto;
  504. }
  505. .gist table td {
  506. border: 0;
  507. }
  508. pre {
  509. overflow: auto;
  510. padding: 10px;
  511. }
  512. pre code {
  513. background: none;
  514. color: #c5c8c6;
  515. font-size: 0.875em;
  516. padding: 0;
  517. text-shadow: none;
  518. }
  519. pre .deletion {
  520. background: #800000;
  521. }
  522. pre .addition {
  523. background: #008000;
  524. }
  525. pre .meta {
  526. color: #f0c674;
  527. -moz-user-select: none;
  528. -ms-user-select: none;
  529. -webkit-user-select: none;
  530. user-select: none;
  531. }
  532. pre .comment {
  533. color: #969896;
  534. }
  535. pre .variable,
  536. pre .attribute,
  537. pre .tag,
  538. pre .name,
  539. pre .regexp,
  540. pre .ruby .constant,
  541. pre .xml .tag .title,
  542. pre .xml .pi,
  543. pre .xml .doctype,
  544. pre .html .doctype,
  545. pre .css .id,
  546. pre .css .class,
  547. pre .css .pseudo {
  548. color: #c66;
  549. }
  550. pre .number,
  551. pre .preprocessor,
  552. pre .built_in,
  553. pre .builtin-name,
  554. pre .literal,
  555. pre .params,
  556. pre .constant,
  557. pre .command {
  558. color: #de935f;
  559. }
  560. pre .ruby .class .title,
  561. pre .css .rules .attribute,
  562. pre .string,
  563. pre .symbol,
  564. pre .value,
  565. pre .inheritance,
  566. pre .header,
  567. pre .ruby .symbol,
  568. pre .xml .cdata,
  569. pre .special,
  570. pre .formula {
  571. color: #b5bd68;
  572. }
  573. pre .title,
  574. pre .css .hexcolor {
  575. color: #8abeb7;
  576. }
  577. pre .function,
  578. pre .python .decorator,
  579. pre .python .title,
  580. pre .ruby .function .title,
  581. pre .ruby .title .keyword,
  582. pre .perl .sub,
  583. pre .javascript .title,
  584. pre .coffeescript .title {
  585. color: #81a2be;
  586. }
  587. pre .keyword,
  588. pre .javascript .function {
  589. color: #b294bb;
  590. }
  591. .blockquote-center {
  592. border-left: none;
  593. margin: 40px 0;
  594. padding: 0;
  595. position: relative;
  596. text-align: center;
  597. }
  598. .blockquote-center::before,
  599. .blockquote-center::after {
  600. background-repeat: no-repeat;
  601. background-size: 22px 22px;
  602. content: ' ';
  603. display: block;
  604. height: 24px;
  605. opacity: 0.2;
  606. position: absolute;
  607. width: 100%;
  608. }
  609. .blockquote-center::before {
  610. background-image: url("../images/quote-l.svg");
  611. background-position: 0 -6px;
  612. border-top: 1px solid #ccc;
  613. top: -20px;
  614. }
  615. .blockquote-center::after {
  616. background-image: url("../images/quote-r.svg");
  617. background-position: 100% 8px;
  618. border-bottom: 1px solid #ccc;
  619. bottom: -20px;
  620. }
  621. .blockquote-center p,
  622. .blockquote-center div {
  623. text-align: center;
  624. }
  625. .post-body .group-picture img {
  626. margin: 0 auto;
  627. padding: 0 3px;
  628. }
  629. .group-picture-row {
  630. margin-bottom: 6px;
  631. overflow: hidden;
  632. }
  633. .group-picture-column {
  634. float: left;
  635. margin-bottom: 10px;
  636. }
  637. .post-body .label {
  638. color: #555;
  639. display: inline;
  640. padding: 0 2px;
  641. }
  642. .post-body .label.default {
  643. background: #f0f0f0;
  644. }
  645. .post-body .label.primary {
  646. background: #efe6f7;
  647. }
  648. .post-body .label.info {
  649. background: #e5f2f8;
  650. }
  651. .post-body .label.success {
  652. background: #e7f4e9;
  653. }
  654. .post-body .label.warning {
  655. background: #fcf6e1;
  656. }
  657. .post-body .label.danger {
  658. background: #fae8eb;
  659. }
  660. .post-body .tabs {
  661. margin-bottom: 20px;
  662. }
  663. .post-body .tabs,
  664. .tabs-comment {
  665. display: block;
  666. padding-top: 10px;
  667. position: relative;
  668. }
  669. .post-body .tabs ul.nav-tabs,
  670. .tabs-comment ul.nav-tabs {
  671. display: flex;
  672. flex-wrap: wrap;
  673. margin: 0;
  674. margin-bottom: -1px;
  675. padding: 0;
  676. }
  677. @media (max-width: 413px) {
  678. .post-body .tabs ul.nav-tabs,
  679. .tabs-comment ul.nav-tabs {
  680. display: block;
  681. margin-bottom: 5px;
  682. }
  683. }
  684. .post-body .tabs ul.nav-tabs li.tab,
  685. .tabs-comment ul.nav-tabs li.tab {
  686. border-bottom: 1px solid #ddd;
  687. border-left: 1px solid transparent;
  688. border-right: 1px solid transparent;
  689. border-top: 3px solid transparent;
  690. flex-grow: 1;
  691. list-style-type: none;
  692. border-radius: 0 0 0 0;
  693. }
  694. @media (max-width: 413px) {
  695. .post-body .tabs ul.nav-tabs li.tab,
  696. .tabs-comment ul.nav-tabs li.tab {
  697. border-bottom: 1px solid transparent;
  698. border-left: 3px solid transparent;
  699. border-right: 1px solid transparent;
  700. border-top: 1px solid transparent;
  701. }
  702. }
  703. @media (max-width: 413px) {
  704. .post-body .tabs ul.nav-tabs li.tab,
  705. .tabs-comment ul.nav-tabs li.tab {
  706. border-radius: 0;
  707. }
  708. }
  709. .post-body .tabs ul.nav-tabs li.tab a,
  710. .tabs-comment ul.nav-tabs li.tab a {
  711. border-bottom: initial;
  712. display: block;
  713. line-height: 1.8;
  714. outline: 0;
  715. padding: 0.25em 0.75em;
  716. text-align: center;
  717. transition-delay: 0s;
  718. transition-duration: 0.2s;
  719. transition-timing-function: ease-out;
  720. }
  721. .post-body .tabs ul.nav-tabs li.tab a i,
  722. .tabs-comment ul.nav-tabs li.tab a i {
  723. width: 1.285714285714286em;
  724. }
  725. .post-body .tabs ul.nav-tabs li.tab.active,
  726. .tabs-comment ul.nav-tabs li.tab.active {
  727. border-bottom: 1px solid transparent;
  728. border-left: 1px solid #ddd;
  729. border-right: 1px solid #ddd;
  730. border-top: 3px solid #fc6423;
  731. }
  732. @media (max-width: 413px) {
  733. .post-body .tabs ul.nav-tabs li.tab.active,
  734. .tabs-comment ul.nav-tabs li.tab.active {
  735. border-bottom: 1px solid #ddd;
  736. border-left: 3px solid #fc6423;
  737. border-right: 1px solid #ddd;
  738. border-top: 1px solid #ddd;
  739. }
  740. }
  741. .post-body .tabs ul.nav-tabs li.tab.active a,
  742. .tabs-comment ul.nav-tabs li.tab.active a {
  743. color: var(--link-color);
  744. cursor: default;
  745. }
  746. .post-body .tabs .tab-content .tab-pane,
  747. .tabs-comment .tab-content .tab-pane {
  748. border: 1px solid #ddd;
  749. border-top: 0;
  750. padding: 20px 20px 0 20px;
  751. border-radius: 0;
  752. }
  753. .post-body .tabs .tab-content .tab-pane:not(.active),
  754. .tabs-comment .tab-content .tab-pane:not(.active) {
  755. display: none;
  756. }
  757. .post-body .tabs .tab-content .tab-pane.active,
  758. .tabs-comment .tab-content .tab-pane.active {
  759. display: block;
  760. }
  761. .post-body .tabs .tab-content .tab-pane.active:nth-of-type(1),
  762. .tabs-comment .tab-content .tab-pane.active:nth-of-type(1) {
  763. border-radius: 0 0 0 0;
  764. }
  765. @media (max-width: 413px) {
  766. .post-body .tabs .tab-content .tab-pane.active:nth-of-type(1),
  767. .tabs-comment .tab-content .tab-pane.active:nth-of-type(1) {
  768. border-radius: 0;
  769. }
  770. }
  771. .post-body .note {
  772. border-radius: 3px;
  773. margin-bottom: 20px;
  774. padding: 1em;
  775. position: relative;
  776. background: #f9f9f9;
  777. border: initial;
  778. border-left: 3px solid #eee;
  779. }
  780. .post-body .note h2,
  781. .post-body .note h3,
  782. .post-body .note h4,
  783. .post-body .note h5,
  784. .post-body .note h6 {
  785. margin-top: 3px;
  786. border-bottom: initial;
  787. margin-bottom: 0;
  788. padding-top: 0;
  789. }
  790. .post-body .note p:first-child,
  791. .post-body .note ul:first-child,
  792. .post-body .note ol:first-child,
  793. .post-body .note table:first-child,
  794. .post-body .note pre:first-child,
  795. .post-body .note blockquote:first-child,
  796. .post-body .note img:first-child {
  797. margin-top: 0;
  798. }
  799. .post-body .note p:last-child,
  800. .post-body .note ul:last-child,
  801. .post-body .note ol:last-child,
  802. .post-body .note table:last-child,
  803. .post-body .note pre:last-child,
  804. .post-body .note blockquote:last-child,
  805. .post-body .note img:last-child {
  806. margin-bottom: 0;
  807. }
  808. .post-body .note:not(.no-icon) {
  809. padding-left: 2.5em;
  810. }
  811. .post-body .note:not(.no-icon)::before {
  812. font-family: 'FontAwesome';
  813. font-size: 1.5em;
  814. left: 0.4em;
  815. position: absolute;
  816. top: calc(50% - 1em);
  817. }
  818. .post-body .note.default {
  819. background: #f7f7f7;
  820. border-left-color: #777;
  821. }
  822. .post-body .note.default h2,
  823. .post-body .note.default h3,
  824. .post-body .note.default h4,
  825. .post-body .note.default h5,
  826. .post-body .note.default h6 {
  827. color: #777;
  828. }
  829. .post-body .note.default:not(.no-icon)::before {
  830. content: "\f0a9";
  831. color: #777;
  832. }
  833. .post-body .note.primary {
  834. background: #f5f0fa;
  835. border-left-color: #6f42c1;
  836. }
  837. .post-body .note.primary h2,
  838. .post-body .note.primary h3,
  839. .post-body .note.primary h4,
  840. .post-body .note.primary h5,
  841. .post-body .note.primary h6 {
  842. color: #6f42c1;
  843. }
  844. .post-body .note.primary:not(.no-icon)::before {
  845. content: "\f055";
  846. color: #6f42c1;
  847. }
  848. .post-body .note.info {
  849. background: #eef7fa;
  850. border-left-color: #428bca;
  851. }
  852. .post-body .note.info h2,
  853. .post-body .note.info h3,
  854. .post-body .note.info h4,
  855. .post-body .note.info h5,
  856. .post-body .note.info h6 {
  857. color: #428bca;
  858. }
  859. .post-body .note.info:not(.no-icon)::before {
  860. content: "\f05a";
  861. color: #428bca;
  862. }
  863. .post-body .note.success {
  864. background: #eff8f0;
  865. border-left-color: #5cb85c;
  866. }
  867. .post-body .note.success h2,
  868. .post-body .note.success h3,
  869. .post-body .note.success h4,
  870. .post-body .note.success h5,
  871. .post-body .note.success h6 {
  872. color: #5cb85c;
  873. }
  874. .post-body .note.success:not(.no-icon)::before {
  875. content: "\f058";
  876. color: #5cb85c;
  877. }
  878. .post-body .note.warning {
  879. background: #fdf8ea;
  880. border-left-color: #f0ad4e;
  881. }
  882. .post-body .note.warning h2,
  883. .post-body .note.warning h3,
  884. .post-body .note.warning h4,
  885. .post-body .note.warning h5,
  886. .post-body .note.warning h6 {
  887. color: #f0ad4e;
  888. }
  889. .post-body .note.warning:not(.no-icon)::before {
  890. content: "\f06a";
  891. color: #f0ad4e;
  892. }
  893. .post-body .note.danger {
  894. background: #fcf1f2;
  895. border-left-color: #d9534f;
  896. }
  897. .post-body .note.danger h2,
  898. .post-body .note.danger h3,
  899. .post-body .note.danger h4,
  900. .post-body .note.danger h5,
  901. .post-body .note.danger h6 {
  902. color: #d9534f;
  903. }
  904. .post-body .note.danger:not(.no-icon)::before {
  905. content: "\f056";
  906. color: #d9534f;
  907. }
  908. .pagination .prev,
  909. .pagination .next,
  910. .pagination .page-number,
  911. .pagination .space {
  912. display: inline-block;
  913. margin: 0 10px;
  914. padding: 0 11px;
  915. position: relative;
  916. top: -1px;
  917. }
  918. @media (max-width: 767px) {
  919. .pagination .prev,
  920. .pagination .next,
  921. .pagination .page-number,
  922. .pagination .space {
  923. margin: 0 5px;
  924. }
  925. }
  926. .pagination {
  927. border-top: 1px solid #eee;
  928. margin: 120px 0 0;
  929. text-align: center;
  930. }
  931. .pagination .prev,
  932. .pagination .next,
  933. .pagination .page-number {
  934. border-bottom: 0;
  935. border-top: 1px solid #eee;
  936. transition-property: border-color;
  937. transition-delay: 0s;
  938. transition-duration: 0.2s;
  939. transition-timing-function: ease-in-out;
  940. }
  941. .pagination .prev:hover,
  942. .pagination .next:hover,
  943. .pagination .page-number:hover {
  944. border-top-color: #222;
  945. }
  946. .pagination .space {
  947. margin: 0;
  948. padding: 0;
  949. }
  950. .pagination .prev {
  951. margin-left: 0;
  952. }
  953. .pagination .next {
  954. margin-right: 0;
  955. }
  956. .pagination .page-number.current {
  957. background: #ccc;
  958. border-top-color: #ccc;
  959. color: #fff;
  960. }
  961. @media (max-width: 767px) {
  962. .pagination {
  963. border-top: none;
  964. }
  965. .pagination .prev,
  966. .pagination .next,
  967. .pagination .page-number {
  968. border-bottom: 1px solid #eee;
  969. border-top: 0;
  970. margin-bottom: 10px;
  971. padding: 0 10px;
  972. }
  973. .pagination .prev:hover,
  974. .pagination .next:hover,
  975. .pagination .page-number:hover {
  976. border-bottom-color: #222;
  977. }
  978. }
  979. .comments {
  980. margin: 60px 20px 0;
  981. overflow: hidden;
  982. }
  983. .comment-button-group {
  984. display: flex;
  985. flex-wrap: wrap-reverse;
  986. justify-content: center;
  987. margin: 1em 0;
  988. }
  989. .comment-button-group .comment-button {
  990. margin: 0.1em 0.2em;
  991. }
  992. .comment-button-group .comment-button.active {
  993. background: #fff;
  994. border-color: #222;
  995. color: #222;
  996. }
  997. .comment-position {
  998. display: none;
  999. }
  1000. .comment-position.active {
  1001. display: block;
  1002. }
  1003. .tabs-comment {
  1004. background: var(--content-bg-color);
  1005. margin-top: 4em;
  1006. padding-top: 0;
  1007. }
  1008. .tabs-comment .comments {
  1009. border: 0;
  1010. box-shadow: none;
  1011. margin-top: 0;
  1012. padding-top: 0;
  1013. }
  1014. .container {
  1015. min-height: 100%;
  1016. position: relative;
  1017. }
  1018. .main-inner {
  1019. margin: 0 auto;
  1020. width: 700px;
  1021. }
  1022. @media (min-width: 1200px) {
  1023. .main-inner {
  1024. width: 800px;
  1025. }
  1026. }
  1027. @media (min-width: 1600px) {
  1028. .main-inner {
  1029. width: 900px;
  1030. }
  1031. }
  1032. .header {
  1033. background: transparent;
  1034. }
  1035. .header-inner {
  1036. margin: 0 auto;
  1037. width: 700px;
  1038. }
  1039. @media (min-width: 1200px) {
  1040. .header-inner {
  1041. width: 800px;
  1042. }
  1043. }
  1044. @media (min-width: 1600px) {
  1045. .header-inner {
  1046. width: 900px;
  1047. }
  1048. }
  1049. .site-brand-container {
  1050. display: flex;
  1051. flex-shrink: 0;
  1052. padding: 0 10px;
  1053. }
  1054. .headband {
  1055. background: #222;
  1056. height: 3px;
  1057. }
  1058. .site-meta {
  1059. flex-grow: 1;
  1060. text-align: center;
  1061. }
  1062. @media (max-width: 767px) {
  1063. .site-meta {
  1064. text-align: center;
  1065. }
  1066. }
  1067. .brand {
  1068. border-bottom: none;
  1069. color: var(--brand-color);
  1070. display: inline-block;
  1071. line-height: 1.375em;
  1072. padding: 0 40px;
  1073. position: relative;
  1074. }
  1075. .brand:hover {
  1076. color: var(--brand-hover-color);
  1077. }
  1078. .site-title {
  1079. display: inline-block;
  1080. font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  1081. font-size: 1.375em;
  1082. font-weight: normal;
  1083. line-height: 1.5;
  1084. vertical-align: top;
  1085. }
  1086. .site-subtitle {
  1087. color: #999;
  1088. font-size: 0.8125em;
  1089. margin: 10px 0;
  1090. }
  1091. .use-motion .brand {
  1092. opacity: 0;
  1093. }
  1094. .use-motion .site-title,
  1095. .use-motion .site-subtitle,
  1096. .use-motion .custom-logo-image {
  1097. opacity: 0;
  1098. position: relative;
  1099. top: -10px;
  1100. }
  1101. .site-nav-toggle,
  1102. .site-nav-right {
  1103. display: none;
  1104. }
  1105. @media (max-width: 767px) {
  1106. .site-nav-toggle,
  1107. .site-nav-right {
  1108. display: flex;
  1109. flex-direction: column;
  1110. justify-content: center;
  1111. }
  1112. }
  1113. .site-nav-toggle .toggle,
  1114. .site-nav-right .toggle {
  1115. color: var(--text-color);
  1116. padding: 10px;
  1117. width: 22px;
  1118. }
  1119. .site-nav-toggle .toggle .toggle-line,
  1120. .site-nav-right .toggle .toggle-line {
  1121. background: var(--text-color);
  1122. border-radius: 1px;
  1123. }
  1124. .site-nav {
  1125. display: block;
  1126. }
  1127. @media (max-width: 767px) {
  1128. .site-nav {
  1129. clear: both;
  1130. display: none;
  1131. }
  1132. }
  1133. .site-nav.site-nav-on {
  1134. display: block;
  1135. }
  1136. .menu {
  1137. margin-top: 20px;
  1138. padding-left: 0;
  1139. text-align: center;
  1140. }
  1141. .menu-item {
  1142. display: inline-block;
  1143. list-style: none;
  1144. margin: 0 10px;
  1145. }
  1146. @media (max-width: 767px) {
  1147. .menu-item {
  1148. display: block;
  1149. margin-top: 10px;
  1150. }
  1151. .menu-item.menu-item-search {
  1152. display: none;
  1153. }
  1154. }
  1155. .menu-item a,
  1156. .menu-item span.exturl {
  1157. border-bottom: 0;
  1158. display: block;
  1159. font-size: 0.8125em;
  1160. transition-property: border-color;
  1161. transition-delay: 0s;
  1162. transition-duration: 0.2s;
  1163. transition-timing-function: ease-in-out;
  1164. }
  1165. @media (hover: none) {
  1166. .menu-item a:hover,
  1167. .menu-item span.exturl:hover {
  1168. border-bottom-color: transparent !important;
  1169. }
  1170. }
  1171. .menu-item .fa {
  1172. margin-right: 8px;
  1173. }
  1174. .menu-item .badge {
  1175. display: inline-block;
  1176. font-weight: bold;
  1177. line-height: 1;
  1178. margin-left: 0.35em;
  1179. margin-top: 0.35em;
  1180. text-align: center;
  1181. white-space: nowrap;
  1182. }
  1183. @media (max-width: 767px) {
  1184. .menu-item .badge {
  1185. float: right;
  1186. margin-left: 0;
  1187. }
  1188. }
  1189. .menu-item-active a,
  1190. .menu .menu-item a:hover,
  1191. .menu .menu-item span.exturl:hover {
  1192. background: var(--menu-item-bg-color);
  1193. }
  1194. .use-motion .menu-item {
  1195. opacity: 0;
  1196. }
  1197. .github-corner :hover .octo-arm {
  1198. animation: octocat-wave 560ms ease-in-out;
  1199. }
  1200. .github-corner svg {
  1201. border: 0;
  1202. color: #fff;
  1203. fill: #222;
  1204. position: absolute;
  1205. right: 0;
  1206. top: 0;
  1207. z-index: 1000;
  1208. }
  1209. @media (max-width: 991px) {
  1210. .github-corner .github-corner:hover .octo-arm {
  1211. animation: none;
  1212. }
  1213. .github-corner .github-corner .octo-arm {
  1214. animation: octocat-wave 560ms ease-in-out;
  1215. }
  1216. }
  1217. @-moz-keyframes octocat-wave {
  1218. 0%, 100% {
  1219. transform: rotate(0);
  1220. }
  1221. 20%, 60% {
  1222. transform: rotate(-25deg);
  1223. }
  1224. 40%, 80% {
  1225. transform: rotate(10deg);
  1226. }
  1227. }
  1228. @-webkit-keyframes octocat-wave {
  1229. 0%, 100% {
  1230. transform: rotate(0);
  1231. }
  1232. 20%, 60% {
  1233. transform: rotate(-25deg);
  1234. }
  1235. 40%, 80% {
  1236. transform: rotate(10deg);
  1237. }
  1238. }
  1239. @-o-keyframes octocat-wave {
  1240. 0%, 100% {
  1241. transform: rotate(0);
  1242. }
  1243. 20%, 60% {
  1244. transform: rotate(-25deg);
  1245. }
  1246. 40%, 80% {
  1247. transform: rotate(10deg);
  1248. }
  1249. }
  1250. @keyframes octocat-wave {
  1251. 0%, 100% {
  1252. transform: rotate(0);
  1253. }
  1254. 20%, 60% {
  1255. transform: rotate(-25deg);
  1256. }
  1257. 40%, 80% {
  1258. transform: rotate(10deg);
  1259. }
  1260. }
  1261. .sidebar {
  1262. background: #222;
  1263. bottom: 0;
  1264. box-shadow: inset 0 2px 6px #000;
  1265. position: fixed;
  1266. top: 0;
  1267. }
  1268. @media (max-width: 991px) {
  1269. .sidebar {
  1270. display: none;
  1271. }
  1272. }
  1273. .sidebar-inner {
  1274. color: #999;
  1275. padding: 18px 10px;
  1276. text-align: center;
  1277. }
  1278. .cc-license {
  1279. margin-top: 10px;
  1280. text-align: center;
  1281. }
  1282. .cc-license .cc-opacity {
  1283. border-bottom: none;
  1284. opacity: 0.7;
  1285. }
  1286. .cc-license .cc-opacity:hover {
  1287. opacity: 0.9;
  1288. }
  1289. .cc-license img {
  1290. display: inline-block;
  1291. }
  1292. .site-author-image {
  1293. border: 2px solid #333;
  1294. display: block;
  1295. margin: 0 auto;
  1296. max-width: 96px;
  1297. padding: 2px;
  1298. }
  1299. .site-author-name {
  1300. color: #f5f5f5;
  1301. font-weight: normal;
  1302. margin: 5px 0 0;
  1303. text-align: center;
  1304. }
  1305. .site-description {
  1306. color: #999;
  1307. font-size: 1em;
  1308. margin-top: 5px;
  1309. text-align: center;
  1310. }
  1311. .links-of-author {
  1312. margin-top: 15px;
  1313. }
  1314. .links-of-author a,
  1315. .links-of-author span.exturl {
  1316. border-bottom-color: #555;
  1317. display: inline-block;
  1318. font-size: 0.8125em;
  1319. margin-bottom: 10px;
  1320. margin-right: 10px;
  1321. vertical-align: middle;
  1322. }
  1323. .links-of-author a::before,
  1324. .links-of-author span.exturl::before {
  1325. background: #ff18ff;
  1326. border-radius: 50%;
  1327. content: ' ';
  1328. display: inline-block;
  1329. height: 4px;
  1330. margin-right: 3px;
  1331. vertical-align: middle;
  1332. width: 4px;
  1333. }
  1334. .sidebar-button {
  1335. margin-top: 15px;
  1336. }
  1337. .sidebar-button a {
  1338. border: 1px solid #fc6423;
  1339. border-radius: 4px;
  1340. color: #fc6423;
  1341. display: inline-block;
  1342. padding: 0 15px;
  1343. }
  1344. .sidebar-button a .fa {
  1345. margin-right: 5px;
  1346. }
  1347. .sidebar-button a:hover {
  1348. background: #fc6423;
  1349. border: 1px solid #fc6423;
  1350. color: #fff;
  1351. }
  1352. .sidebar-button a:hover .fa {
  1353. color: #fff;
  1354. }
  1355. .links-of-blogroll {
  1356. font-size: 0.8125em;
  1357. margin-top: 10px;
  1358. }
  1359. .links-of-blogroll-title {
  1360. font-size: 0.875em;
  1361. font-weight: 600;
  1362. margin-top: 0;
  1363. }
  1364. .links-of-blogroll-list {
  1365. list-style: none;
  1366. margin: 0;
  1367. padding: 0;
  1368. }
  1369. #sidebar-dimmer {
  1370. display: none;
  1371. }
  1372. @media (max-width: 767px) {
  1373. #sidebar-dimmer {
  1374. background: #000;
  1375. display: block;
  1376. height: 100%;
  1377. left: 100%;
  1378. opacity: 0;
  1379. position: fixed;
  1380. top: 0;
  1381. width: 100%;
  1382. z-index: 1100;
  1383. }
  1384. .sidebar-active + #sidebar-dimmer {
  1385. opacity: 0.7;
  1386. transform: translateX(-100%);
  1387. transition: opacity 0.5s;
  1388. }
  1389. }
  1390. .sidebar-nav {
  1391. margin: 0;
  1392. padding-bottom: 20px;
  1393. padding-left: 0;
  1394. }
  1395. .sidebar-nav li {
  1396. border-bottom: 1px solid transparent;
  1397. color: #555;
  1398. cursor: pointer;
  1399. display: inline-block;
  1400. font-size: 0.875em;
  1401. }
  1402. .sidebar-nav li.sidebar-nav-overview {
  1403. margin-left: 10px;
  1404. }
  1405. .sidebar-nav li:hover {
  1406. color: #f5f5f5;
  1407. }
  1408. .sidebar-nav .sidebar-nav-active {
  1409. border-bottom-color: #87daff;
  1410. color: #87daff;
  1411. }
  1412. .sidebar-nav .sidebar-nav-active:hover {
  1413. color: #87daff;
  1414. }
  1415. .sidebar-panel {
  1416. display: none;
  1417. overflow-x: hidden;
  1418. overflow-y: auto;
  1419. }
  1420. .sidebar-panel-active {
  1421. display: block;
  1422. }
  1423. .sidebar-toggle {
  1424. background: #222;
  1425. bottom: 45px;
  1426. cursor: pointer;
  1427. height: 14px;
  1428. left: 30px;
  1429. padding: 5px;
  1430. position: fixed;
  1431. width: 14px;
  1432. z-index: 1300;
  1433. }
  1434. @media (max-width: 991px) {
  1435. .sidebar-toggle {
  1436. left: 20px;
  1437. opacity: 0.8;
  1438. display: none;
  1439. }
  1440. }
  1441. .sidebar-toggle:hover .toggle-line {
  1442. background: #87daff;
  1443. }
  1444. .post-toc {
  1445. font-size: 0.875em;
  1446. }
  1447. .post-toc ol {
  1448. list-style: none;
  1449. margin: 0;
  1450. padding: 0 2px 5px 10px;
  1451. text-align: left;
  1452. }
  1453. .post-toc ol > ol {
  1454. padding-left: 0;
  1455. }
  1456. .post-toc ol a {
  1457. transition-property: all;
  1458. transition-delay: 0s;
  1459. transition-duration: 0.2s;
  1460. transition-timing-function: ease-in-out;
  1461. }
  1462. .post-toc .nav-item {
  1463. line-height: 1.8;
  1464. overflow: hidden;
  1465. text-overflow: ellipsis;
  1466. white-space: nowrap;
  1467. }
  1468. .post-toc .nav .nav-child {
  1469. display: none;
  1470. }
  1471. .post-toc .nav .active > .nav-child {
  1472. display: block;
  1473. }
  1474. .post-toc .nav .active-current > .nav-child {
  1475. display: block;
  1476. }
  1477. .post-toc .nav .active-current > .nav-child > .nav-item {
  1478. display: block;
  1479. }
  1480. .post-toc .nav .active > a {
  1481. border-bottom-color: #87daff;
  1482. color: #87daff;
  1483. }
  1484. .post-toc .nav .active-current > a {
  1485. color: #87daff;
  1486. }
  1487. .post-toc .nav .active-current > a:hover {
  1488. color: #87daff;
  1489. }
  1490. .site-state {
  1491. display: flex;
  1492. justify-content: center;
  1493. line-height: 1.4;
  1494. margin-top: 10px;
  1495. overflow: hidden;
  1496. text-align: center;
  1497. white-space: nowrap;
  1498. }
  1499. .site-state-item {
  1500. padding: 0 15px;
  1501. }
  1502. .site-state-item:not(:first-child) {
  1503. border-left: 1px solid #333;
  1504. }
  1505. .site-state-item a {
  1506. border-bottom: none;
  1507. }
  1508. .site-state-item-count {
  1509. display: block;
  1510. font-size: 1.25em;
  1511. font-weight: 600;
  1512. text-align: center;
  1513. }
  1514. .site-state-item-name {
  1515. color: inherit;
  1516. font-size: 0.875em;
  1517. }
  1518. .footer {
  1519. color: #999;
  1520. font-size: 0.875em;
  1521. padding: 20px 0;
  1522. }
  1523. .footer.footer-fixed {
  1524. bottom: 0;
  1525. left: 0;
  1526. position: absolute;
  1527. right: 0;
  1528. }
  1529. .footer-inner {
  1530. box-sizing: border-box;
  1531. margin: 0 auto;
  1532. text-align: center;
  1533. width: 700px;
  1534. }
  1535. @media (min-width: 1200px) {
  1536. .footer-inner {
  1537. width: 800px;
  1538. }
  1539. }
  1540. @media (min-width: 1600px) {
  1541. .footer-inner {
  1542. width: 900px;
  1543. }
  1544. }
  1545. .with-love {
  1546. color: #808080;
  1547. display: inline-block;
  1548. margin: 0 5px;
  1549. }
  1550. .powered-by,
  1551. .theme-info {
  1552. display: inline-block;
  1553. }
  1554. @-moz-keyframes iconAnimate {
  1555. 0%, 100% {
  1556. transform: scale(1);
  1557. }
  1558. 10%, 30% {
  1559. transform: scale(0.9);
  1560. }
  1561. 20%, 40%, 60%, 80% {
  1562. transform: scale(1.1);
  1563. }
  1564. 50%, 70% {
  1565. transform: scale(1.1);
  1566. }
  1567. }
  1568. @-webkit-keyframes iconAnimate {
  1569. 0%, 100% {
  1570. transform: scale(1);
  1571. }
  1572. 10%, 30% {
  1573. transform: scale(0.9);
  1574. }
  1575. 20%, 40%, 60%, 80% {
  1576. transform: scale(1.1);
  1577. }
  1578. 50%, 70% {
  1579. transform: scale(1.1);
  1580. }
  1581. }
  1582. @-o-keyframes iconAnimate {
  1583. 0%, 100% {
  1584. transform: scale(1);
  1585. }
  1586. 10%, 30% {
  1587. transform: scale(0.9);
  1588. }
  1589. 20%, 40%, 60%, 80% {
  1590. transform: scale(1.1);
  1591. }
  1592. 50%, 70% {
  1593. transform: scale(1.1);
  1594. }
  1595. }
  1596. @keyframes iconAnimate {
  1597. 0%, 100% {
  1598. transform: scale(1);
  1599. }
  1600. 10%, 30% {
  1601. transform: scale(0.9);
  1602. }
  1603. 20%, 40%, 60%, 80% {
  1604. transform: scale(1.1);
  1605. }
  1606. 50%, 70% {
  1607. transform: scale(1.1);
  1608. }
  1609. }
  1610. .back-to-top {
  1611. font-size: 12px;
  1612. text-align: center;
  1613. transition-delay: 0s;
  1614. transition-duration: 0.2s;
  1615. transition-timing-function: ease-in-out;
  1616. }
  1617. .back-to-top {
  1618. background: #222;
  1619. bottom: -100px;
  1620. box-sizing: border-box;
  1621. color: #fff;
  1622. cursor: pointer;
  1623. left: 30px;
  1624. opacity: 1;
  1625. padding: 0 6px;
  1626. position: fixed;
  1627. transition-property: bottom;
  1628. z-index: 1300;
  1629. width: initial;
  1630. }
  1631. .back-to-top:hover {
  1632. color: #87daff;
  1633. }
  1634. .back-to-top.back-to-top-on {
  1635. bottom: 19px;
  1636. }
  1637. @media (max-width: 991px) {
  1638. .back-to-top {
  1639. left: 20px;
  1640. opacity: 0.8;
  1641. }
  1642. }
  1643. .reading-progress-bar {
  1644. background: #37c6c0;
  1645. display: block;
  1646. height: 3px;
  1647. left: 0;
  1648. position: fixed;
  1649. top: 0;
  1650. width: 0;
  1651. z-index: 1500;
  1652. }
  1653. .post-body {
  1654. font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  1655. overflow-wrap: break-word;
  1656. word-wrap: break-word;
  1657. }
  1658. @media (min-width: 1200px) {
  1659. .post-body {
  1660. font-size: 1.125em;
  1661. }
  1662. }
  1663. .post-body span.exturl .fa {
  1664. font-size: 0.875em;
  1665. margin-left: 4px;
  1666. }
  1667. .post-body .image-caption,
  1668. .post-body .figure .caption {
  1669. color: #999;
  1670. font-size: 0.875em;
  1671. font-weight: bold;
  1672. line-height: 1;
  1673. margin: -20px auto 15px;
  1674. text-align: center;
  1675. }
  1676. .post-sticky-flag {
  1677. display: inline-block;
  1678. transform: rotate(30deg);
  1679. }
  1680. .post-button {
  1681. margin-top: 40px;
  1682. text-align: center;
  1683. }
  1684. .use-motion .post-block,
  1685. .use-motion .pagination,
  1686. .use-motion .comments {
  1687. opacity: 0;
  1688. }
  1689. .use-motion .post-header {
  1690. opacity: 0;
  1691. }
  1692. .use-motion .post-body {
  1693. opacity: 0;
  1694. }
  1695. .use-motion .collection-header {
  1696. opacity: 0;
  1697. }
  1698. .posts-collapse {
  1699. margin-left: 55px;
  1700. position: relative;
  1701. }
  1702. @media (max-width: 767px) {
  1703. .posts-collapse {
  1704. margin-left: 20px;
  1705. margin-right: 20px;
  1706. }
  1707. }
  1708. .posts-collapse .collection-title {
  1709. font-size: 1.125em;
  1710. position: relative;
  1711. }
  1712. .posts-collapse .collection-title::before {
  1713. background: #999;
  1714. border: 1px solid #fff;
  1715. border-radius: 50%;
  1716. content: ' ';
  1717. height: 10px;
  1718. left: 0;
  1719. margin-left: -6px;
  1720. margin-top: -4px;
  1721. position: absolute;
  1722. top: 50%;
  1723. width: 10px;
  1724. }
  1725. .posts-collapse .collection-year {
  1726. margin: 60px 0;
  1727. position: relative;
  1728. }
  1729. .posts-collapse .collection-year::before {
  1730. background: #bbb;
  1731. border-radius: 50%;
  1732. content: ' ';
  1733. height: 8px;
  1734. left: 0;
  1735. margin-left: -4px;
  1736. margin-top: -4px;
  1737. position: absolute;
  1738. top: 50%;
  1739. width: 8px;
  1740. }
  1741. .posts-collapse .collection-header {
  1742. display: inline-block;
  1743. margin: 0 0 0 20px;
  1744. }
  1745. .posts-collapse .collection-header small {
  1746. color: #bbb;
  1747. margin-left: 5px;
  1748. }
  1749. .posts-collapse .post-header {
  1750. border-bottom: 1px dashed #ccc;
  1751. margin: 30px 0;
  1752. padding-left: 15px;
  1753. position: relative;
  1754. transition-property: border;
  1755. transition-delay: 0s;
  1756. transition-duration: 0.2s;
  1757. transition-timing-function: ease-in-out;
  1758. }
  1759. .posts-collapse .post-header::before {
  1760. background: #bbb;
  1761. border: 1px solid #fff;
  1762. border-radius: 50%;
  1763. content: ' ';
  1764. height: 6px;
  1765. left: 0;
  1766. margin-left: -4px;
  1767. position: absolute;
  1768. top: 0.75em;
  1769. transition-property: background;
  1770. width: 6px;
  1771. transition-delay: 0s;
  1772. transition-duration: 0.2s;
  1773. transition-timing-function: ease-in-out;
  1774. }
  1775. .posts-collapse .post-header:hover {
  1776. border-bottom-color: #666;
  1777. }
  1778. .posts-collapse .post-header:hover::before {
  1779. background: #222;
  1780. }
  1781. .posts-collapse .post-meta {
  1782. display: inline;
  1783. font-size: 0.75em;
  1784. margin-right: 10px;
  1785. }
  1786. .posts-collapse .post-title {
  1787. display: inline;
  1788. font-size: 1em;
  1789. font-weight: normal;
  1790. }
  1791. .posts-collapse .post-title a,
  1792. .posts-collapse .post-title span.exturl {
  1793. border-bottom: none;
  1794. color: var(--link-color);
  1795. }
  1796. .posts-collapse::before {
  1797. background: #f5f5f5;
  1798. content: ' ';
  1799. height: 100%;
  1800. left: 0;
  1801. margin-left: -2px;
  1802. position: absolute;
  1803. top: 1.25em;
  1804. width: 4px;
  1805. }
  1806. .posts-collapse .fa-external-link {
  1807. font-size: 0.875em;
  1808. margin-left: 5px;
  1809. }
  1810. .post-eof {
  1811. background: #ccc;
  1812. height: 1px;
  1813. margin: 80px auto 60px;
  1814. text-align: center;
  1815. width: 8%;
  1816. }
  1817. .post-block:last-child .post-eof {
  1818. display: none;
  1819. }
  1820. .posts-expand {
  1821. padding-top: 40px;
  1822. }
  1823. @media (max-width: 767px) {
  1824. .posts-expand {
  1825. margin: 0 20px;
  1826. }
  1827. }
  1828. @media (min-width: 992px) {
  1829. .post-body {
  1830. text-align: justify;
  1831. }
  1832. }
  1833. @media (max-width: 991px) {
  1834. .post-body {
  1835. text-align: justify;
  1836. }
  1837. }
  1838. .post-body h1,
  1839. .post-body h2,
  1840. .post-body h3,
  1841. .post-body h4,
  1842. .post-body h5,
  1843. .post-body h6 {
  1844. padding-top: 10px;
  1845. }
  1846. .post-body h1 .header-anchor,
  1847. .post-body h2 .header-anchor,
  1848. .post-body h3 .header-anchor,
  1849. .post-body h4 .header-anchor,
  1850. .post-body h5 .header-anchor,
  1851. .post-body h6 .header-anchor {
  1852. border-bottom-style: none;
  1853. color: #ccc;
  1854. float: right;
  1855. margin-left: 10px;
  1856. visibility: hidden;
  1857. }
  1858. .post-body h1 .header-anchor:hover,
  1859. .post-body h2 .header-anchor:hover,
  1860. .post-body h3 .header-anchor:hover,
  1861. .post-body h4 .header-anchor:hover,
  1862. .post-body h5 .header-anchor:hover,
  1863. .post-body h6 .header-anchor:hover {
  1864. color: inherit;
  1865. }
  1866. .post-body h1:hover .header-anchor,
  1867. .post-body h2:hover .header-anchor,
  1868. .post-body h3:hover .header-anchor,
  1869. .post-body h4:hover .header-anchor,
  1870. .post-body h5:hover .header-anchor,
  1871. .post-body h6:hover .header-anchor {
  1872. visibility: visible;
  1873. }
  1874. .post-body iframe,
  1875. .post-body img,
  1876. .post-body video {
  1877. margin-bottom: 20px;
  1878. }
  1879. .post-body .video-container {
  1880. height: 0;
  1881. margin-bottom: 20px;
  1882. overflow: hidden;
  1883. padding-top: 75%;
  1884. position: relative;
  1885. width: 100%;
  1886. }
  1887. .post-body .video-container iframe,
  1888. .post-body .video-container object,
  1889. .post-body .video-container embed {
  1890. height: 100%;
  1891. left: 0;
  1892. margin: 0;
  1893. position: absolute;
  1894. top: 0;
  1895. width: 100%;
  1896. }
  1897. .post-gallery {
  1898. align-items: center;
  1899. display: grid;
  1900. grid-gap: 10px;
  1901. grid-template-columns: 1fr 1fr 1fr;
  1902. margin-bottom: 20px;
  1903. }
  1904. @media (max-width: 767px) {
  1905. .post-gallery {
  1906. grid-template-columns: 1fr 1fr;
  1907. }
  1908. }
  1909. .post-gallery a {
  1910. border: 0;
  1911. }
  1912. .post-gallery img {
  1913. margin: 0;
  1914. }
  1915. .posts-expand .post-header {
  1916. font-size: 1.125em;
  1917. }
  1918. .posts-expand .post-title {
  1919. font-weight: normal;
  1920. margin: initial;
  1921. text-align: center;
  1922. overflow-wrap: break-word;
  1923. word-wrap: break-word;
  1924. }
  1925. .posts-expand .post-title-link {
  1926. border-bottom: none;
  1927. color: var(--link-color);
  1928. display: inline-block;
  1929. position: relative;
  1930. vertical-align: top;
  1931. }
  1932. .posts-expand .post-title-link::before {
  1933. background: var(--link-color);
  1934. bottom: 0;
  1935. content: '';
  1936. height: 2px;
  1937. left: 0;
  1938. position: absolute;
  1939. transform: scaleX(0);
  1940. visibility: hidden;
  1941. width: 100%;
  1942. transition-delay: 0s;
  1943. transition-duration: 0.2s;
  1944. transition-timing-function: ease-in-out;
  1945. }
  1946. .posts-expand .post-title-link:hover::before {
  1947. transform: scaleX(1);
  1948. visibility: visible;
  1949. }
  1950. .posts-expand .post-title-link .fa {
  1951. font-size: 0.875em;
  1952. margin-left: 5px;
  1953. }
  1954. .posts-expand .post-meta {
  1955. color: #999;
  1956. font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  1957. font-size: 0.75em;
  1958. margin: 3px 0 60px 0;
  1959. text-align: center;
  1960. }
  1961. .posts-expand .post-meta .post-description {
  1962. font-size: 0.875em;
  1963. margin-top: 2px;
  1964. }
  1965. .posts-expand .post-meta time {
  1966. border-bottom: 1px dashed #999;
  1967. cursor: pointer;
  1968. }
  1969. .post-meta .post-meta-item + .post-meta-item::before {
  1970. content: '|';
  1971. margin: 0 0.5em;
  1972. }
  1973. .post-meta-divider {
  1974. margin: 0 0.5em;
  1975. }
  1976. .post-meta-item-icon {
  1977. margin-right: 3px;
  1978. }
  1979. @media (max-width: 991px) {
  1980. .post-meta-item-icon {
  1981. display: inline-block;
  1982. }
  1983. }
  1984. @media (max-width: 991px) {
  1985. .post-meta-item-text {
  1986. display: none;
  1987. }
  1988. }
  1989. .post-nav {
  1990. border-top: 1px solid #eee;
  1991. display: flex;
  1992. justify-content: space-between;
  1993. margin-top: 15px;
  1994. padding-top: 10px;
  1995. }
  1996. .post-nav-item {
  1997. flex: 1;
  1998. }
  1999. .post-nav-item a {
  2000. border-bottom: none;
  2001. display: block;
  2002. font-size: 0.875em;
  2003. line-height: 1.6;
  2004. position: relative;
  2005. }
  2006. .post-nav-item a:active {
  2007. top: 2px;
  2008. }
  2009. .post-nav-item .fa {
  2010. font-size: 0.75em;
  2011. }
  2012. .post-nav-item:first-child {
  2013. margin-right: 15px;
  2014. }
  2015. .post-nav-item:first-child a {
  2016. padding-left: 5px;
  2017. }
  2018. .post-nav-item:first-child .fa {
  2019. margin-right: 5px;
  2020. }
  2021. .post-nav-item:last-child {
  2022. margin-left: 15px;
  2023. text-align: right;
  2024. }
  2025. .post-nav-item:last-child a {
  2026. padding-right: 5px;
  2027. }
  2028. .post-nav-item:last-child .fa {
  2029. margin-left: 5px;
  2030. }
  2031. .rtl.post-body p,
  2032. .rtl.post-body a,
  2033. .rtl.post-body h1,
  2034. .rtl.post-body h2,
  2035. .rtl.post-body h3,
  2036. .rtl.post-body h4,
  2037. .rtl.post-body h5,
  2038. .rtl.post-body h6,
  2039. .rtl.post-body li,
  2040. .rtl.post-body ul,
  2041. .rtl.post-body ol {
  2042. direction: rtl;
  2043. font-family: UKIJ Ekran;
  2044. }
  2045. .rtl.post-title {
  2046. font-family: UKIJ Ekran;
  2047. }
  2048. .post-tags {
  2049. margin-top: 40px;
  2050. text-align: center;
  2051. }
  2052. .post-tags a {
  2053. display: inline-block;
  2054. font-size: 0.8125em;
  2055. }
  2056. .post-tags a:not(:last-child) {
  2057. margin-right: 10px;
  2058. }
  2059. .post-widgets {
  2060. border-top: 1px solid #eee;
  2061. margin-top: 15px;
  2062. text-align: center;
  2063. }
  2064. .wp_rating {
  2065. height: 20px;
  2066. line-height: 20px;
  2067. margin-top: 10px;
  2068. padding-top: 6px;
  2069. text-align: center;
  2070. }
  2071. .social-like {
  2072. display: flex;
  2073. font-size: 0.875em;
  2074. justify-content: center;
  2075. text-align: center;
  2076. }
  2077. .reward-container {
  2078. margin: 20px auto;
  2079. padding: 10px 0;
  2080. text-align: center;
  2081. width: 90%;
  2082. }
  2083. .reward-container button {
  2084. background: #ff2a2a;
  2085. border: 0;
  2086. border-radius: 5px;
  2087. color: #fff;
  2088. cursor: pointer;
  2089. line-height: 2;
  2090. outline: 0;
  2091. padding: 0 15px;
  2092. vertical-align: text-top;
  2093. }
  2094. .reward-container button:hover {
  2095. background: #f55;
  2096. }
  2097. #qr {
  2098. padding-top: 20px;
  2099. }
  2100. #qr a {
  2101. border: 0;
  2102. }
  2103. #qr img {
  2104. display: inline-block;
  2105. margin: 0.8em 2em 0 2em;
  2106. max-width: 100%;
  2107. width: 180px;
  2108. }
  2109. #qr p {
  2110. text-align: center;
  2111. }
  2112. .category-all-page .category-all-title {
  2113. text-align: center;
  2114. }
  2115. .category-all-page .category-all {
  2116. margin-top: 20px;
  2117. }
  2118. .category-all-page .category-list {
  2119. list-style: none;
  2120. margin: 0;
  2121. padding: 0;
  2122. }
  2123. .category-all-page .category-list-item {
  2124. margin: 5px 10px;
  2125. }
  2126. .category-all-page .category-list-count {
  2127. color: #bbb;
  2128. }
  2129. .category-all-page .category-list-count::before {
  2130. content: ' (';
  2131. display: inline;
  2132. }
  2133. .category-all-page .category-list-count::after {
  2134. content: ') ';
  2135. display: inline;
  2136. }
  2137. .category-all-page .category-list-child {
  2138. padding-left: 10px;
  2139. }
  2140. .event-list {
  2141. padding: 0;
  2142. }
  2143. .event-list hr {
  2144. background: #222;
  2145. margin: 20px 0 45px 0;
  2146. }
  2147. .event-list hr::after {
  2148. background: #222;
  2149. color: #fff;
  2150. content: 'NOW';
  2151. display: inline-block;
  2152. font-weight: bold;
  2153. padding: 0 5px;
  2154. text-align: right;
  2155. }
  2156. .event-list .event {
  2157. background: #222;
  2158. margin: 20px 0;
  2159. min-height: 40px;
  2160. padding: 15px 0 15px 10px;
  2161. }
  2162. .event-list .event .event-summary {
  2163. color: #fff;
  2164. margin: 0;
  2165. padding-bottom: 3px;
  2166. }
  2167. .event-list .event .event-summary::before {
  2168. animation: dot-flash 1s alternate infinite ease-in-out;
  2169. color: #fff;
  2170. content: '\f111';
  2171. display: inline-block;
  2172. font-family: 'FontAwesome';
  2173. font-size: 10px;
  2174. margin-right: 25px;
  2175. vertical-align: middle;
  2176. }
  2177. .event-list .event .event-relative-time {
  2178. color: #bbb;
  2179. display: inline-block;
  2180. font-size: 12px;
  2181. font-weight: normal;
  2182. padding-left: 12px;
  2183. }
  2184. .event-list .event .event-details {
  2185. color: #fff;
  2186. display: block;
  2187. line-height: 18px;
  2188. margin-left: 56px;
  2189. padding-bottom: 6px;
  2190. padding-top: 3px;
  2191. text-indent: -24px;
  2192. }
  2193. .event-list .event .event-details::before {
  2194. color: #fff;
  2195. display: inline-block;
  2196. font-family: 'FontAwesome';
  2197. margin-right: 9px;
  2198. text-align: center;
  2199. text-indent: 0;
  2200. width: 14px;
  2201. }
  2202. .event-list .event .event-details.event-location::before {
  2203. content: '\f041';
  2204. }
  2205. .event-list .event .event-details.event-duration::before {
  2206. content: '\f017';
  2207. }
  2208. .event-list .event-past {
  2209. background: #f5f5f5;
  2210. }
  2211. .event-list .event-past .event-summary,
  2212. .event-list .event-past .event-details {
  2213. color: #bbb;
  2214. opacity: 0.9;
  2215. }
  2216. .event-list .event-past .event-summary::before,
  2217. .event-list .event-past .event-details::before {
  2218. animation: none;
  2219. color: #bbb;
  2220. }
  2221. @-moz-keyframes dot-flash {
  2222. from {
  2223. opacity: 1;
  2224. transform: scale(1);
  2225. }
  2226. to {
  2227. opacity: 0;
  2228. transform: scale(0.8);
  2229. }
  2230. }
  2231. @-webkit-keyframes dot-flash {
  2232. from {
  2233. opacity: 1;
  2234. transform: scale(1);
  2235. }
  2236. to {
  2237. opacity: 0;
  2238. transform: scale(0.8);
  2239. }
  2240. }
  2241. @-o-keyframes dot-flash {
  2242. from {
  2243. opacity: 1;
  2244. transform: scale(1);
  2245. }
  2246. to {
  2247. opacity: 0;
  2248. transform: scale(0.8);
  2249. }
  2250. }
  2251. @keyframes dot-flash {
  2252. from {
  2253. opacity: 1;
  2254. transform: scale(1);
  2255. }
  2256. to {
  2257. opacity: 0;
  2258. transform: scale(0.8);
  2259. }
  2260. }
  2261. ul.breadcrumb {
  2262. font-size: 0.75em;
  2263. list-style: none;
  2264. margin: 1em 0;
  2265. padding: 0 2em;
  2266. text-align: center;
  2267. }
  2268. ul.breadcrumb li {
  2269. display: inline;
  2270. }
  2271. ul.breadcrumb li + li::before {
  2272. content: '/\00a0';
  2273. font-weight: normal;
  2274. padding: 0.5em;
  2275. }
  2276. ul.breadcrumb li + li:last-child {
  2277. font-weight: bold;
  2278. }
  2279. .tag-cloud {
  2280. text-align: center;
  2281. }
  2282. .tag-cloud a {
  2283. display: inline-block;
  2284. margin: 10px;
  2285. }
  2286. .tag-cloud a:hover {
  2287. color: #222 !important;
  2288. }
  2289. @media (max-width: 767px) {
  2290. .header-inner,
  2291. .main-inner,
  2292. .footer-inner {
  2293. width: auto;
  2294. }
  2295. }
  2296. .header-inner {
  2297. padding-top: 100px;
  2298. }
  2299. @media (max-width: 767px) {
  2300. .header-inner {
  2301. padding-top: 50px;
  2302. }
  2303. }
  2304. .main-inner {
  2305. padding-bottom: 60px;
  2306. }
  2307. .content {
  2308. padding-top: 70px;
  2309. }
  2310. @media (max-width: 767px) {
  2311. .content {
  2312. padding-top: 35px;
  2313. }
  2314. }
  2315. embed {
  2316. display: block;
  2317. margin: 0 auto 25px auto;
  2318. }
  2319. .custom-logo .site-meta-headline {
  2320. text-align: center;
  2321. }
  2322. .custom-logo .site-title {
  2323. color: #222;
  2324. margin: 10px auto 0;
  2325. }
  2326. .custom-logo .site-title a {
  2327. border: 0;
  2328. }
  2329. .custom-logo-image {
  2330. background: #fff;
  2331. margin: 0 auto;
  2332. max-width: 150px;
  2333. padding: 5px;
  2334. }
  2335. .brand {
  2336. background: #222;
  2337. }
  2338. @media (max-width: 767px) {
  2339. .site-nav {
  2340. border-bottom: 1px solid #ddd;
  2341. border-top: 1px solid #ddd;
  2342. left: 0;
  2343. margin: 0;
  2344. padding: 0;
  2345. width: 100%;
  2346. }
  2347. }
  2348. @media (max-width: 767px) {
  2349. .menu {
  2350. text-align: left;
  2351. }
  2352. }
  2353. .menu-item-active a,
  2354. .menu .menu-item a:hover,
  2355. .menu .menu-item span.exturl:hover {
  2356. background: transparent;
  2357. border-bottom: 1px solid var(--link-hover-color) !important;
  2358. }
  2359. @media (max-width: 767px) {
  2360. .menu-item-active a,
  2361. .menu .menu-item a:hover,
  2362. .menu .menu-item span.exturl:hover {
  2363. border-bottom: 1px dotted #ddd !important;
  2364. }
  2365. }
  2366. @media (max-width: 767px) {
  2367. .menu .menu-item {
  2368. margin: 0 10px;
  2369. }
  2370. }
  2371. .menu .menu-item a,
  2372. .menu .menu-item span.exturl {
  2373. border-bottom: 1px solid transparent;
  2374. }
  2375. @media (max-width: 767px) {
  2376. .menu .menu-item a,
  2377. .menu .menu-item span.exturl {
  2378. padding: 5px 10px;
  2379. }
  2380. }
  2381. @media (min-width: 768px) and (max-width: 991px) {
  2382. .menu .menu-item .fa {
  2383. display: block;
  2384. line-height: 2;
  2385. margin-right: 0;
  2386. width: 100%;
  2387. }
  2388. }
  2389. @media (min-width: 992px) {
  2390. .menu .menu-item .fa {
  2391. display: block;
  2392. line-height: 2;
  2393. margin-right: 0;
  2394. width: 100%;
  2395. }
  2396. }
  2397. .menu .menu-item .badge {
  2398. background: #eee;
  2399. padding: 1px 4px;
  2400. }
  2401. .sub-menu {
  2402. margin: 10px 0;
  2403. }
  2404. .sub-menu .menu-item {
  2405. display: inline-block;
  2406. }
  2407. .sidebar {
  2408. left: -320px;
  2409. }
  2410. .sidebar.sidebar-active {
  2411. left: 0;
  2412. }
  2413. .sidebar {
  2414. width: 320px;
  2415. z-index: 1200;
  2416. transition-delay: 0s;
  2417. transition-duration: 0.2s;
  2418. transition-timing-function: ease-out;
  2419. }
  2420. .sidebar a,
  2421. .sidebar span.exturl {
  2422. border-bottom-color: #555;
  2423. color: #999;
  2424. }
  2425. .sidebar a:hover,
  2426. .sidebar span.exturl:hover {
  2427. border-bottom-color: #eee;
  2428. color: #eee;
  2429. }
  2430. .links-of-blogroll-item {
  2431. padding: 2px 10px;
  2432. }
  2433. .links-of-blogroll-item a,
  2434. .links-of-blogroll-item span.exturl {
  2435. box-sizing: border-box;
  2436. display: inline-block;
  2437. max-width: 280px;
  2438. overflow: hidden;
  2439. text-overflow: ellipsis;
  2440. white-space: nowrap;
  2441. }