소스 검색

게시글 본문 표 배색 추가 (다크 테마)

- 격자/헤더 #2c2c2c, 셀 기본 #242424(한 단계 아래), 짝수 행 #202020, hover #1a1a1a
- 헤더 셀을 지정하지 않은 표(에디터 기본 삽입)는 :has() 로 첫 행을 머리글 처리
- 적용 범위는 #boardView .body ... blockquote table 로 한정 — 상위 레이아웃 표는 영향 없음
- desktop/mobile 양쪽 scss 와 컴파일된 public/css 갱신

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
KIM-JINO5 1 주 전
부모
커밋
8167745567
4개의 변경된 파일107개의 추가작업 그리고 0개의 파일을 삭제
  1. 31 0
      public/css/desktop/board/view.css
  2. 0 0
      public/css/mobile/board/view.css
  3. 40 0
      resources/sass/desktop/board/view.scss
  4. 36 0
      resources/sass/mobile/board/view.scss

+ 31 - 0
public/css/desktop/board/view.css

@@ -142,6 +142,37 @@
 #boardView .body table tbody tr td blockquote img {
   max-width: 100%;
 }
+#boardView .body table tbody tr td blockquote table {
+  margin: 10px 0;
+  border: 1px solid #2c2c2c;
+  border-collapse: collapse;
+  background-color: #242424;
+}
+#boardView .body table tbody tr td blockquote table th, #boardView .body table tbody tr td blockquote table td {
+  padding: 7px 10px;
+  border: 1px solid #2c2c2c;
+}
+#boardView .body table tbody tr td blockquote table th, #boardView .body table tbody tr td blockquote table thead td {
+  background-color: #2c2c2c;
+  color: #d5d5d5;
+  font-weight: 600;
+}
+#boardView .body table tbody tr td blockquote table:not(:has(th)):not(:has(thead)) > tbody > tr:first-child > td {
+  background-color: #2c2c2c;
+  color: #d5d5d5;
+  font-weight: 600;
+}
+#boardView .body table tbody tr td blockquote table tbody tr:nth-of-type(even) > * {
+  background-color: #202020;
+}
+#boardView .body table tbody tr td blockquote table tbody tr:hover > * {
+  background-color: #1a1a1a;
+}
+#boardView .body table tbody tr td blockquote table caption {
+  caption-side: top;
+  padding: 4px 2px;
+  color: #999;
+}
 #boardView .body table tbody tr td blockquote pre[class*=language-],
 #boardView .body table tbody tr td blockquote code[class*=language-] {
   overflow: auto;

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
public/css/mobile/board/view.css


+ 40 - 0
resources/sass/desktop/board/view.scss

@@ -197,6 +197,46 @@
                                 max-width: 100%;
                             }
 
+                            // 본문에 삽입된 표
+                            table {
+                                margin: 10px 0;
+                                border: 1px solid #2c2c2c;
+                                border-collapse: collapse;
+                                background-color: #242424;
+
+                                th, td {
+                                    padding: 7px 10px;
+                                    border: 1px solid #2c2c2c;
+                                }
+
+                                th, thead td {
+                                    background-color: #2c2c2c;
+                                    color: #d5d5d5;
+                                    font-weight: 600;
+                                }
+
+                                // 헤더 셀을 지정하지 않은 표(에디터 기본 삽입)는 첫 행을 머리글로 처리
+                                &:not(:has(th)):not(:has(thead)) > tbody > tr:first-child > td {
+                                    background-color: #2c2c2c;
+                                    color: #d5d5d5;
+                                    font-weight: 600;
+                                }
+
+                                tbody tr:nth-of-type(even) > * {
+                                    background-color: #202020;
+                                }
+
+                                tbody tr:hover > * {
+                                    background-color: #1a1a1a;
+                                }
+
+                                caption {
+                                    caption-side: top;
+                                    padding: 4px 2px;
+                                    color: #999;
+                                }
+                            }
+
                             pre[class*="language-"],
                             code[class*="language-"] {
                                 overflow: auto;

+ 36 - 0
resources/sass/mobile/board/view.scss

@@ -196,6 +196,42 @@
                                 }
                             }
 
+                            // 본문에 삽입된 표
+                            table {
+                                margin: 10px 0;
+                                border: 1px solid #2c2c2c;
+                                border-collapse: collapse;
+                                background-color: #242424;
+
+                                th, td {
+                                    padding: 6px 8px;
+                                    border: 1px solid #2c2c2c;
+                                }
+
+                                th, thead td {
+                                    background-color: #2c2c2c;
+                                    color: #d5d5d5;
+                                    font-weight: 600;
+                                }
+
+                                // 헤더 셀을 지정하지 않은 표(에디터 기본 삽입)는 첫 행을 머리글로 처리
+                                &:not(:has(th)):not(:has(thead)) > tbody > tr:first-child > td {
+                                    background-color: #2c2c2c;
+                                    color: #d5d5d5;
+                                    font-weight: 600;
+                                }
+
+                                tbody tr:nth-of-type(even) > * {
+                                    background-color: #202020;
+                                }
+
+                                caption {
+                                    caption-side: top;
+                                    padding: 4px 2px;
+                                    color: #999;
+                                }
+                            }
+
                             pre[class*="language-"],
                             code[class*="language-"] {
                                 overflow: auto;

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.