优化深色模式

QQBackup · Jan 1, 2025 · d93ac48 · d93ac48
1 parent 372e43d
commit d93ac48
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 89 deletions.
diff --git a/docs/decrypt/index.md b/docs/decrypt/index.md
@@ -6,8 +6,9 @@ description: NTQQ 数据库解密教程
 
 > [!WARNING] 警告
 > 教程中可能对数据库进行不可逆操作，请注意备份数据库文件
-尽管已经经过实验验证可用，本仓库中给出的指引**可能**有**破坏聊天记录**或**导致封号**的风险，强烈建议在自行审查代码、评估风险后使用。
-如果您确实要使用，**建议**进行以下操作，以减小风险：
+>
+>尽管已经经过实验验证可用，本仓库中给出的指引**可能**有**破坏聊天记录**或**导致封号**的风险，强烈建议在自行审查代码、评估>风险后使用。
+>如果您确实要使用，**建议**进行以下操作，以减小风险：
 >- 先将聊天记录使用其他更保险的方式**导出**，比如 PCQQ (Windows) 自带的“导出消息记录（`mht`格式）
 >- 做好**备份**，比如 安卓端使用系统的备份功能、电脑端全盘备份
 >- 将聊天记录使用官方的“**迁移聊天记录**”功能，转移到不常用设备或虚拟机后操作

diff --git a/docs/files.md b/docs/files.md
@@ -153,39 +153,48 @@ prev: false
 
 /* 文件项样式 */
 .file-item {
-  background-color: var(--file-bg);
-  border: 1px solid var(--file-border);
+  background-color: var(--file-bg-color);
+  border: 1px solid var(--file-border-color);
   border-radius: 10px;
   padding: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   opacity: 1; /* 无动画 */
   transform: translateY(0); /* 无动画 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.file-item:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
 }
 
 /* 文件图标样式 */
 .file-icon img {
   width: 40px;
   height: 40px;
+  border-radius: 5px; /* 添加圆角 */
 }
 
 /* 文件名样式 */
 .file-name a {
   text-decoration: none;
-  color: var(--file-text);
+  color: var(--file-text-color);
   font-weight: bold;
   margin-left: 1rem;
-  transition: color 0.3s ease;
+  transition: color 0.3s ease, transform 0.3s ease;
 }
 
 .file-name a:hover {
-  color: var(--file-hover);
+  color: var(--file-hover-color);
+  transform: scale(1.05); /* 放大效果 */
 }
 
 /* 文件日期样式 */
 .file-date {
-  color: var(--file-date-text);
+  color: var(--file-date-color);
   font-size: 0.9rem;
 }
 
@@ -201,22 +210,35 @@ prev: false
   }
 }
 
-/* 全局变量 */
+/* 全局变量：浅色模式 */
 :root {
-  --file-bg: #f5f5f5; /* 清新中性的灰白色背景 */
-  --file-border: #cccccc; /* 浅灰色边框 */
-  --file-text: #2e2e2e; /* 深灰色文字 */
-  --file-hover: #005bda; /* 清新的蓝色悬停效果 */
-  --file-date-text: #444444; /* 中性灰色日期文字 */
+  --file-bg-color: rgba(250, 250, 250, 1); /* 柔和白色背景 */
+  --file-border-color: rgba(220, 220, 220, 1); /* 浅灰色边框 */
+  --file-text-color: rgba(50, 50, 50, 1); /* 深灰色文字 */
+  --file-hover-color: rgba(0, 91, 218, 1); /* 鲜艳蓝色悬停效果 */
+  --file-date-color: rgba(100, 100, 100, 1); /* 中性灰色日期文字 */
 }
 
-/* 深色模式变量 */
+/* 深色模式 */
 .dark {
-  --file-bg: #1e1e1e; /* 深色背景，更贴近黑色但不刺眼 */
-  --file-border: #2e2e2e; /* 深灰色边框 */
-  --file-text: #dcdcdc; /* 明亮的灰白色文字 */
-  --file-hover: #6699ff; /* 柔和的蓝色悬停效果 */
-  --file-date-text: #a1a1a1; /* 浅灰色日期文字 */
+  --file-bg-color: rgba(32, 33, 39, 1); /* 深色背景 */
+  --file-border-color: rgba(48, 48, 48, 1); /* 较深的灰色边框 */
+  --file-text-color: rgba(220, 220, 220, 1); /* 浅灰白文字 */
+  --file-hover-color: rgba(102, 153, 255, 1); /* 柔和蓝色悬停效果 */
+  --file-date-color: rgba(161, 161, 161, 1); /* 浅灰色日期文字 */
+}
+
+.file-icon img {
+  width: 40px;
+  height: 40px;
+  border-radius: 5px; 
+  transition: filter 0.3s ease;
 }
+
+/* 深色模式下调整图标颜色 */
+.dark .file-icon img {
+  filter: invert(1) brightness(2);
+}
+
 </style>
 
diff --git a/docs/public/thanks/GroupChatAnnualReport.jpeg b/docs/public/thanks/GroupChatAnnualReport.jpeg
diff --git a/docs/public/thanks/github.png b/docs/public/thanks/github.png
diff --git a/docs/public/thanks/github.svg b/docs/public/thanks/github.svg
diff --git a/docs/thanks/index.md b/docs/thanks/index.md
@@ -10,74 +10,65 @@ prev: false
 - 若有希望补充/想从致谢名单中移除的，可在 GitHub 开 issues 或通过 [[email protected]](mailto:[email protected]) 联系我修改
 
 <div class="card-container">
-  <div class="card">
-    <a href="https://github.com/QQBackup/qq-win-db-key" target="_blank">
-      <div class="card-image">
-        <img src="/icons/logo.jpg" alt="">
-      </div>
-      <div class="card-content">
-        <h3>qq-win-db-key</h3>
-        <p>文档大部分参考教程皆来源于此。</p>
-      </div>
-    </a>
-  </div>
-
-  <div class="card">
-    <a href="https://blog.reincarnatey.net/2024/0707-qqnt-history-export/" target="_blank">
-      <div class="card-image">
-        <img src="/thanks/失迹.png" alt="">
-      </div>
-      <div class="card-content">
-        <h3>失迹の博客</h3>
-        <p>为 nt_msg 表中列名信息提供了参考</p>
-      </div>
-    </a>
-  </div>
-
-  <div class="card">
-    <a href="https://github.com/mobyw/GroupChatAnnualReport" target="_blank">
-      <div class="card-image">
-        <img src="/thanks/GroupChatAnnualReport.jpg" alt="">
-      </div>
-      <div class="card-content">
-        <h3>GroupChatAnnualReport</h3>
-        <p>为 nt_msg 表中列名信息提供了参考</p>
-      </div>
-    </a>
-  </div>
-  <div class="card">
-    <a href="https://github.com/QQBackup/QQDecrypt" target="_blank">
-      <div class="card-image">
-        <img src="/thanks/github.png" alt="">
-      </div>
-      <div class="card-content">
-        <h3>GitHub</h3>
-        <p>为仓库源代码提供托管服务</p>
-      </div>
-    </a>
-  </div>
-  <div class="card">
-    <a href="https://vitepress.dev/" target="_blank">
-      <div class="card-image">
-        <img src="/thanks/vitepress.svg" alt="">
-      </div>
-      <div class="card-content">
-        <h3>VitePress</h3>
-        <p>网站使用的静态生成框架</p>
-      </div>
-    </a>
-  </div>
-  <div class="card">
-    <a href="https://vercel.com/" target="_blank">
-      <div class="card-image">
-        <img src="/thanks/vercel.png" alt="">
-      </div>
-      <div class="card-content">
-        <h3>vercel</h3>
-        <p>网站使用的静态网站自动化部署平台</p>
-      </div>
-    </a>
-  </div>  
+  <a class="card" href="https://github.com/QQBackup/qq-win-db-key" target="_blank">
+    <div class="card-image">
+      <img src="/icons/logo.jpg" alt="">
+    </div>
+    <div class="card-content">
+      <h3>qq-win-db-key</h3>
+      <p>文档大部分参考教程皆来源于此。</p>
+    </div>
+  </a>
+
+  <a class="card" href="https://blog.reincarnatey.net/2024/0707-qqnt-history-export/" target="_blank">
+    <div class="card-image">
+      <img src="/thanks/失迹.png" alt="">
+    </div>
+    <div class="card-content">
+      <h3>失迹の博客</h3>
+      <p>为 nt_msg 表中列名信息提供了参考</p>
+    </div>
+  </a>
+
+  <a class="card" href="https://github.com/mobyw/GroupChatAnnualReport" target="_blank">
+    <div class="card-image">
+      <img src="/thanks/GroupChatAnnualReport.jpg" alt="">
+    </div>
+    <div class="card-content">
+      <h3>GroupChatAnnualReport</h3>
+      <p>为 nt_msg 表中列名信息提供了参考</p>
+    </div>
+  </a>
+
+  <a class="card" href="https://github.com/QQBackup/QQDecrypt" target="_blank">
+    <div class="card-image">
+      <img src="/thanks/github.svg" alt="">
+    </div>
+    <div class="card-content">
+      <h3>GitHub</h3>
+      <p>为仓库源代码提供托管服务</p>
+    </div>
+  </a>
+
+  <a class="card" href="https://vitepress.dev/" target="_blank">
+    <div class="card-image">
+      <img src="/thanks/vitepress.svg" alt="">
+    </div>
+    <div class="card-content">
+      <h3>VitePress</h3>
+      <p>网站使用的静态生成框架</p>
+    </div>
+  </a>
+
+  <a class="card" href="https://vercel.com/" target="_blank">
+    <div class="card-image">
+      <img src="/thanks/vercel.png" alt="">
+    </div>
+    <div class="card-content">
+      <h3>vercel</h3>
+      <p>网站使用的静态网站自动化部署平台</p>
+    </div>
+  </a>
 </div>
 
 <style>
@@ -96,7 +87,7 @@ prev: false
   max-width: 700px;
   display: flex;
   align-items: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
   text-decoration: none;
   overflow: hidden;
@@ -154,4 +145,19 @@ prev: false
   white-space: normal;
 }
 
+/* 颜色变量 */
+:root {
+  --card-bg: #ffffff; /* 浅色模式背景 */
+  --card-border: #e0e0e0; /* 浅色模式边框 */
+  --card-text: #333333; /* 浅色模式文字 */
+  --card-hover-bg: #f0f0f0; /* 浅色模式悬停背景 */
+}
+
+.dark {
+  --card-bg: rgba(32, 33, 39, 1); /* 深色模式背景 */
+  --card-border: #2a2a2e; /* 深色模式边框 */
+  --card-text: #dcdcdc; /* 深色模式文字 */
+  --card-hover-bg: rgba(40, 41, 49, 1); /* 深色模式悬停背景 */
+}
 </style>
+