Refactor some CSS and Layout (#381)

* refactor CSS and Layout

* remove unused @tailwindcss/cli

Author: sakuhanachan

package.json

@@ -43,7 +43,6 @@
 		"@iconify-json/simple-icons": "^1.2.69",
 		"@iconify/svelte": "^4.2.0",
 		"@swup/astro": "^1.7.0",
-		"@tailwindcss/cli": "^4.2.0",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.2.0",
 		"astro": "5.17.1",

pnpm-lock.yaml

@@ -30,8 +30,8 @@ const { badge, url, label } = Astro.props;
             </div>
             { badge !== undefined && badge !== null && badge !== '' &&
                 <div class="transition px-2 h-7 ml-4 min-w-8 rounded-lg text-sm font-bold
-                    text-(--btn-content) dark:!text-(--deep-text)
-                    bg-(--btn-plain-bg-hover) dark:!bg-(--primary)
+                    text-(--btn-content) dark:text-(--deep-text)!
+                    bg-(--btn-plain-bg-hover) dark:bg-(--primary)!
                     flex items-center justify-center">
                     { badge }
                 </div>

src/components/control/ButtonLink.astro

@@ -410,10 +410,10 @@ function portal(node: HTMLElement) {
 </button>
 
 {#if showModal}
-  <div use:portal class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 transition-opacity" on:click={closeModal}>
-    <div class="bg-[var(--card-bg)] rounded-2xl max-w-sm w-full max-h-[90vh] overflow-y-auto flex flex-col shadow-2xl transform transition-all" on:click|stopPropagation>
+  <div use:portal class="fixed inset-0 z-9999 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 transition-opacity" on:click={closeModal}>
+    <div class="bg-(--card-bg) rounded-2xl max-w-sm w-full max-h-[90vh] overflow-y-auto flex flex-col shadow-2xl transform transition-all" on:click|stopPropagation>
 
-      <div class="p-6 flex justify-center bg-[var(--btn-plain-bg-hover)] min-h-[200px] items-center">
+      <div class="p-6 flex justify-center bg-(--btn-plain-bg-hover) min-h-[200px] items-center">
         {#if posterImage}
           <img src={posterImage} alt="Poster" class="max-w-full h-auto shadow-lg rounded-lg" />
         {:else}
@@ -426,7 +426,7 @@ function portal(node: HTMLElement) {
 
       <div class="p-4 border-t border-black/5 dark:border-white/10 grid grid-cols-2 gap-3">
         <button 
-          class="py-3 bg-[var(--btn-plain-bg-hover)] text-75 rounded-xl font-medium hover:bg-[var(--btn-plain-bg-active)] active:scale-[0.98] transition-all flex items-center justify-center gap-2"
+          class="py-3 bg-(--btn-plain-bg-hover) text-75 rounded-xl font-medium hover:bg-(--btn-plain-bg-active) active:scale-[0.98] transition-all flex items-center justify-center gap-2"
           on:click={copyLink}
         >
           {#if copied}

src/components/misc/SharePoster.svelte

@@ -51,17 +51,17 @@ const hasChildren = children.length > 0;
 					data-dropdown-trigger
 				>
 					{link.icon && (
-						<Icon name={link.icon} class="text-[1.1rem] lg:mr-2 flex-shrink-0" />
+						<Icon name={link.icon} class="text-[1.1rem] lg:mr-2 shrink-0" />
 					)}
 					<span class="truncate hidden lg:inline">{getLocalizedName(link.name)}</span>
 					<Icon
 						name="material-symbols:keyboard-arrow-down-rounded"
-						class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1 flex-shrink-0 hidden lg:inline"
+						class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1 shrink-0 hidden lg:inline"
 					/>
 				</button>
 
 				<div class="dropdown-menu" data-dropdown-menu>
-					<div class="dropdown-content bg-[var(--float-panel-bg)] rounded-[var(--radius-large)] shadow-xl dark:shadow-none border border-black/5 dark:border-white/10 p-2 min-w-[12rem]">
+					<div class="dropdown-content bg-(--float-panel-bg) rounded-(--radius-large) shadow-xl dark:shadow-none border border-black/5 dark:border-white/10 p-2 min-w-48">
 						{children.map((child) => (
 							<a
 								href={
@@ -73,7 +73,7 @@ const hasChildren = children.length > 0;
 										? "noopener noreferrer"
 										: null
 								}
-								class="dropdown-item flex items-center justify-between px-4 py-2.5 hover:text-[var(--primary)] hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-150 font-medium rounded-lg"
+								class="dropdown-item flex items-center justify-between px-4 py-2.5 hover:text-(--primary) hover:bg-(--btn-plain-bg-hover) transition-colors duration-150 font-medium rounded-lg"
 								aria-label={child.name}
 							>
 								<div class="flex items-center">
@@ -105,13 +105,13 @@ const hasChildren = children.length > 0;
 				class="btn-plain scale-animation rounded-lg h-11 font-bold w-11 lg:w-auto lg:px-5 active:scale-95 flex items-center justify-center lg:justify-start whitespace-nowrap"
 			>
 				{link.icon && (
-					<Icon name={link.icon} class="text-[1.1rem] lg:mr-2 flex-shrink-0" />
+					<Icon name={link.icon} class="text-[1.1rem] lg:mr-2 shrink-0" />
 				)}
 				<span class="truncate hidden lg:inline">{getLocalizedName(link.name)}</span>
 				{link.external && (
 					<Icon
 						name="fa7-solid:arrow-up-right-from-square"
-						class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2] flex-shrink-0 hidden lg:inline"
+						class="text-[0.875rem] transition -translate-y-px ml-1 text-black/20 dark:text-white/20 shrink-0 hidden lg:inline"
 					/>
 				)}
 			</a>

src/components/widget/DropdownMenu.astro

@@ -415,7 +415,7 @@ if (siteConfig.font) {
 		"banner-height": `${BANNER_HEIGHT}vh`,
 	}}
 >
-	@import "tailwindcss";
+	@reference "../styles/main.css";
 
 	@layer components {
 		.enable-banner.is-home #banner-wrapper {

src/layouts/Layout.astro

@@ -28,27 +28,8 @@
 
 /* Migrated css */
 @utility expand-animation {
-  position: relative;
-  z-index: 0;
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    scale: 0.85;
-    z-index: -10;
-    transition: all 0.15s ease-out;
-  }
-  &:hover::before {
-    background-color: var(--btn-plain-bg-hover);
-    scale: 1;
-  }
-  &:active::before {
-    background-color: var(--btn-plain-bg-active);
-  }
-  &:active {
-    background: none;
-  }
+  @apply relative before:ease-out before:duration-75 before:transition-all active:bg-none hover:before:bg-(--btn-plain-bg-hover) active:before:bg-(--btn-plain-bg-active) z-0
+      before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
 }
 
 /* 导入 ZenMaruGothic-Medium 字体 */

src/styles/main.css

@@ -2,31 +2,15 @@
 
 /* PhotoSwipe 按钮样式 */
 .pswp__button {
-    transition: all 0.2s ease !important;
-    background-color: rgba(0, 0, 0, 0.4) !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    margin-right: 0 !important;
-    width: 3rem !important;
-    height: 3rem !important;
+  @apply transition! bg-black/40! hover:bg-black/50! active:bg-black/60! flex! items-center! justify-center! mr-0! w-12! h-12!;
 }
-.pswp__button:hover {
-    background-color: rgba(0, 0, 0, 0.5) !important;
-}
-.pswp__button:active {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-}
-.pswp__button--zoom, .pswp__button--close {
-    margin-top: 1rem !important;
-    border-radius: 0.75rem !important;
-}
-.pswp__button--zoom:active, .pswp__button--close:active {
-    transform: scale(0.9) !important;
+.pswp__button--zoom,
+.pswp__button--close {
+  @apply mt-4! rounded-xl! active:scale-90!;
 }
 .pswp__button--zoom {
-    margin-right: 0.625rem !important;
+  @apply mr-2.5!;
 }
 .pswp__button--close {
-    margin-right: 1rem !important;
+  @apply mr-4!;
 }