Просмотр исходного кода

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

- 격자/헤더 #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 день назад
Родитель
Сommit
8167745567

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

@@ -142,6 +142,37 @@
 #boardView .body table tbody tr td blockquote img {
 #boardView .body table tbody tr td blockquote img {
   max-width: 100%;
   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 pre[class*=language-],
 #boardView .body table tbody tr td blockquote code[class*=language-] {
 #boardView .body table tbody tr td blockquote code[class*=language-] {
   overflow: auto;
   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%;
                                 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-"],
                             pre[class*="language-"],
                             code[class*="language-"] {
                             code[class*="language-"] {
                                 overflow: auto;
                                 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-"],
                             pre[class*="language-"],
                             code[class*="language-"] {
                             code[class*="language-"] {
                                 overflow: auto;
                                 overflow: auto;

Некоторые файлы не были показаны из-за большого количества измененных файлов