Add membership backend and signer login
This commit is contained in:
Dorian
262
src/style.css
262
src/style.css
@@ -36,9 +36,70 @@ body {
|
||||
animation: rise-in 900ms cubic-bezier(0.19, 1, 0.22, 1) 700ms both;
|
||||
}
|
||||
|
||||
.animated-header-logo {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: max-content;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.animated-header-logo img {
|
||||
grid-area: 1 / 1;
|
||||
transform-origin: 50% 50%;
|
||||
animation: header-logo-fill 10s cubic-bezier(0.19, 1, 0.22, 1) infinite;
|
||||
}
|
||||
|
||||
.animated-header-logo::after {
|
||||
content: "";
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 145%;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent 0%,
|
||||
transparent 38%,
|
||||
rgba(250, 250, 250, 0.72) 48%,
|
||||
rgba(242, 169, 0, 0.58) 52%,
|
||||
transparent 64%,
|
||||
transparent 100%
|
||||
);
|
||||
filter: blur(0.18rem);
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0;
|
||||
transform: translateX(-135%) skewX(-14deg);
|
||||
animation: header-logo-sweep 10s cubic-bezier(0.19, 1, 0.22, 1) infinite;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header-logo-outline {
|
||||
grid-area: 1 / 1;
|
||||
width: auto;
|
||||
height: 1rem;
|
||||
overflow: visible;
|
||||
fill: none;
|
||||
stroke: #fafafa;
|
||||
stroke-dasharray: 1;
|
||||
stroke-dashoffset: 1;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 34;
|
||||
filter:
|
||||
drop-shadow(0 0 0.18rem rgba(250, 250, 250, 0.62))
|
||||
drop-shadow(0 0 0.55rem rgba(242, 169, 0, 0.28));
|
||||
opacity: 0;
|
||||
animation: header-logo-outline 10s cubic-bezier(0.19, 1, 0.22, 1) infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.header-logo-outline {
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-copy {
|
||||
max-width: 100%;
|
||||
animation: copy-in 1100ms cubic-bezier(0.19, 1, 0.22, 1) 920ms both;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -48,7 +109,17 @@ body {
|
||||
|
||||
.hero-title-line {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
will-change: clip-path, filter, opacity, transform;
|
||||
}
|
||||
|
||||
.hero-title-line-primary {
|
||||
animation: cinematic-word-in 1250ms cubic-bezier(0.19, 1, 0.22, 1) 760ms both;
|
||||
}
|
||||
|
||||
.hero-title-line-secondary {
|
||||
animation: cinematic-word-in 1250ms cubic-bezier(0.19, 1, 0.22, 1) 1420ms both;
|
||||
}
|
||||
|
||||
.film-grain {
|
||||
@@ -96,6 +167,18 @@ body {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ghost-member-button {
|
||||
border-color: rgba(250, 250, 250, 0.36);
|
||||
background: transparent;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.ghost-member-button:hover {
|
||||
border-color: rgba(250, 250, 250, 0.62);
|
||||
background: rgba(250, 250, 250, 0.08);
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.secondary-action,
|
||||
.delete-member {
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
@@ -104,6 +187,29 @@ body {
|
||||
padding: 0.72rem 0.92rem;
|
||||
}
|
||||
|
||||
.signin-options {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.signin-option {
|
||||
display: flex;
|
||||
min-height: 4.4rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 0.24rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.signin-option small {
|
||||
color: rgba(8, 8, 8, 0.68);
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: relative;
|
||||
display: grid;
|
||||
@@ -176,6 +282,61 @@ body {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.member-keys {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.member-keys div {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.member-keys a {
|
||||
color: #f2a900;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.member-key-row {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.member-key-row span {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.member-keys span {
|
||||
color: rgba(255, 255, 255, 0.42);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.member-keys code {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.34);
|
||||
padding: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.member-key-row .secondary-action {
|
||||
display: grid;
|
||||
width: 4.25rem;
|
||||
min-width: 4.25rem;
|
||||
place-items: center;
|
||||
align-self: stretch;
|
||||
padding-inline: 0.8rem;
|
||||
}
|
||||
|
||||
.modal-footer-actions {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
@@ -968,6 +1129,105 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cinematic-word-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
clip-path: inset(0 100% 0 0);
|
||||
filter: blur(0.5rem) saturate(0.72);
|
||||
transform: translate3d(0, 1.1rem, 0) scale(0.985);
|
||||
}
|
||||
|
||||
42% {
|
||||
opacity: 1;
|
||||
filter: blur(0.08rem) saturate(1.04);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
clip-path: inset(0 0 0 0);
|
||||
filter: blur(0) saturate(1);
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes header-logo-outline {
|
||||
0%,
|
||||
68%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
72% {
|
||||
opacity: 0;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 1;
|
||||
stroke-dashoffset: 0.98;
|
||||
}
|
||||
|
||||
87% {
|
||||
opacity: 1;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
93% {
|
||||
opacity: 0;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes header-logo-fill {
|
||||
0%,
|
||||
68%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
|
||||
72% {
|
||||
opacity: 0.48;
|
||||
filter: brightness(0.72) blur(0.01rem);
|
||||
transform: translateZ(0) scale(0.992);
|
||||
}
|
||||
|
||||
86% {
|
||||
opacity: 0.28;
|
||||
filter: brightness(0.9) blur(0.015rem);
|
||||
transform: translateZ(0) scale(0.992);
|
||||
}
|
||||
|
||||
94% {
|
||||
opacity: 1;
|
||||
filter:
|
||||
brightness(1.18)
|
||||
drop-shadow(0 0 0.45rem rgba(250, 250, 250, 0.42))
|
||||
drop-shadow(0 0 0.9rem rgba(242, 169, 0, 0.32));
|
||||
transform: translateZ(0) scale(1.012);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes header-logo-sweep {
|
||||
0%,
|
||||
83%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-135%) skewX(-14deg);
|
||||
}
|
||||
|
||||
88% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
94% {
|
||||
opacity: 0;
|
||||
transform: translateX(135%) skewX(-14deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rise-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
Reference in New Issue
Block a user