feat: improve input style
This commit is contained in:
parent
4a47c53a0a
commit
6650c03188
|
|
@ -178,6 +178,7 @@ export default function WaitlistPopup({ isOpen, onClose, onSubmit }: WaitlistPop
|
|||
color: rgba(255, 236, 210, 0.9);
|
||||
}
|
||||
|
||||
.waitlist-card-dashed:hover span,
|
||||
.waitlist-card-dashed.selected span {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
|
@ -199,18 +200,34 @@ export default function WaitlistPopup({ isOpen, onClose, onSubmit }: WaitlistPop
|
|||
color: rgba(255, 236, 210, 0.9);
|
||||
}
|
||||
|
||||
.waitlist-other-label {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.waitlist-other-container:focus-within .waitlist-other-label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.waitlist-other-container.has-value .waitlist-other-label {
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.waitlist-other-input {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.waitlist-other-input:focus {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(139, 92, 246, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.waitlist-other-container.has-value .waitlist-other-input {
|
||||
border-color: rgba(168, 85, 247, 0.9);
|
||||
}
|
||||
|
||||
.waitlist-submit-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(139, 92, 246, 0.6);
|
||||
|
|
@ -321,8 +338,8 @@ export default function WaitlistPopup({ isOpen, onClose, onSubmit }: WaitlistPop
|
|||
|
||||
{/* Other input */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-white/40 text-sm whitespace-nowrap">Something cooler:</span>
|
||||
<div className={`waitlist-other-container flex items-center gap-3 ${other ? 'has-value' : ''}`}>
|
||||
<span className="waitlist-other-label text-white/40 text-sm whitespace-nowrap">Something cooler:</span>
|
||||
<input
|
||||
type="text"
|
||||
value={other}
|
||||
|
|
|
|||
Loading…
Reference in New Issue