💄 Add color transition to components

nonebot · Sep 25, 2023 · ef50a7f · ef50a7f
1 parent acdaae3
commit ef50a7f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/packages/theme-nonepress/src/theme/CodeBlock/styles.css b/packages/theme-nonepress/src/theme/CodeBlock/styles.css
@@ -5,6 +5,7 @@
 
     @apply relative w-full max-w-full h-auto overflow-hidden;
     @apply rounded-box leading-6;
+    @apply transition-[color,background-color] duration-500;
   }
 
   &-title {
@@ -70,7 +71,8 @@
 
     &-number {
       overflow-wrap: normal;
-      background-color: var(--prism-background-color);
+
+      /* background-color: var(--prism-background-color); */
 
       @apply table-cell sticky left-0 text-right px-4 select-none w-[1%];
 

diff --git a/packages/theme-nonepress/src/theme/Sidebar/styles.css b/packages/theme-nonepress/src/theme/Sidebar/styles.css
@@ -23,7 +23,7 @@
 
   &-curtain {
     @apply sticky bottom-0 w-full h-8 z-10;
-    @apply bg-gradient-to-t from-base-100/80;
+    @apply bg-base-100 [mask-image:linear-gradient(transparent,#000000)];
     @apply transition-[background-color] duration-500;
   }
 }
diff --git a/packages/theme-nonepress/src/theme/TOC/styles.css b/packages/theme-nonepress/src/theme/TOC/styles.css
@@ -11,7 +11,7 @@
 
   &-curtain {
     @apply sticky bottom-0 w-full h-8 z-10;
-    @apply bg-gradient-to-t from-base-100/80;
+    @apply bg-base-100 [mask-image:linear-gradient(transparent,#000000)];
     @apply transition-[background-color] duration-500;
   }
 

diff --git a/packages/theme-nonepress/src/theme/Tabs/styles.css b/packages/theme-nonepress/src/theme/Tabs/styles.css
@@ -14,6 +14,8 @@
   &-item {
     --tab-border-color: transparent;
 
+    @apply transition-[color,background-color] duration-500;
+
     &-active {
       --tab-border-color: hsl(var(--bc) / 10%);
     }