main.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. /* 기본 전체 옵션 */
  2. body, html, video, table, iframe, input, textarea, img, hr, blockquote, pre, iframe, .table_safe {
  3. max-width: 100%;
  4. }
  5. body {
  6. word-break: break-all;
  7. overflow: auto;
  8. font-size: 14px;
  9. }
  10. /* 텍스트 필드 */
  11. textarea, input {
  12. width: 100%;
  13. }
  14. input {
  15. box-sizing: border-box;
  16. }
  17. input[type="checkbox"], input[type="radio"] {
  18. width: auto;
  19. }
  20. /* 테이블 */
  21. table {
  22. border-collapse: collapse;
  23. }
  24. td {
  25. border: 0.5px solid gainsboro;
  26. border-width: 0.5px;
  27. padding: 8px 10px;
  28. }
  29. @supports (-webkit-touch-callout: none) {
  30. td {
  31. border: 1px solid gainsboro;
  32. border-width: 1px;
  33. }
  34. }
  35. summary {
  36. cursor: pointer;
  37. user-select: none;
  38. display: list-item;
  39. list-style: inside disclosure-closed;
  40. }
  41. /* list */
  42. .opennamu_ul {
  43. padding-left: 20px;
  44. }
  45. .opennamu_ul li {
  46. margin-left: 20px;
  47. margin-top: 5px;
  48. margin-bottom: 5px;
  49. }
  50. /* thread */
  51. .opennamu_comment {
  52. display: inline-table;
  53. width: 100%;
  54. }
  55. .opennamu_comment_color_green {
  56. background: palegreen;
  57. }
  58. .opennamu_comment_color_blue {
  59. background: paleturquoise;
  60. }
  61. .opennamu_comment_color_red {
  62. background: pink;
  63. }
  64. .opennamu_comment_color_default {
  65. background: palegoldenrod;
  66. }
  67. .opennamu_comment_color_gray {
  68. background: gainsboro;
  69. }
  70. .opennamu_comment_blind {
  71. display: none;
  72. }
  73. .opennamu_comment_blind_admin {
  74. background: gainsboro;
  75. }
  76. .opennamu_comment_scroll {
  77. max-height: 500px;
  78. overflow: scroll;
  79. -ms-overflow-style: none;
  80. scrollbar-width: none;
  81. }
  82. .opennamu_comment_scroll::-webkit-scrollbar {
  83. display: none;
  84. }
  85. /* render */
  86. /* - link */
  87. a {
  88. color: dodgerblue;
  89. text-decoration: none;
  90. }
  91. a:hover {
  92. color: darkblue;
  93. }
  94. .opennamu_not_exist_link {
  95. color: red;
  96. }
  97. .opennamu_not_exist_link:hover {
  98. color: darkred;
  99. }
  100. .opennamu_same_link {
  101. font-weight: bold;
  102. }
  103. .opennamu_link_out, .opennamu_link_inter {
  104. color: green;
  105. }
  106. .opennamu_link_out:hover, .opennamu_link_inter:hover {
  107. color: darkgreen;
  108. }
  109. .opennamu_link_out::before {
  110. content: '🅴';
  111. font-weight: lighter;
  112. background: transparent;
  113. }
  114. /* - toc */
  115. .opennamu_TOC {
  116. border: 1px solid gainsboro;
  117. padding: 20px;
  118. width: fit-content;
  119. width: -moz-fit-content;
  120. display: inline-block;
  121. clear: both;
  122. margin-top: 10px;
  123. }
  124. .opennamu_TOC_title {
  125. font-size: 18px;
  126. }
  127. /* - category */
  128. .opennamu_category {
  129. border: 1px solid gainsboro;
  130. padding: 10px;
  131. }
  132. .opennamu_category_blur {
  133. filter: blur(5px);
  134. }
  135. .opennamu_category_blur:hover {
  136. filter: none;
  137. }
  138. /* - footnote */
  139. .opennamu_footnote {
  140. border-top: 1px solid gainsboro;
  141. padding-top: 10px;
  142. margin-top: 10px;
  143. }
  144. pre, #redirect {
  145. border: 1px solid gainsboro;
  146. padding: 10px;
  147. }
  148. pre {
  149. white-space: pre-wrap;
  150. margin: 0;
  151. }
  152. code, pre {
  153. font-family: Consolas, Monaco, monospace;
  154. }
  155. #syntax {
  156. padding: 0;
  157. }
  158. .opennamu_textarea_500 {
  159. height: 500px;
  160. }
  161. .opennamu_textarea_100 {
  162. height: 100px;
  163. }
  164. .opennamu_spead_footnote {
  165. color: #555;
  166. background-color: #efefef;
  167. border: 1px solid #cecece;
  168. font-size: small;
  169. font-weight: initial;
  170. }
  171. .opennamu_popup_footnote {
  172. position: absolute;
  173. z-index: 10000;
  174. max-width: 50%;
  175. padding: 10px;
  176. background-color: #efefef;
  177. border: 1px solid #cecece;
  178. font-size: small;
  179. font-weight: initial;
  180. }
  181. @media ( max-width: 768px ) {
  182. .opennamu_popup_footnote {
  183. max-width: 100%;
  184. }
  185. }
  186. hr {
  187. border: 0;
  188. border-top: 1px solid gainsboro;
  189. }
  190. .opennamu_render_complete {
  191. white-space: pre-wrap;
  192. line-break: anywhere;
  193. display: inline;
  194. }
  195. blockquote {
  196. padding: 15px 40px 15px 15px;
  197. margin: 0;
  198. display: inline-block;
  199. border: 2px solid #ccc;
  200. border-left: 5px solid black;
  201. background-image: url('/views/main_css/file/quote.png');
  202. background-position: calc(100% - 10px) 10px;
  203. background-repeat: no-repeat;
  204. background-size: 25px;
  205. }
  206. /* 취소선 */
  207. s, strike, del {
  208. color: gray;
  209. }
  210. s:hover, strike:hover, del:hover {
  211. text-decoration: none;
  212. }
  213. /* 최근 변경 관련 테이블 */
  214. #main_table_set {
  215. width: 100%;
  216. text-align: center;
  217. }
  218. #main_table_width {
  219. width: 33.3%;
  220. }
  221. #main_table_width_half {
  222. width: 50%;
  223. }
  224. #main_table_width_quarter {
  225. width: 25%;
  226. }
  227. #main_table_top_tr {
  228. background: gainsboro;
  229. }
  230. .opennamu_history_blind {
  231. background: gainsboro;
  232. }
  233. /* 기타 */
  234. .main_hr {
  235. border: none;
  236. padding-top: 6px;
  237. padding-bottom: 6px;
  238. margin: 0;
  239. }
  240. .change_space {
  241. white-space: pre-line;
  242. }
  243. .katex {
  244. max-width: 100%;
  245. display: inline-block;
  246. overflow-x: scroll;
  247. overflow-y: hidden;
  248. }
  249. .opennamu_width_200 {
  250. width: 200px;
  251. }
  252. .opennamu_list_1 {
  253. list-style: disc;
  254. }
  255. .opennamu_list_2 {
  256. list-style: circle;
  257. }
  258. .opennamu_list_3 {
  259. list-style: square;
  260. }
  261. .opennamu_list_4 {
  262. list-style: none;
  263. }
  264. .opennamu_list_4::before {
  265. display: inline-block;
  266. content: "⬦";
  267. width: 1.2em;
  268. margin-left: -1.2em;
  269. }
  270. .opennamu_list_5 {
  271. list-style: none;
  272. }
  273. .opennamu_list_5::before {
  274. display: inline-block;
  275. content: "⬥";
  276. width: 1.2em;
  277. margin-left: -1.2em;
  278. }
  279. .opennamu_list_none {
  280. list-style: none;
  281. }
  282. #topic_color {
  283. background: #bbeabb;
  284. }