diff --git a/registry/blocks/macos-tahoe-liquid-glass/assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg b/registry/blocks/macos-tahoe-liquid-glass/assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg new file mode 100644 index 000000000..2aac50833 Binary files /dev/null and b/registry/blocks/macos-tahoe-liquid-glass/assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg differ diff --git a/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html b/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html index 34ac6ac19..25a92bd63 100644 --- a/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html +++ b/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html @@ -30,53 +30,75 @@ width: 1440px; height: 900px; overflow: hidden; - background: - radial-gradient(circle at 18% 20%, rgba(109, 40, 217, 0.56), transparent 24%), - radial-gradient(circle at 78% 34%, rgba(14, 165, 233, 0.5), transparent 26%), - radial-gradient(circle at 70% 86%, rgba(245, 158, 11, 0.46), transparent 28%), - linear-gradient(145deg, #150527 0%, #07243f 38%, #0e7490 62%, #be185d 100%); + isolation: isolate; + background-image: + linear-gradient( + 180deg, + rgba(7, 18, 34, 0.08), + rgba(7, 18, 34, 0.02) 44%, + rgba(7, 18, 34, 0.22) + ), + url("assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg"); + background-size: cover; + background-position: center center; color: #fff; } + .tahoe-desktop::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + background: + radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.2), transparent 28%), + linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 32%, rgba(255, 255, 255, 0.08)); + } .tahoe-menu-bar { + position: relative; + z-index: 6; display: flex; align-items: center; - gap: 20px; - height: 32px; - padding: 6px 20px; - background: rgba(255, 255, 255, 0.18); - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); - font-size: 13px; - font-weight: 500; - backdrop-filter: blur(22px); + gap: 14px; + height: 28px; + padding: 5px 14px; + background: rgba(20, 47, 83, 0.28); + border-bottom: 1px solid rgba(255, 255, 255, 0.22); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); + font-size: 10px; + font-weight: 600; + color: rgba(255, 255, 255, 0.94); + backdrop-filter: blur(30px) saturate(1.45); } .tahoe-stage { - display: flex; - align-items: flex-start; - gap: 26px; - height: 650px; + position: relative; + z-index: 5; + height: 690px; } .tahoe-window { - position: relative; - width: 1080px; - height: 520px; - margin: 38px 0 0 76px; + position: absolute; + left: 106px; + top: 226px; + width: 610px; + height: 360px; + z-index: 5; overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.22); - border-radius: 16px; - background: rgba(21, 25, 36, 0.68); + border: 1px solid rgba(255, 255, 255, 0.34); + border-radius: 18px; + background: rgba(246, 252, 255, 0.7); + color: rgba(18, 40, 66, 0.92); + backdrop-filter: blur(26px) saturate(1.3); box-shadow: - 0 24px 70px rgba(0, 0, 0, 0.42), - inset 0 1px 0 rgba(255, 255, 255, 0.18); + 0 22px 58px rgba(6, 38, 82, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.62); } .tahoe-window-titlebar { display: flex; align-items: center; gap: 8px; - height: 42px; - padding: 10px 14px; - background: rgba(255, 255, 255, 0.14); - border-bottom: 1px solid rgba(255, 255, 255, 0.12); + height: 38px; + padding: 9px 14px; + background: rgba(255, 255, 255, 0.34); + border-bottom: 1px solid rgba(255, 255, 255, 0.28); } .tahoe-traffic-light { display: inline-block; @@ -87,31 +109,31 @@ .tahoe-finder-body { position: relative; display: flex; - height: 478px; + height: 322px; } .tahoe-sidebar { - width: 210px; - padding: 14px; - border-right: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.08); - font-size: 12px; + width: 158px; + padding: 12px; + border-right: 1px solid rgba(255, 255, 255, 0.26); + background: rgba(255, 255, 255, 0.2); + font-size: 10px; } .tahoe-sidebar-row { display: flex; align-items: center; gap: 8px; - padding: 7px 10px; + padding: 6px 8px; border-radius: 8px; - color: rgba(255, 255, 255, 0.68); + color: rgba(10, 35, 64, 0.78); } .tahoe-sidebar-row.active { - background: rgba(0, 122, 255, 0.28); - color: #cdeeff; + background: rgba(52, 147, 236, 0.26); + color: rgba(4, 50, 110, 0.98); font-weight: 700; } .tahoe-sidebar-icon { - width: 18px; - height: 18px; + width: 16px; + height: 16px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; @@ -120,12 +142,12 @@ flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); - gap: 14px 12px; + gap: 10px 8px; align-content: start; - padding: 18px 20px; + padding: 18px 18px; } .tahoe-file { - padding: 10px; + padding: 8px; text-align: center; } .tahoe-folder-icon, @@ -135,7 +157,7 @@ height: 42px; margin: 0 auto 8px; border-radius: 10px; - background: linear-gradient(180deg, #77caff 0%, #1d8dff 100%); + background: linear-gradient(180deg, #9fe1ff 0%, #258dff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 20px rgba(0, 0, 0, 0.24); @@ -170,13 +192,63 @@ 0 18px 0 #b2bcc8; } .tahoe-file-label { - color: rgba(255, 255, 255, 0.86); - font-size: 11px; + color: rgba(7, 31, 58, 0.94); + font-size: 10px; + font-weight: 700; line-height: 1.15; - text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); + text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6); } - .tahoe-glass-stack { - display: none; + .tahoe-widgets { + position: absolute; + left: 28px; + top: 44px; + z-index: 5; + display: grid; + grid-template-columns: 92px 92px; + gap: 8px; + } + .tahoe-widget { + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.42); + border-radius: 18px; + background: rgba(247, 253, 255, 0.72); + color: rgba(14, 45, 76, 0.9); + backdrop-filter: blur(26px) saturate(1.45); + box-shadow: + 0 18px 34px rgba(13, 61, 115, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.72); + } + .tahoe-calendar-widget { + width: 92px; + height: 110px; + padding: 9px; + } + .tahoe-weather-widget { + width: 92px; + height: 110px; + padding: 9px; + background: linear-gradient(160deg, rgba(30, 119, 238, 0.72), rgba(255, 255, 255, 0.44)); + color: #fff; + } + .tahoe-media-widget { + grid-column: 1 / span 2; + width: 192px; + height: 96px; + background: + linear-gradient(140deg, rgba(13, 16, 22, 0.12), rgba(255, 255, 255, 0.24)), + radial-gradient(circle at 18% 20%, #ffb88b, transparent 32%), + radial-gradient(circle at 76% 28%, #ed2f7a, transparent 34%), + linear-gradient(135deg, #451a03, #0f172a); + } + .tahoe-calendar-days { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; + margin-top: 7px; + font-size: 5.5px; + font-weight: 800; + text-align: center; + color: rgba(20, 51, 83, 0.66); } .tahoe-glass-panel { border: 1px solid rgba(255, 255, 255, 0.22); @@ -189,12 +261,49 @@ 0 20px 54px rgba(0, 0, 0, 0.34); } .tahoe-notification { + position: absolute; + z-index: 7; + top: 58px; + right: 36px; + width: 374px; display: flex; gap: 12px; - min-height: 92px; - padding: 14px; + min-height: 86px; + padding: 14px 16px; + border: 1px solid rgba(255, 255, 255, 0.42); + border-radius: 28px; + background: + linear-gradient( + 140deg, + rgba(255, 255, 255, 0.62), + rgba(255, 255, 255, 0.26) 48%, + rgba(255, 255, 255, 0.42) + ), + rgba(233, 249, 255, 0.56); + color: #fff; + backdrop-filter: blur(30px) saturate(1.55); + box-shadow: + 0 22px 46px rgba(4, 55, 112, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.72), + inset 0 -18px 38px rgba(255, 255, 255, 0.1); + } + .tahoe-notification::before { + content: ""; + position: absolute; + inset: 1px; + border-radius: inherit; + pointer-events: none; + background: linear-gradient( + 120deg, + rgba(255, 255, 255, 0.58), + transparent 34%, + rgba(255, 255, 255, 0.22) + ); + mix-blend-mode: screen; + opacity: 0.5; } .tahoe-notification img { + position: relative; width: 40px; height: 40px; border-radius: 10px; @@ -202,15 +311,21 @@ flex: 0 0 auto; } .tahoe-panel-title { - color: rgba(255, 255, 255, 0.96); - font-size: 15px; + position: relative; + color: rgba(8, 30, 58, 0.98); + font-size: 17px; font-weight: 800; + line-height: 1.1; + text-shadow: 0 1px 6px rgba(255, 255, 255, 0.56); } .tahoe-panel-subtitle { + position: relative; margin-top: 4px; - color: rgba(255, 255, 255, 0.82); - font-size: 12px; + color: rgba(9, 36, 66, 0.86); + font-size: 12.5px; + font-weight: 700; line-height: 1.35; + text-shadow: 0 1px 6px rgba(255, 255, 255, 0.48); } .tahoe-control-center { padding: 14px; @@ -266,23 +381,28 @@ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } .tahoe-dock { - width: 612px; - margin: 22px auto 0; + position: absolute; + z-index: 6; + left: 50%; + bottom: 24px; + width: auto; display: flex; align-items: flex-end; - gap: 10px; - padding: 10px 14px; - border: 1px solid rgba(255, 255, 255, 0.24); - border-radius: 24px; - background: rgba(255, 255, 255, 0.17); + gap: 7px; + padding: 8px 12px; + border: 1px solid rgba(255, 255, 255, 0.42); + border-radius: 22px; + background: rgba(255, 255, 255, 0.52); + transform: translateX(-50%); + backdrop-filter: blur(28px) saturate(1.45); box-shadow: - 0 18px 46px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.28); + 0 22px 44px rgba(6, 38, 82, 0.24), + inset 0 1px 0 rgba(255, 255, 255, 0.72); } .tahoe-dock-icon { display: block; - width: 54px; - height: 54px; + width: 46px; + height: 46px; object-fit: cover; border-radius: 13px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); @@ -303,6 +423,7 @@