✨ Add transition to color and bg

nonebot · Sep 16, 2023 · af8b1e3 · af8b1e3
1 parent 226517a
commit af8b1e3
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 11 deletions.
diff --git a/packages/theme-nonepress/src/styles.css b/packages/theme-nonepress/src/styles.css
@@ -1,5 +1,9 @@
 @import url("tailwindcss/tailwind");
 
+[data-theme] {
+  @apply transition-[color,background-color] duration-500;
+}
+
 html {
   @apply h-full;
 }

diff --git a/packages/theme-nonepress/src/theme/Admonition/styles.css b/packages/theme-nonepress/src/theme/Admonition/styles.css
@@ -6,35 +6,35 @@
     --alert-bg: hsl(var(--bc) / 10%);
     --alert-bg-mix: hsl(var(--b1));
 
-    @apply text-base-content border-base-content/20;
+    @apply border-base-content/20;
   }
 
   &-success {
     --alert-bg: hsl(var(--su) / 40%);
     --alert-bg-mix: hsl(var(--b1));
 
-    @apply text-success-content border-success/20;
+    @apply border-success/20;
   }
 
   &-error {
     --alert-bg: hsl(var(--er) / 40%);
     --alert-bg-mix: hsl(var(--b1));
 
-    @apply text-error-content border-error/20;
+    @apply border-error/20;
   }
 
   &-info {
     --alert-bg: hsl(var(--in) / 40%);
     --alert-bg-mix: hsl(var(--b1));
 
-    @apply text-info-content border-info/20;
+    @apply border-info/20;
   }
 
   &-warning {
     --alert-bg: hsl(var(--wa) / 40%);
     --alert-bg-mix: hsl(var(--b1));
 
-    @apply text-warning-content border-warning/20;
+    @apply border-warning/20;
   }
 
   &-title {

diff --git a/packages/theme-nonepress/src/theme/Footer/styles.css b/packages/theme-nonepress/src/theme/Footer/styles.css
@@ -1,6 +1,6 @@
 .footer {
   &-wrapper {
-    @apply w-full bg-base-200 text-base-content;
+    @apply w-full bg-base-200 text-base-content transition-[color,background-color] duration-500;
 
     & &-dark {
       @apply bg-neutral text-neutral-content;

diff --git a/packages/theme-nonepress/src/theme/Navbar/styles.css b/packages/theme-nonepress/src/theme/Navbar/styles.css
@@ -3,7 +3,7 @@
   @apply border-b border-base-content/10;
   @apply supports-[backdrop-filter]:backdrop-blur supports-[backdrop-filter]:bg-base-100/95;
   @apply sticky top-0 z-40 w-full h-16 !p-0;
-  @apply transition-transform duration-150;
+  @apply transition-[transform,color,background-color] duration-[150ms,500ms,500ms];
 
   &:has(&-secondary-layout) {
     @apply h-[6.5rem];

diff --git a/packages/theme-nonepress/src/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/theme-nonepress/src/theme/NavbarItem/DropdownNavbarItem.tsx
@@ -54,6 +54,7 @@ function DropdownNavbarItemDesktop({
       <Link
         aria-haspopup="true"
         role="button"
+        isNavLink
         href={props.to ? undefined : "#"}
         className={clsx("menu-link menu-item", className)}
         activeClassName={clsx("menu-link-active", activeClassName)}

diff --git a/packages/theme-nonepress/src/theme/TOC/styles.css b/packages/theme-nonepress/src/theme/TOC/styles.css
@@ -1,12 +1,12 @@
 .toc {
-  @apply relative block;
+  @apply block -mt-24;
 
   &-container {
-    @apply sticky py-4 top-16;
+    @apply sticky top-0 flex flex-col pt-24 max-h-screen;
   }
 
   &-content {
-    @apply h-full max-h-[calc(100vh-6rem)] overflow-x-hidden overflow-y-auto;
+    @apply grow overflow-x-hidden overflow-y-auto;
   }
 
   &-tree::before {

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -12,7 +12,7 @@ export default function Home(): JSX.Element {
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />"
     >
-      <main className="-mt-16 h-screen bg-base-100 flex flex-col justify-center items-center">
+      <main className="-mt-16 h-screen flex flex-col justify-center items-center">
         <div className="hero">
           <div className="hero-content text-center">
             <div className="max-w-md">