.modal-overlay {
position: fixed;
z-index: 200;
inset: 0;
display: none;
opacity: 0;
background-color: var(--modal-overlay);
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal {
--modal-pad: 40px;
position: relative;
pointer-events: all;
width: 100%;
max-width: var(--modal-w);
border-radius: var(--modal-rd);
background-color: hsl(var(--modal-bg));
transform: scale(.98);
transition: transform .3s ease;
}
.modal-inner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100%;
pointer-events: none;
padding: 8px;
}
.modal::after {
pointer-events: none;
content: "";
position: absolute;
z-index: 1;
inset: 0;
border-radius: inherit;
border: 1px solid;
opacity: 0.07;
}
.modal-cont-pad {
padding: var(--modal-pad, 40px);
}
@media (max-width: 767px) {
.modal-side-pic {
display: none !important;
}
}
@media (min-width: 768px) {
.modal-side {
display: flex;
max-width: var(--modal-pc-w);
}
.modal-side-pic {
position: relative;
z-index: 1;
color: hsl(var(--c-text-white));
flex: 0 0 48%;
max-width: 320px;
overflow: hidden;
background-color: hsl(var(--c-yellow));
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.modal-side-pic .cover {
position: absolute;
inset: 0;
z-index: -1;
margin: 0;
pointer-events: none;
user-select: none;
}
.modal-logo {
display: block;
padding: 32px;
}
.modal-logo.im {
--im-size: 32px;
--im-color: hsl(var(--c-text-white));
}
.modal-cont {
flex: 1 1 auto;
}
}
.modal-open .modal-overlay {
display: block;
opacity: 1;
visibility: visible;
}
.modal-open .modal {
transform: scale(1);
}
.modal-open body {
overflow: hidden;
}
.sep-text {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--fs-3);
line-height: 20px;
height: 1px;
margin-top: var(--modal-pad);
}
.sep-text > span {
margin: 0 8px;
}
.sep-text > span::after {
content: attr(title);
opacity: .5;
}
.sep-text::after, .sep-text::before {
content: "";
height: 1px;
flex: 1 1 auto;
background-color: var(--c-border);
}
.social-links {
margin: calc(var(--modal-pad)/-1);
margin-top: 0;
}
.social-links .soc-item:first-child {
order: -1;
}
.social-links::before {
content: "";
height: 24px;
width: 1px;
background-color: var(--c-border);
}
.soc-item {
flex: 1;
padding: 32px;
text-align: center;
}
.soc-item img {
transition: transform .2s ease;
}
.soc-item:hover img {
transform: scale(1.02);
}
.upanel-profile {
--title-mb: 4px;
padding: 32px;
padding-bottom: 24px;
text-align: center;
}
.upanel-admin {
padding: 0 32px;
}
.upanel-menu {
padding: 20px;
}
.upanel-profile + .upanel-menu {
border-top: 1px solid hsla(var(--c-text),0.1);
}
.upanel-status *, .upanel-status {
color: inherit !important;
opacity: .7;
font-size: var(--fs-2);
}
.upanel-profile .title {
font-size: var(--fs-title-sect);
display: block;
}
.upanel-profile .item-link:not(.title) {
font-size: var(--fs-2);
opacity: .7;
transition: opacity .2s ease;
}
.upanel-profile .item-link:not(.title):hover {
opacity: 1;
}
.upanel-profile .cover {
max-width: 100px;
width: 100px;
height: 100px;
margin: 0 auto;
margin-bottom: 8px;
}
.upanel-profile .mask {
--mask-img: url(//site-apk.site/wp-content/themes/zplay/assets/img/icons/user-mask.svg);
--mask-w: 100%;
--mask-h: 100%;
--mask-size: auto 100%;
}
.upanel-profile .mask:not(.cover) {
display: flex;
align-items: center;
justify-content: center;
width: inherit;
height: inherit;
}
.upanel-profile .mask {
--mask-bg: hsla(var(--c-second),0.2);
}
html.darkmod .upanel-profile .mask {
--mask-bg: hsla(var(--c-text),0.2);
}
.dle-popup-userprofile .upanel-profile {
display: flex;
align-items: center;
text-align: left;
padding: 16px;
background-color: hsla(var(--c-second),0.05);
border-radius: 12px;
margin-bottom: var(--uidialog-gap);
}
.dle-popup-userprofile .upanel-profile:hover {
background-color: hsla(var(--c-second),0.07);
}
html.darkmod .dle-popup-userprofile .upanel-profile {
background-color: hsla(var(--c-text),0.05);
}
html.darkmod .dle-popup-userprofile .upanel-profile:hover {
background-color: hsla(var(--c-text),0.07);
}
.dle-popup-userprofile .upanel-profile .cover {
margin: 0;
max-width: 64px;
width: 64px;
height: 64px;
}
.dle-popup-userprofile .upanel-profile .cont {
padding: 0 12px;
flex: 1 1 auto;
min-width: 0;
}
.usinf > li {
padding: 12px 0;
}
.usinf > li:not(:first-child) {
border-top: 1px solid var(--c-border);
}
.usinf > li:first-child {
padding-top: 0;
}
.usinf > li:last-child {
padding-bottom: 0;
}
.ui-c1, .ui-c2 {
display: block;
}
.ui-c1 {
opacity: .7;
font-size: var(--fs-2);
}