style: dark glass button for Nostr Extension login + or-divider
Replaced the hero-info-button class with a dark glass morphism style matching the nav buttons — dark translucent background, subtle inset highlight, backdrop blur, and hover lift. Added an -or- divider between the Nostr Extension and Amber login options. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -20,7 +20,7 @@ services:
|
|||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
args:
|
args:
|
||||||
CACHEBUST: "21"
|
CACHEBUST: "22"
|
||||||
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
|
||||||
|
|||||||
@@ -95,7 +95,7 @@
|
|||||||
<button
|
<button
|
||||||
@click="handleNostrLogin"
|
@click="handleNostrLogin"
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
class="hero-info-button w-full flex items-center justify-center gap-2"
|
class="nostr-login-button w-full flex items-center justify-center gap-2"
|
||||||
>
|
>
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||||
@@ -103,6 +103,16 @@
|
|||||||
Sign in with Nostr Extension
|
Sign in with Nostr Extension
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<!-- Divider between Nostr methods -->
|
||||||
|
<div class="relative my-4">
|
||||||
|
<div class="absolute inset-0 flex items-center">
|
||||||
|
<div class="w-full border-t border-white/10"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex justify-center text-sm">
|
||||||
|
<span class="px-4 bg-transparent text-white/30 text-xs">or</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Amber Login (NIP-55 Android Signer) -->
|
<!-- Amber Login (NIP-55 Android Signer) -->
|
||||||
<!-- Phase 1: Open Amber to request public key -->
|
<!-- Phase 1: Open Amber to request public key -->
|
||||||
<button
|
<button
|
||||||
@@ -442,6 +452,41 @@ declare global {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Nostr Extension Login Button — dark glass style */
|
||||||
|
.nostr-login-button {
|
||||||
|
position: relative;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 24px rgba(0, 0, 0, 0.45),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
-webkit-backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nostr-login-button:hover:not(:disabled) {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-color: rgba(255, 255, 255, 0.15);
|
||||||
|
box-shadow:
|
||||||
|
0 12px 32px rgba(0, 0, 0, 0.6),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nostr-login-button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
/* Amber Login Button */
|
/* Amber Login Button */
|
||||||
.amber-login-button {
|
.amber-login-button {
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|||||||
Reference in New Issue
Block a user