add markdown style

2024-01-12 17:59:07 +08:00
parent 4f3f6bd544
commit 324e374884
1 changed files with 107 additions and 0 deletions
--- a/src/global.css
+++ b/src/global.css
@@ -31,3 +31,110 @@ body::-webkit-scrollbar {
 .message-content {
  white-space: pre-wrap;
 }
+
+.markup > h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  margin-top: 24px;
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+
+.markup > h2::after {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 100%;
+  background: gray;
+}
+
+.markup > h1 {
+  margin-top: 0;
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+
+.markup > h1::after {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 100%;
+  background: gray;
+}
+
+.markup > p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markup > code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-space;
+  background-color: rgba(175, 184, 193, 0.2);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+}
+
+.markup > pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  color: #1f2328;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+
+.markup table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  font-family: "Arial", sans-serif;
+  color: #333;
+  background-color: #f8f8f8;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+.markup th,
+.markup td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+.markup thead th {
+  background-color: #4caf50;
+  color: white;
+  font-weight: bold;
+  border-bottom: 2px solid #ddd;
+}
+
+.markup tbody tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+.markup tbody tr:hover {
+  background-color: #e9e9e9;
+}
+
+.markup tbody td {
+  position: relative;
+}
+
+.markup tbody td:hover::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  z-index: -1;
+}