term.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759
  1. .term_link:hover .guide_contence {
  2. display: inline-block;
  3. }
  4. .term_meaning {
  5. font-weight: 700;
  6. }
  7. .term_author {
  8. font-size: 80%;
  9. color: gray;
  10. }
  11. .term_tag {
  12. font-size: 80%;
  13. font-weight: 500;
  14. margin: 0 8px;
  15. }
  16. .term_link {
  17. cursor: pointer;
  18. position: relative;
  19. }
  20. .term_link,
  21. .term_link_new {
  22. color: blue;
  23. padding-left: 2px;
  24. padding-right: 2px;
  25. }
  26. .term_link_new {
  27. color: red;
  28. }
  29. .tran {
  30. line-height: 1.5em;
  31. }
  32. .tran ul {
  33. list-style-type: circle;
  34. margin-left: 2em;
  35. }
  36. .tran li {
  37. list-style: inherit;
  38. }
  39. .tran ol {
  40. list-style-type: decimal;
  41. margin: 0;
  42. padding: 0;
  43. margin-left: 2em;
  44. }
  45. .tran:lang(en) > ol {
  46. list-style-type: decimal;
  47. }
  48. /*中文*/
  49. .tran:lang(zh) > ol {
  50. list-style-type: cjk-ideographic;
  51. margin-left: 2.5em;
  52. }
  53. /*简体中文*/
  54. .tran:lang(zh-cn) > ol {
  55. list-style-type: trad-chinese-formal;
  56. margin-left: 2.5em;
  57. }
  58. .tran:lang(zh-hans) > ol {
  59. list-style-type: trad-chinese-formal;
  60. margin-left: 2.5em;
  61. }
  62. /*繁体中文*/
  63. .tran:lang(zh-tw) > ol {
  64. list-style-type: trad-chinese-formal;
  65. margin-left: 2.5em;
  66. }
  67. .tran:lang(zh-hant) > ol {
  68. list-style-type: trad-chinese-formal;
  69. margin-left: 2.5em;
  70. }
  71. /*japanese*/
  72. .tran:lang(jp) > ol {
  73. list-style-type: hiragana;
  74. margin-left: 2.5em;
  75. }
  76. /*kora*/
  77. .tran:lang(ko) > ol {
  78. list-style-type: korean-hangul-formal;
  79. margin-left: 2.5em;
  80. }
  81. /*thai*/
  82. .tran:lang(ti) > ol {
  83. list-style-type: thai;
  84. margin-left: 2em;
  85. }
  86. /*myanmar*/
  87. .tran:lang(my) > ol {
  88. list-style-type: myanmar;
  89. margin-left: 2em;
  90. }
  91. /*myanmar*/
  92. .tran:lang(my) {
  93. font-size: 120%;
  94. line-height: 2em;
  95. }
  96. .tran_div {
  97. margin-bottom: 1em;
  98. padding-bottom: 1em;
  99. padding-top: 0.5em;
  100. border-bottom: 1px solid var(--border-line-color);
  101. }
  102. .tran_div:last-child {
  103. border-bottom: none;
  104. }
  105. .ref .tooltiptext {
  106. background-color: seashell;
  107. }
  108. .ref .tooltip .tooltiptext {
  109. right: 0;
  110. box-shadow: 0 0 10px rgb(0 0 0 / 15%);
  111. }
  112. .ref .tooltip .tooltip-bottom::after {
  113. left: 90%;
  114. border-color: transparent transparent seashell transparent;
  115. }
  116. .ref .tooltip-bottom {
  117. top: 100%;
  118. left: unset;
  119. margin-left: unset;
  120. }
  121. note:hover chapter {
  122. display: inline;
  123. /*position: absolute;*/
  124. }
  125. .ref > .book_name > chapter:first-child {
  126. display: inline;
  127. }
  128. chapter {
  129. display: none;
  130. color: var(--box-bg-color1);
  131. text-decoration: none;
  132. cursor: pointer;
  133. }
  134. chapter::after {
  135. content: " > ";
  136. }
  137. chapter:hover {
  138. color: var(--link-color);
  139. /*text-decoration: underline;*/
  140. }
  141. .tooltiptext chapter {
  142. display: inline;
  143. }
  144. para {
  145. background-color: var(--drop-bg-color);
  146. padding: 0 4px;
  147. text-decoration: none;
  148. cursor: pointer;
  149. color: var(--btn-border-color);
  150. border-radius: 5px;
  151. display: none;
  152. }
  153. .tooltiptext para {
  154. display: inline;
  155. }
  156. para:hover {
  157. text-decoration: underline;
  158. }
  159. commentary,
  160. com,
  161. nt,
  162. blockquote {
  163. margin: 0;
  164. margin-left: 1.5em;
  165. display: block;
  166. border-left: 3px solid gray;
  167. padding-left: 5px;
  168. }
  169. note > .tran {
  170. color: #5c5c5c;
  171. padding-left: 1em;
  172. padding: 0;
  173. position: relative;
  174. margin-top: -0.5em;
  175. line-height: 1.8em;
  176. }
  177. note > .tran > .text {
  178. margin-bottom: 1em;
  179. }
  180. .tran_text_tool_botton {
  181. border-radius: 50%;
  182. border: 2px solid var(--btn-bg-color);
  183. width: fit-content;
  184. padding: 2px;
  185. height: fit-content;
  186. margin-left: -1em;
  187. margin-right: 1em;
  188. background-color: var(--nocolor);
  189. visibility: hidden;
  190. }
  191. .tran_text_tool_botton > .icon_expand {
  192. width: 0.8em;
  193. height: 0.8em;
  194. min-width: 0.8em;
  195. min-height: 0.8em;
  196. }
  197. note > .tran .tran_text_tool_bar,
  198. .tran_text_tool_bar {
  199. padding: 0.5em 1em;
  200. position: absolute;
  201. display: none;
  202. color: var(--border-line-color);
  203. z-index: 40;
  204. width: auto;
  205. font-size: 14px;
  206. height: auto;
  207. line-height: 28px;
  208. background-color: var(--box-bg-color1);
  209. border-radius: 5px;
  210. }
  211. note > .tran:lang(my) .tran_text_tool_bar {
  212. margin-top: -2.5em;
  213. }
  214. note > .tran .tran_text_tool_bar::after,
  215. .tran .tran_text_tool_bar::after {
  216. content: " ";
  217. position: absolute;
  218. left: 1.4em;
  219. bottom: 100%;
  220. border-width: 5px;
  221. border-style: solid;
  222. border-color: transparent transparent var(--box-bg-color1) transparent;
  223. }
  224. .tran:hover > .tran_text_tool_botton {
  225. visibility: visible;
  226. }
  227. .tran_text_tool_bar li {
  228. list-style: none;
  229. display: flex;
  230. white-space: nowrap !important;
  231. }
  232. .tran_text_tool_bar .icon {
  233. margin: auto 0.4em auto 0;
  234. }
  235. .tip_buttom {
  236. padding: 0 0.2em;
  237. margin: 0 0.2em;
  238. cursor: pointer;
  239. background-color: inherit;
  240. border-radius: 5px;
  241. }
  242. .tip_buttom:hover {
  243. background-color: var(--btn-border-color);
  244. }
  245. .tran:hover .edit_button {
  246. display: inline-block;
  247. }
  248. .edit_button {
  249. display: inline-block;
  250. width: auto;
  251. min-width: 24px;
  252. height: auto;
  253. min-height: 24px;
  254. cursor: pointer;
  255. fill: var(--tool-color);
  256. background: url(edit.svg);
  257. background-repeat: no-repeat;
  258. background-size: contain;
  259. color: var(--tool-color);
  260. margin-top: -2em;
  261. }
  262. note > .palitext,
  263. .palitext {
  264. font-family: Noto serif;
  265. line-height: 1.5em;
  266. color: #9f3a01;
  267. font-weight: 500;
  268. margin: 4px;
  269. }
  270. note n {
  271. display: inline;
  272. color: blue;
  273. }
  274. .term_word_head_pali {
  275. text-transform: capitalize;
  276. font-size: 200%;
  277. margin-top: 0.5em;
  278. }
  279. .term_word_head {
  280. border-bottom: 1px solid #cecece;
  281. padding: 5px 0;
  282. }
  283. .term_block {
  284. border-bottom: 1px solid #cecece;
  285. padding: 5px 0;
  286. }
  287. .term_word_head_authors a {
  288. color: blue;
  289. margin: 0 3px;
  290. }
  291. .term_word_head_authors a:hover {
  292. text-decoration: underline;
  293. cursor: pointer;
  294. }
  295. note .ref {
  296. font-size: 75%;
  297. white-space: normal;
  298. max-width: 45%;
  299. text-align: right;
  300. position: absolute;
  301. right: 1em;
  302. }
  303. note:hover .ref {
  304. /*border-top: solid 1px var(--border-line-color);*/
  305. }
  306. .progress_bar_done {
  307. stroke-width: 0;
  308. fill: royalblue;
  309. }
  310. .progress_bar_undone {
  311. stroke-width: 0;
  312. fill: #c0c0c052;
  313. }
  314. .progress_bar_bg {
  315. stroke-width: 0;
  316. fill: #ffffff;
  317. }
  318. .progress_bar_percent {
  319. stroke-width: 0;
  320. fill: limegreen;
  321. }
  322. r {
  323. text-align: right;
  324. display: block;
  325. }
  326. note {
  327. padding: 0.5em 0 0 0;
  328. margin-bottom: 0.4em;
  329. border-radius: 5px;
  330. line-height: 1.3em;
  331. display: block;
  332. background-color: #80808014;
  333. position: relative;
  334. }
  335. note > .bottm_tool_button {
  336. border-radius: 5px;
  337. border: 4px dotted var(--border-line-color);
  338. display: none;
  339. transition: all 0.3s ease;
  340. }
  341. note:hover > .bottm_tool_button {
  342. display: block;
  343. }
  344. .add_new {
  345. display: inline-block;
  346. position: absolute;
  347. min-width: 1.4vw;
  348. display: none;
  349. }
  350. note:hover .add_new {
  351. display: inline-block;
  352. position: absolute;
  353. }
  354. .icon_add {
  355. width: 1.5vw;
  356. min-width: 1.4vw;
  357. height: 1.5vw;
  358. cursor: pointer;
  359. background: url(add.svg);
  360. background-repeat: no-repeat;
  361. background-size: contain;
  362. left: 0;
  363. bottom: 1em;
  364. }
  365. .tool_bar > .more_tran {
  366. display: inline-block;
  367. margin-right: 5px;
  368. transform: rotate(-90deg);
  369. transition: all 0.2s ease;
  370. }
  371. .icon_expand {
  372. width: auto;
  373. min-width: 14px;
  374. height: auto;
  375. min-height: 14px;
  376. cursor: pointer;
  377. background: url(expand.svg);
  378. background-repeat: no-repeat;
  379. background-size: contain;
  380. }
  381. .icon_fold {
  382. width: auto;
  383. min-width: 14px;
  384. height: auto;
  385. min-height: 14px;
  386. cursor: pointer;
  387. background: url(fold.svg);
  388. background-repeat: no-repeat;
  389. background-size: contain;
  390. }
  391. .other_tran_div {
  392. min-height: 1em;
  393. border-top: 1px solid var(--border-line-color);
  394. }
  395. .other_tran_div > .tool_bar {
  396. background-color: var(--btn-bg-color);
  397. padding: 0 6px;
  398. border-radius: 0 0 4px 4px;
  399. cursor: pointer;
  400. justify-content: space-between;
  401. line-height: 1.5em;
  402. }
  403. .other_tran_div > .tool_bar > .tool_left {
  404. white-space: nowrap;
  405. }
  406. .other_tran_div > .tool_bar > .tool_right {
  407. white-space: pre-wrap;
  408. margin-left: auto;
  409. }
  410. .other_tran_div > .other_tran {
  411. min-height: 1em;
  412. transition: all 0.2s ease;
  413. display: none;
  414. }
  415. .tool_bar {
  416. display: flex;
  417. }
  418. .bg_color_1 {
  419. background-color: #ebebeb66;
  420. }
  421. .bg_color_2 {
  422. background: linear-gradient(to left, #6afdb033, #ebebeb66);
  423. }
  424. .bg_color_3 {
  425. background: linear-gradient(to left, #6a95fd26, #ebebeb66);
  426. }
  427. .bg_color_4 {
  428. background: linear-gradient(to left, #f9e7911c, #ebebeb66);
  429. }
  430. .bg_color_5 {
  431. background: linear-gradient(to left, #fe99b91c, #ebebeb66);
  432. }
  433. pre {
  434. white-space: pre-line;
  435. font-family: auto;
  436. border-left: 3px solid var(--border-shadow);
  437. margin-left: 1em;
  438. padding-left: 0.5em;
  439. }
  440. .note_tool_bar {
  441. position: relative;
  442. display: none;
  443. z-index: 50;
  444. margin-right: 1em;
  445. }
  446. note:hover .note_tool_bar {
  447. display: block;
  448. }
  449. .sent_menu {
  450. right: 0;
  451. }
  452. .para_menu {
  453. left: 0;
  454. }
  455. .ui-widget input,
  456. .ui-widget select,
  457. .ui-widget textarea,
  458. .ui-widget button {
  459. font-family: unset;
  460. font-size: 1.1em;
  461. }
  462. .tran p {
  463. margin: 0;
  464. }
  465. .note_tool_context {
  466. position: absolute;
  467. right: -1vw;
  468. width: 1.5em;
  469. text-align: right;
  470. margin-top: -0.3em;
  471. }
  472. .note_tool_context .icon {
  473. fill: var(--link-color);
  474. }
  475. .note_tool_context:hover .icon {
  476. fill: (--link-hover-color);
  477. }
  478. .channel_select {
  479. display: none;
  480. }
  481. #channal_list .selected {
  482. background: linear-gradient(to right, #6afdb033, #ebebeb66);
  483. padding: 5px;
  484. border-radius: 5px;
  485. }
  486. #channal_list .noselect {
  487. background-color: unset;
  488. padding: 5px;
  489. border-radius: 5px;
  490. }
  491. .other_tran_num,
  492. .similar_sent_num {
  493. -webkit-border-radius: 7px;
  494. border-radius: 7px;
  495. background-color: cornflowerblue;
  496. position: relative;
  497. min-width: 14px;
  498. height: 14px;
  499. display: inline-flex;
  500. justify-content: center;
  501. text-align: center;
  502. line-height: 14px;
  503. display: none;
  504. margin: auto 2px;
  505. color: whitesmoke;
  506. padding: 0 3px;
  507. }
  508. .similar_sent_num {
  509. display: inline-flex;
  510. }
  511. .separate_line {
  512. border: solid 1px #e8e8e8;
  513. border-radius: 3px;
  514. margin: 1px 5px;
  515. width: 1px;
  516. background: #c6c6c6;
  517. text-decoration: none;
  518. }
  519. pw {
  520. padding-right: 0.5em;
  521. }
  522. .slider_show_shell {
  523. position: fixed;
  524. z-index: 1000;
  525. top: 0;
  526. left: 0;
  527. width: 100%;
  528. height: 85%;
  529. background-color: #000000f5;
  530. font-size: 180%;
  531. padding-top: 2em;
  532. }
  533. .slider_show_shell .bg_color_1 {
  534. background-color: unset;
  535. }
  536. /*编辑框*/
  537. .sent_tran {
  538. padding: 5px;
  539. margin-bottom: 2px;
  540. }
  541. .sent_tran_inner {
  542. display: flex;
  543. }
  544. .sent_tran:hover {
  545. background-color: rgba(0.5, 0.5, 0.5, 0.02);
  546. }
  547. .left_bar {
  548. flex: 1;
  549. display: flex;
  550. margin-right: 5px;
  551. }
  552. .sent_tran .left_bar > .face {
  553. display: block;
  554. margin: auto 0.5em auto auto;
  555. }
  556. .compact .left_bar > .face {
  557. display: none;
  558. }
  559. .left_bar > .date {
  560. display: none;
  561. }
  562. .compact .left_bar > .date {
  563. display: block;
  564. font-size: 80%;
  565. color: var(--main-color1);
  566. }
  567. .sent_tran_inner > .body {
  568. width: 100%;
  569. display: block;
  570. flex: 20;
  571. }
  572. .preview {
  573. font-size: 110%;
  574. }
  575. .compact .body > .head_bar {
  576. display: flex;
  577. }
  578. .compact .body > .head_bar > .date {
  579. display: none;
  580. }
  581. .head_bar > .info {
  582. display: none;
  583. }
  584. .head_bar > .info > .name {
  585. font-weight: 700;
  586. white-space: nowrap;
  587. margin-right: 0.5em;
  588. }
  589. .head_bar > .info > .date {
  590. font-size: 0.8em;
  591. color: gray;
  592. }
  593. .compact .head_bar > .info {
  594. display: block;
  595. }
  596. .compact .head_bar > .info > .date {
  597. display: none;
  598. }
  599. .foot_bar .info {
  600. color: var(--main-color);
  601. }
  602. .tool_bar > .right {
  603. position: absolute;
  604. right: 0;
  605. margin-top: calc(-1.8em - 8px);
  606. display: none;
  607. width: auto;
  608. background-color: var(--bg-color);
  609. border: 1px solid var(--border-line-color);
  610. border-radius: 6px;
  611. padding: 3px;
  612. /*margin-right: 20px;*/
  613. }
  614. .sent_tran_inner:hover .tool_bar > .right {
  615. display: block;
  616. }
  617. .body > .edit {
  618. display: none;
  619. }
  620. .body > .edit textarea {
  621. color: var(--main-color);
  622. width: 100%;
  623. background-color: var(--drop-bg-color);
  624. border: unset;
  625. border-radius: 8px;
  626. padding: 5px;
  627. line-height: 1.5em;
  628. height: 90px;
  629. font-size: 120%;
  630. }
  631. .foot_bar {
  632. font-size: 90%;
  633. }
  634. .foot_bar > .info {
  635. display: flex;
  636. }
  637. .foot_bar > .info span {
  638. margin-right: 4px;
  639. }
  640. .compact .foot_bar {
  641. display: none;
  642. }
  643. .edit_mode {
  644. background-color: #fafafa;
  645. }
  646. .edit_mode > .sent_tran_inner > .body > .head_bar > .preview {
  647. display: none;
  648. }
  649. .edit_mode > .sent_tran_inner > .body > .edit {
  650. display: block;
  651. }
  652. .pop_menu {
  653. display: flex;
  654. }
  655. .tag_list {
  656. display: flex;
  657. list-style-type: none;
  658. }
  659. .tag_list li {
  660. border-radius: 6px;
  661. margin-right: 5px;
  662. background-color: var(--bookx);
  663. padding: 2px 5px;
  664. cursor: pointer;
  665. }
  666. li.active {
  667. background-color: var(--booka);
  668. }
  669. .tag_list li:hover {
  670. background-color: var(--booka);
  671. }
  672. .sent_tran .preview p {
  673. margin: 0;
  674. }
  675. .pop_menu .icon {
  676. fill: var(--main-color);
  677. }
  678. .pr_content {
  679. margin-left: 3em;
  680. border-left: 3px solid var(--border-line-color);
  681. }
  682. .menu_space_between a {
  683. display: flex;
  684. justify-content: space-between;
  685. }
  686. .body > .head_bar > .loading {
  687. color: gray;
  688. }
  689. .tooltip {
  690. display: inline-flex;
  691. }
  692. .disable {
  693. cursor: not-allowed;
  694. }
  695. .channel_name {
  696. white-space: nowrap;
  697. }
  698. .channel_name:hover {
  699. background-color: var(--btn-border-color);
  700. }
  701. .channel_list {
  702. margin-right: 4px;
  703. }
  704. .pali_div {
  705. padding: 0 10px 5px 10px;
  706. }
  707. .case_dropdown {
  708. min-width: unset;
  709. }
  710. .channel_list > li:first-child {
  711. border-bottom: solid 1px;
  712. justify-content: center;
  713. font-weight: bold;
  714. }