chore: dark color for cards

1 files changed, 55 insertions, 0 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
new file mode 100644
index 00000000..de04feac
--- /dev/null
+++ b/assets/css/components/_card.scss
@@ -0,0 +1,55 @@
+/* 亮色模式（默认） */
+.card {
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 2px;
+    padding: 1rem 1.35rem;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    color: #333;
+    margin: 1rem 0;
+    position: relative;
+
+    .card-corner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 50px;
+        height: 50px;
+        background: linear-gradient(-45deg, #f8f8f8 50%, #ddd 50%);
+        clip-path: polygon(100% 0, 0 0, 100% 100%);
+    }
+
+    .card-tags {
+        margin: 0;
+        font-size: 1rem;
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    .card-title {
+        margin: 0;
+    }
+
+    .card-content {
+        font-size: 1.05rem;
+    }
+
+    /* 暗色模式 */
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background-color: #222;
+        color: #ddd;
+
+        .card-corner {
+            background: linear-gradient(-45deg, #444 50%, #666 50%);
+        }
+
+        .card-tags {
+            a {
+                color: #bbb;
+            }
+        }
+    }
+}