feat: theme css

hellof2e · Aug 5, 2024 · 44f6fae · 44f6fae
1 parent 1f883fc
commit 44f6fae
Showing 1 changed file with 148 additions and 0 deletions.
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
@@ -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 {