lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: use deep black glass morphism for content detail modal

Browse Source 
Replace the flat #141414 grey background with a dark glass container
matching the header's floating-glass style — rgba(6,6,6,0.92) with
backdrop-filter blur, subtle white/6% border, and layered shadows.
Updated the hero gradient to blend seamlessly into the new base.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-13 22:38:45 +00:00
parent 7da4104aa2
commit 6480d02b11
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -20,7 +20,7 @@ services:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
args: args:
CACHEBUST: "20" CACHEBUST: "21"
VITE_USE_MOCK_DATA: "false" VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL} VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api VITE_INDEEHUB_API_URL: /api

30
src/components/ContentDetailModal.vue
View File

@@ -510,7 +510,9 @@ function openSubscriptionFromRental() {
height: 100%; height: 100%;
max-width: 900px; max-width: 900px;
max-height: 100vh; max-height: 100vh;
background: #141414; background: rgba(6, 6, 6, 0.92);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@@ -519,7 +521,12 @@ function openSubscriptionFromRental() {
@media (min-width: 768px) { @media (min-width: 768px) {
.detail-container { .detail-container {
max-height: 90vh; max-height: 90vh;
border-radius: 16px; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.6),
0 12px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
} }
} }
@@ -545,19 +552,20 @@ function openSubscriptionFromRental() {
right: 16px; right: 16px;
z-index: 20; z-index: 20;
padding: 8px; padding: 8px;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
border-radius: 9999px; border-radius: 9999px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
border: none; border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.detail-close-btn:hover { .detail-close-btn:hover {
color: white; color: white;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.15);
} }
/* Hero */ /* Hero */
@@ -578,10 +586,10 @@ function openSubscriptionFromRental() {
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(
to top, to top,
#141414 0%, rgba(6, 6, 6, 1) 0%,
rgba(20, 20, 20, 0.85) 30%, rgba(6, 6, 6, 0.85) 30%,
rgba(20, 20, 20, 0.3) 60%, rgba(6, 6, 6, 0.3) 60%,
rgba(20, 20, 20, 0) 100% rgba(6, 6, 6, 0) 100%
); );
} }