update theme model styles

Author: sunwei

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-friday-plugin",
-	"version": "0.10.18",
+	"version": "0.10.19",
 	"description": "Friday is an Obsidian plugin that empowers users to focus on content creation by writing Markdown files, while we handle the distribution. From creating websites to content deployment, Friday serves as a creative output assistant, helping users turn their work into publishable sites with ease.",
 	"main": "main.js",
 	"scripts": {

src/i18n/types.ts

@@ -172,8 +172,10 @@ export interface TranslationNamespace {
 		loading_error: string;
 		no_themes_found: string;
 		view_demo: string;
+		live_demo: string;
 		use_it: string;
 		current: string;
+		free: string;
 		by_author: string;
 		retry: string;
 	};

styles.css

@@ -243,144 +243,181 @@
 }
 .friday-theme-modal .theme-card {
   position: relative;
-  height: 280px;
   width: 100%;
   max-width: 420px;
   margin: 0 auto;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  aspect-ratio: 3/2;
+  background: var(--background-primary);
+  border: 1px solid var(--background-modifier-border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
 }
 .friday-theme-modal .theme-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  transform: translateY(-8px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
 }
 .friday-theme-modal .theme-card.selected {
-  box-shadow: 0 0 0 3px var(--interactive-accent);
+  border-color: var(--interactive-accent);
+  box-shadow: 0 0 0 2px var(--interactive-accent), 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .friday-theme-modal .theme-card.selected::after {
   content: "\2713";
   position: absolute;
   top: 12px;
   right: 12px;
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   background: var(--interactive-accent);
   color: var(--text-on-accent);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: bold;
-  z-index: 3;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
-.friday-theme-modal .theme-overlay {
+.friday-theme-modal .theme-image-section {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+}
+.friday-theme-modal .live-demo-btn {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
-  padding: 24px 20px 20px;
-  color: white;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 32px;
+  border: 2px solid white;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.95);
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 5;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+.friday-theme-modal .theme-card:hover .live-demo-btn {
+  opacity: 1;
+}
+.friday-theme-modal .live-demo-btn:hover {
+  background: white;
+  transform: translate(-50%, -50%) scale(1.05);
+}
+.friday-theme-modal .theme-info-section {
+  display: flex;
+  padding: 16px;
+  gap: 16px;
+  border-bottom: 1px solid var(--background-modifier-border);
+  min-height: 100px;
+}
+.friday-theme-modal .theme-info-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.friday-theme-modal .theme-info-right {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 4px;
 }
 .friday-theme-modal .theme-title {
-  margin: 0 0 6px 0;
-  font-size: 20px;
+  margin: 0;
+  font-size: 18px;
   font-weight: 600;
-  color: white;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-  line-height: 1.2;
+  color: var(--text-normal);
+  line-height: 1.3;
 }
-.friday-theme-modal .theme-author-info {
-  margin: 0 0 10px 0;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.85);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+.friday-theme-modal .theme-meta-info {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
 }
 .friday-theme-modal .theme-author {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-muted);
 }
 .friday-theme-modal .theme-version {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-muted);
   font-weight: 500;
 }
 .friday-theme-modal .separator {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-faint);
 }
 .friday-theme-modal .theme-description {
-  margin: 0 0 14px 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
-  line-height: 1.4;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.friday-theme-modal .theme-price {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-accent);
+  white-space: nowrap;
+}
+.friday-theme-modal .theme-bottom-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 12px;
+}
 .friday-theme-modal .theme-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 14px;
+  gap: 6px;
+  flex: 1;
 }
 .friday-theme-modal .tag {
-  background: rgba(255, 255, 255, 0.25);
-  color: rgba(255, 255, 255, 0.95);
+  background: var(--background-secondary);
+  color: var(--text-muted);
   padding: 4px 10px;
-  border-radius: 14px;
-  font-size: 12px;
-  backdrop-filter: blur(6px);
-  font-weight: 500;
-}
-.friday-theme-modal .theme-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-.friday-theme-modal .demo-link {
-  color: rgba(255, 255, 255, 0.9);
-  text-decoration: none;
-  font-size: 14px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  border-radius: 12px;
+  font-size: 11px;
   font-weight: 500;
-}
-.friday-theme-modal .demo-link:hover {
-  color: white;
-  text-decoration: underline;
+  border: 1px solid var(--background-modifier-border);
 }
 .friday-theme-modal .use-theme-btn {
-  padding: 10px 18px;
-  border: 1px solid rgba(255, 255, 255, 0.4);
+  padding: 8px 20px;
+  border: 1px solid var(--interactive-accent);
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.15);
-  color: white;
-  font-size: 14px;
+  background: var(--interactive-accent);
+  color: var(--text-on-accent);
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
-  backdrop-filter: blur(8px);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  flex-shrink: 0;
 }
 .friday-theme-modal .use-theme-btn:hover {
-  background: rgba(255, 255, 255, 0.25);
-  border-color: rgba(255, 255, 255, 0.6);
+  background: var(--interactive-accent-hover);
+  border-color: var(--interactive-accent-hover);
   transform: translateY(-1px);
 }
 .friday-theme-modal .use-theme-btn.current {
-  background: var(--interactive-accent);
-  color: var(--text-on-accent);
-  border-color: var(--interactive-accent);
+  background: var(--background-secondary);
+  color: var(--text-muted);
+  border-color: var(--background-modifier-border);
   cursor: default;
-  text-shadow: none;
 }
 .friday-theme-modal .use-theme-btn.current:hover {
   transform: none;
@@ -391,15 +428,14 @@
     max-width: 1200px;
   }
   .friday-theme-modal .theme-card {
-    height: 240px;
     max-width: 360px;
   }
   .friday-theme-modal .skeleton-grid {
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     max-width: 1200px;
   }
   .friday-theme-modal .skeleton-card {
-    height: 240px;
+    height: 320px;
     max-width: 360px;
   }
 }
@@ -409,15 +445,20 @@
     gap: 20px;
   }
   .friday-theme-modal .theme-card {
-    height: 200px;
     max-width: 300px;
   }
+  .friday-theme-modal .theme-title {
+    font-size: 16px;
+  }
+  .friday-theme-modal .theme-price {
+    font-size: 18px;
+  }
   .friday-theme-modal .skeleton-grid {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
   }
   .friday-theme-modal .skeleton-card {
-    height: 200px;
+    height: 280px;
     max-width: 300px;
   }
   .friday-theme-modal .search-section {
@@ -433,15 +474,30 @@
     gap: 16px;
   }
   .friday-theme-modal .theme-card {
-    height: 180px;
     max-width: 100%;
   }
+  .friday-theme-modal .theme-info-section {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .friday-theme-modal .theme-info-right {
+    align-items: center;
+    justify-content: flex-start;
+  }
+  .friday-theme-modal .theme-bottom-section {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .friday-theme-modal .use-theme-btn {
+    width: 100%;
+  }
   .friday-theme-modal .skeleton-grid {
     grid-template-columns: 1fr;
     gap: 16px;
   }
   .friday-theme-modal .skeleton-card {
-    height: 180px;
+    height: 260px;
     max-width: 100%;
   }
   .friday-theme-modal .tags-grid {