style.css 4.7 KB

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