feat: theme css

hellof2e · Aug 5, 2024 · 9a2f438 · 9a2f438
1 parent 5596b83
commit 9a2f438
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "quark-doc-header": "^2.12.7",
-    "quark-doc-home": "^2.9.0",
+    "quark-doc-home": "^2.10.1",
     "quarkd": "^1.0.2",
     "sass": "~1.32.0",
     "vue-i18n": "^9.1.10",

diff --git a/src/assets/styles/reset.scss b/src/assets/styles/reset.scss
@@ -58,9 +58,10 @@ img, video {
 }
 
 a {
-  color: #4c4c52;
+  color: var(--text-font-color);
   transition: all 0.25s;
 }
+
 a:hover {
   color: var(--brand-color);
   transition: all 0.25s;

diff --git a/src/assets/styles/theme.css b/src/assets/styles/theme.css
@@ -76,6 +76,73 @@
 }
 
 
+
+.nav-item a {
+  color: var(--text-font-color-light);
+  font-family: var(--font-family-base);
+}
+.nav-item a:hover {
+  color: var(--brand-color);
+}
+.social-links a {
+  color: rgba(60, 60, 67, .7);
+}
+.social-links a:hover svg {
+  color: rgba(60, 60, 67, .92);
+  transition: color .25s;
+}
+.header .container {
+  border-bottom: 1px solid var(--line-light);
+  background-color: var(--main-bg);
+}
+.doc-content-document p {
+  color: var(--text-font-color);
+}
+.doc-content-document table {
+  border: 1px solid var(--line-light);
+}
+.doc-content-document table th,
+.doc-content-document table td {
+  border-left: 1px solid var(--line-light);
+  color: var(--text-font-color-light);
+}
+
+.doc-content-document table td {
+  border-top: 1px solid var(--line-light);
+}
+
+.doc-content-document table code {
+  color: var(--text-code-font-color);
+  background-color: var(--mute-light);
+}
+
+.doc-content-document table td:first-child code {
+  color: var(--text-code-font-color);
+}
+.doc-nav {
+  border-right: 1px solid var(--line-light);
+}
+.doc-content-document p > code {
+  color: var(--text-code-font-color);
+  background-color: var(--mute-light);
+}
+.doc-content-document strong {
+  color: var(--text-font-color);
+}
+.doc-content-document blockquote {
+  background-color: rgba(100, 108, 255, .08);
+}
+.doc-content-document blockquote p {
+  color: #454ce1;
+}
+
+.doc-content-document ul li,
+.doc-content-document ol li {
+  color: var(--text-font-color);
+}
+
+
+
 html.dark {
   --link-font-color-dark: rgba(255, 255, 255, 0.87);
   --main-bg: #23272f;
@@ -114,6 +181,87 @@ html.dark .paragraph {
 }
 
 
+html.dark .nav-item .nav-active {
+  color: var(--brand-color);
+}
+
+html.dark .flyout-menu .menu-wrap {
+  background: var(--main-bg);
+  box-shadow:  0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
+  border: 1px solid rgba(84, 84, 84, .48);
+}
+
+html.dark .flyout-menu .menu-group-title {
+  color: rgba(235, 235, 235, .38);
+}
+
+html.dark .flyout-menu .menu-link {
+  color: rgba(255, 255, 255, .87);
+}
+html.dark .flyout-menu .menu-link:hover {
+  color: #0da6e9;
+}
+
+
+html.dark .nav-item a:hover,
+html.dark .nav-item button:hover {
+  color: rgba(255 255 255 / 1);
+}
+html.dark .nav-item .nav-active {
+  color: #fff;
+}
+
+html.dark .social-links a:hover svg{
+  color: #fff;
+}
+
+html.dark .doc-nav a {
+  color: #fff;
+}
+html.dark .doc-nav a:hover {
+  color: var(--brand-color);
+}
+
+html.dark .translations:before, .appearance:before, .social-links:before {
+  background-color: rgba(60, 60, 67, 0.92);
+}
+
+
+html.dark .doc-content-document p > code {
+  color: var(--text-code-font-color);
+}
+html.dark .doc-content-document strong {
+  color: var(--text-font-color);
+}
+html.dark .doc-content-document blockquote p {
+  color: #bcc0ff;
+}
+html.dark .doc-content-document a {
+  color: #9499ff;
+  text-decoration: underline;
+}
+html.dark .doc-content-document a:hover {
+  color: #bcc0ff;
+}
+
+html.dark .doc-content-document table {
+  border: 1px solid #333;
+}
+html.dark .doc-content-document table th,
+html.dark .doc-content-document table td {
+  border-left: 1px solid #333;
+  color: #fff;
+}
+html.dark .doc-content-document table td  {
+  border-top: 1px solid #333;
+}
+
+html.dark .doc-content-document ul li,
+html.dark .doc-content-document ol li
+ html.dark .doc-content-document strong {
+  color: var(--text-font-color);
+}
+
 
 
 @keyframes rainbow {