API tools faq
paste
Guest User

Styling

a guest
Aug 8th, 2025
32
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.80 KB | None | 0 0
raw download clone embed print report
  1. :root {
  2. /* Color theme */
  3. --light-mode-bg-color: #fffaf0;
  4. --light-mode-fg-color: #333333;
  5.  
  6. /* Pitch colors */
  7. --dark-mode-heiban: #39bae6;
  8. --dark-mode-atamadaka: #ec464f;
  9. --dark-mode-nakadaka: #ff8f40;
  10. --dark-mode-odaka: #6cbf43;
  11. --dark-mode-kifuku: #af85f4;
  12. --light-mode-heiban: #1aa0ce;
  13. --light-mode-atamadaka: #e92a35;
  14. --light-mode-nakadaka: #ff6b03;
  15. --light-mode-odaka: #61ad3b;
  16. --light-mode-kifuku: #7e53c4;
  17.  
  18. /* Bold color */
  19. --light-mode-bold: #999999;
  20. --dark-mode-bold: #7d8590;
  21.  
  22. /* PC Font sizes */
  23. --pc-main-font-size: 16px;
  24. --pc-main-def-size: 20px;
  25. --pc-vocab-font-size: 55px;
  26. --pc-sentence-font-size: 52px;
  27. --pc-back-sentence-font-size: 25px;
  28. --pc-hint-font-size: 38px;
  29. --pc-info-font-size: 23px;
  30.  
  31. /* Mobile font sizes */
  32. --mobile-main-font-size: 16px;
  33. --mobile-main-def-size: 16px;
  34. --mobile-vocab-font-size: 50px;
  35. --mobile-sentence-font-size: 35px;
  36. --mobile-back-sentence-font-size: 20px;
  37. --mobile-hint-font-size:24px;
  38. --mobile-info-font-size: 16px;
  39.  
  40. /* Miscellaneous */
  41. --font-serif: "Georgia", "Liberation Serif", "Times New Roman", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Yu Mincho", HanaMinA, HanaMinB, serif;
  42. --font-sans: "Yu Mincho", "Liberation Sans", "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Meiryo", HanaMinA, HanaMinB, sans-serif;
  43. --light-mode-image-brightness: 85%;
  44. --dark-mode-image-brightness: 80%;
  45. --light-mode-tooltip-hover-color: rgb(256, 256, 256, 0.9);
  46. --dark-mode-tooltip-hover-color: rgba(0, 0, 0, 0.9);
  47. --def-picture-size: 200px;
  48. --max-width: 800px;
  49.  
  50. font-size: var(--main-font-size);
  51. }
  52.  
  53. .card {
  54. background-color: var(--bg-color) !important;
  55. color: var(--fg-color) !important;
  56. }
  57.  
  58. .card.nightMode {
  59. --bg-color: var(--canvas, #2c2c2c);
  60. --fg-color: var(--fg, #fcfcfc);
  61. --heiban: var(--dark-mode-heiban, initial);
  62. --atamadaka: var(--dark-mode-atamadaka, initial);
  63. --nakadaka: var(--dark-mode-nakadaka, initial);
  64. --odaka: var(--dark-mode-odaka, initial);
  65. --kifuku: var(--dark-mode-kifuku, initial);
  66.  
  67. --bg-elevated: rgba(0, 0, 0, 0.12);
  68. --bg-inset: rgba(255, 255, 241, 0.3);
  69. --fg-subtle: rgba(255, 255, 241, 0.3);
  70. --bold: var(--dark-mode-bold, #7d8590);
  71.  
  72. --image-brightness: var(--dark-mode-image-brightness);
  73. --tooltip-hover-color: var(--dark-mode-tooltip-hover-color);
  74. }
  75.  
  76. .android .nightMode {
  77. --bg-color: black;
  78. --fg-color: white;
  79. }
  80.  
  81. .android .nightMode:not(.ankidroid_dark_mode) {
  82. /* make it brighter since bg is black */
  83. --bg-elevated: rgba(255, 255, 255, 0.06);
  84. }
  85.  
  86. .android .nightMode.ankidroid_dark_mode {
  87. --bg-color: #303030;
  88. }
  89.  
  90. .card:not(.nightMode) {
  91. --bg-color: var(--light-mode-bg-color);
  92. --fg-color: var(--light-mode-fg-color);
  93. --heiban: var(--light-mode-heiban, initial);
  94. --atamadaka: var(--light-mode-atamadaka, initial);
  95. --nakadaka: var(--light-mode-nakadaka, initial);
  96. --odaka: var(--light-mode-odaka, initial);
  97. --kifuku: var(--light-mode-kifuku, initial);
  98.  
  99. --bg-elevated: rgba(0, 0, 0, 0.03);
  100. --bg-inset: rgba(0, 0, 0, 0.06);
  101. --fg-subtle: rgba(0, 0, 0, 0.6);
  102. --bold: var(--light-mode-bold, #999999);
  103.  
  104. --image-brightness: var(--light-mode-image-brightness);
  105. --tooltip-hover-color: var(--light-mode-tooltip-hover-color);
  106. }
  107.  
  108. html.win,
  109. html.mac,
  110. html.linux:not(.android) {
  111. --main-font-size: var(--pc-main-font-size);
  112. --main-def-size: var(--pc-main-def-size);
  113. --vocab-font-size: var(--pc-vocab-font-size);
  114. --sentence-font-size: var(--pc-sentence-font-size);
  115. --back-sentence-font-size: var(--pc-back-sentence-font-size);
  116. --hint-font-size: var(--pc-hint-font-size);
  117. --info-font-size: var(--pc-info-font-size);
  118. }
  119.  
  120. html.mobile {
  121. --main-font-size: var(--mobile-main-font-size);
  122. --main-def-size: var(--mobile-main-def-size);
  123. --vocab-font-size: var(--mobile-vocab-font-size);
  124. --sentence-font-size: var(--mobile-sentence-font-size);
  125. --back-sentence-font-size: var(--mobile-back-sentence-font-size);
  126. --hint-font-size: var(--mobile-hint-font-size);
  127. --info-font-size: var(--mobile-info-font-size);
  128. }
  129.  
  130. #qa {
  131. display: flex;
  132. align-items: center;
  133. flex-direction: column;
  134. min-height: calc(100vh - 40px);
  135. font-family: var(--font-serif);
  136. font-size: var(--main-font-size);
  137. text-align: left;
  138. }
  139.  
  140. #main_image {
  141. max-width: 100%;
  142. box-sizing: border-box;
  143. text-align: center;
  144. overflow: hidden;
  145. position: relative;
  146. width: 100%;
  147. max-width: var(--max-width);
  148. }
  149.  
  150. #main_image img {
  151. max-width: 100%;
  152. width: auto;
  153. max-height: 500px;
  154. height: auto;
  155. display: block;
  156. margin: 0 auto;
  157. }
  158.  
  159. .def-header {
  160. display: flex;
  161. justify-content: center;
  162. align-items: center;
  163. max-width: var(--max-width);
  164. width: 100%;
  165. margin: 0 auto;
  166. }
  167.  
  168. .dh-left {
  169. display: flex;
  170. justify-content: center;
  171. align-items: center;
  172. flex: 1;
  173. width: 100%;
  174. background: var(--bg-elevated);
  175. padding: 0.52em;
  176. border-radius: 5px;
  177. }
  178.  
  179.  
  180. .mobile .dh-left {
  181. background: none;
  182. padding: 0em;
  183. border-radius: 0px;
  184. }
  185.  
  186. /* Mobile css */
  187. @media (max-width: 512px) {
  188. .def-header {
  189. max-width: var(--max-width);
  190. width: calc(100% - 20px);
  191. }
  192. .dh-left {
  193. background: none;
  194. padding: 0em;
  195. width: 100%;
  196. max-width: calc(100% - 20px);
  197. justify-content: center;
  198. align-items: center;
  199. overflow: hidden;
  200. }
  201. .vocab {
  202. font-size: clamp(16px, 6vw, 40px);
  203. line-height: 1.5;
  204. white-space: normal;
  205. overflow-wrap: break-word;
  206. display: inline-block;
  207. text-align: center;
  208. margin: 0 auto;
  209. max-width: 100%;
  210. }
  211. .front-vocab {
  212. font-size: clamp(16px, 6vw, 40px);
  213. line-height: 1.5;
  214. white-space: normal;
  215. overflow-wrap: break-word;
  216. display: inline-block;
  217. text-align: center;
  218. max-width: 100%;
  219. }
  220. @media (max-width: 360px) {
  221. .vocab,
  222. .front-vocab {
  223. font-size: clamp(16px, 5vw, 40px);
  224. }
  225. }
  226. .dh-right {
  227. max-width: 40vw;
  228. }
  229. .info {
  230. font-size: 0.9rem;
  231. padding-top: 7px;
  232. }
  233. .audio-buttons {
  234. position: fixed;
  235. bottom: 0;
  236. left: 0;
  237. z-index: 1000;
  238. }
  239. .def-info {
  240. display: none;
  241. }
  242. .sentence {
  243. display: none;
  244. }
  245. .sentence-mobile {
  246. line-height: 1.5;
  247. font-size: var(--back-sentence-font-size);
  248. display: inline-block;
  249. width: calc(100% - 20px);
  250. max-width: var(--max-width);
  251. }
  252. .tags {
  253. padding: 1px 3px;
  254. font-size: 9px;
  255. }
  256. b {
  257. font-weight: 400;
  258. }
  259. li[data-dictionary^="Jitendex"] ul,
  260. li[data-dictionary^="Jitendex"] ol,
  261. li[data-details^="Jitendex"] ul,
  262. li[data-details^="Jitendex"] ol {
  263. padding-left: 0.3em;
  264. }
  265. .nightMode #pitch-tags {
  266. color: #000 !important;
  267. background-color: #fff;
  268. }
  269. }
  270.  
  271. /* Front elements */
  272. .front-vocab {
  273. font-size: var(--vocab-font-size);
  274. line-height: 1.5;
  275. white-space: nowrap;
  276. display: inline-block;
  277. text-align: center;
  278. max-width: 90vw;
  279. margin-top: 0.1em;
  280. }
  281.  
  282. /* Back elements */
  283. .vocab {
  284. font-size: var(--vocab-font-size);
  285. line-height: 1.1;
  286. white-space: nowrap;
  287. display: inline-block;
  288. text-align: center;
  289. margin: 0 auto;
  290. padding-top: 0.1em;
  291. }
  292.  
  293. a {
  294. color: #3b82f6 !important;
  295. }
  296.  
  297. .nightMode a {
  298. color: #93c5fd !important;
  299. }
  300.  
  301. /* Header */
  302. header {
  303. color: var(--fg-subtle);
  304. height: 40px;
  305. text-align: right;
  306. width: 100%;
  307. font-size: 1rem;
  308. }
  309.  
  310. .top-container {
  311. max-width: calc(var(--max-width) + 20px);
  312. margin: 0px auto;
  313. width: calc(100% - 20px);
  314. fill: var(--fg-subtle) !important;
  315. position: relative;
  316. display: inline-block;
  317. }
  318.  
  319. .freq-dropdown {
  320. cursor: pointer;
  321. }
  322.  
  323. .freq-list-container {
  324. font-family: var(--font-sans);
  325. display: none;
  326. position: absolute;
  327. top: 100%;
  328. right: 0;
  329. background-color: var(--tooltip-hover-color);
  330. color: var(--fg-color);
  331. padding: 10px;
  332. border-radius: 5px;
  333. z-index: 1000;
  334. width: 200px;
  335. }
  336.  
  337. .freq-list-container ul {
  338. list-style-type: none;
  339. line-height: 1.5;
  340. margin: 0;
  341. padding: 0;
  342. }
  343.  
  344. .freq-dropdown:hover .freq-list-container {
  345. display: block;
  346. }
  347.  
  348. /* Info (audio, reading) */
  349. .info {
  350. font-family: var(--font-sans);
  351. font-size: var(--info-font-size);
  352. color: var(--fg-color);
  353. }
  354.  
  355. /* Replay button */
  356. .replay-button svg {
  357. width: 32px;
  358. height: 32px;
  359. }
  360.  
  361. /* Pitch */
  362. .pitch {
  363. display: inline;
  364. }
  365.  
  366. #pitch-tags {
  367. color: var(--bg-color);
  368. font-family: var(--font-serif);
  369. background-color: var(--fg-color);
  370. display: none;
  371. vertical-align: top;
  372. padding: 1px 3px;
  373. margin-right: -5px;
  374. }
  375.  
  376. /* When multiple pitch */
  377. .pitch ul,
  378. #pitch-tags ul {
  379. list-style: none;
  380. display: inline;
  381. margin: 0;
  382. padding: 0;
  383. }
  384.  
  385. .pitch li,
  386. #pitch-tags li {
  387. display: inline;
  388. }
  389.  
  390. .pitch ul>li:not(:last-child)::after,
  391. #pitch-tags ul>li:not(:last-child)::after {
  392. content: "・";
  393. }
  394.  
  395. .pitch ul>li:not(:last-child)::after {
  396. color: var(--fg-color);
  397. }
  398.  
  399. #pitch-tags ul>li:not(:last-child)::after {
  400. color: var(--bg-color);
  401. }
  402.  
  403. /* Definition container */
  404. .main-def {
  405. max-width: var(--max-width);
  406. font-size: var(--main-def-size);
  407. line-height: 1.75em;
  408. margin: 10px auto;
  409. width: calc(100% - 20px);
  410. position: relative;
  411. display: block;
  412. }
  413.  
  414. /* Definition info display */
  415. .def-info-container {
  416. display: block;
  417. max-width: var(--max-width);
  418. width: calc(100% - 20px);
  419. position: relative;
  420. margin: 0 auto;
  421. }
  422.  
  423. .def-info {
  424. font-family: var(--font-sans);
  425. position: absolute;
  426. top: 0;
  427. right: 0;
  428. font-size: 0.9rem;
  429. color: var (--fg-subtle);
  430. pointer-events: none;
  431. }
  432.  
  433. /* MainDefinition */
  434. .definition {
  435. text-align: left;
  436. width: fit-content;
  437. max-width: 100%;
  438. }
  439.  
  440. /* Definition box */
  441. .def-blockquote {
  442. font-family: var(--font-sans);
  443. background-color: var(--bg-elevated);
  444. display: block;
  445. max-width: min(var(--max-width), calc(100% - 20px));
  446. text-align: left;
  447. align-items: left;
  448. justify-content: left;
  449. border-left: 5px solid #ccc;
  450. overflow: hidden;
  451. padding: 5px 7px;
  452. position: relative;
  453. }
  454.  
  455. /* Primary Image */
  456. .image img {
  457. max-height: 400px;
  458. width: auto;
  459. border-radius: 5px;
  460. cursor: pointer;
  461. transition: filter 0.3s;
  462. }
  463.  
  464. .image img:hover,
  465. .def-image img:hover {
  466. filter: brightness(var(--image-brightness));
  467. }
  468.  
  469. /* Definition Image(s) */
  470. .def-image {
  471. float: right;
  472. margin-left: 10px;
  473. max-width: min(35%, var(--def-picture-size));
  474. display: flex;
  475. flex-flow: column nowrap;
  476. justify-content: flex-start;
  477. gap: 10px;
  478. }
  479.  
  480. .def-image img {
  481. object-fit: contain;
  482. max-height: var(--def-picture-size);
  483. border-radius: 3px;
  484. cursor: pointer;
  485. transition: filter 0.3s;
  486. }
  487.  
  488. .def-image ol {
  489. list-style-type: none;
  490. padding: 0;
  491. margin: 0;
  492. }
  493.  
  494. /* Image modal css */
  495. .modal-bg {
  496. position: fixed;
  497. display: none;
  498. top: 0;
  499. right: 0;
  500. bottom: 0;
  501. left: 0;
  502. background-color: rgba(0, 0, 0, 0.8);
  503. z-index: 1000;
  504. cursor: pointer;
  505. }
  506.  
  507. .img-popup-container {
  508. position: absolute;
  509. top: 50%;
  510. left: 50%;
  511. transform: translate(-50%, -50%);
  512. width: min(calc(100% - 20px), calc(var(--max-width) + 200px));
  513. display: none;
  514. z-index: 1001;
  515. overflow: hidden;
  516. }
  517.  
  518. .img-popup-img {
  519. width: auto;
  520. height: auto;
  521. margin: 0 auto;
  522. }
  523.  
  524. /* Hide NSFW Images -- make sure you use the tag `NSFW` EXACTLY */
  525. /* Base styles */
  526. #main_image {
  527. }
  528.  
  529. /* NSFW styles (standardize to .NSFW, remove -NSFW) */
  530. #main_image.NSFW {
  531. }
  532.  
  533. /* NSFW blurred state */
  534. #main_image.NSFW img {
  535. filter: blur(20px);
  536. transition: filter 0.3s ease;
  537. transform: translateZ(0);
  538. cursor: pointer;
  539. }
  540.  
  541. /* NSFW allowed (unblurred) state */
  542. #main_image.nsfwAllowed {
  543. }
  544.  
  545. #main_image.nsfwAllowed.NSFW {
  546. }
  547.  
  548. /* Disable tap highlight and focus effects for main_image */
  549. #main_image,
  550. #main_image a,
  551. #main_image img {
  552. -webkit-tap-highlight-color: transparent;
  553. -webkit-touch-callout: none;
  554. outline: none;
  555. user-select: none;
  556. }
  557.  
  558. /* Ensure active state doesn't trigger visual effects */
  559. #main_image a:active,
  560. #main_image img:active {
  561. background: none;
  562. outline: none;
  563. }
  564.  
  565. #main_image.nsfwAllowed img {
  566. filter: blur(0px);
  567. transition: filter 0.3s ease;
  568. transform: translateZ(0);
  569. cursor: pointer;
  570. }
  571.  
  572.  
  573. .sentence {
  574. line-height: 1.5;
  575. font-size: var(--back-sentence-font-size);
  576. display: inline-block;
  577. width: calc(100% - 0px);
  578. max-width: var(--max-width);
  579. }
  580.  
  581. .sentence-mobile {
  582. display: none;
  583. }
  584.  
  585. /* Footer */
  586. footer {
  587. margin-top: auto;
  588. width: 100%;
  589. }
  590.  
  591. .bot-container {
  592. display: flex;
  593. justify-content: flex-end;
  594. max-width: calc(var(--max-width) + 20px);
  595. margin: 0px auto;
  596. width: calc(100% - 20px);
  597. }
  598.  
  599. .tags-container {
  600. flex-grow: 1;
  601. }
  602.  
  603. .tags-container .tags {
  604. min-height: 1.6em;
  605. }
  606.  
  607. .tags {
  608. font-family: var(--font-sans);
  609. background-color: var(--bg-elevated);
  610. color: var(--fg-color);
  611. display: inline-grid;
  612. place-items: center;
  613. padding: 1px 5px;
  614. cursor: pointer;
  615. border-radius: 5px;
  616. font-size: 0.9rem;
  617. margin: auto 3px;
  618. text-overflow: ellipsis;
  619. overflow: hidden;
  620. max-width: 60dvw;
  621. white-space: nowrap;
  622. }
  623.  
  624. /* Popup CSS */
  625. .popup {
  626. font-family: var(--font-sans);
  627. background-color: var(--bg-elevated);
  628. display: block;
  629. border-radius: 8px;
  630. padding: 10px;
  631. max-width: min(var(--max-width), calc(100% - 20px));
  632. }
  633.  
  634. /* Definition Header */
  635. .def-header {
  636. display: flex;
  637. justify-content: center;
  638. align-items: center;
  639. max-width: var(--max-width);
  640. width: 100%;
  641. margin: 0 auto;
  642. }
  643.  
  644. .dh-right {
  645. padding-left: 20px;
  646. max-width: 400px;
  647. position: relative;
  648. font-size: 0;
  649. }
  650.  
  651. /* Misc. info */
  652. .misc-info {
  653. margin: 0 auto;
  654. }
  655.  
  656. .misc-info ul {
  657. margin: 0;
  658. }
  659.  
  660. /* Misc. */
  661. .show-furigana>ruby rt {
  662. visibility: visible;
  663. }
  664.  
  665. ruby rt {
  666. user-select: none;
  667. visibility: hidden;
  668. }
  669.  
  670. ruby:hover rt {
  671. visibility: visible;
  672. }
  673.  
  674. b {
  675. color: var(--bold);
  676. font-weight: 600;
  677. }
  678.  
  679. b>ruby rt {
  680. opacity: 1;
  681. }
  682.  
  683. details {
  684. font-family: var(--font-sans);
  685. margin: 5px 0px;
  686. }
  687.  
  688. summary {
  689. user-select: none;
  690. cursor: pointer;
  691. margin: 0px auto;
  692. }
  693.  
  694. .pitch-low {
  695. position: relative;
  696. }
  697.  
  698. .pitch-high {
  699. position: relative;
  700. }
  701.  
  702. .pitch-high>.pitch-line {
  703. display: block;
  704. position: absolute;
  705. top: -0.1em;
  706. left: 0;
  707. right: 0;
  708. height: 0;
  709. border-top-width: 0.1em;
  710. border-top-style: solid;
  711. }
  712.  
  713. .pitch-to-drop {
  714. position: relative;
  715. padding-right: 0.1em;
  716. margin-right: 0.1em;
  717. }
  718.  
  719. .pitch-to-drop>.pitch-line {
  720. display: block;
  721. position: absolute;
  722. top: -0.1em;
  723. left: 0;
  724. right: 0;
  725. border-top-width: 0.1em;
  726. border-top-style: solid;
  727. right: -0.1em;
  728. height: 0.4em;
  729. border-right-width: 0.1em;
  730. border-right-style: solid;
  731. }
  732.  
  733. .heiban {
  734. color: var(--heiban);
  735. }
  736.  
  737. .atamadaka {
  738. color: var(--atamadaka);
  739. }
  740.  
  741. .nakadaka {
  742. color: var(--nakadaka);
  743. }
  744.  
  745. .odaka {
  746. color: var(--odaka);
  747. }
  748.  
  749. .kifuku {
  750. color: var(--kifuku);
  751. }
  752.  
  753. .left-edge,
  754. .right-edge {
  755. position: absolute;
  756. top: 0;
  757. width: 50px;
  758. height: 100%;
  759. cursor: pointer;
  760. opacity: 0.4;
  761. }
  762.  
  763. .left-edge {
  764. left: 0;
  765. border-radius: 8px 0px 0px 8px;
  766. }
  767.  
  768. .right-edge {
  769. right: 0;
  770. border-radius: 0px 8px 8px 0px;
  771. }
  772.  
  773. .left-edge:hover,
  774. .right-edge:hover {
  775. background-color: var(--bg-inset);
  776. cursor: pointer;
  777. }
  778.  
  779. ul[data-sc-content="glossary"]>li:not(:first-child)::before {
  780. white-space: pre-wrap;
  781. content: " | ";
  782. display: inline;
  783. }
  784.  
  785. ul[data-sc-content="glossary"]>li {
  786. display: inline;
  787. }
  788.  
  789. ul[data-sc-content="glossary"] {
  790. display: inline;
  791. list-style: none;
  792. padding-left: 0;
  793. }
  794.  
  795. .definition i {
  796. font-style: normal;
  797. }
  798.  
  799. li[data-dictionary^="JMdict"] i {
  800. font-style: italic;
  801. }
  802.  
  803. .definition a span {
  804. max-width: 300px !important;
  805. }
  806.  
  807. .definition .hidden {
  808. display: none
  809. }
  810.  
  811. span[data-sc-code] {
  812. white-space: nowrap;
  813. }
  814.  
  815. li[data-details="JMdict (English)"] .dict-group__glossary>ul,
  816. li[data-details="JMdict (English)"] .dict-group__glossary ul[data-sc-content="glossary"],
  817. li[data-details="JMdict"] .dict-group__glossary>ul,
  818. li[data-details="JMdict"] .dict-group__glossary ul[data-sc-content="glossary"],
  819. li[data-details="JMdict Extra"] .dict-group__glossary>ul,
  820. li[data-details="JMdict Extra"] .dict-group__glossary ul[data-sc-content="glossary"] {
  821. display: inline;
  822. padding-left: 0em;
  823. }
  824.  
  825. li[data-details="JMdict (English)"] .dict-group__glossary>ul>li,
  826. li[data-details="JMdict (English)"] .dict-group__glossary ul[data-sc-content="glossary"]>li,
  827. li[data-details="JMdict"] .dict-group__glossary>ul>li,
  828. li[data-details="JMdict"] .dict-group__glossary ul[data-sc-content="glossary"]>li,
  829. li[data-details="JMdict Extra"] .dict-group__glossary>ul>li,
  830. li[data-details="JMdict Extra"] .dict-group__glossary ul[data-sc-content="glossary"]>li {
  831. display: inline;
  832. padding-right: 0em;
  833. margin-right: 0em;
  834. }
  835.  
  836. li[data-details="JMdict (English)"] .dict-group__glossary>ul>li::after,
  837. li[data-details="JMdict (English)"] .dict-group__glossary ul[data-sc-content="glossary"]>li::after,
  838. li[data-details="JMdict"] .dict-group__glossary>ul>li::after,
  839. li[data-details="JMdict"] .dict-group__glossary ul[data-sc-content="glossary"]>li::after,
  840. li[data-details="JMdict Extra"] .dict-group__glossary>ul>li::after,
  841. li[data-details="JMdict Extra"] .dict-group__glossary ul[data-sc-content="glossary"]>li::after {
  842. content: " | ";
  843. white-space: pre-wrap;
  844. }
  845.  
  846. li[data-details="JMdict (English)"] .dict-group__glossary>ul>li:last-of-type:after,
  847. li[data-details="JMdict (English)"] .dict-group__glossary ul[data-sc-content="glossary"]>li:last-of-type:after,
  848. li[data-details="JMdict"] .dict-group__glossary>ul>li:last-of-type:after,
  849. li[data-details="JMdict"] .dict-group__glossary ul[data-sc-content="glossary"]>li:last-of-type:after,
  850. li[data-details="JMdict Extra"] .dict-group__glossary>ul>li:last-of-type:after,
  851. li[data-details="JMdict Extra"] .dict-group__glossary ul[data-sc-content="glossary"]>li:last-of-type:after {
  852. display: none;
  853. }
  854.  
  855. ol li[data-details="JMdict (English)"] .dict-group__tag-list,
  856. ol li[data-details="JMdict"] .dict-group__tag-list,
  857. ol li[data-details="JMdict Extra"] .dict-group__tag-list {
  858. font-style: italic;
  859. }
  860.  
  861. ol li[data-details="JMdict ( hitsEnglish)"] .dict-group__tag-list .dict-group__tag--dict,
  862. ol li[data-details="JMdict"] .dict-group__tag-list .dict-group__tag--dict,
  863. ol li[data-details="JMdict Extra"] .dict-group__tag-list .dict-group__tag--dict {
  864. display: none;
  865. }
  866.  
  867. ol li[data-details="Nico/Pixiv"] .dict-group__tag-list {
  868. font-style: italic;
  869. }
  870.  
  871. ol li[data-details="新和英"] details.glossary-text__details .glossary-text__summary .dict-group__glossary--first-line {
  872. display: none;
  873. }
  874.  
  875. .dict-group__tag-list .dict-group__tag:not(:first-child)::before {
  876. content: ", ";
  877. }
  878.  
  879. .dict-group__tag-list::before {
  880. content: "(";
  881. }
  882.  
  883. .dict-group__tag-list::after {
  884. content: ") ";
  885. }
  886.  
  887. /* Show definition furigana */
  888. .def-blockquote rt {
  889. visibility: visible;
  890. }
  891.  
  892. /* Lessen def-blockquote padding */
  893. .def-blockquote {
  894. padding-block: .5em;
  895. }
  896. .def-blockquote ol {
  897. margin-block: 0em;
  898. }
  899. .definition ol:has(> li[data-dictionary]),
  900. .definition ol:has(> li[data-details]) {
  901. padding-inline-start: 1.3em;
  902. }
  903.  
  904. .definition ol:has(> li[data-dictionary]:only-of-type),
  905. .definition ol:has(> li[data-details]:only-of-type) {
  906. list-style-type : none;
  907. padding-inline-start: 0;
  908. }
  909.  
  910.  
  911. .front-container {
  912. display: flex;
  913. flex-direction: column;
  914. justify-content: center;
  915. align-items: center;
  916. width: 100%;
  917. max-width: var(--max-width);
  918. margin: 0 auto;
  919. }
  920.  
  921.  
  922. .front-vocab#front-vocab-expression {
  923. text-align: center !important;
  924. display: inline-block !important;
  925. margin: 0 auto !important;
  926. width: auto !important;
  927. }
  928.  
  929. #hint {
  930. text-align: left !important;
  931. display: block;
  932. margin: 0 auto !important;
  933. width: auto !important;
  934. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!