@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)   • 1.93 kB
CSS
/* Above website assistant and other fixed UI (same max z-index so modal stacks on top by DOM order) */
.age-verification-modal {
z-index: 2147483647;
}
.age-verification-modal,
.age-verification-modal * {
box-sizing: border-box;
}
.age-verification-form {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
/*
@media (min-width: 640px) {
.age-verification-form {
min-width: 600px;
}
} */
.age-verification-form fieldset {
padding-right: 0;
padding-left: 0;
border: 0;
}
.age-verification-form .form-item {
width: 100%;
text-align: center;
}
.age-verification-form .form-item.submit {
margin-top: 1.5rem;
text-align: center;
}
.age-verification-form .form-item input {
color: #000;
}
.age-verification-form .form-item-help {
padding-bottom: 0.25rem;
margin: 1.5rem 0 1rem;
opacity: 0.5;
text-align: left;
}
.age-verification-form .form-item-error {
padding-bottom: 0.25rem;
margin: 1.5rem 0 1rem;
color: var(--memori-error-color);
}
button.age-verification-submit {
position: relative;
overflow: hidden;
width: 100%;
min-width: 220px;
max-width: 220px;
min-height: 42px;
padding: 1rem 2rem;
border: none;
border-radius: 12px;
border-radius: 8px;
margin-top: 1rem;
background: var(--memori-primary);
color: white;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
button.age-verification-submit::before {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
content: '';
transition: left 0.5s ease;
}
button.age-verification-submit:hover::before {
left: 100%;
}
button.age-verification-submit:active {
transform: translateY(0);
}