fix(identity): align application modal with reference
This commit is contained in:
@@ -519,20 +519,171 @@
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.uc-auth-modal__dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; max-height: min(760px, calc(100vh - 40px)); overflow: auto; background: var(--surface-1, #fff); }
|
||||
.aksrt-identity-modal-shell .aksrt-modal-runtime__dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; }
|
||||
.aksrt-identity-modal-shell .uc-auth-modal__dialog { width: auto; max-width: none; max-height: none; overflow: visible; background: transparent; }
|
||||
.uc-auth-modal__header > div { display: flex; align-items: center; gap: 10px; }
|
||||
.uc-auth-modal__header > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
|
||||
.uc-auth-modal__body { padding: 22px; }
|
||||
|
||||
.uc-auth-form { display: grid; gap: 17px; }
|
||||
.uc-auth-field { display: grid; gap: 7px; color: var(--color-ink-2); font-size: 13px; font-weight: 600; }
|
||||
.uc-auth-form .form-control { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.1)); border-radius: 9px; background: var(--surface-1); color: var(--color-ink); font: inherit; font-weight: 400; box-sizing: border-box; }
|
||||
.aksrt-identity-modal-shell .aksrt-modal-runtime__dialog {
|
||||
width: min(600px, calc(100vw - 20px));
|
||||
max-width: 600px;
|
||||
max-height: calc(100vh - 20px);
|
||||
max-height: calc(100dvh - 20px);
|
||||
overflow: auto;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
||||
}
|
||||
.aksrt-identity-modal-shell .aksrt-modal-runtime__content { padding: 0; }
|
||||
.uc-auth-modal {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 1px;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
||||
}
|
||||
.uc-auth-modal__header,
|
||||
.uc-auth-modal__header.colorful-bg {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
left: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
|
||||
background: var(--this-bg);
|
||||
background-size: 120%;
|
||||
color: var(--this-color);
|
||||
}
|
||||
.uc-auth-modal__header > .close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 9;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--this-color);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
opacity: .6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.uc-auth-modal__header > .close:hover { opacity: 1; }
|
||||
.uc-auth-modal__header .colorful-make,
|
||||
.uc-auth-modal__header .colorful-make::before,
|
||||
.uc-auth-modal__header .colorful-make::after {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background: var(--this-bg);
|
||||
color: var(--this-color);
|
||||
content: '';
|
||||
}
|
||||
.uc-auth-modal__header .colorful-make {
|
||||
top: 60%;
|
||||
bottom: 0;
|
||||
width: 323px;
|
||||
height: 290px;
|
||||
animation: uc-auth-colorful 120s linear infinite;
|
||||
}
|
||||
.uc-auth-modal__header .colorful-make::before {
|
||||
top: -325px;
|
||||
right: -558px;
|
||||
bottom: 0;
|
||||
width: 677px;
|
||||
height: 300px;
|
||||
transform: rotate(341deg);
|
||||
opacity: .6;
|
||||
}
|
||||
.uc-auth-modal__header .colorful-make::after {
|
||||
top: -170px;
|
||||
bottom: 0;
|
||||
left: -262px;
|
||||
width: 402px;
|
||||
height: 214px;
|
||||
transform: rotate(326deg);
|
||||
opacity: .4;
|
||||
}
|
||||
.uc-auth-modal__header .colorful-make + * { position: relative; }
|
||||
.uc-auth-modal__body {
|
||||
position: relative;
|
||||
margin-top: 120px;
|
||||
padding: 15px;
|
||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
||||
}
|
||||
.uc-auth-form { margin: 0; }
|
||||
.uc-auth-form__scroll { max-height: 50vh; max-height: 50dvh; }
|
||||
.uc-auth-field { display: block; color: var(--muted-2-color); font-size: .9em; font-weight: 400; }
|
||||
.uc-auth-field__label { display: block; margin-bottom: 6px; }
|
||||
.uc-auth-form .form-control { width: 100%; box-sizing: border-box; }
|
||||
.uc-auth-form textarea.form-control { resize: vertical; }
|
||||
.uc-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
|
||||
.uc-auth-form__message { min-height: 18px; color: var(--color-error, #dc2626); font-size: 12px; text-align: center; }
|
||||
.uc-auth-upload .preview .add {
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.uc-auth-upload .preview-item { overflow: hidden; }
|
||||
.uc-auth-upload .preview-item img { object-fit: contain; }
|
||||
.uc-auth-preview-remove {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #fd2c53;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aksrt-identity-modal-shell .uc-auth-modal .uc-auth-modal__body .uc-auth-modal__footer {
|
||||
display: flex;
|
||||
grid-template-columns: none;
|
||||
gap: 0;
|
||||
margin: 0 -15px -15px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--main-border-color, var(--color-line, rgba(50, 50, 50, .12)));
|
||||
border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
|
||||
}
|
||||
.aksrt-identity-modal-shell .uc-auth-modal .uc-auth-modal__body .uc-auth-modal__footer > .but {
|
||||
display: flex;
|
||||
flex: 1 1 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
margin: 0 !important;
|
||||
padding: .8em;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--muted-color, #888);
|
||||
font: inherit;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aksrt-identity-modal-shell .uc-auth-modal .uc-auth-modal__body .uc-auth-modal__footer > .but + .but {
|
||||
border-left: 1px solid var(--main-border-color, var(--color-line, rgba(50, 50, 50, .12)));
|
||||
}
|
||||
.aksrt-identity-modal-shell .uc-auth-modal .uc-auth-modal__body .uc-auth-modal__footer > .but.c-blue {
|
||||
background: transparent;
|
||||
color: var(--this-color, #2997f7);
|
||||
}
|
||||
.aksrt-identity-modal-shell .uc-auth-modal .uc-auth-modal__body .uc-auth-modal__footer > .but:hover {
|
||||
background: var(--this-bg, rgba(136, 136, 136, .1));
|
||||
}
|
||||
.aksrt-identity-modal-shell .uc-auth-modal .uc-auth-modal__body .uc-auth-modal__footer > .but:disabled { opacity: .5; cursor: wait; }
|
||||
@keyframes uc-auth-colorful { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.uc-auth-modal__dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; }
|
||||
@media (max-width: 768px) {
|
||||
.aksrt-identity-modal-shell.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
|
||||
width: calc(100% - 20px);
|
||||
max-width: none;
|
||||
max-height: calc(100dvh - 30px - env(safe-area-inset-bottom));
|
||||
margin: 0 10px calc(10px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user