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: .
dockerfile: Dockerfile
args:
CACHEBUST: "20"
CACHEBUST: "21"
VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api

30
src/components/ContentDetailModal.vue
View File

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