style.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  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. }
  11. .submenu_title {
  12. font-size: 120%;
  13. font-weight: 700;
  14. }
  15. #head_bar {
  16. display: flex;
  17. justify-content: space-between;
  18. /*height: 5em;*/
  19. background-color: var(--tool-bg-color1);
  20. border-bottom: 1px solid var(--tool-line-color);
  21. padding: 10px;
  22. margin-top: 50px;
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. z-index: 100;
  28. }
  29. .main_view {
  30. padding: 0 1em;
  31. padding-top: 7em;
  32. max-width: 1280px;
  33. margin-left: auto;
  34. margin-right: auto;
  35. }
  36. .fun_frame {
  37. border-bottom: 1px solid gray;
  38. margin-right: 10px;
  39. margin-bottom: 10px;
  40. }
  41. .fun_frame .title {
  42. padding: 6px;
  43. font-weight: 700;
  44. }
  45. .fun_frame > .content {
  46. padding: 6px;
  47. max-height: 6em;
  48. overflow-y: scroll;
  49. }
  50. .fixed {
  51. position: fixed;
  52. right: 0;
  53. top: 0;
  54. }
  55. .when_right_fixed {
  56. padding-right: 20em;
  57. }
  58. #contents_view {
  59. display: flex;
  60. }
  61. #contents_div {
  62. flex: 7;
  63. }
  64. #contents {
  65. }
  66. #contents li {
  67. white-space: normal;
  68. }
  69. #right_pannal {
  70. flex: 3;
  71. max-width: 20em;
  72. }
  73. #contents_foot {
  74. margin-bottom: 70vh;
  75. }
  76. #toc_content .level_2 {
  77. padding-left: 0.5em;
  78. }
  79. #toc_content .level_3 {
  80. padding-left: 1em;
  81. }
  82. #toc_content .level_4 {
  83. padding-left: 1.5em;
  84. }
  85. #toc_content .level_5 {
  86. padding-left: 2em;
  87. }
  88. .ui-dialog-titlebar {
  89. display: flex;
  90. justify-content: space-between;
  91. background-color: var(--btn-bg-color);
  92. padding: 5px;
  93. }
  94. .ui-widget-content {
  95. background-color: var(--bg-color);
  96. }
  97. .ui-dialog {
  98. box-shadow: 8px 8px 20px var(--border-shadow);
  99. }
  100. .active {
  101. background-color: var(--btn-hover-bg-color);
  102. }
  103. .icon_btn a {
  104. color: var(--main-color);
  105. }
  106. .icon_btn:hover a {
  107. color: var(--btn-hover-color);
  108. }
  109. .active a {
  110. color: var(--btn-hover-color);
  111. }
  112. chapter {
  113. display: inline-block;
  114. }
  115. .language-para {
  116. padding: 2px 2px;
  117. position: absolute;
  118. margin-top: 7px;
  119. border-bottom: 3px solid var(--link-color);
  120. margin-left: -60px;
  121. font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Padauk", Arial, Verdana;
  122. }
  123. .level_0 {
  124. margin-left: 0;
  125. }
  126. .level_1 {
  127. margin-left: 1em;
  128. }
  129. .level_2 {
  130. margin-left: 2em;
  131. }
  132. .level_3 {
  133. margin-left: 3em;
  134. }
  135. .level_4 {
  136. margin-left: 4em;
  137. }
  138. .level_5 {
  139. margin-left: 5em;
  140. }
  141. .level_6 {
  142. margin-left: 6em;
  143. }
  144. .channal_list {
  145. white-space: nowrap;
  146. overflow-x: hidden;
  147. }
  148. .userinfo_channal {
  149. display: none;
  150. }
  151. .userinfo_channal:hover {
  152. display: block;
  153. }
  154. #para_path chapter {
  155. color: var(--link-color);
  156. font-size: 120%;
  157. }
  158. #para_path_next_level {
  159. display: inline-block;
  160. }
  161. #right_float_pannal {
  162. position: fixed;
  163. height: calc(100% - 7.3em);
  164. top: 7.3em;
  165. left: 100%;
  166. width: 30em;
  167. min-width: 20em;
  168. color: var(--btn-color);
  169. background-color: var(--tool-bg-color);
  170. z-index: 20;
  171. -webkit-transition-duration: 0.4s;
  172. transition-duration: 0.4s;
  173. -webkit-contain: strict;
  174. contain: strict;
  175. z-index: 51;
  176. }
  177. #right_float_pannal > iframe {
  178. width: 100%;
  179. height: 100%;
  180. }
  181. .right_float_max #right_float_pannal {
  182. left: 50%;
  183. width: 50%;
  184. }
  185. .right_float_min #right_float_pannal {
  186. left: calc(100% - 30em);
  187. }
  188. #right_float_pannal > #tool_bar {
  189. position: absolute;
  190. display: flex;
  191. width: 100%;
  192. justify-content: space-between;
  193. }
  194. #right_float_pannal > #tool_bar svg {
  195. fill: var(--box-bg-color1);
  196. }
  197. #min_right_float {
  198. display: none;
  199. }
  200. .main_view_right_float_min {
  201. margin-right: 29em;
  202. }
  203. .main_view_right_float_max {
  204. margin-right: 50%;
  205. }
  206. .main_view_right_float_min #right_pannal {
  207. display: none;
  208. }
  209. .main_view_right_float_max #right_pannal {
  210. display: none;
  211. }