MarkdownContent.css
1 2 .markdown-container { 3 --mc-border: var(--border-color); 4 --mc-bg-card-hover: var(--bg-card-hover); 5 } 6 7 .code-block-wrapper { 8 margin: 16px 0; 9 border-radius: 8px; 10 border: 1px solid var(--border-color); 11 background: var(--bg-card); 12 overflow: hidden; 13 } 14 15 .code-block-header { 16 display: flex; 17 justify-content: space-between; 18 align-items: center; 19 padding: 6px 12px; 20 background: var(--bg-card-hover); 21 border-bottom: 1px solid var(--border-color); 22 } 23 24 .code-block-lang { 25 font-size: 12px; 26 color: var(--text-secondary); 27 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; 28 text-transform: lowercase; 29 } 30 31 .code-block-copy { 32 background: transparent; 33 border: none; 34 color: var(--text-secondary); 35 cursor: pointer; 36 padding: 4px; 37 border-radius: 4px; 38 display: flex; 39 align-items: center; 40 justify-content: center; 41 transition: all 0.2s; 42 } 43 44 .code-block-copy:hover { 45 background: var(--bg-card); 46 color: var(--text-primary); 47 } 48 49 .code-block-pre { 50 margin: 0; 51 padding: 12px; 52 overflow-x: auto; 53 font-size: 13px; 54 line-height: 1.5; 55 background: transparent; 56 } 57 58 code.inline-code { 59 background: var(--bg-card-hover); 60 padding: 2px 6px; 61 border-radius: 4px; 62 font-size: 13px; 63 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; 64 color: var(--text-primary); 65 } 66 67 .markdown-table-wrapper { 68 overflow-x: auto; 69 margin: 16px 0; 70 } 71 72 .markdown-table { 73 border-collapse: collapse; 74 width: 100%; 75 font-size: 13px; 76 } 77 78 .markdown-table th { 79 border: 1px solid var(--border-color); 80 padding: 8px 12px; 81 background: var(--bg-card-hover); 82 text-align: left; 83 font-weight: 600; 84 color: var(--text-primary); 85 } 86 87 .markdown-table td { 88 border: 1px solid var(--border-color); 89 padding: 8px 12px; 90 color: var(--text-primary); 91 } 92 93 [data-theme='light'] .hljs { 94 color: #24292e; 95 background: transparent; 96 } 97 [data-theme='light'] .hljs-doctag, 98 [data-theme='light'] .hljs-keyword, 99 [data-theme='light'] .hljs-meta .hljs-keyword, 100 [data-theme='light'] .hljs-template-tag, 101 [data-theme='light'] .hljs-template-variable, 102 [data-theme='light'] .hljs-type, 103 [data-theme='light'] .hljs-variable.language_ { 104 color: #d73a49; 105 } 106 [data-theme='light'] .hljs-title, 107 [data-theme='light'] .hljs-title.class_, 108 [data-theme='light'] .hljs-title.class_.inherited__, 109 [data-theme='light'] .hljs-title.function_ { 110 color: #6f42c1; 111 } 112 [data-theme='light'] .hljs-attr, 113 [data-theme='light'] .hljs-attribute, 114 [data-theme='light'] .hljs-literal, 115 [data-theme='light'] .hljs-meta, 116 [data-theme='light'] .hljs-number, 117 [data-theme='light'] .hljs-operator, 118 [data-theme='light'] .hljs-variable, 119 [data-theme='light'] .hljs-selector-attr, 120 [data-theme='light'] .hljs-selector-class, 121 [data-theme='light'] .hljs-selector-id { 122 color: #005cc5; 123 } 124 [data-theme='light'] .hljs-regexp, 125 [data-theme='light'] .hljs-string, 126 [data-theme='light'] .hljs-meta .hljs-string { 127 color: #032f62; 128 } 129 [data-theme='light'] .hljs-built_in, 130 [data-theme='light'] .hljs-symbol { 131 color: #e36209; 132 } 133 [data-theme='light'] .hljs-comment, 134 [data-theme='light'] .hljs-code, 135 [data-theme='light'] .hljs-formula { 136 color: #6a737d; 137 } 138 [data-theme='light'] .hljs-name, 139 [data-theme='light'] .hljs-quote, 140 [data-theme='light'] .hljs-selector-tag, 141 [data-theme='light'] .hljs-selector-pseudo { 142 color: #22863a; 143 } 144 [data-theme='light'] .hljs-subst { 145 color: #24292e; 146 } 147 [data-theme='light'] .hljs-section { 148 color: #005cc5; 149 font-weight: bold; 150 } 151 [data-theme='light'] .hljs-bullet { 152 color: #735c0f; 153 } 154 [data-theme='light'] .hljs-emphasis { 155 color: #24292e; 156 font-style: italic; 157 } 158 [data-theme='light'] .hljs-strong { 159 color: #24292e; 160 font-weight: bold; 161 } 162 [data-theme='light'] .hljs-addition { 163 color: #22863a; 164 background-color: #f0fff4; 165 } 166 [data-theme='light'] .hljs-deletion { 167 color: #b31d28; 168 background-color: #ffeef0; 169 } 170 171 [data-theme='dark'] .hljs { 172 color: #c9d1d9; 173 background: transparent; 174 } 175 [data-theme='dark'] .hljs-doctag, 176 [data-theme='dark'] .hljs-keyword, 177 [data-theme='dark'] .hljs-meta .hljs-keyword, 178 [data-theme='dark'] .hljs-template-tag, 179 [data-theme='dark'] .hljs-template-variable, 180 [data-theme='dark'] .hljs-type, 181 [data-theme='dark'] .hljs-variable.language_ { 182 color: #ff7b72; 183 } 184 [data-theme='dark'] .hljs-title, 185 [data-theme='dark'] .hljs-title.class_, 186 [data-theme='dark'] .hljs-title.class_.inherited__, 187 [data-theme='dark'] .hljs-title.function_ { 188 color: #d2a8ff; 189 } 190 [data-theme='dark'] .hljs-attr, 191 [data-theme='dark'] .hljs-attribute, 192 [data-theme='dark'] .hljs-literal, 193 [data-theme='dark'] .hljs-meta, 194 [data-theme='dark'] .hljs-number, 195 [data-theme='dark'] .hljs-operator, 196 [data-theme='dark'] .hljs-variable, 197 [data-theme='dark'] .hljs-selector-attr, 198 [data-theme='dark'] .hljs-selector-class, 199 [data-theme='dark'] .hljs-selector-id { 200 color: #79c0ff; 201 } 202 [data-theme='dark'] .hljs-regexp, 203 [data-theme='dark'] .hljs-string, 204 [data-theme='dark'] .hljs-meta .hljs-string { 205 color: #a5d6ff; 206 } 207 [data-theme='dark'] .hljs-built_in, 208 [data-theme='dark'] .hljs-symbol { 209 color: #ffa657; 210 } 211 [data-theme='dark'] .hljs-comment, 212 [data-theme='dark'] .hljs-code, 213 [data-theme='dark'] .hljs-formula { 214 color: #8b949e; 215 } 216 [data-theme='dark'] .hljs-name, 217 [data-theme='dark'] .hljs-quote, 218 [data-theme='dark'] .hljs-selector-tag, 219 [data-theme='dark'] .hljs-selector-pseudo { 220 color: #7ee787; 221 } 222 [data-theme='dark'] .hljs-subst { 223 color: #c9d1d9; 224 } 225 [data-theme='dark'] .hljs-section { 226 color: #1f6feb; 227 font-weight: bold; 228 } 229 [data-theme='dark'] .hljs-bullet { 230 color: #f2cc60; 231 } 232 [data-theme='dark'] .hljs-emphasis { 233 color: #c9d1d9; 234 font-style: italic; 235 } 236 [data-theme='dark'] .hljs-strong { 237 color: #c9d1d9; 238 font-weight: bold; 239 } 240 [data-theme='dark'] .hljs-addition { 241 color: #aff5b4; 242 background-color: #033a16; 243 } 244 [data-theme='dark'] .hljs-deletion { 245 color: #ffdcd7; 246 background-color: #67060c; 247 } 248 249 code.hljs { 250 padding: 0; 251 }