PaiGramTeam/MibooGram
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/MibooGram.git synced 2024-11-30 03:14:38 +00:00
Code Issues Packages Projects Releases Wiki Activity
db6a9aab08
MibooGram/resources/zzz/agent_detail/css/style.css
xtaodada 037f5ef3d2
✨ Support zzz agent detail
2024-07-06 17:31:50 +08:00

4610 lines
127 KiB
CSS
Raw Blame History

.hyv-login-platform__loading {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
z-index: 100001;
background: rgba(0, 0, 0, 0)
}
@-webkit-keyframes rotation {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.hyv-login-platform__loading--rotation {
width: 80px;
height: 80px;
background: #2b2e33;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center
}
.hyv-login-platform__loading--rotation div {
border: none;
width: 46px;
height: 46px;
background-size: 46px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArdSURBVHgB7V1ZzCVFFf7+6zgjA8IMwqgMyIBGVHBDxRWFKIsbMcZlJMblDYgPaqJoolEfjMFEEzURE33iyahxxeXBKEZFE0UGBsQohHFQZphhcHA2HOG/fB9dxa1bt6q7qm/3XftLTk7f7v7vraqvzzlVp6rrBzp06NChQ4cOHTp06NChQ4cOs4MVzAH6/f6xVC+gPI3yTKMlKv/TjbZyiLLb0ZK/UO5cWVk5gBnHTBJiCHi+kVehaHyhh0GZ7XFMQveInJspv6HcNIsEzRQhJOIcqstQWINIUfl65rI9XskU9+/9c9dTbiAxN2BGMHVCSMJ6qrcaOQ7VDdtDdYO716qsRrKL8g3Kn0nOvZgipkaIIeItRo4zp3OsIUZQiKhewvdYYn5EUq7FlDAVQkjGBVTvpGxC+ZMNDDc8MNy47jEC51JIdf/WtZivk5gfYsKYKCEk4mSqKylno7yhqhowZCFANRlVnQLf/f2K8gUS829MCBMjhGRcSvUODNxT6pPbi1zzXZK9tyrWlN2DwO+oJyZSvo8JoHVCTKx4O+WNwEhwtWXoBa6VWUaKFZTdEzqPknuF60jK59EyWiWEZJxE9RHK6c7vhVxDnUbtZV6rikExUtxy3kG5isT8Cy2hNUIMGZ+knOz8VsgSgDQyDlO2U/ZQ7qbcRTnIxrnP+12N3DWQlGt8NuUllLMoxyf8Rsx1uZ8VTy5vi5RWCDFkfAIFGX4FYy7LnnOPj1B+TLmNDbAd45VJxFxAuZCyGdU9sJDbckl5TxukNE6IIeNqykmIP3F9lPv22ynfYYVvQwtgGV9KdQXlPFTHslDZLSlbmyalUUIMGR9HQYb9/piPDl2Xj/4uK3k7JgCW9xQUD88bkG8lEpEhUu5BQ2iakM9QnYbySoTkfsq1rNhfMQWw3G+j+hCKsgPphAgq87tY9v+iAfTQEFipd1Od6p4y4n+2smr0zyhXT4sMwYzI30+xY41UMqSVEP0oGkIjFkIyXkn1Qe87/R6K1VYUsH/AxvgFZgisyweoPoVqC4enP8u6fBNjYmxCWIGnoKjAeuc7/QL7cUNkaPS7EzMI1ul5KLK/1v0C1ZYil3XRuPGkCZeldMiTMOqSfHe1ao73Uj49q2QIxn1ejqIn9dgpjD5cvpxA+QrGxFiE8El6BdULESYAGI4Xgsi4hhW+HzMO053diiKX5XZ7gbCl6Nqr2SZbMQbGtZA3Idz4PhH2+tfmgQwLh5SDSAv0ko+RlONRE7UJ4Y8qWXgiwq4qJN9usr8+KZgx0ZdR3YW3156BYtBZC7UIMYH85QhbRchKbmTFfok5Bcv+LSpJKDH5+G2OvoJtdAJqoK6FPIuyEcOxwyUCzrFc1E8w//gSRRbux41QZllk1LKSuoRcgqLBbaO7RADD1nI9n7B9mHOYkfiHEXZToaz1laiBbELMUp2N7ilH++7qFlbkj1gQsC43Uqk+sTjiWskGttVrkIk6FiJCQjEDGA3k38Pi4YsIu6zQuauQiSxCyPgxVEpdh8jwA/k/+EQ9gAUD6/R7qj9gNKCHstjn5wb3XAvRutqYZej4EQyI+TkWF9cgbiGuyLWfjwzkEnK20T4pfu9qH5+kO7GgYN1+h+ERfNnYpFVCzsBo/Ajlr8aabp0TaHVjFSFq38syvjOdEPpCJRA3oJwMay2tTL3OGGQl7hgkNB4RtuTEkRwL0WoO1wr8IG6PD9Ok78KCg3X8LYqUe4rbem3q9+YQciaqrUN6qqvHJwzXSmCOn2Ck58iWxO/DGqTDpkqA4VG5hQolUhbeOhz8EwMyLBFud9j2PF+EROQQIj9ol8D4aRJgUJBdWB7ciqLelgwf1kJORyJyCHFnBS1ClnIEywMREiPDxZlIRA4hmnTpl1y31/6D5cF+pMXhjUhETlBfh/IxiNBn72M/lgSsqxtDyqBE45aE+7IsxKKfeb5DgaQHNcdC+omybPhcwj3bUj1HLiGhtHtskmpZ8FVUP/3Jy4NyCLHB2h8IwtXEBiwXHqS8nrIjcl0vLF2HROTEEEvCinfOt4p1WBLw4bNjEHV/L0KRInkfCovZicIydiAt8D+G5Bv54+9FMcCp6vr+lP7yViwBDCFPDF3yPq+yTR5BAnJc1n6EB4Z+QN+E5YFNlbgzhUA8yViJHJeld/lCBPiplCdjeWCTiDalBAzaw+qs3mcOIQpeq965kMWchuWBv1jOh72WTEiOy9rpfHmZrKNvXXhSWEdrHf6kVOhz84QwKD2E4TgSmw+RPhWLDwVzf+lPaOWJ2q4VCxH+jvi0rXvuxVh8iBBLguCvZLSSTAaQT8g9CI/YfYLW0qQX1kpYN8VedzIq1LuySOruWtQhRK4rNFL35TwsLo4x2reG0Bqt9gihL/wfRoN7bBnpZj5Jm7FgYJ3UZq67ilmH9MM58QOot7ZXm0j6OayQC9O5l2HxoD1UYr0qYNhq/o9MZBNiXvOS2/KzvCE5xeyWsBAwa9MkKwmiybqHkYk6FiLc7H32e1yuG7uQFZn7hKMZd/ibrwHDS4Bcy3kINVCXkG0YWIlvIcAwOarEuZh/KCWk3lUsiMM5Vr2z3RVQkxAT3EWKnzax2ifnHPOiz1yCZddDZfcRdru0sQTiUbbRKmqgroUIt6BYSumP0mODxnPNy6JzBZZZPSq7aiTWq3ItRbHjMGqiNiHGSv6EcILRfz9dInO/1DxtcwEzAHR3xHPjRSzVXpsM+8W1QVL+hmL7Cd8agLDlrKVcMg+kGDK0VaDK7FpBaMW7xVGT86uNsQgx+DVF1hLr+lpYYkTGxaxw8uKxScP0CpX6sbOBobjhHtvPY2/uPzYh5j8M3ITRoO6P4OF8VoB8Myt+FmYM5kFx92QE4r0p9/hA6jRtGVbQEMxGNOpJlfW2QqP5uynbWZlDmCJMSkRbE24AKnN1/jntjvogGkCThMjXajOaE+0pR1eJNnfRzqM7MAWYzZ71QtIahGOgXxdg4AGO+lvVjoPGCBFMsBYpckl+xeyx/6S5lVYHYds43cYa5ZVVrK8ol0+Kva7UyJ46KZIYGiVEMJXUTkHrMRi1xkw9tDeKRPtq3dHWVk6mjE81ZYw9LDFi7L0iYXeTZAiNEyKYCms/FN9SfDLgHfubECiu6AWg3ePul8IyKfWhcmlc4c7khQa1ofK6IhJ2NU2G0AohgiHlYgzcAVDtEmKBXziKYk5fxKhnp1zREb/fbzKyavBjjaw1eg3CubdUsWUWCfe2QYbQGiGCIeV1GPRcgFF3FSLI/xxyc25WOfZGcOy4jPgyQkT+rrbIEFolxMLsu64xR+7TGCIiREy/4t4QOUCY0Fh5tG/LA3WThqmYCCECSTkDxX8qsK7DVtRvMPdc7CkH4u4n1vD9jN+CozXY20siJvKq3sQIEcz/J9QSIc0i5riLMnKq7su55pItaHwkF1VrbqMOJkqIhXnfTpsVa/WG2xB1GzHVUkJWhsDfqQOxp6nRdw6mQogFiXkuilccXGJ8gkLuBqgmK3YeGJ1mtqJgrbHPvibyUnUwVUIEk7bQaPk5GKx3io2SqwJ9FWmI/J0lYu+0iLCYOiEunH9XpNR3rosqIy5ElEjQeOY+knAQM4KZIsTCTJtquneT0XbVSiwepJAh0ThCvSVNPR+YtjWEMJOE+DCzd9pJQnMVdm2UzokoLc9xyTiCQeNLDhl9oM0BXYcOHTp06NChQ4cOHTp06NBhEfEomGUtRQ40rPMAAAAASUVORK5CYII=);
animation: rotation 1s linear infinite
}
.hyv-login-platform__overflow-hidden {
overflow: hidden
}
.mhy-init-user-dialog {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 1.5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 14px;
z-index: 10000;
background-color: rgba(0, 0, 0, .5)
}
.mhy-init-user-dialog .mhy-init-user-dialog-scroll-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 600px
}
.mhy-init-user-dialog .mhy-init-user-dialog-content {
position: absolute;
left: 50%;
top: 50%;
padding: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
border-radius: 16px;
background-color: #fff
}
.mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
position: relative;
height: 20px
}
.mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .close-btn {
position: absolute;
width: 20px;
height: 20px;
padding: 0;
top: 0;
right: 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer
}
.mhy-init-user-dialog.is-dark-theme {
background-color: rgba(255, 255, 255, .5)
}
.mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content {
background-color: #1b1d2a
}
.mhy-init-user-button {
display: inline-block;
cursor: pointer;
-ms-flex-negative: 0;
flex-shrink: 0
}
.mhy-init-user-button.mhy-init-user-button-primary {
background-color: #e1e7ff;
color: #657ef8
}
.mhy-init-user-button.mhy-init-user-button-primary:hover {
background-color: #657ef8;
color: #fff
}
.mhy-init-user-button.mhy-init-user-button--disabled {
background-color: #dde3ec;
color: rgba(0, 0, 0, .25)
}
.mhy-init-user-button.mhy-init-user-button--disabled:hover {
background-color: #dde3ec;
color: rgba(0, 0, 0, .25)
}
.mhy-init-user-button__button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
outline: none;
border: none;
font-size: inherit;
color: inherit;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
border-radius: 15px;
font-weight: inherit;
line-height: inherit;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, color;
-o-transition-property: background-color, color;
transition-property: background-color, color
}
.mhy-init-user-button-primary .mhy-init-user-button__button {
font-weight: bold
}
.is-dark-theme .mhy-init-user-button.mhy-init-user-button-primary {
background-color: #363f7e;
color: #657ef8
}
.is-dark-theme .mhy-init-user-button.mhy-init-user-button--disabled {
background-color: #40434c;
color: rgba(255, 255, 255, .25)
}
.is-dark-theme .mhy-init-user-button.mhy-init-user-button--disabled:hover {
background-color: #40434c;
color: rgba(255, 255, 255, .25)
}
.mhy-init-user-input {
font-size: 14px;
position: relative;
line-height: 20px
}
.mhy-init-user-input__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 8px;
position: relative;
height: 100%;
border: 1px solid #f1f4f9
}
.mhy-init-user-input__container--focus {
border-color: #657ef8
}
.mhy-init-user-input__container input {
height: 100%;
border: none;
border-style: none;
outline: none
}
.mhy-init-user-input__container input, .mhy-init-user-input__container textarea {
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
z-index: 2;
border: none;
background-color: rgba(0, 0, 0, 0);
font-size: inherit
}
.mhy-init-user-input__container input::-webkit-input-placeholder, .mhy-init-user-input__container textarea::-webkit-input-placeholder {
color: rgba(0, 0, 0, .45)
}
.mhy-init-user-input__container input::-moz-placeholder, .mhy-init-user-input__container textarea::-moz-placeholder {
color: rgba(0, 0, 0, .45)
}
.mhy-init-user-input__container input:-ms-input-placeholder, .mhy-init-user-input__container textarea:-ms-input-placeholder {
color: rgba(0, 0, 0, .45)
}
.mhy-init-user-input__container input::-ms-input-placeholder, .mhy-init-user-input__container textarea::-ms-input-placeholder {
color: rgba(0, 0, 0, .45)
}
.mhy-init-user-input__container input::placeholder, .mhy-init-user-input__container textarea::placeholder {
color: rgba(0, 0, 0, .45)
}
.mhy-init-user-input__container textarea {
resize: none
}
.mhy-init-user-input__maxtip {
position: absolute;
top: 50%;
margin-top: -8px;
pointer-events: none;
line-height: 16px;
z-index: 1
}
.is-dark-theme .mhy-init-user-input__container {
border: 1px solid #343746
}
.is-dark-theme .mhy-init-user-input__container input::-webkit-input-placeholder, .is-dark-theme .mhy-init-user-input__container textarea::-webkit-input-placeholder {
color: rgba(255, 255, 255, .45)
}
.is-dark-theme .mhy-init-user-input__container input::-moz-placeholder, .is-dark-theme .mhy-init-user-input__container textarea::-moz-placeholder {
color: rgba(255, 255, 255, .45)
}
.is-dark-theme .mhy-init-user-input__container input:-ms-input-placeholder, .is-dark-theme .mhy-init-user-input__container textarea:-ms-input-placeholder {
color: rgba(255, 255, 255, .45)
}
.is-dark-theme .mhy-init-user-input__container input::-ms-input-placeholder, .is-dark-theme .mhy-init-user-input__container textarea::-ms-input-placeholder {
color: rgba(255, 255, 255, .45)
}
.is-dark-theme .mhy-init-user-input__container input::placeholder, .is-dark-theme .mhy-init-user-input__container textarea::placeholder {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog {
z-index: 9999
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content {
padding: 0;
width: 450px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
padding: 24px 52px 0
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .close-btn {
top: 12px;
right: 12px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-bg1 {
position: absolute;
top: 186px;
right: 0;
width: 100px;
height: 106px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-bg2 {
position: absolute;
top: 26px;
left: 0;
width: 122px;
height: 270px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-bg3 {
position: absolute;
top: 0;
right: 55px;
width: 120px;
height: 64px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-mino {
position: absolute;
top: -110px;
left: 0;
width: 100%;
height: 110px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-mino img {
width: 100%;
height: 100%
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info {
padding: 0 24px 24px;
border-radius: 8px;
position: relative
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user__title {
margin-top: 6px;
padding: 4px 0 8px 0;
font-size: 22px;
line-height: 28px;
font-weight: 700;
text-align: center
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .nickname-tip {
margin-bottom: 32px;
font-size: 14px;
color: rgba(0, 0, 0, .45);
text-align: center;
white-space: pre-wrap;
line-height: 20px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container {
text-align: center
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-container {
position: relative;
margin: auto;
display: inline-block
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-bg {
position: absolute;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 30px;
border: 1px solid #fff;
background-color: #fff
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-bg img {
width: 18px;
height: 18px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img {
width: 112px;
height: 112px;
vertical-align: top;
border-radius: 100%;
border: 3px solid #f1f4f9;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input {
margin: 32px 0 0
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container {
padding: 9px 12px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container span, body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container input {
height: 20px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: rgba(0, 0, 0, .45)
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .submit-btn {
margin: 0 auto;
width: 100%;
height: 44px;
line-height: 44px;
font-size: 18px;
border-radius: 22px;
cursor: pointer
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .submit-btn span {
font-size: 16px;
font-weight: 700;
line-height: 24px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 12px;
line-height: 20px;
font-weight: 400;
font-size: 14px;
cursor: pointer;
color: rgba(0, 0, 0, .45);
word-break: break-word
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox {
margin-right: 8px
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox.mhy-init-user-checkbox--checked .mhy-init-user-checkbox__icon {
border: none;
background-color: #657ef8
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 20px;
height: 20px;
border-radius: 20px;
border-color: #b2bdce
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon img {
margin-top: 2px;
width: 10px;
height: 10px;
vertical-align: middle;
color: #fff
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .agreement-content {
display: inline-block;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 20px;
font-size: 14px;
max-height: 60px;
word-wrap: break-word;
word-break: break-word;
color: rgba(0, 0, 0, .45)
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .agreement-content a {
color: #657ef8;
text-decoration: none
}
body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-nickname-tips {
margin: 8px 0 32px;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, .25)
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 0
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
position: relative;
z-index: 10
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header img {
top: 16px;
left: 16px;
width: 16px;
height: 16px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile {
width: 100%;
height: 100%
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-bg1 {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 168px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-bg2 {
position: absolute;
top: 0;
left: 0;
width: 88px;
height: 292px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-bg3 {
position: absolute;
top: 0;
right: 0;
width: 130px;
height: 140px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-animation {
position: relative;
width: 100%;
height: 100%
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-animation .mhy-init-user-svga-container {
margin: 40% auto 0;
width: 240px;
height: 240px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content {
position: relative;
margin-top: 70px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title {
position: relative;
margin: 0 auto;
width: 310px;
font-size: 26px;
font-weight: 700;
line-height: 32px;
text-align: center;
color: rgba(0, 0, 0, .85)
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title span {
display: inline-block;
position: relative;
z-index: 100
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title .mhy-init-user-line {
position: absolute;
left: calc(50% - 38px);
bottom: 0;
width: 76px;
height: 10px;
z-index: 1
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .nickname-tip {
margin: 16px auto 0;
width: 310px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
text-align: center;
color: rgba(0, 0, 0, .85)
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container {
position: relative;
margin: 40px auto 0;
width: 82px;
height: 82px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img {
width: 100%;
height: 100%;
border-radius: 41px;
border: 1px solid #f1f4f9
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg {
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 28px;
height: 28px;
border-radius: 14px;
border: 1px solid #fff;
background-color: #f5f6fb
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg img {
width: 16px;
height: 16px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input {
position: relative;
margin: 16px auto 0;
padding: 9px 9px 9px 11px;
width: 288px;
border-radius: 8px;
border: 1px solid #f5f6fb
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input .mhy-init-user-input__container {
border: none
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input .mhy-init-user-input__container::after {
border: none
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input span {
color: rgba(0, 0, 0, .25)
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input input {
color: rgba(0, 0, 0, .65);
font-size: 14px;
font-weight: 400;
line-height: 18px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-nickname-tips {
margin: 8px auto 40px;
width: 310px;
font-size: 12px;
line-height: 16px;
text-align: center;
font-weight: 400;
color: rgba(0, 0, 0, .45)
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn {
position: relative;
margin: 40px auto 0;
display: block;
width: 310px;
height: 46px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 23px;
cursor: none
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn button {
cursor: none;
font-size: 17px;
font-weight: 700;
line-height: 22px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn.mhy-init-user-button--disabled {
color: rgba(0, 0, 0, .25);
background-color: #f1f4f9;
cursor: none
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 40px auto 32px;
width: 310px;
line-height: 20px;
font-weight: 400;
font-size: 14px;
cursor: pointer;
color: rgba(0, 0, 0, .45);
word-break: break-word
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox {
margin-right: 8px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox.mhy-init-user-checkbox--checked .mhy-init-user-checkbox__icon {
border: none;
background-color: #657ef8
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 20px;
height: 20px;
border-radius: 20px;
border-color: rgba(0, 0, 0, .45)
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon img {
margin-top: 2px;
width: 10px;
height: 10px;
vertical-align: middle
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon .icon-unchecked {
font-size: 20px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .agreement-content {
display: inline-block;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 20px;
font-size: 14px;
max-height: 60px;
word-wrap: break-word;
word-break: break-word;
font-size: 12px;
font-weight: 400;
line-height: 20px
}
body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .agreement-content a {
color: #657ef8;
text-decoration: none
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-dialog-header .icon-dialog_close {
color: #cecfd1
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user__title {
color: rgba(255, 255, 255, .85)
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .nickname-tip {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-bg {
border: 1px solid #1b1d2a;
background-color: #242734
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img {
border: 3px solid #343746
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input {
margin: 32px 0 0;
font-size: 14px;
position: relative;
line-height: 20px
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container span, body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container input {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-nickname-tips {
color: rgba(255, 255, 255, .25)
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
border-color: #5c5f6b
}
body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .agreement-content {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
background-color: #0c0f1d
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header img {
width: 14px;
height: 14px
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title {
color: rgba(255, 255, 255, .85)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .nickname-tip {
color: rgba(255, 255, 255, .85)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img {
border: 1px solid #343746
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg {
border: 1px solid #1b1d2a;
background-color: #0c0f1d
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg img {
color: #cecfd1;
width: 16px;
height: 16px
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input {
border: 1px solid #0c0f1d;
background-color: #1b1d2a
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input span {
color: rgba(255, 255, 255, .25)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input input {
color: rgba(255, 255, 255, .65)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-nickname-tips {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn.mhy-init-user-button--disabled {
color: rgba(255, 255, 255, .25);
background-color: #343746
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement {
color: rgba(255, 255, 255, .45)
}
body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
color: rgba(255, 255, 255, .45);
border-color: rgba(255, 255, 255, .45)
}
@media screen and (max-height: 600px) {
.is-mobile .mhy-init-user-mobile {
margin-bottom: 150px
}
.is-mobile .mhy-account-flow-avatar-list {
margin-bottom: 150px
}
.is-mobile .mhy-init-user-dialog-content {
overflow: scroll !important
}
}
body .mhy-avatar-list-dialog {
z-index: 10000
}
body .mhy-avatar-list-dialog .mhy-init-user-dialog-content {
min-width: 608px;
overflow: hidden
}
body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
padding: 10px 16px;
height: auto;
border-bottom: 1px solid #f6f9fb
}
body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
text-align: left;
font-size: 14px;
line-height: 16px;
font-weight: 600;
color: #2f3f56
}
body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .close-btn {
top: calc(50% - 10px);
right: 16px
}
body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-body {
padding: 0;
max-height: 640px;
overflow: hidden
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list {
max-height: 640px;
padding: 0;
background-color: #fff
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .title {
text-align: center;
margin-bottom: 10px
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-container {
margin: 32px 0;
text-align: center
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-container .avatar-img {
width: 112px;
height: 112px;
vertical-align: top;
border-radius: 100%;
border: 6px solid #eceff4
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list {
margin: 0 auto 86px;
padding: 2px 0 0 46px;
width: 100%;
height: 390px;
text-align: left;
overflow-y: scroll
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item {
position: relative;
margin: 0 53px 16px 0;
width: 88px;
height: 88px;
display: inline-block;
border: 6px solid #eceff4;
border-radius: 88px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item:nth-child(4n) {
margin-right: 0
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item img {
width: 100%;
height: 100%;
border-radius: 100%
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item.active::after {
position: absolute;
top: -8px;
left: -8px;
content: "";
display: block;
width: 88px;
height: 88px;
border-radius: 100%;
border: 2px solid #6484ff
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-btn-group {
position: absolute;
left: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 76px;
width: 100%;
background-color: #fff
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-cancel-btn {
margin: 0;
width: 115px;
height: 38px;
line-height: 38px;
border-radius: 38px;
font-size: 14px;
cursor: pointer
}
body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-submit-btn {
margin: 0 0 0 24px;
width: 115px;
height: 38px;
line-height: 38px;
border-radius: 38px;
font-size: 14px;
cursor: pointer
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
min-width: 100%;
background-color: #f5f6fb
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .header-back-icon {
width: 16px !important;
height: 16px !important
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #2f3f56
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .header-submit-btn {
font-size: 14px;
font-weight: 600;
line-height: 14px;
color: #657ef8
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list {
padding-bottom: 200px;
background-color: rgba(0, 0, 0, 0)
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-container {
background-color: rgba(0, 0, 0, 0)
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-container img {
width: 82px;
height: 82px;
border-width: 2px
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list {
display: grid;
justify-items: center;
grid-template-columns:repeat(4, 1fr);
margin: 0 auto;
padding: 20px 8px;
max-height: 520px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: calc(100% - 48px);
border-radius: 10px;
background-color: #fff;
overflow-x: hidden
}
@media screen and (max-width: 390px) {
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list {
grid-template-columns:repeat(3, 1fr)
}
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item {
margin: 0 15px 20px 0;
width: 70px;
height: 70px;
cursor: none
}
body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item.active::after {
width: 70px;
height: 70px
}
body .mhy-avatar-list-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
border-bottom: 1px solid #0c0f1d
}
body .mhy-avatar-list-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
color: #0c0f1d
}
body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list {
background-color: #1b1d2a
}
body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list .avatar-container .avatar-img {
border: 6px solid #3c3f50
}
body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item {
border: 6px solid #3c3f50
}
body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list .avatar-btn-group {
background-color: #1b1d2a
}
body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
background-color: #0c0f1d
}
body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
color: #cecfd1
}
body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list {
background-color: rgba(0, 0, 0, 0)
}
body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list {
background-color: #1b1d2a
}
.mhy-hoyolab-account-block {
position: relative;
cursor: pointer
}
.mhy-hoyolab-account-block__avatar {
width: 32px;
height: 32px
}
.mhy-hoyolab-account-block__avatar-icon {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #f1f4f9;
vertical-align: top
}
.mhy-hoyolab-account-block__item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between
}
.mhy-hoyolab-account-block__icon, .mhy-hoyolab-account-block__active-icon {
width: 24px;
height: 24px;
margin-right: 8px
}
.mhy-hoyolab-account-block__active-icon {
display: none
}
.mhy-hoyolab-account-block__arrow_icon, .mhy-hoyolab-account-block__arrow_icon_active {
width: 16px;
height: 16px
}
.mhy-hoyolab-account-block__arrow_icon_active {
display: none
}
.mhy-hoyolab-account-block .mhy-hoyolab-select-menu {
padding: 0;
top: 45px;
right: 0
}
.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__icon {
display: none
}
.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__active-icon {
display: inline-block
}
.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__arrow_icon {
display: none
}
.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__arrow_icon_active {
display: inline-block
}
.hoyolab-header-zoom-in-top-enter-active, .hoyolab-header-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top
}
.hoyolab-header-zoom-in-top-enter, .hoyolab-header-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0)
}
.hoyolab-header-account-zoom-in-top-enter-active, .hoyolab-header-account-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top
}
.hoyolab-header-account-zoom-in-top-enter, .hoyolab-header-account-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0)
}
.mhy-hoyolab-header {
background-color: #f5f6fb;
position: fixed;
width: 100%;
top: 0;
z-index: 2900
}
.mhy-hoyolab-header * {
box-sizing: border-box
}
.mhy-hoyolab-header ul {
margin: 0;
padding: 0;
list-style: none
}
.mhy-hoyolab-header__wrapper {
background-color: #fff
}
.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper {
background-color: #1b1d2a
}
.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-lang-selector {
background-color: #343746
}
.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-account-block__avatar img {
border-color: #576274
}
.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-select-menu {
background-color: #1b1d2a
}
.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-select-menu__item:hover {
background-color: #343746
}
.mhy-hoyolab-header__container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 1200px;
height: 56px;
margin: 0 auto
}
.mhy-hoyolab-header__hoyolab {
width: 87px;
height: 16px;
cursor: pointer
}
.mhy-hoyolab-header__right {
display: flex;
align-items: center
}
.mhy-hoyolab-header .mhy-hoyolab-lang-selector {
margin-right: 16px
}
@media screen and (max-width: 1439px) {
.mhy-hoyolab-header__container {
width: 972px
}
}
@media screen and (max-width: 1023px) {
.mhy-hoyolab-header__container {
width: 668px
}
}
html {
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif
}
a {
text-decoration: none
}
button, input, textarea {
color: inherit;
font: inherit
}
[class*=van-]:focus, a:focus, button:focus, input:focus, textarea:focus {
outline: 0
}
ol, ul {
margin: 0;
padding: 0;
list-style: none
}
.van-ellipsis {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
}
.van-multi-ellipsis--l2 {
-webkit-line-clamp: 2
}
.van-multi-ellipsis--l2, .van-multi-ellipsis--l3 {
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-orient: vertical
}
.van-multi-ellipsis--l3 {
-webkit-line-clamp: 3
}
.van-clearfix:after {
display: table;
clear: both;
content: ""
}
[class*=van-hairline]:after {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content: " ";
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #ebedf0;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5)
}
.van-hairline, .van-hairline--bottom, .van-hairline--left, .van-hairline--right, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom {
position: relative
}
.van-hairline--top:after {
border-top-width: 1px
}
.van-hairline--left:after {
border-left-width: 1px
}
.van-hairline--right:after {
border-right-width: 1px
}
.van-hairline--bottom:after {
border-bottom-width: 1px
}
.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after {
border-width: 1px 0
}
.van-hairline--surround:after {
border-width: 1px
}
@-webkit-keyframes van-slide-up-enter {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@keyframes van-slide-up-enter {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@-webkit-keyframes van-slide-up-leave {
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@keyframes van-slide-up-leave {
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@-webkit-keyframes van-slide-down-enter {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes van-slide-down-enter {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@-webkit-keyframes van-slide-down-leave {
to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes van-slide-down-leave {
to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@-webkit-keyframes van-slide-left-enter {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@keyframes van-slide-left-enter {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@-webkit-keyframes van-slide-left-leave {
to {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@keyframes van-slide-left-leave {
to {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@-webkit-keyframes van-slide-right-enter {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes van-slide-right-enter {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@-webkit-keyframes van-slide-right-leave {
to {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes van-slide-right-leave {
to {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@-webkit-keyframes van-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes van-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes van-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes van-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@-webkit-keyframes van-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes van-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.van-fade-enter-active {
-webkit-animation: .3s van-fade-in both ease-out;
animation: .3s van-fade-in both ease-out
}
.van-fade-leave-active {
-webkit-animation: .3s van-fade-out both ease-in;
animation: .3s van-fade-out both ease-in
}
.van-slide-up-enter-active {
-webkit-animation: van-slide-up-enter .3s both ease-out;
animation: van-slide-up-enter .3s both ease-out
}
.van-slide-up-leave-active {
-webkit-animation: van-slide-up-leave .3s both ease-in;
animation: van-slide-up-leave .3s both ease-in
}
.van-slide-down-enter-active {
-webkit-animation: van-slide-down-enter .3s both ease-out;
animation: van-slide-down-enter .3s both ease-out
}
.van-slide-down-leave-active {
-webkit-animation: van-slide-down-leave .3s both ease-in;
animation: van-slide-down-leave .3s both ease-in
}
.van-slide-left-enter-active {
-webkit-animation: van-slide-left-enter .3s both ease-out;
animation: van-slide-left-enter .3s both ease-out
}
.van-slide-left-leave-active {
-webkit-animation: van-slide-left-leave .3s both ease-in;
animation: van-slide-left-leave .3s both ease-in
}
.van-slide-right-enter-active {
-webkit-animation: van-slide-right-enter .3s both ease-out;
animation: van-slide-right-enter .3s both ease-out
}
.van-slide-right-leave-active {
-webkit-animation: van-slide-right-leave .3s both ease-in;
animation: van-slide-right-leave .3s both ease-in
}
.van-loading {
color: #c8c9cc;
font-size: 0
}
.van-loading, .van-loading__spinner {
position: relative;
vertical-align: middle
}
.van-loading__spinner {
display: inline-block;
width: 30px;
max-width: 100%;
height: 30px;
max-height: 100%;
-webkit-animation: van-rotate .8s linear infinite;
animation: van-rotate .8s linear infinite
}
.van-loading__spinner--spinner {
-webkit-animation-timing-function: steps(12);
animation-timing-function: steps(12)
}
.van-loading__spinner--spinner i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.van-loading__spinner--spinner i:before {
display: block;
width: 2px;
height: 25%;
margin: 0 auto;
background-color: currentColor;
border-radius: 40%;
content: " "
}
.van-loading__spinner--circular {
-webkit-animation-duration: 2s;
animation-duration: 2s
}
.van-loading__circular {
display: block;
width: 100%;
height: 100%
}
.van-loading__circular circle {
-webkit-animation: van-circular 1.5s ease-in-out infinite;
animation: van-circular 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round
}
.van-loading__text {
display: inline-block;
margin-left: 8px;
color: #969799;
font-size: 14px;
vertical-align: middle
}
.van-loading--vertical {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.van-loading--vertical .van-loading__text {
margin: 8px 0 0
}
@-webkit-keyframes van-circular {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40
}
to {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120
}
}
@keyframes van-circular {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40
}
to {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120
}
}
.van-loading__spinner--spinner i:first-of-type {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
opacity: 1
}
.van-loading__spinner--spinner i:nth-of-type(2) {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
opacity: .9375
}
.van-loading__spinner--spinner i:nth-of-type(3) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: .875
}
.van-loading__spinner--spinner i:nth-of-type(4) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
opacity: .8125
}
.van-loading__spinner--spinner i:nth-of-type(5) {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
opacity: .75
}
.van-loading__spinner--spinner i:nth-of-type(6) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
opacity: .6875
}
.van-loading__spinner--spinner i:nth-of-type(7) {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
opacity: .625
}
.van-loading__spinner--spinner i:nth-of-type(8) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
opacity: .5625
}
.van-loading__spinner--spinner i:nth-of-type(9) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
opacity: .5
}
.van-loading__spinner--spinner i:nth-of-type(10) {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
opacity: .4375
}
.van-loading__spinner--spinner i:nth-of-type(11) {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
opacity: .375
}
.van-loading__spinner--spinner i:nth-of-type(12) {
-webkit-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
opacity: .3125
}
.account-popup--overlay {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7)
}
.account-popup {
z-index: 99;
position: fixed;
max-height: 100%;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-overflow-scrolling: touch
}
.account-popup--center {
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0)
}
.account-popup--center.van-popup--round {
border-radius: 16px
}
.account-popup--top {
top: 0;
left: 0;
width: 100%
}
.account-popup--top.account-popup--round {
border-radius: 0 0 16px 16px
}
.account-popup--right {
top: 50%;
right: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.account-popup--right.account-popup--round {
border-radius: 16px 0 0 16px
}
.account-popup--bottom {
bottom: 0;
left: 0;
width: 100%
}
.account-popup--bottom.account-popup--round {
border-radius: 16px 16px 0 0
}
.account-popup--left {
top: 50%;
left: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.account-popup--left.account-popup--round {
border-radius: 0 16px 16px 0
}
.account-popup--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom)
}
.account-popup-slide-bottom-enter-active, .account-popup-slide-left-enter-active, .account-popup-slide-right-enter-active, .account-popup-slide-top-enter-active {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.account-popup-slide-bottom-leave-active, .account-popup-slide-left-leave-active, .account-popup-slide-right-leave-active, .account-popup-slide-top-leave-active {
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in
}
.account-popup-slide-top-enter, .account-popup-slide-top-leave-active {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
.account-popup-slide-right-enter, .account-popup-slide-right-leave-active {
-webkit-transform: translate3d(100%, -50%, 0);
transform: translate3d(100%, -50%, 0)
}
.account-popup-slide-bottom-enter, .account-popup-slide-bottom-leave-active {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.account-popup-slide-left-enter, .account-popup-slide-left-leave-active {
-webkit-transform: translate3d(-100%, -50%, 0);
transform: translate3d(-100%, -50%, 0)
}
@-webkit-keyframes account-popup-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes account-popup-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes account-popup-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes account-popup-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.account-popup-fade-enter-active {
-webkit-animation: .3s account-popup-fade-in both ease-out;
animation: .3s account-popup-fade-in both ease-out
}
.account-popup-fade-leave-active {
-webkit-animation: .3s account-popup-fade-out both ease-in;
animation: .3s account-popup-fade-out both ease-in
}
.role-selector-sea-dropdown-menu {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.role-selector-sea-dropdown-menu .dropdown-menu__input {
width: 100%;
height: 40px;
background: #fff;
border-radius: 4px;
border: 1px solid #e6e6e6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
@media (min-width: 1025px) {
.role-selector-sea-dropdown-menu .dropdown-menu__input {
height: 48px;
padding-left: 20px
}
}
.role-selector-sea-dropdown-menu .dropdown-menu__icon {
width: 12px;
height: 12px;
position: absolute;
top: 14px;
right: 10px
}
@media (min-width: 1025px) {
.role-selector-sea-dropdown-menu .dropdown-menu__icon {
top: 17px
}
}
.role-selector-sea-dropdown-menu .dropdown-menu__input {
position: relative;
padding-left: 15px;
font-size: 14px;
color: #333;
line-height: 14px
}
.role-selector-sea-dropdown-menu .dropdown-menu__input__placeholder {
color: #999
}
.role-selector-sea-dropdown-menu .dropdown-menu__list {
position: absolute;
width: 99%;
left: 0;
top: 100%;
max-height: 222px;
padding: 1px;
overflow: auto;
background: #fff;
-webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .08);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .08);
border-radius: 4px;
border: 1px solid #e6e6e6
}
@media (min-width: 1025px) {
.role-selector-sea-dropdown-menu .dropdown-menu__list {
max-height: 170px;
padding: 10px 0;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}
}
.role-selector-sea-dropdown-menu .dropdown-menu__list__item {
height: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 9px
}
@media (min-width: 1025px) {
.role-selector-sea-dropdown-menu .dropdown-menu__list__item {
height: 30px;
padding-left: 30px
}
}
.role-selector-sea-dropdown-menu .dropdown-menu__list__item.active {
background: #f5f5f5
}
.role-selector-sea-dropdown-menu .dropdown-menu__list__item.active .dropdown-menu__list__value {
color: #333
}
.role-selector-sea-dropdown-menu .dropdown-menu__list__value {
font-size: 14px;
color: #666;
line-height: 14px
}
.role-selector-sea-dropdown-menu .dropdown-enter-active, .role-selector-sea-dropdown-menu .dropdown-leave-active {
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.role-selector-sea-dropdown-menu .dropdown-enter, .role-selector-sea-dropdown-menu .dropdown-leave-to {
opacity: 0;
height: 0
}
.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__input {
height: 40px
}
.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__icon {
top: 14px
}
.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__list__item.selected, .theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__list__item:hover {
background-color: #f8f8f8
}
.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__list__item.selected .dropdown-menu__list__value {
color: #dcbc60
}
.theme-community .role-selector-sea-dropdown-menu .dropdown-menu__list__item.selected, .theme-community .role-selector-sea-dropdown-menu .dropdown-menu__list__item:hover {
background-color: #f5f5f5
}
.game-role-selector-sea-popup {
z-index: 9999
}
.game-role-selector-sea-popup .account-popup {
width: auto
}
.game-role-selector-sea-wrapper {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.game-role-selector-sea-wrapper .van-loading {
text-align: center
}
.game-role-selector-sea-wrapper.theme-community {
width: 315px;
font-family: Helvetica, sans-serif
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community {
width: auto
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__container {
background-color: #fff;
border-radius: 4px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__container {
width: 500px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header {
height: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
background-color: #4ea4dc;
cursor: default
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header {
height: 60px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__close-icon {
position: absolute;
width: 12px;
height: 12px;
top: 16px;
right: 20px;
cursor: pointer
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__close-icon {
width: 17px;
height: 17px;
top: 21.5px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__text {
font-size: 14px;
color: #fff;
line-height: 14px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__text {
font-size: 20px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content {
padding: 0 25px 25px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content {
padding: 0 60px 25px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__title {
padding-top: 20px;
font-size: 12px;
color: #666;
line-height: 12px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__title {
padding-top: 40px;
font-size: 14px;
line-height: 14px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__dropdown {
margin-top: 10px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__dropdown {
margin-top: 20px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current {
margin-bottom: 30px;
margin-top: 20px;
background: #f8f8f8;
border-radius: 4px;
color: #333;
font-family: PingFangSC-Regular, PingFang SC, serif;
font-size: 14px;
line-height: 14px;
font-weight: 400;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 12px 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current {
margin-top: 15px;
margin-bottom: 40px;
padding: 15px 20px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current__nickename {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current__nickename-level {
margin-left: 5px;
font-size: 10px;
padding: 2px 3px;
font-family: PingFang SC, sans-serif;
font-weight: 800;
color: #fff;
background: #57d9ad;
border-radius: 2px
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current__uid {
padding-top: 12px
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__loading {
margin-top: 36px;
margin-bottom: 46px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__loading {
margin-top: 34px;
margin-bottom: 59px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder {
margin-top: 45px;
margin-bottom: 55px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder {
margin-top: 42px;
margin-bottom: 67px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder-text {
text-align: center;
font-size: 12px;
color: #ccc;
line-height: 12px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder-text {
font-size: 14px;
line-height: 14px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button {
cursor: pointer;
height: 40px;
background: #4ea4dc;
border-radius: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button {
height: 48px;
margin-top: 40px
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button-text {
font-size: 20px;
font-weight: 400;
color: #fff;
line-height: 20px
}
}
.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button-text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC, sans-serif;
font-weight: 400;
color: #fff;
line-height: 14px
}
.game-role-selector-sea-wrapper.theme-genshin {
width: 297px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin {
width: auto
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__container {
background-color: #fff;
border-radius: 4px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__container {
width: 480px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header {
height: 48px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-bottom: 1px solid #ebebeb;
cursor: default
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header {
height: 50px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding-left: 30px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__close-icon {
position: absolute;
width: 10px;
height: 10px;
top: 10px;
right: 10px;
cursor: pointer
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__close-icon {
width: 14px;
height: 14px;
top: 18px;
right: 30px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__text {
font-size: 14px;
color: #333;
line-height: 14px;
font-weight: 700
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__text {
font-size: 16px;
line-height: 16px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content {
padding: 0 20px 20px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content {
padding: 0 30px;
height: 310px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__title {
padding-top: 17.5px;
font-size: 12px;
color: #333;
line-height: 12px;
font-weight: 400
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__title {
padding-top: 40px;
font-weight: 700;
font-size: 14px;
line-height: 14px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__dropdown {
margin-top: 10px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__dropdown {
margin-top: 9px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current {
margin-top: 13px;
background: #f8f8f8;
border-radius: 4px;
color: #333;
font-size: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 12px 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current {
margin-top: 15px;
padding: 15px 20px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current__nickename {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current__nickename-level {
margin-left: 5px;
font-size: 10px;
padding: 2px 3px;
font-family: PingFang SC, sans-serif;
font-weight: 800;
color: #fff;
background: #57d9ad;
border-radius: 2px
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current__uid {
padding-top: 10px
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__loading {
margin-top: 21px;
margin-bottom: 41px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__loading {
margin-top: 42px;
margin-bottom: 72px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder {
margin-top: 30px;
margin-bottom: 50px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder {
margin-top: 50px;
margin-bottom: 80px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder-text {
text-align: center;
font-size: 12px;
color: #ccc;
font-weight: 400;
line-height: 12px
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder-text {
font-size: 14px;
line-height: 14px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__button {
cursor: pointer;
height: 42px;
margin-top: 22px;
background: #2d2f33;
border-radius: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media (min-width: 1025px) {
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__button {
margin: 0 auto;
width: 98px;
height: 34px;
margin-top: 45px
}
}
.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__button-text {
font-size: 14px;
font-family: Microsoft YaHei, sans-serif;
font-weight: 400;
color: #f6ddb2;
line-height: 14px
}
.game-role-selector-sea__button.disabled {
background-color: #eff1f4 !important;
cursor: not-allowed !important
}
.game-role-selector-sea__button.disabled .game-role-selector-sea__button-text {
color: #c0c5c8
}
.game-role-selector-sea__limit-text {
margin-bottom: 4px;
font-size: 12px;
color: #ccc;
font-weight: 400;
line-height: 14px
}
.mhy-bridge-message-box-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-animation: messageBoxMaskIn 200ms ease;
animation: messageBoxMaskIn 200ms ease;
opacity: 1;
-webkit-transition: opacity 200ms ease;
-o-transition: opacity 200ms ease;
transition: opacity 200ms ease;
z-index: 999;
font-size: 3.73333vmin
}
.mhy-bridge-message-box-mask .mhy-bridge-message-box {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
width: 66.66667vmin;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 2.13333vmin;
background-color: #fff;
-webkit-animation: messageBoxScaleIn 200ms ease;
animation: messageBoxScaleIn 200ms ease
}
.mhy-bridge-message-box-mask .mhy-bridge-message-box header {
font-size: 4.26667vmin;
line-height: 12vmin;
border-bottom: 1px solid #f0f0f0
}
.mhy-bridge-message-box-mask .mhy-bridge-message-box .mhy-bridge-message-box-content {
padding: 4.26667vmin 8.53333vmin;
font-size: 3.73333vmin;
line-height: 1.5;
word-break: break-all
}
.mhy-bridge-message-box-mask .mhy-bridge-message-box footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-top: 1px solid #f0f0f0;
line-height: 12vmin;
color: #6cf;
font-size: 3.73333vmin
}
.mhy-bridge-message-box-mask .mhy-bridge-message-box footer .confirm-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border-right: 1px solid #f0f0f0;
cursor: pointer;
-webkit-highlight: none;
-webkit-tap-highlight-color: transparent
}
.mhy-bridge-message-box-mask .mhy-bridge-message-box footer .confirm-item:last-child {
border-right: 0
}
.mhy-bridge-message-box-mask.message-box-close {
opacity: 0
}
@-webkit-keyframes messageBoxScaleIn {
from {
-webkit-transform: translateY(-50%) scale(0.3);
transform: translateY(-50%) scale(0.3)
}
to {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1)
}
}
@keyframes messageBoxScaleIn {
from {
-webkit-transform: translateY(-50%) scale(0.3);
transform: translateY(-50%) scale(0.3)
}
to {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1)
}
}
@-webkit-keyframes messageBoxMaskIn {
from {
background-color: rgba(0, 0, 0, 0)
}
to {
background-color: rgba(0, 0, 0, 0.5)
}
}
@keyframes messageBoxMaskIn {
from {
background-color: rgba(0, 0, 0, 0)
}
to {
background-color: rgba(0, 0, 0, 0.5)
}
}
._bbs-repaint-hacker {
width: 0;
height: 0;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation-name: run;
animation-name: run;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
position: absolute
}
@-webkit-keyframes run {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
@keyframes run {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
.select-wrapper[data-v-0342da24] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1;
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666
}
.select[data-v-0342da24] {
border: 1px solid #ccc;
width: 26.66667vmin;
cursor: pointer;
border-radius: 4px;
padding: 1vmin 0.5vmin;
font-size: 3vmin;
position: relative
}
.select.selecting[data-v-0342da24]::after {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
top: 25%
}
.select.selecting .list[data-v-0342da24] {
max-height: 999px
}
.select[data-v-0342da24]::after {
content: "";
position: absolute;
right: 0.8em;
top: 50%;
margin-top: -0.2vmin;
border: 0.9vmin solid #ccc;
border-color: #ccc transparent transparent transparent;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out
}
.select .caption[data-v-0342da24] {
padding-right: 3vmin
}
.select .list[data-v-0342da24] {
overflow: hidden;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
width: 100%;
max-height: 0;
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
border-radius: 0 0 4px 4px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2)
}
.select .list .item[data-v-0342da24] {
padding: 1vmin
}
.select .list .item[data-v-0342da24]:hover {
background-color: #f2f2f2
}
.mhy-game-role-message-box-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-animation: gameRoleSelectorMessageBoxMaskIn 200ms ease;
animation: gameRoleSelectorMessageBoxMaskIn 200ms ease;
opacity: 1;
-webkit-transition: opacity 200ms ease;
-o-transition: opacity 200ms ease;
transition: opacity 200ms ease;
z-index: 999;
font-size: 3.73333vmin
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
width: 66.66667vmin;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 2.13333vmin;
background-color: #fff;
-webkit-animation: gameRoleSelectorMessageBoxScaleIn 200ms ease;
animation: gameRoleSelectorMessageBoxScaleIn 200ms ease
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box-overseas-header {
padding: 0 4.26667vmin;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box-overseas-selector {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box-overseas-selector .select-wrapper + .select-wrapper {
margin-left: 5px
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box header {
color: #333;
font-size: 4.26667vmin;
line-height: 12vmin;
border-bottom: 1px solid #f0f0f0
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box .mhy-game-role-message-box-content {
padding: 4.26667vmin 8.53333vmin;
font-size: 3.73333vmin;
line-height: 1.5;
word-break: break-all
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-top: 1px solid #f0f0f0;
line-height: 12vmin;
color: #6cf;
font-size: 3.73333vmin
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box footer .confirm-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border-right: 1px solid #f0f0f0;
cursor: pointer;
-webkit-highlight: none;
-webkit-tap-highlight-color: transparent
}
.mhy-game-role-message-box-mask .mhy-game-role-message-box footer .confirm-item:last-child {
border-right: 0
}
.mhy-game-role-message-box-mask.message-box-close {
opacity: 0
}
.mhy-game-role-selector-mask .mhy-game-role-message-box {
width: 90vmin;
max-height: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.mhy-game-role-selector-mask .mhy-game-role-message-box .mhy-game-role-message-box-content {
padding: 0 4.26667vmin;
overflow-x: hidden;
overflow-y: auto
}
.mhy-game-role-selector-mask .mhy-game-role-selector {
text-align: left
}
.mhy-game-role-selector-mask .mhy-game-role-selector .empty-text {
text-align: center;
padding: 2.66667vmin 0;
color: #a6a6a6
}
.mhy-game-role-selector-mask .mhy-game-role-selector .game-role-list {
font-size: 3.73333vmin;
margin-bottom: 8vmin
}
.mhy-game-role-selector-mask .mhy-game-role-selector .list-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 2.66667vmin 0;
border-bottom: 1px solid #f0f0f0
}
.mhy-game-role-selector-mask .mhy-game-role-selector .list-item .role-info {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.mhy-game-role-selector-mask .mhy-game-role-selector .list-item .role-uid {
color: #737373;
font-size: 3.2vmin
}
.mhy-game-role-selector-mask .mhy-game-role-selector .bind-other-btn-container {
text-align: center;
margin-bottom: 5.33333vmin
}
.mhy-game-role-selector-mask .mhy-game-role-selector .bind-other-btn-container .bind-other-btn {
display: inline-block;
width: 77.33333vmin;
line-height: 12vmin;
background-color: #6cf;
color: #fff;
border-radius: .8vmin;
cursor: pointer
}
.mhy-game-role-message-box-header {
position: relative
}
.mhy-game-role-message-box-header .mhy-game-role-message-box-header-close-icon {
position: absolute;
z-index: 20;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 5.33333vmin;
width: 3.73333vmin;
height: 3.73333vmin;
background-size: 100% 100%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAADaElEQVRIS8VWTWwMcRT/vZlWJaWRIOGGRB16QKI7u7O6H4huFwmibuqAM3rwebAOPg/KGQeclCDB2gp2d2qnM1MJDj20EtxIGgnSJmhnnkzt7JexO0r4H2fee7///733+71H+MeH/jEe/h+gktO2WaCjIL6beZhKJBIJ609en0gkhMj6WAJMmwTwiVDQf9OOV3hhNqcNM9A89VHA9XlNs7taWlq+TQd0aGhoxuinsWtg3p4HGQkH/cvKAVWjh9na5wAQ6Mm4yFvifv/n3wFNalpTo0m3GbymEIuE82HZt78MkJlJGdB7mLG3CEAvuJ46oj7fey+gacNYQBP8AOAVRTBcCAWk/UTEZYCOQTanH2TwqUK6GW+oDu1hv/9VNdCspi3lSfSBsDhvxwQ6HA5KZ0r9XLs0q+pdzHwJQP0PYx6trxc3BH2+QTfQnGG0TkyY9wGan/8/QUS7w7J0tdL+l7TIPB3oAFEvgFl5pzGRhM422ZcqDdKvGjGTrRuldnazRFYHHrhdrioPFVX1WSzeA9j15j9ngkYFMjeGZNn4VfprEv9Rv95cJ3IKXKwNgw//aAAq1prwZtKk2Lo2aaRarWsC2s6Koiy0xIZkafeVB/XezZ4A7eCapjV9reBX/pVPGkTe4vfIV8+AU4S26BYzry1rc6LH4wJv9SoQngDTaWMBzWA7pSvd60PP+RvFo9HaAlET0CY0TEoxeIlDaCYcmUon46QjEAR6DZFjtQSiKmAmZ7QCFYQWaE84IF2xAbMD+k62+GKpQADihkjQXSBcpc1JWVpVY8RCkdCMcQK2h1f7k6VpzT7V4gz0gtDoCAST1RmV5TKBKGirW00yucEdgHnZuTmBRomEjSG51ZXQijrosyzzPgjzHGkDxF2RYOu1mtKWyQ0cAOh0yax8K9ZRe5tUndD9ut5sTnIfgEVOrQE+FAkGzrqKd348nWNGYSYCeCmYdR2h0Kp31dTD+acozxZa4qStocsLKSScDwWk7p/GU0bVz4F5akjmT3qmiM1eCe042QLxxcQdANFCJKKeiCx1lzVNJqcNw1kxiHrHP37oisfjX728rNImmUw2NM6Ze5XzKwaAkUjlipFR9U4wHyUBd9N9qWN/Y4mKtseOs4VNIDoRkSW74//jmjid1E3Hp6a0TSdoNZ/vXJthLIBkNssAAAAASUVORK5CYII=")
}
.mhy-game-role-message-box-mask *, .mhy-game-role-selector-mask * {
margin: 0
}
.mhy-game-role-message-box-mask ul, .mhy-game-role-selector-mask ul {
list-style: none;
padding: 0
}
@-webkit-keyframes gameRoleSelectorMessageBoxScaleIn {
from {
-webkit-transform: translateY(-50%) scale(0.3);
transform: translateY(-50%) scale(0.3)
}
to {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1)
}
}
@keyframes gameRoleSelectorMessageBoxScaleIn {
from {
-webkit-transform: translateY(-50%) scale(0.3);
transform: translateY(-50%) scale(0.3)
}
to {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1)
}
}
@-webkit-keyframes gameRoleSelectorMessageBoxMaskIn {
from {
background-color: rgba(0, 0, 0, 0)
}
to {
background-color: rgba(0, 0, 0, 0.5)
}
}
@keyframes gameRoleSelectorMessageBoxMaskIn {
from {
background-color: rgba(0, 0, 0, 0)
}
to {
background-color: rgba(0, 0, 0, 0.5)
}
}
</style>
<style type="text/css">.mihoyo-share-tips-wrap {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%
}
.mihoyo-share-tips {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .65);
-webkit-animation: mihoyo-share-tips__mask-in 200ms ease;
animation: mihoyo-share-tips__mask-in 200ms ease
}
.mihoyo-share-tips img {
position: absolute;
right: 30px;
top: 0
}
@-webkit-keyframes mihoyo-share-tips__mask-in {
from {
background-color: rgba(0, 0, 0, 0)
}
to {
background-color: rgba(0, 0, 0, .65)
}
}
@keyframes mihoyo-share-tips__mask-in {
from {
background-color: rgba(0, 0, 0, 0)
}
to {
background-color: rgba(0, 0, 0, .65)
}
}
._2KIYvRS5 {
left: 0;
top: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
._2KIYvRS5 > * {
pointer-events: auto
}
._2vPZV2Zw > * {
pointer-events: none
}
._12W2W7w0 {
max-height: 100%;
width: 100%;
overflow-y: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
scrollbar-width: none;
overflow-style: none
}
._12W2W7w0 > * {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none
}
._12W2W7w0::-webkit-scrollbar {
display: none
}
._2vQSqpU9 {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}
._32Xo0xuQ {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.pJabgfwZ {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.pJabgfwZ ._12W2W7w0 {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
._1O4IHgc7 {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
._1O4IHgc7 ._12W2W7w0 {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}
@-webkit-keyframes _3Ujv2jSG {
0% {
-webkit-transform: translateY(-18%);
transform: translateY(-18%);
opacity: 0
}
50% {
-webkit-transform: translateY(10%);
transform: translateY(10%);
opacity: .9
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@keyframes _3Ujv2jSG {
0% {
-webkit-transform: translateY(-18%);
transform: translateY(-18%);
opacity: 0
}
50% {
-webkit-transform: translateY(10%);
transform: translateY(10%);
opacity: .9
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
._3TX-HDp7 {
background-color: rgba(0, 0, 0, 0) !important
}
._2cyKhZmc {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1A68rrWj {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
.nZo7-Sq1 {
background-color: rgba(0, 0, 0, 0) !important
}
._3TX-HDp7 > * {
opacity: 0
}
._2cyKhZmc > * {
-webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3CP9Dpl8 > * {
opacity: 1
}
._2AEWSt0y > * {
opacity: 1
}
._1A68rrWj > * {
-webkit-transition: opacity ease-out;
-o-transition: opacity ease-out;
transition: opacity ease-out
}
.nZo7-Sq1 > * {
opacity: 0
}
.bkUp6T8X {
background-color: rgba(0, 0, 0, 0) !important
}
.AGHfB3I2 {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2isBKp-q {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._1fSD77hd {
background-color: rgba(0, 0, 0, 0) !important
}
.bkUp6T8X > * {
-webkit-transform: scale(0.86);
-ms-transform: scale(0.86);
transform: scale(0.86);
opacity: 0
}
.AGHfB3I2 > * {
-webkit-transition: opacity ease-in-out, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-in-out, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-in-out;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-in-out;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-in-out, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3_NZZtFO > * {
opacity: 1
}
.dKtipJIU > * {
opacity: 1
}
._2isBKp-q > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._1fSD77hd > * {
opacity: 0;
-webkit-transform: scale(0.86);
-ms-transform: scale(0.86);
transform: scale(0.86)
}
._2CUkrRuO {
background-color: rgba(0, 0, 0, 0) !important
}
.M1P6kXGN {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1JeI9vdT {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._1xL8LI0t {
background-color: rgba(0, 0, 0, 0) !important
}
._2CUkrRuO > * {
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
opacity: 0
}
.M1P6kXGN > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.HyBR0alk > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._2c8ThAK- > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._1JeI9vdT > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._1xL8LI0t > * {
opacity: 0;
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%)
}
.Dxhx2cxs {
background-color: rgba(0, 0, 0, 0) !important
}
._2TQCQv26 {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._6iOMTIan {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._1uiA6TKS {
background-color: rgba(0, 0, 0, 0) !important
}
.Dxhx2cxs > * {
-webkit-transform: translateY(-10%);
-ms-transform: translateY(-10%);
transform: translateY(-10%);
opacity: 0
}
._2TQCQv26 > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.iCYb3lD8 > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.ifhXDt1p > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._6iOMTIan > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._1uiA6TKS > * {
opacity: 0;
-webkit-transform: translateY(-10%);
-ms-transform: translateY(-10%);
transform: translateY(-10%)
}
.PL0R_5XI {
background-color: rgba(0, 0, 0, 0) !important
}
._1QQijFXi {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3dbB7hvv {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._2NWaef_W {
background-color: rgba(0, 0, 0, 0) !important
}
._1QQijFXi > * {
-webkit-animation: _3Ujv2jSG ease-out;
animation: _3Ujv2jSG ease-out
}
._3dbB7hvv > * {
animation: _3Ujv2jSG forwards ease-in reverse
}
.Y4iFvcV0 {
background-color: rgba(0, 0, 0, 0) !important
}
._3nx_7x0S {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2l9q-k5P {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
.KkLDjA58 {
background-color: rgba(0, 0, 0, 0) !important
}
.Y4iFvcV0 > * {
opacity: 0
}
._3nx_7x0S > * {
-webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.JSLHgxT- > * {
opacity: 1
}
._3KMuubQd > * {
opacity: 1
}
._2l9q-k5P > * {
-webkit-transition: opacity ease-out;
-o-transition: opacity ease-out;
transition: opacity ease-out
}
.KkLDjA58 > * {
opacity: 0
}
.sJsCWwFo {
background-color: rgba(0, 0, 0, 0) !important
}
._3l5MB5sm {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2aDWiv_P {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._3n1h5NML {
background-color: rgba(0, 0, 0, 0) !important
}
.sJsCWwFo > * {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0
}
._3l5MB5sm > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.d6jTanpB > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._2p0Gseqe > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._2aDWiv_P > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._3n1h5NML > * {
opacity: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%)
}
._152UybV7 {
background-color: rgba(0, 0, 0, 0) !important
}
._1CSJaLDb {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3wKbI3u3 {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._14kjKgUl {
background-color: rgba(0, 0, 0, 0) !important
}
._152UybV7 > * {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 1
}
._1CSJaLDb > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2an2PQMK > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._1HySnhFn > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._3wKbI3u3 > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._14kjKgUl > * {
opacity: 1;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%)
}
.VIrzXydn {
background-color: rgba(0, 0, 0, 0) !important
}
._2bV8RcAe {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2q_WzVji {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._1yCmQMVh {
background-color: rgba(0, 0, 0, 0) !important
}
.VIrzXydn > * {
opacity: 0
}
._2bV8RcAe > * {
-webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1w58mQ9I > * {
opacity: 1
}
._3hpSpPzL > * {
opacity: 1
}
._2q_WzVji > * {
-webkit-transition: opacity ease-out;
-o-transition: opacity ease-out;
transition: opacity ease-out
}
._1yCmQMVh > * {
opacity: 0
}
._1CLD5HuO {
background-color: rgba(0, 0, 0, 0) !important
}
._3rICtAIT {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2nbH8gGo {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._1QSPDVh7 {
background-color: rgba(0, 0, 0, 0) !important
}
._1CLD5HuO > * {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0
}
._3rICtAIT > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3xn2BNJC > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._1b5iXVME > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._2nbH8gGo > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._1QSPDVh7 > * {
opacity: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
._1xl-2KLC {
background-color: rgba(0, 0, 0, 0) !important
}
.IYcpxwky {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2jnhcLgW {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._2eZqx5lZ {
background-color: rgba(0, 0, 0, 0) !important
}
._1xl-2KLC > * {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 1
}
.IYcpxwky > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1Y5jJteu > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.s7BH0agY > * {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
._2jnhcLgW > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._2eZqx5lZ > * {
opacity: 1;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
._3hVfF11B {
background-color: rgba(0, 0, 0, 0) !important
}
._2R--l3rW {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2v3h5U5p {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._2X0SUn4v {
background-color: rgba(0, 0, 0, 0) !important
}
._3hVfF11B > * {
opacity: 0
}
._2R--l3rW > * {
-webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.onsiGYzJ > * {
opacity: 1
}
._1n_IOVlj > * {
opacity: 1
}
._2v3h5U5p > * {
-webkit-transition: opacity ease-out;
-o-transition: opacity ease-out;
transition: opacity ease-out
}
._2X0SUn4v > * {
opacity: 0
}
._2ln7YL2j {
background-color: rgba(0, 0, 0, 0) !important
}
._1WVIrisZ {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3Ghucdjx {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._3Y2rSjEP {
background-color: rgba(0, 0, 0, 0) !important
}
._2ln7YL2j > * {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0
}
._1WVIrisZ > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._3OyzH4Mk > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._17qyn3pS > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._3Ghucdjx > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._3Y2rSjEP > * {
opacity: 0;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%)
}
._1OWCUMoG {
background-color: rgba(0, 0, 0, 0) !important
}
._2cPktcge {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1fJ6J0BT {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._2GxjddZK {
background-color: rgba(0, 0, 0, 0) !important
}
._1OWCUMoG > * {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1
}
._2cPktcge > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1UIBxtXz > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
.l6Pbgi8Z > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._1fJ6J0BT > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._2GxjddZK > * {
opacity: 1;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%)
}
._3UQZ3VL5 {
background-color: rgba(0, 0, 0, 0) !important
}
._2UgeajeX {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._36iDwjlp {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
.gkEFarQt {
background-color: rgba(0, 0, 0, 0) !important
}
._3UQZ3VL5 > * {
opacity: 0
}
._2UgeajeX > * {
-webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2jBdSpNS > * {
opacity: 1
}
._1z3mhJoE > * {
opacity: 1
}
._36iDwjlp > * {
-webkit-transition: opacity ease-out;
-o-transition: opacity ease-out;
transition: opacity ease-out
}
.gkEFarQt > * {
opacity: 0
}
._123ft6_s {
background-color: rgba(0, 0, 0, 0) !important
}
._3CcacPTl {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._2Y2ytZRI {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
.K9imFAYv {
background-color: rgba(0, 0, 0, 0) !important
}
._123ft6_s > * {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 0
}
._3CcacPTl > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.mjR2t3JC > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._1ByjBZdj > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._2Y2ytZRI > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
.K9imFAYv > * {
opacity: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%)
}
._2Ra8uBlT {
background-color: rgba(0, 0, 0, 0) !important
}
._1EMt6DRh {
-webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
._1Cpn1nNC {
-webkit-transition: background-color ease-out;
-o-transition: background-color ease-out;
transition: background-color ease-out
}
._32nl5FGJ {
background-color: rgba(0, 0, 0, 0) !important
}
._2Ra8uBlT > * {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 1
}
._1EMt6DRh > * {
-webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
-o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}
.A_Xs8XZT > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._3vKdDxPm > * {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
._1Cpn1nNC > * {
-webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
transition: opacity ease-in-out, -webkit-transform ease-in-out;
-o-transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out;
transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}
._32nl5FGJ > * {
opacity: 1;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%)
}
:root {
--gt-light-text-white: #FFF;
--gt-light-text-primary: rgba(255, 255, 255, 0.90);
--gt-light-text-secondary: rgba(255, 255, 255, 0.65);
--gt-light-text-tertiary: rgba(255, 255, 255, 0.45);
--gt-light-text-quaternary: rgba(255, 255, 255, 0.35);
--gt-dark-text-black: #000;
--gt-dark-text-primary: rgba(0, 0, 0, 0.90);
--gt-dark-text-secondary: rgba(0, 0, 0, 0.65);
--gt-dark-text-tertiary: rgba(0, 0, 0, 0.45);
--gt-dark-text-quaternary: rgba(0, 0, 0, 0.25);
--gt-general-function-background: rgba(0, 0, 0, 0.65);
--gt-general-function-toast: rgba(0, 0, 0, 0.75);
--general-game-element-physics: #FFDE00;
--general-game-element-fire: #FB5421;
--general-game-element-electric: #2CACF1;
--general-game-element-ice: #98EFF0;
--general-game-element-ether: #FF4483;
--general-game-rank-golden-1: #FFB500;
--general-game-rank-purple-1: #E900FF;
--general-game-rank-blue-1: #00A9FF;
--general-game-rank-green-1: #7DA89B;
--general-game-rank-golden-2: linear-gradient(180deg, #FD9300 0%, #F25300 100%);
--general-game-rank-purple-2: linear-gradient(180deg, #D73CEB 0%, #8A1FE3 100%);
--general-game-rank-blue-2: linear-gradient(180deg, #5EC1F6 0%, #527BF4 100%);
--general-function-yellow: #FFDE00;
--general-function-yellow-2: linear-gradient(180deg, #F2C81C 0%, #F17A07 100%);
--general-function-orange: #F1AD3D;
--general-function-green: #91BC00;
--general-function-confirm: #5CC83D;
--general-function-warn: #E63223;
--general-function-blue: #57BFF7;
--general-function-metal: linear-gradient(90deg, #ABABAB -0.42%, #808080 99.58%);
--general-grey-white-1: rgba(255, 255, 255, 1);
--general-grey-white-2: rgba(255, 255, 255, 0.48);
--general-grey-white-3: rgba(255, 255, 255, 0.32);
--general-grey-white-4: rgba(255, 255, 255, 0.16);
--general-grey-white-5: rgba(255, 255, 255, 0.12);
--general-grey-white-6: rgba(255, 255, 255, 0.08);
--general-grey-white-7: rgba(255, 255, 255, 0.04);
--general-grey-black-1: rgba(0, 0, 0, 1);
--general-grey-black-2: rgba(0, 0, 0, 0.48);
--general-grey-black-3: rgba(0, 0, 0, 0.32);
--general-grey-black-4: rgba(0, 0, 0, 0.16);
--general-grey-black-5: rgba(0, 0, 0, 0.12);
--general-grey-black-6: rgba(0, 0, 0, 0.08);
--general-grey-black-7: rgba(0, 0, 0, 0.07);
--light-grey-white-1: #fff;
--light-grey-white-2: #D9DBDD;
--light-grey-white-3: #7D7F80;
--light-grey-white-4: #474748;
--light-grey-white-5: #212322;
--light-brand-yellow-1: #FFEF82;
--light-brand-yellow-2: #FFE84D;
--light-brand-yellow-3: #FFDE00;
--light-brand-yellow-4: #FFC805;
--light-brand-yellow-5: #F0AC45;
--light-brand-green-1: #C9D86C;
--light-brand-green-2: #AFCC3D;
--light-brand-green-3: #91BC00;
--light-brand-green-4: #7FAA06;
--light-brand-green-5: #73A111;
--dark-grey-black-1: #000000;
--dark-grey-black-2: #0A0A0A;
--dark-grey-black-3: #161817;
--dark-grey-black-4: #1D1F1E;
--dark-grey-black-5: #2A2C2B;
--dark-grey-black-6: #333534;
--dark-grey-black-7: #494949;
--light-text-white-1: #FFF;
--light-text-white-2: rgba(255, 255, 255, 0.90);
--light-text-white-3: rgba(255, 255, 255, 0.65);
--light-text-white-4: rgba(255, 255, 255, 0.45);
--light-text-white-5: rgba(255, 255, 255, 0.35);
--dark-text-black-1: #000;
--dark-text-black-2: rgba(0, 0, 0, 0.90);
--dark-text-black-3: rgba(0, 0, 0, 0.65);
--dark-text-black-4: rgba(0, 0, 0, 0.45);
--dark-text-black-5: rgba(0, 0, 0, 0.25);
}
.me-share {
position: relative;
}
.me-share__btn {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.me-share__icon {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.me-share__icon--hover {
opacity: 0;
}
.me-share__icon--hover:hover {
opacity: 1;
}
.me-share-popover {
font-size: 100px;
}
.me-share-popover * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.me-share-popover__arrow {
position: absolute;
top: calc(100% + 0.1em);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-width: 0 0.1em 0.2em;
border-style: solid;
}
.me-share-popover__arrow--after {
position: absolute;
top: 2px;
left: -0.1em;
width: 0;
height: 0;
border-width: 0 0.1em 0.2em;
border-style: solid;
}
.me-share-popover__content {
position: absolute;
padding: 0.14em 0.2em;
border-radius: 0.1em;
max-width: 6.5em;
}
.me-share-popover__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0.05em;
}
.me-share-popover__desc {
font-size: 0.2em;
line-height: 1.2em;
margin-top: 0.3em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.me-share-popover__item {
width: 0.53em;
height: 0.53em;
margin-right: 0.25em;
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
}
.me-share-popover__item:last-of-type {
margin-right: 0;
}
.me-share-popover__icon {
width: 100%;
height: 100%;
display: block;
}
.me-share-popover--posleft .me-share-popover__arrow {
top: 50%;
left: auto;
right: calc(100% + 0.1em);
-webkit-transform: translateY(-50%) rotate(90deg);
-ms-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
.me-share-popover--posleft .me-share-popover__content {
padding: 0.2em 0.07em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: -1.05em;
}
.me-share-popover--posleft .me-share-popover__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.me-share-popover--posleft .me-share-popover__item {
margin-right: 0;
margin-bottom: 0.25em;
}
.me-share-popover--posleft .me-share-popover__item:last-of-type {
margin-bottom: 0;
}
.me-share-popover--posright .me-share-popover__arrow {
top: 50%;
left: calc(100% + 0.1em);
-webkit-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}
.me-share-popover--posright .me-share-popover__content {
padding: 0.2em 0.07em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: -1.05em;
}
.me-share-popover--posright .me-share-popover__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.me-share-popover--posright .me-share-popover__item {
margin-right: 0;
margin-bottom: 0.25em;
}
.me-share-popover--posright .me-share-popover__item:last-of-type {
margin-bottom: 0;
}
.me-share-popover--postop .me-share-popover__arrow {
top: auto;
bottom: calc(100% + 0.1em);
-webkit-transform: translateX(-50%) rotate(180deg);
-ms-transform: translateX(-50%) rotate(180deg);
transform: translateX(-50%) rotate(180deg);
}
.me-share-popover--postop .me-share-popover__content {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: calc(100% + 0.3em);
}
.me-share-popover--postop.me-share-popover--arrowleft .me-share-popover__content {
left: -0.25em;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.me-share-popover--postop.me-share-popover--arrowright .me-share-popover__content {
left: auto;
right: -0.25em;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.me-share-popover--posbottom .me-share-popover__arrow {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.me-share-popover--posbottom .me-share-popover__content {
top: calc(100% + 0.3em);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.me-share-popover--posbottom.me-share-popover--arrowleft .me-share-popover__content {
left: -0.26em;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.me-share-popover--posbottom.me-share-popover--arrowright .me-share-popover__content {
left: auto;
right: -0.26em;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.me-share-popover--mobile {
font-size: 50px;
}
Reference in New Issue View Git Blame Copy Permalink