style.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. #search_result {
  2. position: absolute;
  3. background: wheat;
  4. max-width: 95%;
  5. width: 24em;
  6. }
  7. .icon {
  8. width: 15px;
  9. height: 15px;
  10. margin-top: 4px;
  11. margin-bottom: -2px;
  12. }
  13. .submenu_title {
  14. font-size: 120%;
  15. font-weight: 700;
  16. }
  17. #head_bar {
  18. display: flex;
  19. justify-content: space-between;
  20. max-height: 5em;
  21. background-color: var(--tool-bg-color1);
  22. border-bottom: 1px solid var(--tool-line-color);
  23. padding: 0.5vh 0.5vw;
  24. margin-top: 50px;
  25. position: fixed;
  26. top: 0;
  27. left: 0;
  28. width: 100%;
  29. z-index: 100;
  30. }
  31. #pali_pedia {
  32. font-size: 200%;
  33. margin-top: auto;
  34. margin-bottom: auto;
  35. padding-left: 0.5em;
  36. }
  37. .main_view {
  38. padding: 0 1em;
  39. padding-top: calc(50px + 36px + 1vh);
  40. /*max-width: 1280px;*/
  41. margin-left: 0;
  42. margin-right: auto;
  43. transition: all 0.5s ease;
  44. }
  45. .main_view_narrow{
  46. margin-left:20vw;
  47. }
  48. .fun_frame_narrow{
  49. width:20vw;
  50. }
  51. #left_pannal_inner {
  52. position: fixed;
  53. top: 0;
  54. left: 0;
  55. padding-top: calc(5em + 50px);
  56. height: 100%;
  57. /*width:300px;*/
  58. /*overflow-x: hidden;*/
  59. overflow: scroll;
  60. }
  61. #toc_content{
  62. max-height: calc(100vh - 90px);
  63. width: max-content;
  64. max-width:calc(20vw - 24px);
  65. background-color: var(--bg-color);
  66. border-bottom: 1px solid var(--border-line-color);
  67. overflow-y: unset;
  68. transition: all 0.5s ease;
  69. }
  70. .fun_frame {
  71. border-bottom: 1px solid gray;
  72. margin-right: 10px;
  73. margin-bottom: 10px;
  74. width: 30vw;
  75. transition: all 0.5s ease;
  76. }
  77. .fun_frame .title {
  78. padding: 6px;
  79. font-weight: 700;
  80. align-self: center;
  81. }
  82. .fun_frame > .content {
  83. padding: 4em 6px 6px 6px;
  84. max-height: 6em;
  85. overflow-y: scroll;
  86. /*max-width: 260px;*/
  87. }
  88. .fixed {
  89. position: fixed;
  90. right: 0;
  91. top: 0;
  92. }
  93. .when_right_fixed {
  94. padding-right: 20em;
  95. }
  96. #contents_view {
  97. display: flex;
  98. }
  99. .contents_div {
  100. /*flex: 7;*/
  101. padding: 0 1em 0 30px;
  102. width: calc(70vw - 2em);
  103. }
  104. .contents_div_narrow{
  105. width: calc(60vw - 2em);
  106. }
  107. #contents {
  108. min-height: 400px;
  109. }
  110. #contents li {
  111. white-space: normal;
  112. }
  113. #right_pannal {
  114. /*flex: 3;*/
  115. /*max-width: 270px;*/
  116. }
  117. #head_bar {
  118. height: unset;
  119. }
  120. #contents_foot {
  121. margin-bottom: 70vh;
  122. }
  123. #toc_content .level_2 {
  124. padding-left: 0.5em;
  125. }
  126. #toc_content .level_3 {
  127. padding-left: 1em;
  128. }
  129. #toc_content .level_4 {
  130. padding-left: 1.5em;
  131. }
  132. #toc_content .level_5 {
  133. padding-left: 2em;
  134. }
  135. .ui-dialog-titlebar {
  136. display: flex;
  137. justify-content: space-between;
  138. background-color: var(--btn-bg-color);
  139. padding: 5px;
  140. }
  141. .ui-widget-content {
  142. background-color: var(--bg-color);
  143. }
  144. .ui-dialog {
  145. box-shadow: 8px 8px 20px var(--border-shadow);
  146. }
  147. .active {
  148. background-color: var(--btn-hover-bg-color);
  149. }
  150. .icon_btn a {
  151. color: var(--main-color);
  152. }
  153. .icon_btn:hover a {
  154. color: var(--btn-hover-color);
  155. }
  156. .tran img {
  157. max-width: 100%;
  158. max-height: 200px;
  159. width: auto;
  160. height: auto;
  161. object-fit: cover;
  162. background-size: contain;
  163. }
  164. .channal_list {
  165. white-space: nowrap;
  166. overflow-x: hidden;
  167. }
  168. .userinfo_channal {
  169. display: none;
  170. }
  171. .userinfo_channal:hover {
  172. display: block;
  173. }
  174. .sent_tran img{
  175. width: 40%;
  176. max-width: 40%;
  177. }
  178. .content_inner img {
  179. /*width: 90%;*/
  180. max-width: 90%;
  181. }
  182. /*
  183. 左右对读
  184. .note_shell {
  185. display: flex;
  186. }
  187. .note_shell > .palitext{
  188. flex: 5;
  189. }
  190. .note_shell>note {
  191. flex: 5;
  192. }
  193. */
  194. .tool_bar {
  195. display: flex;
  196. position: relative;
  197. }
  198. .page_number {
  199. padding: 2px 2px;
  200. position: absolute;
  201. margin-top: 0;
  202. margin-left: -30px;
  203. font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans Myanmar", Arial, Verdana;
  204. color: var(--main-color1);
  205. font-size: 80%;
  206. }
  207. #article_edition {
  208. padding: 8px;
  209. margin: 0 4px;
  210. border-bottom: 1px solid var(--border-line-color);
  211. display: flex;
  212. min-width: 18em;
  213. }
  214. #edition_dropdown {
  215. margin-left: 1em;
  216. }
  217. #head_nav {
  218. display: flex;
  219. justify-content: space-between;
  220. }
  221. #head_bar {
  222. display: flex;
  223. flex-direction: initial;
  224. }
  225. .hidden{
  226. display:none;
  227. }
  228. #main_view.edit_mode{
  229. max-width: 100%;
  230. }
  231. #article_path chapter{
  232. color: var(--link-color);
  233. }
  234. #article_path chapter:hover {
  235. color: var(--link-hover-color);
  236. text-decoration: underline;
  237. }
  238. .right_float_min #right_float_pannal {
  239. left: calc(100% - 30vw + 0.6em);
  240. }
  241. #right_float_pannal {
  242. position: fixed;
  243. height: calc(100% - 7.3em);
  244. top: 7.3em;
  245. left: 100%;
  246. width: calc(30vw - 0.6em);
  247. min-width: 20vw;
  248. color: var(--btn-color);
  249. background-color: var(--tool-bg-color);
  250. z-index: 20;
  251. -webkit-transition-duration: 0.4s;
  252. transition-duration: 0.4s;
  253. -webkit-contain: strict;
  254. contain: strict;
  255. z-index: 51;
  256. }
  257. #right_float_pannal > iframe {
  258. width: 100%;
  259. height: 100%;
  260. }
  261. .right_float_max #right_float_pannal {
  262. left: 50%;
  263. width: 50%;
  264. }
  265. #right_float_pannal > #tool_bar {
  266. /*position: absolute;*/
  267. display: flex;
  268. width: 100%;
  269. justify-content: space-between;
  270. }
  271. #right_float_pannal > #tool_bar svg {
  272. fill: var(--bg-color);
  273. height: 2em;
  274. width: 2em;
  275. }
  276. #head_nav_right{
  277. display: flex;
  278. }
  279. .nav_bnt{
  280. min-width: 20em;
  281. padding: 15px;
  282. border: 1px solid var(--border-line-color);
  283. border-radius: 5px;
  284. cursor: pointer;
  285. margin: 10px;
  286. }
  287. .nav_right{
  288. text-align: right;
  289. }
  290. .nav_bnt:hover {
  291. background-color: var(--tool-link-hover-color);
  292. color: var(--btn-hover-color);
  293. }
  294. #contents_nav{
  295. display: flex;
  296. justify-content: space-between;
  297. }
  298. td, th {
  299. border: unset;
  300. vertical-align: baseline;
  301. padding:6px;
  302. }
  303. table {
  304. box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  305. border-collapse: collapse;
  306. }
  307. tr {
  308. border-bottom: 1px solid gray;
  309. }
  310. #article_title{
  311. font-family: noto serif;
  312. }