html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
article,
aside,
details,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
/* List */
ul {
list-style: none;
}
/* Form */
button,
input,
select,
textarea {
margin: 0;
}
/* Box sizing */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Media */
embed,
iframe,
object,
video {
height: auto;
max-width: 100%;
}
audio {
max-width: 100%;
}
/* Iframe */
iframe {
border: 0;
}
/* Table */
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
text-align: left;
}
html::-webkit-scrollbar {
width: 5px;
height: 10px;
}
html::-webkit-scrollbar-track {
background: rgba(191, 191, 191, 0.5);
border-radius: 2px;
}
html::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover {
background: transparent;
}
svg path {
fill: rgba(255, 255, 255, 0.5);
}
html *::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
html *::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
html *::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
html *::-webkit-scrollbar-thumb:hover {
background: #bfbfbf;
}
html *::-webkit-scrollbar-corner {
background: transparent;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input:focus,
textarea:focus,
button:focus {
outline: none;
}
html,
body {
font-family: "Microsoft Yahei", "微软雅黑";
}
.ant-tabs._login-tabs .ant-tabs-nav::before {
border-bottom: 0 !important;
}
.ant-tabs._login-tabs .ant-tabs-ink-bar {
height: 4px !important;
border-radius: 2px !important;
background: #ff5d01 !important;
}
.ant-tabs._login-tabs .ant-tabs-tab {
padding: 0 0 9px !important;
font-size: 16px !important;
color: rgba(241, 241, 241, 0.75) !important;
}
.ant-tabs._login-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
color: #ff5d01 !important;
}
.ant-tabs._login-tabs .ant-tabs-tab-btn {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.ant-tabs._login-tabs .ant-tabs-tab-btn .ant-tabs-tab-icon {
margin-inline-start: 5px;
margin-inline-end: 0;
display: flex;
justify-content: center;
align-items: center;
}
.ant-tabs._login-tabs .ant-tabs-tab-btn .ant-tabs-tab-icon > span {
padding: 0 2px;
border-radius: 7px;
color: rgba(241, 241, 241, 0.5);
font-size: 9px;
background: rgba(241, 241, 241, 0.25);
}
.ant-tabs._login-tabs .ant-tabs-tab-btn:focus:not(:focus-visible) {
color: #ff5d01 !important;
}
.ant-tabs._mine-tabs .ant-tabs-nav::before {
border-color: rgba(241, 241, 241, 0.1) !important;
}
.ant-tabs._mine-tabs .ant-tabs-tab-btn {
display: flex;
justify-content: flex-start;
align-items: center;
}
.ant-tabs._mine-tabs .ant-tabs-tab-btn .ant-tabs-tab-icon {
display: flex;
margin-inline-end: 5px;
}
.ant-tabs._mine-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
color: #ff5d01 !important;
}
.ant-tabs._mine-tabs .ant-tabs-tab-active .ant-tabs-tab-icon svg path {
color: #ff5d01 !important;
fill: #ff5d01 !important;
}
.ant-tabs._mine-tabs .ant-tabs-ink-bar {
background: #ff5d01 !important;
}
.ant-tabs._mine-tabs .ant-tabs-tab {
color: rgba(241, 241, 241, 0.75) !important;
}
.ant-steps-item-title {
color: #FFFFFF !important;
}
.ant-steps-item-title::after {
background: rgba(241, 241, 241, 0.25) !important;
}
.ant-steps-item-icon {
color: #fff !important;
background: rgba(241, 241, 241, 0.5) !important;
}
.ant-steps-icon {
color: #fff !important;
}
.ant-steps-item-active .ant-steps-item-icon {
border-color: #ff5d01 !important;
background-color: #ff5d01 !important;
}
.ant-steps-item-finish .ant-steps-item-icon {
border-color: #ff5d01 !important;
background-color: transparent !important;
}
.ant-steps-item-finish .ant-steps-icon {
color: #ff5d01 !important;
}
.ant-message {
top: 30% !important;
transform: translate(-50%, -50%) !important;
}
.ant-message-info .anticon {
display: none;
}
.ant-message-notice-content {
color: #FFFFFF !important;
padding: 8px 20px !important;
border: 1px solid rgba(241, 241, 241, 0.25);
background-color: rgba(0, 0, 0, 0.9) !important;
}
.ant-modal-mask {
background-color: rgba(255, 255, 255, 0.35) !important;
}
.ant-modal-header {
text-align: center;
margin-top: -10px;
color: rgba(241, 241, 241, 0.75) !important;
margin-bottom: 20px !important;
background-color: transparent !important;
}
.ant-modal-title {
color: #fff !important;
}
.ant-modal .ant-modal-content {
background-color: #212426 !important;
padding: 20px;
}
.ant-modal-footer {
display: flex;
justify-content: center;
align-items: center;
}
.ant-rate-star-full svg path {
fill: #F4A522;
}
.ant-rate-star-half .ant-rate-star-first svg path {
fill: #F4A522;
}
.ant-radio-wrapper {
color: #F1F1F1 !important;
margin-right: 39px;
}
.ant-radio-wrapper:hover .ant-radio-inner {
border-color: transparent !important;
}
.ant-radio-checked .ant-radio-inner {
border-color: #ff5d01 !important;
background-color: #ff5d01 !important;
}
.ant-upload {
cursor: pointer;
}
.ant-upload-select {
background: rgba(241, 241, 241, 0.05) !important;
border-color: rgba(241, 241, 241, 0.15) !important;
}
.ant-upload button {
cursor: pointer;
font-size: 14px;
color: rgba(241, 241, 241, 0.75);
}
.ant-upload button svg {
font-size: 24px;
}
.ant-select-selector {
background: rgba(241, 241, 241, 0.1) !important;
border-color: rgba(241, 241, 241, 0.1) !important;
box-shadow: none !important;
}
.ant-select-selection-item {
color: #f1f1f1 !important;
}
.ant-select-arrow {
margin-top: -4px !important;
font-size: 16px !important;
}
.ant-select-dropdown {
background-color: rgba(0, 0, 0, 0.95);
}
.ant-select-item {
color: #f1f1f1 !important;
}
.ant-select-item:hover {
color: #ff9e67;
}
.ant-select-item-option-selected {
color: #ff5d01 !important;
background-color: transparent !important;
}
.ant-picker-outlined {
border-color: rgba(241, 241, 241, 0.1) !important;
background-color: rgba(241, 241, 241, 0.1) !important;
color: #f1f1f1 !important;
}
.ant-picker-input > input {
color: #f1f1f1 !important;
}
.ant-picker-input > input::placeholder {
color: #f1f1f1 !important;
}
.ant-picker-outlined:focus-within {
border-color: rgba(241, 241, 241, 0.1) !important;
background-color: rgba(241, 241, 241, 0.1) !important;
box-shadow: none !important;
}
.ant-picker-panel-container {
background-color: rgba(0, 0, 0, 0.95) !important;
}
.ant-picker-dropdown .ant-picker-header {
color: rgba(241, 241, 241, 0.88) !important;
}
.ant-picker-dropdown .ant-picker-header button {
color: rgba(241, 241, 241, 0.88) !important;
}
.ant-picker-dropdown .ant-picker-content th {
text-align: center;
color: rgba(241, 241, 241, 0.88) !important;
}
.ant-picker-dropdown .ant-picker-cell {
text-align: center;
color: rgba(241, 241, 241, 0.25) !important;
}
.ant-picker-dropdown .ant-picker-cell-in-view {
color: rgba(241, 241, 241, 0.88) !important;
}
.ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner::before {
border-color: #ff5d01 !important;
}
.ant-picker-dropdown .ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
background-color: #ff5d01 !important;
}
.ant-picker-cell-inner {
text-align: center !important;
}
@keyframes loaderAnimation {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.zv-main-header {
position: fixed;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 64px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 9;
}
.zv-main-header-drag {
position: fixed;
left: 0;
top: 0;
right: 0;
height: 64px;
-webkit-app-region: drag;
}
.zv-main-header-left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-main-header-left .header-logo {
width: 140px;
height: 64px;
display: flex;
justify-content: center;
z-index: 99;
align-items: center;
-webkit-app-region: no-drag;
}
.zv-main-header-left .header-logo.macos {
padding-top: 25px;
}
.zv-main-header-left .header-logo img {
width: 150px;
height: 25px;
object-fit: contain;
margin-right: 2px;
}
.zv-main-header-left .header-search {
display: block;
margin-inline-start: 40px;
-webkit-app-region: no-drag;
}
.zv-main-header-left .header-search .zv-popover-content {
padding-top: 8px;
}
.zv-main-header-right {
margin-inline-end: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.zv-main-header-right.windows {
margin-inline-end: 15px;
}
.zv-main-header-right .windows-action-item {
cursor: pointer;
display: flex;
z-index: 9;
margin: 0 3px;
padding: 7px;
border-radius: 3px;
-webkit-app-region: no-drag;
}
.zv-main-header-right .windows-action-item.minimize {
margin-left: 20px;
padding: 4px;
}
.zv-main-header-right .windows-action-item.minimize:hover {
background-color: #888888;
}
.zv-main-header-right .windows-action-item.close:hover {
background-color: #ff2727;
}
.zv-main-header-right .windows-action-item.close svg {
width: 18px;
height: 18px;
}
.zv-main-header-right > section {
display: flex;
cursor: pointer;
margin: 0 7px;
-webkit-app-region: no-drag;
}
.zv-main-header-reload {
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
.zv-main-header-download {
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
.zv-main-search-history {
border-bottom: 1px solid rgba(241, 241, 241, 0.15);
margin: 20px 20px 10px;
padding-bottom: 15px;
}
.zv-main-search-history-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-main-search-history-nav > h3 {
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
}
.zv-main-search-history-nav > svg {
cursor: pointer;
}
.zv-main-search-history > ul {
list-style: none;
margin-top: 18px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.zv-main-search-history > ul > li {
max-width: 139px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
font-size: 14px;
display: inline-block;
color: rgba(241, 241, 241, 0.5);
padding: 5px 10px;
border-radius: 15px;
background: rgba(241, 241, 241, 0.15);
cursor: pointer;
}
.zv-main-search-history > ul > li:hover {
background: rgba(241, 241, 241, 0.3);
}
.zv-main-search .zv-rank-hot {
padding: 10px 20px;
}
.zv-main-search-result {
padding: 10px;
}
.zv-main-search-result > li {
padding: 10px;
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
cursor: pointer;
}
.zv-main-search-result > li:hover {
border-radius: 8px;
background: rgba(241, 241, 241, 0.15);
}
.zv-main-asider {
position: fixed;
left: 0;
top: 74px;
bottom: 0;
width: 140px;
height: calc(100% - 64px);
z-index: 9;
}
.zv-main-asider .aside-menu {
height: calc(100vh - 90px);
overflow-y: scroll;
}
.zv-main-asider .aside-menu::-webkit-scrollbar {
width: 0;
}
.zv-main-asider .aside-menu::-webkit-scrollbar-track {
background: rgba(191, 191, 191, 0.5);
border-radius: 2px;
}
.zv-main-asider .aside-menu::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
.zv-main-asider .aside-menu::-webkit-scrollbar-thumb:hover {
background: transparent;
}
.aside-menu-box > section {
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
padding: 8px 20px;
margin-bottom: 8px;
}
.aside-menu-box > section > span {
display: block;
width: 100%;
cursor: pointer;
}
.aside-menu-box > section._active {
color: #ff5d01;
}
.zv-main-content {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
}
.zv-main-content-through {
top: 0;
left: 0;
}
.zv-main-content-navbar {
display: flex;
}
.zv-main-content-navbar > nav {
display: inline;
margin: 10px 0 0 40px;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.zv-main-content-navbar > nav > span {
margin-left: 3px;
font-size: 14px;
}
.zv-main-content-scroll ._scroll-box {
position: relative;
overflow-y: scroll;
width: 100%;
height: 100%;
}
.zv-main-content-scroll ._scroll-box ._scroll-inner {
position: absolute;
left: 0;
top: 0;
right: 0;
}
.zv-main-content-with-asider {
left: 140px;
}
.zv-main-content-with-header {
top: 64px;
}
.app-layout {
position: relative;
width: 100vw;
height: 100vh;
color: rgba(241, 241, 241, 0.75);
background-color: #212426;
overflow: hidden;
user-select: none;
}
.zv-offline {
position: absolute;
left: 50%;
top: 50%;
font-size: 39px;
transform: translate(-50%, -50%);
}
.zv-avatar.avatar-header {
display: inline-block;
}
.zv-avatar-box {
display: flex;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #eee;
justify-content: center;
align-items: center;
font-size: 14px;
overflow: hidden;
}
.zv-avatar-box ._avatar-image {
width: 100%;
height: 100%;
text-align: center;
}
.zv-avatar-box ._avatar-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zv-avatar-box ._avatar-image > span {
line-height: 32px;
color: rgba(180, 180, 180, 0.8);
}
.zv-avatar ._avatar .zv-popover-arrow::before {
background: #35383A;
}
.zv-avatar-modal-header {
position: relative;
width: 100%;
text-align: center;
height: 56px;
font-size: 16px;
color: #F1F1F1;
padding: 16px 20px;
}
.zv-avatar-modal-header .zv-avatar-modal-closed {
cursor: pointer;
display: flex;
position: absolute;
top: 18px;
right: 20px;
}
.zv-avatar-modal-header .zv-avatar-modal-closed > svg {
font-size: 20px;
}
.zv-avatar-modal-content {
padding: 20px 30px 40px;
display: flex;
justify-content: center;
align-items: center;
}
.zv-avatar-modal-content-left {
width: 212px;
height: 212px;
}
.zv-avatar-modal-content-left > img {
width: 100%;
height: 100%;
}
.zv-avatar-modal-content-divier {
width: 1px;
height: 212px;
background: rgba(241, 241, 241, 0.1);
margin: 0 40px;
}
.zv-avatar-modal-content-right {
width: 100px;
display: flex;
gap: 10px;
justify-content: flex-start;
flex-wrap: wrap;
}
.zv-avatar-modal-content-right-item > img {
padding: 1px;
background-color: #fff;
width: 40px;
height: 40px;
cursor: pointer;
object-fit: contain;
}
.zv-avatar-modal-footer {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.zv-user-un-login {
text-align: center;
color: #fff;
}
.zv-user-un-login > h3 {
color: #F1F1F1;
font-size: 16px;
line-height: 22px;
}
.zv-user-un-login > ul {
margin-bottom: 20px;
}
.zv-user-un-login > ul > li {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.zv-user-un-login > ul > li > span {
margin-left: 12px;
}
.zv-user-un-login > ul > li svg {
font-size: 24px;
}
.zv-user-un-login > ul > li svg path {
fill: #ff5d01;
}
.zv-user-logged ._logged-info {
width: 100%;
padding: 20px;
height: auto;
color: rgba(241, 241, 241, 0.5);
background: #35383A;
text-align: center;
}
.zv-user-logged ._logged-info ._logged-name > * {
justify-content: center;
}
.zv-user-logged ._logged-info ._logged-normal > p {
margin-top: 20px;
font-size: 14px;
color: rgba(241, 241, 241, 0.5);
}
.zv-user-logged ._logged-info ._logged-normal > button {
margin-top: 20px;
border-radius: 20px;
}
.zv-user-logged ._logged-menu {
width: 100%;
height: auto;
background-color: #212426;
}
.zv-user-logged ._logged-menu > li {
display: flex;
cursor: pointer;
margin: 0 20px;
padding: 15px 0;
color: #FFFFFF;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-user-logged ._logged-menu > li > span {
margin-left: 12px;
}
.zv-user-logged ._logged-menu > li._logged-logout {
text-align: center;
color: rgba(255, 255, 255, 0.5);
border-bottom: 0;
}
.zv-user-logged ._logged-menu > li._logged-logout > span {
margin: 0 auto;
}
.zv-user-logged ._logged-vip {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.zv-user-logged ._logged-vip-list {
width: 200px;
}
.zv-user-logged ._logged-vip-button span {
font-size: 14px;
color: #F4D398;
border-radius: 12px;
padding: 3px 8px;
cursor: pointer;
border: 1px solid #F4D398;
}
.zv-btn {
position: relative;
line-height: 1.57;
display: inline-block;
text-align: center;
font-weight: 400;
border: 1px solid transparent;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
user-select: none;
touch-action: manipulation;
padding: 5px 15px;
cursor: pointer;
font-size: 14px;
border-radius: 2px;
}
.zv-btn-default {
color: rgba(241, 241, 241, 0.75);
background: rgba(241, 241, 241, 0.25);
border-color: rgba(241, 241, 241, 0.25);
}
.zv-btn-default:hover {
color: #ff5d01;
border-color: #ff5d01;
background-color: transparent;
}
.zv-btn-primary {
color: #ffffff;
border-color: #ff5d01;
background: #ff5d01;
}
.zv-btn-primary:hover {
color: #ffffff;
border-color: #ff8e4e;
background-color: #ff8e4e;
}
.zv-btn-primary:hover > svg path {
fill: #ffffff;
}
.zv-btn-text {
color: #4d5259;
border-color: transparent;
background: 0 0;
}
.zv-btn-text:hover {
color: #ff5d01;
border-color: #ff5d01;
background-color: transparent;
}
.zv-btn-vip {
color: "#512C19";
border-color: transparent;
background: linear-gradient(153deg, #FBE5BD 0%, #F4D398 100%);
box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.06), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
display: flex;
justify-content: center;
align-items: center;
}
.zv-btn-with-icon {
display: flex;
justify-content: center;
align-items: center;
}
.zv-btn-with-icon > span {
margin-left: 5px;
display: inline-block;
line-height: 1.5;
}
.zv-btn-with-icon > svg {
font-size: 20px;
}
.zv-btn-long {
width: 100%;
}
.zv-btn-disabled {
cursor: not-allowed;
color: rgba(241, 241, 241, 0.5);
border-color: rgba(241, 241, 241, 0.25);
background: rgba(241, 241, 241, 0.25);
}
.zv-btn-disabled:hover {
color: #cfd2d6;
border-color: rgba(241, 241, 241, 0.55);
background: rgba(241, 241, 241, 0.39);
}
.zv-btn-small {
height: 24px;
padding: 0 7px;
font-size: 12px;
}
.zv-btn-large {
height: 40px;
padding: 6.4px 15px;
font-size: 16px;
border-radius: 6px;
}
.zv-checkbox {
position: relative;
display: flex;
overflow: hidden;
justify-content: flex-start;
align-items: center;
}
.zv-checkbox > * {
display: inline-block;
line-height: 1.5;
}
.zv-checkbox > input {
position: absolute;
left: -99999px;
top: -999999px;
opacity: 0;
}
.zv-checkbox-box {
width: 12px;
height: 12px;
cursor: pointer;
}
.zv-checkbox-box > svg {
display: flex;
font-size: 12px;
}
.zv-checkbox-checked svg .fill {
fill: #ff5d01;
}
.zv-checkbox-text {
margin-left: 5px;
}
.app-win-navbar {
width: 100%;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px 15px;
border-bottom: 1px rgba(241, 241, 241, 0.05);
}
.app-win-navbar ._back {
display: flex;
cursor: pointer;
}
.app-win-navbar ._title {
width: calc(100% - 50px);
color: #FFFFFF;
font-size: 18px;
}
.app-win-navbar ._close {
cursor: pointer;
}
.zv-rank-hot-title {
color: #F1F1F1;
font-size: 16px;
}
.zv-rank-hot-list {
margin-top: 10px;
counter-reset: counters;
}
.zv-rank-hot-list > li {
padding: 10px;
color: rgba(241, 241, 241, 0.75);
cursor: pointer;
display: block;
}
.zv-rank-hot-list > li::before {
content: counter(counters);
counter-increment: counters;
display: inline-block;
width: 18px;
height: 18px;
font-size: 12px;
color: rgba(241, 241, 241, 0.75);
border-radius: 4px;
background: rgba(241, 241, 241, 0.15);
text-align: center;
margin-right: 12px;
vertical-align: middle;
}
.zv-rank-hot-list > li:hover {
border-radius: 8px;
background: rgba(241, 241, 241, 0.15);
}
.zv-rank-hot-list > li:nth-of-type(1)::before {
background: linear-gradient(180deg, #F87268 0%, #EF3E37 100%);
}
.zv-rank-hot-list > li:nth-of-type(2)::before {
background: linear-gradient(180deg, #F7A970 0%, #EC703D 100%);
}
.zv-rank-hot-list > li:nth-of-type(3)::before {
background: linear-gradient(180deg, #FDDB65 0%, #F9B435 100%);
}
.zv-icon-loader {
animation: loaderAnimation infinite 5s linear;
}
.zv-input {
box-sizing: border-box;
margin: 0;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: "tnum";
position: relative;
display: inline-block;
width: 100%;
min-width: 0;
padding: 5px 11px;
color: #ff5d01;
font-size: 14px;
line-height: 1.5715;
background-color: transparent;
background-image: none;
border: 1px solid rgba(241, 241, 241, 0.15);
border-radius: 2px;
transition: all 0.3s;
overflow: hidden;
resize: none;
}
.zv-input:hover {
border-color: #ff5d01;
border-right-width: 1px;
}
.zv-input:focus {
border-color: #ff5d01;
border-right-width: 1px;
outline: 0;
}
.zv-input:focus ~ .zv-input-count {
display: block;
}
.zv-input::placeholder {
color: #b7b7b7;
text-indent: 3px;
}
.zv-input-small {
padding: 0 7px;
font-size: 12px;
}
.zv-input-large {
padding: 8px 11px;
border-radius: 8px;
font-size: 16px;
}
.zv-input-warp {
position: relative;
}
.zv-input-transparent {
background-color: transparent;
}
.zv-input-search {
position: relative;
display: inline-block;
}
.zv-input-search-focused .zv-input {
background-color: #212426;
}
.zv-input-search > .zv-input-enter {
position: absolute;
display: block;
width: 40px;
height: 100%;
margin: 0;
top: 0;
right: 0;
bottom: 0;
cursor: pointer;
border-radius: 0 8px 8px 0;
background-color: #ff5d01;
display: flex;
justify-content: center;
align-items: center;
}
.zv-input-vcode {
position: relative;
}
.zv-input-vcode-text {
position: absolute;
right: 12px;
top: 50%;
color: #FF585F;
font-size: 14px;
cursor: pointer;
transform: translateY(-50%);
}
.zv-input-vcode-text ._text-disabled {
cursor: not-allowed;
}
.zv-input-vcode-text ._text-disabled i {
font-style: normal;
color: rgba(241, 241, 241, 0.5);
margin-inline-start: 2px;
}
.zv-input-vcode .zv-input {
padding-inline-end: 90px;
}
.zv-input-with-icon {
display: block;
}
.zv-input-with-icon > input {
display: inline-block;
}
.zv-input-with-icon svg {
cursor: pointer;
position: absolute;
width: 18px;
top: 50%;
font-size: 20px;
}
.zv-input-prefix > input {
padding-inline-start: 33px;
}
.zv-input-prefix svg {
left: 0;
transform: translate(50%, -50%);
}
.zv-input-suffix > input {
padding-inline-end: 30px;
}
.zv-input-suffix svg {
right: 0;
transform: translate(-50%, -50%);
}
.zv-input-warp {
position: relative;
transition: all 0.3s;
}
.zv-input-warp .zv-input-count {
position: absolute;
bottom: 15px;
right: 15px;
}
.zv-popover {
position: relative;
}
.zv-popover-content {
position: absolute;
right: 0;
transform: translate(-50%, 0);
transition: all 0.39s linear;
cursor: default;
}
.zv-popover-hidden {
display: none;
}
.zv-popover-arrow {
position: relative;
width: 100%;
height: 8px;
overflow: hidden;
padding-top: 15px;
background-color: transparent;
}
.zv-popover-arrow:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #212426;
width: 16px;
height: 8px;
clip-path: path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');
}
.zv-popover-inner {
width: 100%;
height: auto;
max-height: 80vh;
border-radius: 10px;
padding: 20px;
overflow: hidden;
background-color: #212426;
box-shadow: 2px 2px 15px 5px rgba(0, 0, 0, 0.1);
}
.zv-popover-with-footer .zv-popover-inner {
padding-bottom: 0;
border-radius: 10px 10px 0 0;
}
.zv-popover-hide {
height: auto;
max-height: 0;
overflow: hidden;
}
.zv-popover-hide .zv-popover-inner {
box-shadow: none;
}
.zv-popover-show {
height: auto;
max-height: 80vh;
}
.zv-popover-footer {
width: 100%;
text-align: center;
background-color: #212426;
padding: 12px 20px;
border-radius: 0 0 10px 10px;
}
.zv-popover-bottom-right.zv-popover-content {
transform: translate(-80%, 0);
}
.zv-popover-bottom-right .zv-popover-arrow:before {
left: 80%;
}
.app-user-rule {
font-size: 12px;
}
.app-user-rule-inner {
color: #ff5d01;
}
.app-user-rule-inner ._text {
cursor: default;
color: rgba(241, 241, 241, 0.5);
}
.app-user-rule-inner span {
cursor: pointer;
}
.zv-history-content {
position: relative;
width: 100%;
height: 300px;
overflow-y: scroll;
}
.zv-history-unlogin {
margin: 0;
}
.zv-history-undata {
font-size: 14px;
text-align: center;
color: rgba(241, 241, 241, 0.75);
}
.zv-history-undata > span {
margin: 0;
display: block;
line-height: 100px;
margin-top: 100px;
font-size: 16px;
height: 100px;
}
.zv-history-list {
position: absolute;
}
.zv-history-list > h3 {
padding: 10px 0;
font-size: 14px;
color: #fff;
}
.zv-history-list > h5 {
text-align: left;
font-size: 14px;
color: #fff;
}
.zv-history-item {
color: #fff;
display: flex;
padding: 6px 0;
gap: 12px;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.zv-history-item > img {
width: 120px;
height: 68px;
object-fit: cover;
border-radius: 8px;
}
.zv-history-item ._item-info {
width: calc(100% - 132px);
}
.zv-history-item ._item-info > h5 {
font-size: 14px;
color: #F1F1F1;
width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.zv-history-item ._item-info > p {
margin-top: 8px;
font-size: 12px;
color: rgba(241, 241, 241, 0.6);
}
.zv-history-box {
display: block;
width: 24px;
}
.zv-setting-content {
padding: 0 20px;
}
.zv-setting-list .zv-setting-item:nth-last-of-type(1) {
border-bottom: 0;
}
.zv-setting-list ._can-update {
width: 5px;
top: 77px;
right: 65px;
height: 5px;
position: absolute;
border-radius: 50%;
background-color: red;
}
.zv-setting-item {
color: #fff;
font-size: 14px;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
display: flex;
padding: 11px 0;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.zv-setting-item > p {
margin-left: 10px;
}
.zv-setting-modal-header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px;
}
.zv-setting-modal-body {
height: 390px;
}
.zv-setting-modal-title {
width: 100%;
font-size: 16px;
color: #F1F1F1;
margin-inline-start: 56px;
text-align: center;
}
.zv-setting-modal-close {
padding-left: 20px;
}
.zv-setting-modal-close > svg {
display: flex;
}
.zv-setting-modal-left {
width: 144px;
}
.zv-setting-modal-left-item {
font-size: 16px;
text-align: center;
color: rgba(241, 241, 241, 0.75);
cursor: pointer;
padding: 12px;
}
.zv-setting-modal-left-item:hover {
color: #FF585F;
}
.zv-setting-modal-left-item.active {
color: #FF585F;
background: rgba(241, 241, 241, 0.1);
}
.zv-setting-modal-right {
width: calc(100% - 144px);
}
.zv-notice-content {
position: relative;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 350px;
}
.zv-notice-unlogin {
margin: 0;
}
.zv-notice-undata {
height: 100%;
font-size: 14px;
text-align: center;
color: rgba(241, 241, 241, 0.75);
}
.zv-notice-undata > span {
margin: 0;
display: block;
line-height: 100px;
height: 100px;
}
.zv-notice-list {
position: absolute;
left: 0;
right: 0;
}
.zv-notice-list ._show-more {
padding-top: 20px;
}
.zv-notice-item {
position: relative;
width: 100%;
padding: 12px 0;
color: #fff;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-notice-item ._item-time {
position: absolute;
right: 0;
top: 12px;
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
}
.zv-notice-item ._item-info {
cursor: pointer;
}
.zv-notice-item ._item-info > h3 {
font-size: 16px;
}
.zv-notice-item ._item-info p {
color: rgba(241, 241, 241, 0.75);
margin-top: 5px;
width: 100%;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
text-wrap: nowrap;
}
.zv-notice-box {
width: 24px;
height: 24px;
}
.zv-notice-box._has-unread::after {
content: "";
width: 5px;
top: 0;
right: 0;
height: 5px;
position: absolute;
border-radius: 50%;
background-color: red;
}
.zv-paid {
user-select: none;
}
.zv-paid-nav {
position: relative;
width: 100%;
padding-bottom: 80px;
height: 36px;
}
.zv-paid-closed {
display: flex;
position: absolute;
right: 0;
top: 0;
}
.zv-paid-closed > svg {
font-size: 16px;
cursor: pointer;
}
.zv-paid-inner {
margin: 20px 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.zv-paid-inner-left {
width: 439px;
padding: 0 40px 0 20px;
}
.zv-paid-inner-left > h3 {
font-family: Alimama ShuHeiTi;
color: #F4D398;
font-size: 24px;
text-align: center;
}
.zv-paid-inner-left > ul {
padding-top: 10px;
}
.zv-paid-inner-left > ul > li {
margin-top: 10px;
padding: 20px;
border-radius: 8px;
background-color: rgba(241, 241, 241, 0.15);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.zv-paid-inner-left > ul > li svg {
width: 40px;
font-size: 40px;
}
.zv-paid-inner-left > ul > li svg path {
fill: #ff5d01;
}
.zv-paid-inner-left > ul > li span {
display: block;
width: calc(100% - 50px);
color: #F1F1F1;
font-size: 16px;
}
.zv-paid-inner-right {
position: relative;
padding: 0 20px 0 40px;
}
.zv-paid-inner-right-box {
position: relative;
}
.zv-paid-inner-right-box .zv-paid-qr-text {
width: 220px;
text-align: center;
padding-top: 20px;
font-size: 14px;
color: #fff;
}
.zv-paid-inner-right-box .zv-paid-qr-text span {
color: #ff5d01;
}
.zv-paid-inner-right-images ._say {
position: absolute;
height: 76px;
top: -86px;
left: -40px;
}
.zv-paid-inner-right-images ._kbn {
position: absolute;
height: 164px;
top: -130px;
right: -19px;
}
.zv-paid-qr-box {
position: relative;
text-align: center;
padding: 20px;
border-radius: 8px;
background-color: #fff;
}
.zv-paid-qrcode-loading {
position: absolute;
left: 0;
animation: paid_scan 2.2s linear infinite;
}
.zv-paid-qrcode-loading-inner {
width: 220px;
height: 6px;
background: linear-gradient(81deg, rgba(255, 88, 95, 0.08) 0%, #FF585F 53%, rgba(255, 88, 95, 0.08) 100%);
}
.zv-paid-qrcode-scanning,
.zv-paid-qrcode-success {
position: absolute;
text-align: center;
width: 220px;
left: 0;
top: 245px;
background-color: #212426;
font-size: 14px;
color: #FFFFFF;
}
.zv-paid-qrcode-success-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.zv-paid-qrcode-success-inner svg {
width: 16px !important;
height: 16px !important;
}
.zv-paid-qrcode-success-inner svg path {
fill: #81DC00;
}
.zv-paid-qrcode-expire {
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.9);
}
.zv-paid-qrcode-expire-box {
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}
.zv-paid-qrcode-expire-box svg {
font-size: 50px;
pointer-events: none;
}
.zv-paid-qrcode-expire-box svg path {
fill: #000;
}
.zv-paid-qrcode-expire-box > p {
pointer-events: none;
font-size: 16px;
font-weight: bold;
}
.zv-paid-info {
text-align: left;
}
.zv-paid-info p {
padding-top: 8px;
font-size: 24px;
color: #f4d398;
}
.zv-paid-info > h4 {
font-size: 14px;
color: rgba(241, 241, 241, 0.85);
}
.zv-paid-info > h5 {
padding-top: 12px;
font-size: 14px;
color: rgba(241, 241, 241, 0.85);
}
@keyframes paid_scan {
from {
top: 0;
}
to {
top: 220px;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.zv-status-unlogin {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.zv-status-unlogin-box {
text-align: center;
}
.zv-status-unlogin-box > i {
display: block !important;
margin: 0 auto;
}
.zv-status-unlogin-box > p {
font-size: 14px;
color: rgba(241, 241, 241, 0.75);
margin: 12px 0;
}
.zv-status-data-empty {
text-align: center;
}
.zv-status-data-empty > ._data-empty-images {
width: 72px;
height: 72px;
margin: 0 auto;
background-image: url('./no_data-C4mgBXv8.png');
background-repeat: no-repeat;
background-size: contain;
}
.zv-status-data-empty > ._data-empty-images._views-empty {
background-image: url('./no_data-C4mgBXv8.png');
}
.zv-status-data-empty > ._data-empty-images._collect-empty {
background-image: url('./collect-Df6tCpQS.png');
}
.zv-status-data-empty ._data-empty-text {
margin-top: 10px;
font-size: 14px;
color: rgba(241, 241, 241, 0.75);
}
.zv-radio {
position: relative;
display: inline-block;
}
.zv-radio-group {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.zv-radio > input {
width: 0;
height: 0;
position: absolute;
top: -9999px;
left: -9999px;
}
.zv-radio > span {
font-size: 14px;
margin: 8px 0;
padding: 3px 12px;
display: inline-block;
border: 1px solid transparent;
cursor: pointer;
}
.zv-radio-active > span {
color: #ff5d01;
border-radius: 16px;
border: 1px solid #ff5d01;
}
.zv-sort-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-sort-nav > h2 {
font-size: 28px;
color: #F1F1F1;
}
.zv-sort-nav > span {
font-size: 14px;
cursor: pointer;
color: rgba(241, 241, 241, 0.5);
}
.zv-sort-nav > span:hover {
color: #FF585F;
}
.zv-sort-list {
display: flex;
flex-wrap: wrap;
}
.zv-video-item {
position: relative;
margin-top: 10px;
border-radius: 8px;
overflow: hidden;
}
.zv-video-item-vip {
position: absolute;
z-index: 60;
top: 8px;
right: 9px;
}
.zv-video-item-vip > svg {
font-size: 40px;
}
.zv-video-item-vip > svg path {
fill: #F4D398;
}
.zv-video-box {
padding: 10px 10px;
transition: 0.3s;
}
.zv-video-box._box-front ._box-front-image {
width: 195px;
height: 274px;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.zv-video-box._box-front ._box-front-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zv-video-box._box-front ._box-front-image > span {
position: absolute;
right: 8px;
bottom: 8px;
color: rgba(241, 241, 241, 0.9);
font-size: 12px;
z-index: 99;
}
.zv-video-box._box-front ._box-front-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 39px;
z-index: 9;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.zv-video-box._box-front > nav {
width: 196px;
color: #F1F1F1;
font-size: 16px;
margin-top: 12px;
text-overflow: ellipsis;
text-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}
.zv-video-box._box-back {
opacity: 0;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 0;
height: 100%;
background: rgba(241, 241, 241, 0.15);
}
.zv-video-box._box-back ._box-back-image {
position: relative;
width: 100%;
height: 120px;
cursor: pointer;
}
.zv-video-box._box-back ._box-back-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zv-video-box._box-back ._box-back-image > svg {
width: 40px !important;
height: 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.zv-video-box._box-back ._box-back-content {
padding: 12px;
}
.zv-video-box._box-back ._box-back-content > nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-video-box._box-back ._box-back-content > nav > h3 {
width: 190px;
font-size: 18px;
color: #fff;
text-overflow: ellipsis;
text-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}
.zv-video-box._box-back ._box-back-content > nav > i {
cursor: pointer;
}
.zv-video-box._box-back ._box-back-tags {
margin-top: 12px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
}
.zv-video-box._box-back ._box-back-tags > span {
color: rgba(241, 241, 241, 0.5);
padding: 3px 8px;
font-size: 12px;
border-radius: 4px;
background: rgba(241, 241, 241, 0.15);
}
.zv-video-box._box-back ._box-back-tags .none {
background: transparent;
height: 20px;
}
.zv-video-box._box-back ._box-back-desc {
margin-top: 12px;
}
.zv-video-box._box-back ._box-back-desc > h5 {
font-size: 12px;
color: rgba(241, 241, 241, 0.75);
margin-bottom: 3px;
}
.zv-video-box._box-back ._box-back-desc > p {
font-size: 12px;
color: rgba(241, 241, 241, 0.75);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.zv-video-box._box-back ._box-back-play {
margin-top: 12px;
}
.zv-table-thead {
width: 100%;
}
.zv-table-thead > table {
width: 100%;
display: table;
border-collapse: collapse;
}
.zv-table-thead > table tr {
display: flex;
padding: 13px 40px;
border-radius: 8px;
background: linear-gradient(153deg, #FBE5BD 0%, #F4D398 100%);
justify-content: space-between;
}
.zv-table-thead > table th {
width: 40%;
font-size: 16px;
color: #512C19;
}
.zv-table-thead > table th:not(:nth-of-type(1)) {
width: 30%;
padding-left: 40px;
border-left: 1px solid rgba(33, 36, 38, 0.3);
}
.zv-table-tbody > table {
position: relative;
display: block;
width: 100%;
height: 500px;
overflow-x: hidden;
overflow-y: scroll;
}
.zv-table-tbody tbody {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.zv-table-tbody tr {
display: flex;
width: 100%;
justify-content: space-between;
padding: 13px 40px;
border-radius: 8px;
}
.zv-table-tbody tr:nth-of-type(2n) {
background: rgba(241, 241, 241, 0.15);
}
.zv-table-tbody tr td {
width: 40%;
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
}
.zv-table-tbody tr td:not(:nth-of-type(1)) {
width: 30%;
padding-left: 40px;
border-left: 1px solid #212426;
}
.zv-user-name {
color: #F1F1F1;
font-size: 16px;
margin-bottom: 10px;
}
.zv-user-name.with-vip {
color: #F4D398;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 3px;
}
.zv-user-name.with-vip svg {
font-size: 28px;
}
.zv-user-vip {
position: relative;
width: 100%;
height: 64px;
overflow: hidden;
overflow-y: scroll;
}
.zv-user-vip-list {
text-align: left;
position: absolute;
left: 0;
top: 0;
}
.zv-user-vip-list > p {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
line-height: 1.5;
}
.zv-vip {
user-select: none;
}
.zv-vip-nav {
position: relative;
width: 100%;
padding-bottom: 80px;
height: 36px;
}
.zv-vip-closed {
display: flex;
position: absolute;
right: 0;
top: 0;
}
.zv-vip-closed > svg {
font-size: 16px;
cursor: pointer;
}
.zv-vip-inner {
margin: 20px 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.zv-vip-inner-left {
width: 439px;
padding: 0 40px 0 20px;
border-right: 1px solid rgba(241, 241, 241, 0.15);
}
.zv-vip-inner-left > h3 {
font-family: Alimama ShuHeiTi;
color: #F4D398;
font-size: 24px;
text-align: center;
}
.zv-vip-inner-left > ul {
padding-top: 10px;
}
.zv-vip-inner-left > ul > li {
margin-top: 10px;
padding: 20px;
border-radius: 8px;
background-color: rgba(241, 241, 241, 0.15);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.zv-vip-inner-left > ul > li svg {
width: 40px;
font-size: 40px;
}
.zv-vip-inner-left > ul > li svg path {
fill: #ff5d01;
}
.zv-vip-inner-left > ul > li span {
display: block;
width: calc(100% - 50px);
color: #F1F1F1;
font-size: 16px;
}
.zv-vip-inner-right {
position: relative;
padding: 0 20px 0 40px;
}
.zv-vip-inner-right-box {
position: relative;
}
.zv-vip-inner-right-images ._say {
position: absolute;
height: 76px;
top: -86px;
left: -40px;
}
.zv-vip-inner-right-images ._kbn {
position: absolute;
height: 164px;
top: -130px;
right: -19px;
}
.zv-vip-qr-box {
position: relative;
text-align: center;
padding: 12px;
border-radius: 8px;
background-color: #fff;
}
.zv-vip-qrcode-loading {
position: absolute;
left: 0;
animation: vip_scan 1.8s linear infinite;
}
.zv-vip-qrcode-loading-inner {
width: 124px;
height: 6px;
background: linear-gradient(81deg, rgba(255, 88, 95, 0.08) 0%, #FF585F 53%, rgba(255, 88, 95, 0.08) 100%);
}
.zv-vip-qrcode-scanning {
position: absolute;
text-align: left;
width: 180px;
left: 139px;
top: 5px;
font-size: 14px;
color: #FFFFFF;
}
.zv-vip-qrcode-success {
position: absolute;
text-align: left;
width: 180px;
left: 130px;
top: 5px;
font-size: 14px;
color: #FFFFFF;
}
.zv-vip-qrcode-success-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.zv-vip-qrcode-success-inner svg {
width: 16px !important;
height: 16px !important;
}
.zv-vip-qrcode-success-inner svg path {
fill: #81DC00;
}
.zv-vip-qrcode-expire {
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.9);
}
.zv-vip-qrcode-expire-box {
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}
.zv-vip-qrcode-expire-box svg {
font-size: 39px;
pointer-events: none;
}
.zv-vip-qrcode-expire-box svg path {
fill: #000;
}
.zv-vip-qrcode-expire-box > p {
pointer-events: none;
font-size: 14px;
font-weight: bold;
}
.zv-vip-qrcode-expire {
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.9);
}
.zv-vip-qrcode-expire-box {
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
}
.zv-vip-qrcode-expire-box svg {
font-size: 39px;
pointer-events: none;
}
.zv-vip-qrcode-expire-box svg path {
fill: #000;
}
.zv-vip-qrcode-expire-box > p {
pointer-events: none;
font-size: 14px;
font-weight: bold;
}
.zv-vip-info {
text-align: left;
}
.zv-vip-info p {
padding-top: 8px;
font-size: 24px;
color: #f4d398;
}
.zv-vip-info > h4 {
font-size: 14px;
color: rgba(241, 241, 241, 0.85);
}
.zv-vip-info > h5 {
padding-top: 12px;
font-size: 14px;
color: rgba(241, 241, 241, 0.85);
}
.zv-vip-nav {
position: absolute;
right: 20px;
top: 20px;
z-index: 9;
}
.zv-vip-user {
position: relative;
padding: 24px 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 8;
}
.zv-vip-user-inner {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
}
.zv-vip-user-inner > img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.zv-vip-user-inner h3 {
font-size: 16px;
color: #F1F1F1;
}
.zv-vip-user-uid {
margin-top: 5px;
font-size: 12px;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
width: auto;
overflow: hidden;
border-radius: 3px;
color: rgba(241, 241, 241, 0.75);
border: 1px solid rgba(241, 241, 241, 0.25);
}
.zv-vip-user-uid > span {
display: inline-block;
padding-block-start: 30px;
min-width: 60px;
text-align: center;
padding: 0 10px;
}
.zv-vip-user-uid::before {
text-align: center;
display: inline-block;
width: 35px;
height: 100%;
content: "UID";
background: #666666;
}
.zv-vip-user-text img {
width: 270px;
margin-right: 35px;
}
.zv-vip-list {
margin: 20px 0;
height: 450px;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-radius: 8px 8px 0px 0px;
background: linear-gradient(91deg, rgba(244, 211, 152, 0.08) 0%, rgba(250, 235, 201, 0) 100%);
}
.zv-vip-list-left {
width: 190px;
z-index: 9;
}
.zv-vip-list-left > nav {
height: 60px;
font-size: 18px;
color: #F4D398;
text-align: center;
padding: 20px;
}
.zv-vip-list-left > ul {
padding: 0 20px 0;
border-right: 2px solid rgba(241, 241, 241, 0.15);
border-image: linear-gradient(90deg, #e2c99b 100%, rgba(226, 201, 155, 0) 0%) 2 2 2 2;
}
.zv-vip-list-left > ul li {
display: flex;
padding: 20px 0;
justify-content: flex-start;
align-items: center;
gap: 12px;
}
.zv-vip-list-left > ul li > svg {
width: 40px;
}
.zv-vip-list-left > ul li > svg path {
fill: #F2D198;
}
.zv-vip-list-left > ul li > section h5 {
font-size: 16px;
color: #F4D398;
}
.zv-vip-list-left > ul li > section p {
font-size: 12px;
color: #CCCCCC;
}
.zv-vip-list-right {
width: calc(100% - 188px);
transform: translateX(-2px);
margin-right: -2px;
}
.zv-vip-list-right-paybox {
position: relative;
width: calc(100% - 40px);
height: 164px;
margin: 0 20px;
border-radius: 8px;
background: linear-gradient(90deg, rgba(241, 241, 241, 0.15) 0%, rgba(241, 241, 241, 0) 100%);
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-vip-list-right-paybox .zv-vip-qr-box-warp {
padding: 20px;
display: flex;
gap: 20px;
justify-content: flex-start;
align-items: flex-end;
}
.zv-vip-list-right-paybox .zv-vip-paybox-kanban ._kbn {
position: absolute;
height: 164px;
top: 0;
right: -10px;
}
.zv-vip-list-right-paybox .zv-vip-paybox-kanban ._say {
position: absolute;
top: 44px;
right: 121px;
height: 76px;
}
.zv-vip-list-tabs {
width: 100%;
height: 60px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.zv-vip-list-tabs > li {
position: relative;
font-size: 18px;
color: rgba(241, 241, 241, 0.75);
padding: 15px;
text-align: center;
background-color: #252829;
width: 50%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
cursor: pointer;
}
.zv-vip-list-tabs > li > img {
width: 24px;
object-fit: contain;
}
.zv-vip-list-tabs > li:not(._sigle) {
margin-right: -1px;
}
.zv-vip-list-tabs > li:not(._sigle)::after {
content: '';
display: block;
position: absolute;
right: 0;
top: 30px;
width: 100%;
height: 30px;
border-radius: 0 0 8px 0;
z-index: 9;
border-right: 2px solid #F4D398;
border-bottom: 2px solid #F4D398;
}
.zv-vip-list-tabs > li:not(._sigle)._active {
border-left: 2px solid #F4D398;
border-radius: 0;
color: #f1f1f1;
background-color: transparent;
}
.zv-vip-list-tabs > li:not(._sigle)._active::after {
top: 0;
border-radius: 0 8px 0 0;
border-top: 2px solid #F4D398;
border-right: 2px solid #F4D398;
border-bottom: 0;
}
.zv-vip-list-tabs > li._sigle::after {
content: '';
display: block;
position: absolute;
right: 0;
width: calc(100% + 1px);
height: 30px;
top: 30px;
border-radius: 0 0 0 8px;
border-left: 2px solid #F4D398;
border-bottom: 2px solid #F4D398;
}
.zv-vip-list-tabs > li._sigle._active {
background-color: transparent;
}
.zv-vip-list-tabs > li._sigle._active::after {
top: 0;
border-radius: 8px 0 0 0;
border-top: 2px solid #F4D398;
border-left: 2px solid #F4D398;
border-bottom: 0;
}
.zv-vip-list-all {
height: 100%;
z-index: 8;
position: absolute;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 0 20px;
flex-wrap: nowrap;
}
.zv-vip-list-all-warp {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
}
.zv-vip-list-all > ._vip-items {
display: flex;
border-radius: 8px;
justify-content: center;
flex-shrink: 0;
align-items: center;
gap: 20px;
width: 164px;
height: 164px;
box-sizing: content-box;
flex-direction: column;
background: rgba(241, 241, 241, 0.15);
cursor: pointer;
}
.zv-vip-list-all > ._vip-items ._vip-items-left {
font-size: 14px;
text-align: center;
color: rgba(241, 241, 241, 0.85);
}
.zv-vip-list-all > ._vip-items ._vip-items-right {
font-size: 32px;
text-align: center;
color: #f4d398;
}
.zv-vip-list-all > ._vip-items ._vip-items-right span {
font-size: 14px;
}
.zv-vip-list-all > ._vip-items._active {
background: linear-gradient(271deg, #FFE4AE 0%, #FFEFD4 100%);
}
.zv-vip-list-all > ._vip-items._active ._vip-items-left {
color: rgba(81, 44, 25, 0.85);
}
.zv-vip-list-all > ._vip-items._active ._vip-items-right {
color: #512c19;
}
.zv-vip-list-box {
position: relative;
height: 164px;
margin: 20px 0;
box-sizing: content-box;
}
.zv-vip-list-box:hover ._arrow-all {
display: block;
}
.zv-vip-list-box > ._arrow-left {
display: none;
position: absolute;
left: 0;
top: 60px;
z-index: 10;
cursor: pointer;
}
.zv-vip-list-box > ._arrow-left > img {
width: 44px;
}
.zv-vip-list-box > ._arrow-right {
display: none;
position: absolute;
right: 0;
top: 60px;
z-index: 10;
cursor: pointer;
}
.zv-vip-list-box > ._arrow-right > img {
width: 44px;
}
.zv-vip-list-single {
width: 100%;
height: 164px;
display: flex;
justify-content: space-between;
}
.zv-vip-list-single-left {
width: 100%;
}
.zv-vip-list-single-left > * {
width: 50%;
}
.zv-vip-list-single-left > * > h3 {
padding: 10px;
text-align: center;
font-size: 14px;
color: rgba(241, 241, 241, 0.5);
}
.zv-vip-list-single-right {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
.zv-vip-list-single-right > h3 {
font-size: 14px;
font-weight: bold;
font-family: AlimamaShuHeiTi;
color: #f4d398;
}
.zv-vip-list-single-right > h3 span {
font-size: 24px;
}
.zv-vip-list-single-right > p {
margin-top: 10px;
color: rgba(241, 241, 241, 0.5);
font-size: 12px;
font-weight: 400;
text-align: center;
}
.zv-vip-list-single-date {
margin-top: 20px;
}
.zv-vip-list-single-channel,
.zv-vip-list-single-date {
width: 100%;
}
.zv-vip-list-single-channel h3,
.zv-vip-list-single-date h3 {
font-size: 16px;
padding: 0;
margin: -8px 20px 8px;
color: rgba(241, 241, 241, 0.5);
text-align: left;
}
.zv-vip-list-single-channel ._arrow-left,
.zv-vip-list-single-date ._arrow-left {
display: none;
position: absolute;
top: 3px;
left: 0;
z-index: 10;
cursor: pointer;
}
.zv-vip-list-single-channel ._arrow-left > img,
.zv-vip-list-single-date ._arrow-left > img {
width: 44px;
}
.zv-vip-list-single-channel ._arrow-right,
.zv-vip-list-single-date ._arrow-right {
display: none;
position: absolute;
top: 3px;
right: 0;
z-index: 10;
cursor: pointer;
}
.zv-vip-list-single-channel ._arrow-right > img,
.zv-vip-list-single-date ._arrow-right > img {
width: 44px;
}
.zv-vip-list-single-channel ._channel-list,
.zv-vip-list-single-date ._channel-list {
position: relative;
height: 50px;
}
.zv-vip-list-single-channel ._channel-list:hover ._arrow-channel,
.zv-vip-list-single-date ._channel-list:hover ._arrow-channel {
display: block;
}
.zv-vip-list-single-channel ._date-list,
.zv-vip-list-single-date ._date-list {
position: relative;
height: 50px;
}
.zv-vip-list-single-channel ._date-list:hover ._arrow-date,
.zv-vip-list-single-date ._date-list:hover ._arrow-date {
display: block;
}
.zv-vip-list-single-channel ._list,
.zv-vip-list-single-date ._list {
position: relative;
overflow: hidden;
width: 100%;
height: 50px;
overflow-x: scroll;
}
.zv-vip-list-single-channel ul,
.zv-vip-list-single-date ul {
display: flex;
position: absolute;
justify-content: flex-start;
align-items: center;
gap: 12px;
padding: 0 20px;
width: auto;
height: 100%;
}
.zv-vip-list-single-channel ul li,
.zv-vip-list-single-date ul li {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 164px;
height: 100%;
text-align: center;
font-size: 18px;
color: rgba(241, 241, 241, 0.85);
background: rgba(241, 241, 241, 0.15);
border-radius: 8px;
cursor: pointer;
}
.zv-vip-list-single-channel ul li._active,
.zv-vip-list-single-date ul li._active {
color: #512c19;
background: linear-gradient(271deg, #FFE4AE 0%, #FFEFD4 100%);
}
.zv-vip-list-single-date ul li {
color: rgba(241, 241, 241, 0.85);
}
.zv-vip-qr-loading {
width: 124px;
margin-right: 20px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 14px;
background-color: #6a6a6a62;
color: #666666;
}
.zv-vip-qr-loading svg {
font-size: 50px;
animation: rotate 1.5s linear infinite;
}
.zv-vip-qr-loading svg path {
fill: #666666;
}
.zv-vip-qr-loading span {
padding-top: 20px;
}
@keyframes vip_scan {
from {
top: 0;
}
to {
top: 124px;
}
}
.app-login {
position: relative;
width: 100%;
height: 100%;
padding: 25px 0 20px;
background-color: #212426;
color: rgba(241, 241, 241, 0.5);
user-select: none;
}
.app-login-close {
position: absolute;
top: 10px;
right: 10px;
}
.app-login-close > * {
cursor: pointer;
}
.app-login-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.app-login-content > * {
height: calc(100% - 70px);
}
.app-login-left {
padding: 0 55px;
width: 60%;
border-right: 1px solid transparent;
}
.app-login-right {
width: 40%;
text-align: center;
border-left: 1px solid #bdbdbd;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.app-login-qrcode {
position: relative;
display: inline-block;
padding: 8px;
border-radius: 8px;
background-color: #fff;
}
.app-login-qrcode-tips {
margin-top: 8px;
font-size: 16px;
}
.app-login-qrcode-tips > label {
color: #ff5d01;
}
.app-login-rule {
margin-top: 5px;
}
.app-login-left-by-email {
margin-top: 4px;
}
.app-login-left-by-email ._input {
height: 139px;
}
.app-login-left-by-email ._input > * {
margin-bottom: 10px;
}
.app-login-left-by-email ._input > p {
font-size: 12px;
margin-bottom: 5px;
color: rgba(241, 241, 241, 0.5);
}
.app-login-left-by-email ._input > p::before {
display: inline-block;
content: "*";
color: #ff0000;
}
.app-login-left-by-password {
margin-top: 4px;
}
.app-login-left-by-password ._input {
height: 139px;
}
.app-login-left-by-password ._input > * {
margin-bottom: 10px;
}
.app-login-left-by-password ._input > p {
font-size: 12px;
margin-bottom: 5px;
color: rgba(241, 241, 241, 0.5);
}
.app-login-left-by-password ._input > p::before {
display: inline-block;
content: "*";
color: #ff0000;
}
.app-login-left-by-password ._forget {
text-align: right;
}
.app-login-left-by-password ._forget > span {
cursor: pointer;
text-align: right;
color: rgba(241, 241, 241, 0.5);
}
.app-login-left-by-password ._forget > span:hover {
text-decoration: underline;
color: #ff5d01;
}
.app-login-left ._button > button {
margin-bottom: 10px;
}
.app-qrcode-loading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.9);
}
.app-qrcode-loading-inner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.app-qrcode-loading-inner svg {
font-size: 49px;
animation: rotate 1s linear infinite;
}
.app-qrcode-loading-inner svg path {
fill: #868789;
}
.app-qrcode-scanning {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.9);
}
.app-qrcode-scanning-inner {
width: 100%;
height: 100%;
display: flex;
gap: 10px;
justify-content: center;
flex-direction: column;
align-items: center;
color: #868789;
}
.app-qrcode-scanning-inner svg {
font-size: 40px;
}
.app-qrcode-scanning-inner svg path {
fill: #34b953;
}
.app-qrcode-scanning-inner p {
color: #34b953;
font-weight: normal;
font-size: 20px;
}
.app-qrcode-scanning-refresh {
color: #868789;
cursor: pointer;
font-size: 13px;
position: absolute;
bottom: 10px;
width: 100%;
height: 20px;
}
.app-qrcode-expire {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.9);
}
.app-qrcode-expire-box {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.app-qrcode-expire-box svg {
font-size: 32px;
margin-bottom: 10px;
}
.app-qrcode-expire-box svg path {
fill: #212426;
}
.app-qrcode-expire-box p {
color: #212426;
font-size: 14px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.zv-register {
background-color: #212426;
width: 100%;
height: 100%;
}
.zv-register-content {
margin: 10px auto 30px;
width: 300px;
}
.zv-register-content > * {
margin-bottom: 10px;
}
.zv-register-content > button {
margin-bottom: 0;
margin-top: 10px;
}
.zv-register-rule {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 0;
}
.zv-register-modal {
padding: 10px 0;
text-align: center;
}
.zv-register-modal > img {
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
}
.zv-register-modal > h3 {
color: #fff;
}
.zv-register-success {
margin: 50px 0 70px;
text-align: center;
font-size: 16px;
color: #f1f1f1;
}
.zv-register-success path#Fill-1 {
fill: #90E300;
}
.zv-register-success path#path-2 {
fill: #fff;
}
.zv-register-success h3 {
font-size: 20px;
margin-top: 10px;
}
.zv-register-success section {
margin-top: 10px;
}
.zv-register-success section span {
color: #FF585F;
margin-right: 2px;
}
.app-forget {
width: 100%;
height: 100%;
background-color: #212426;
}
.app-forget-content {
margin: 20px 100px;
min-height: 300px;
}
.app-forget-box {
text-align: center;
}
.app-forget-verify {
width: 300px;
margin: 25px auto;
}
.app-forget-verify > * {
margin-top: 25px;
}
.app-forget-success {
width: 300px;
margin: 20px auto 0;
}
.app-forget-success > * {
margin-top: 25px;
}
.app-forget-success > img {
width: 75px;
}
.app-forget-success p {
color: #F1F1F1;
}
.zv-home {
position: relative;
}
.zv-home-inner {
padding-bottom: 30px;
}
.zv-home-swiper {
position: relative;
width: 100%;
height: calc(720px - 64px);
}
.zv-home-swiper ._swiper-item {
position: relative;
background-size: cover;
height: calc(720px - 64px);
}
.zv-home-swiper ._swiper-item::after {
position: absolute;
bottom: 0;
content: '';
width: 100%;
height: 200px;
background: linear-gradient(180deg, rgba(33, 36, 38, 0) 0%, #212426 100%);
}
.zv-home-swiper ._swiper-item-mask {
height: calc(720px - 64px);
background: radial-gradient(44% 63% at 50% 50%, rgba(33, 36, 38, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.zv-home-swiper ._swiper-item-info {
position: absolute;
left: 180px;
bottom: 40px;
color: #fff;
z-index: 98;
}
.zv-home-swiper ._swiper-item-info ._video-title {
font-size: 28px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 12px;
}
.zv-home-swiper ._swiper-item-info ._video-title > svg {
font-size: 24px;
}
.zv-home-swiper ._swiper-item-info ._video-title > svg path {
fill: #ff5d01;
stroke: #ff5d01;
}
.zv-home-swiper ._swiper-item-info ._video-title > span {
margin-inline-start: 8px;
width: 390px;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zv-home-swiper ._swiper-item-info ._video-summary {
font-size: 16px;
width: 330px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 40px;
}
.zv-home-swiper ._swiper-item-info ._video-play {
width: 140px;
height: 40px;
border-radius: 27px;
line-height: 40px;
background: rgba(241, 241, 241, 0.15);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.zv-home-swiper ._swiper-item-info ._video-play > span {
margin-left: 5px;
}
.zv-home-swiper ._swiper-item-info ._video-play:hover {
color: #ff5d01;
background: rgba(241, 241, 241, 0.25);
}
.zv-home-swiper ._swiper-item-info ._video-play:hover svg path {
fill: #ff5d01;
}
.zv-home-swiper ._swiper-dot {
position: absolute;
right: 40px;
bottom: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.zv-home-swiper ._swiper-dot-item {
margin-left: 12px;
}
.zv-home-swiper ._swiper-dot-item > img {
width: 95px;
height: 130px;
object-fit: cover;
border-radius: 8px;
filter: brightness(60%);
margin-bottom: 10px;
}
.zv-home-swiper ._swiper-dot-item > p {
width: 95px;
font-size: 16px;
text-wrap: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(255, 255, 255, 0.5);
}
.zv-home-swiper ._swiper-dot-item._active > img {
filter: brightness(100%);
border: 3px solid #FFFFFF;
}
.zv-home-swiper ._swiper-dot-item._active > p {
color: #fff;
}
.zv-home-sort {
height: auto;
margin-top: 30px;
padding: 0 30px;
margin-inline-start: 140px;
}
.zv-player {
position: relative;
width: 100%;
user-select: none;
}
.zv-player-full .zv-player-left {
width: 100%;
}
.zv-player-full .zv-player-box {
background-color: #000;
}
.zv-player-full .zv-player-right {
position: absolute;
right: -336px;
overflow: hidden;
}
.zv-player-full .zv-player-navbar {
position: absolute;
}
.zv-player-full .zv-player-navbar-inner {
width: 100%;
}
.zv-player-full .zv-player-inner {
width: 100vw;
height: 100vh;
}
.zv-player-full .zv-player-switch {
right: 0;
}
.zv-player-full .zv-player-switch > svg {
transform: translate(-50%, -50%) rotate(180deg);
transform-origin: center;
}
.zv-player-drag {
position: absolute;
top: 0;
width: 100%;
height: 50px;
pointer-events: none;
z-index: -1;
-webkit-app-region: drag;
}
.zv-player-navbar {
width: 100%;
padding: 0 10px;
z-index: 9999;
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-player-navbar-inner {
display: flex;
width: calc(100vw - 336px);
height: 64px;
z-index: 9999;
justify-content: space-between;
align-items: center;
color: rgba(241, 241, 241, 0.75);
}
.zv-player-navbar-action {
width: 336px;
height: 64px;
display: flex;
gap: 10px;
padding-right: 10px;
justify-content: flex-end;
align-items: center;
}
.zv-player-navbar-action-item {
cursor: pointer;
padding: 5px;
border-radius: 3px;
-webkit-app-region: no-drag;
}
.zv-player-navbar-action-item.istop > svg {
transform: rotate(0);
}
.zv-player-navbar-action-item.not-istop > svg {
transform: rotate(-45deg);
}
.zv-player-navbar-action-item > svg {
display: flex;
font-size: 20px;
width: 20px;
height: 20px;
}
.zv-player-navbar-action-item:hover {
background-color: #626262;
}
.zv-player-switch {
display: none;
position: fixed;
right: 336px;
top: 50%;
width: 30px;
height: 80px;
cursor: pointer;
transform: translateY(-50%);
transition: all 0.3s linear;
border-radius: 8px 0 0 8px;
background: rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
}
.zv-player-switch > svg {
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.zv-player-switch.zv-player-switch-show {
transition: all 0.3s linear;
display: block;
}
.zv-player-inner {
position: relative;
width: 100%;
height: calc(100vh - 64px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.zv-player-inner > * {
transition: all 0.3s linear;
}
.zv-player-left {
position: relative;
width: calc(100vw - 336px);
height: 100%;
}
.zv-player-right {
position: relative;
width: 336px;
height: 100%;
transform: translateX(0);
overflow: hidden;
}
.zv-player-right-inner .zv-player-right-tabs {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s linear;
}
.zv-player-right-inner .zv-player-right-introduction {
background-color: #212426;
z-index: 3;
position: absolute;
width: 100%;
height: 100%;
transition: all 0.3s;
}
.zv-player-right-inner .zv-player-right-discuss {
background-color: #212426;
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
transition: all 0.3s;
}
.zv-player-right-inner ._show {
transform: translateX(0);
}
.zv-player-right-inner ._hide {
transform: translateX(-100%);
}
.zv-player-box {
position: absolute;
width: 100%;
height: 100%;
}
.zv-player-player {
position: relative;
width: 100%;
height: 100%;
}
.zv-player-player > .errors {
font-size: 20px;
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
}
.zv-player-tabs-inner {
padding: 0 30px;
}
.zv-player-tags {
font-size: 14px !important;
color: #F5A623 !important;
padding: 1px 5px;
border-radius: 2px;
background: rgba(245, 166, 35, 0.25);
}
.zv-player-back {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
z-index: 9999;
-webkit-app-region: no-drag;
}
.zv-player-back:hover {
background-color: rgba(241, 241, 241, 0.1);
}
.zv-player-back > span {
margin-left: 5px;
}
.zv-player-trial {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 95;
backdrop-filter: blur(40px);
}
.zv-player-trial-navbar {
position: absolute;
top: 15px;
left: 10px;
}
.zv-player-trial-inner {
margin: 0;
text-align: center;
}
.zv-player-trial-inner > h5 {
color: #fff;
font-size: 18px;
margin-bottom: 20px;
}
.zv-player-trial-inner > button {
margin: 0 auto;
}
.zv-player-trial-inner > p {
margin-top: 12px;
color: #F4D398;
font-size: 18px;
}
.zv-player-trial-inner ._review {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 10px;
border-radius: 10px;
}
.zv-player-trial-inner ._review:hover {
background-color: rgba(241, 241, 241, 0.05);
}
.zv-player-trial-inner ._review svg {
font-size: 18px;
}
.zv-player-trial-inner ._review svg path {
fill: #fff;
}
.zv-player-trial-inner ._review > span {
margin-left: 5px;
}
.zv-player-list {
position: relative;
width: 100%;
height: calc(100vh - 115px);
margin: 0 auto;
overflow-y: scroll;
}
.zv-player-list-scroll {
position: absolute;
left: 0;
right: 0;
padding: 0 30px;
height: 100%;
}
.zv-player-list-header > h3 {
font-size: 20px;
color: #fff;
}
.zv-player-list-header ._info {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-player-list-header ._info ._info-left {
width: calc(100% - 50px);
line-height: 2;
}
.zv-player-list-header ._info ._info-left > span {
color: rgba(241, 241, 241, 0.75);
font-size: 14px;
margin-right: 5px;
display: inline-block;
line-height: 18px;
}
.zv-player-list-header ._info ._info-right {
width: 50px;
display: flex;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
.zv-player-list-header ._info ._info-right > span {
color: rgba(241, 241, 241, 0.75);
font-size: 14px;
display: inline-block;
line-height: 18px;
}
.zv-player-list-header ._actions {
margin-top: 25px;
display: flex;
justify-content: space-around;
align-items: center;
}
.zv-player-list-header ._actions ._action-item {
padding: 5px 10px;
cursor: pointer;
text-align: center;
}
.zv-player-list-header ._actions ._action-item._not-allowed {
color: #929191;
cursor: not-allowed;
}
.zv-player-list-header ._actions ._action-item._not-allowed svg {
font-size: 24px;
}
.zv-player-list-header ._actions ._action-item._not-allowed svg path {
stroke: #929191;
fill: #929191;
}
.zv-player-list-header ._actions ._action-item ._red-fill path {
fill: #FF585F;
}
.zv-player-list-header ._actions ._action-item svg {
cursor: pointer;
display: block;
font-size: 24px;
}
.zv-player-list-header ._actions ._action-item svg path {
fill: #fff;
}
.zv-player-list-header ._actions ._action-item span {
display: block;
text-align: center;
margin-top: 5px;
color: rgba(241, 241, 241, 0.5);
}
.zv-player-list-source {
margin-top: 30px;
}
.zv-player-list-source > h3 {
color: #F1F1F1;
font-size: 16px;
}
.zv-player-list-source-group {
display: flex;
margin-top: 10px;
}
.zv-player-list-source-group .zv-radio-group {
gap: 12px;
}
.zv-player-list-source-group .zv-radio > span {
color: rgba(241, 241, 241, 0.5);
border-color: rgba(241, 241, 241, 0.15);
width: 84px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.zv-player-list-source-group .zv-radio-active > span {
color: #ff5d01;
border-color: #ff5d01;
}
.zv-player-list-list {
margin-top: 30px;
}
.zv-player-list-list > nav {
color: #F1F1F1;
font-size: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-player-list-list ._list-body {
margin: 20px auto 0;
display: flex;
justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.zv-player-list-list ._list-body ._list-tab {
width: 82px;
height: 30px;
padding-inline-start: 5px;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
cursor: pointer;
text-align: center;
line-height: 30px;
color: rgba(241, 241, 241, 0.75);
border: 1px solid transparent;
}
.zv-player-list-list ._list-body ._list-tab._active {
color: #ff5d01;
border-color: #ff5d01;
}
.zv-player-list-list ._list-body ._list-list {
display: none;
gap: 10px;
}
.zv-player-list-list ._list-body ._list-list._active {
display: block;
}
.zv-player-list-list ._list-body ._list-list > section {
position: relative;
display: inline-block;
color: rgba(241, 241, 241, 0.75);
width: 46px;
height: 46px;
text-align: center;
line-height: 46px;
margin-right: 10px;
margin-bottom: 12px;
border-radius: 8px;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
padding-inline-start: 3px;
cursor: pointer;
background: rgba(241, 241, 241, 0.15);
}
.zv-player-list-list ._list-body ._list-list > section:nth-of-type(5n) {
margin-right: 0;
}
.zv-player-list-list ._list-body ._list-list > section._active {
color: #fff;
background-color: #ff5d01;
}
.zv-player-list-list ._list-body ._list-list > section > svg {
font-size: 28px;
position: absolute;
top: -2px;
right: -2px;
}
.zv-player-list-list ._list-body ._list-list > section > svg path {
fill: #F4D398;
}
.zv-player-recommend {
position: relative;
height: 675px;
overflow-y: scroll;
}
.zv-player-recommend-scroll {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zv-player-recommend-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding: 0 30px;
gap: 12px;
}
.zv-player-recommend-item {
position: relative;
width: 132px;
cursor: pointer;
transition: all 0.3s;
}
.zv-player-recommend-item:hover {
transform: scale(1.1);
}
.zv-player-recommend-item:hover ._recommend-image > svg {
opacity: 1;
}
.zv-player-recommend-item ._recommend-image {
width: 100%;
height: 186px;
}
.zv-player-recommend-item ._recommend-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zv-player-recommend-item ._recommend-image > svg {
opacity: 0;
width: 39px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.zv-player-recommend-item ._recommend-text {
margin-top: 8px;
font-size: 14px;
color: #F1F1F1;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
.zv-player-v-list {
position: absolute;
padding: 0 30px;
width: 100%;
height: 100%;
z-index: 9;
transition: 0.3s linear;
background-color: #212426;
transform: translateX(0);
}
.zv-player-v-list.hide {
transform: translateX(100%);
}
.zv-player-v-list.showFull {
position: fixed;
width: 336px;
height: 100vh;
right: 0;
top: 0;
z-index: 2147483647;
bottom: 0;
}
.zv-player-v-list .zv-player-list-source {
margin-top: 20px;
}
.zv-player-v-list-header {
display: flex;
justify-content: flex-end;
}
.zv-player-v-list-header > label {
cursor: pointer;
}
.zv-player-v-list .zv-player-list-list {
box-sizing: content-box;
}
.zv-player-v-list .zv-player-list-list .zv-player-list-scroll {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
}
.zv-player-intro-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(241, 241, 241, 0.04);
padding: 0 30px 12px;
}
.zv-player-intro-header h3 {
font-size: 24px;
}
.zv-player-intro-body {
padding: 0 30px;
width: 100%;
height: 100%;
position: absolute;
overflow-y: scroll;
}
.zv-player-intro-basic {
margin: 0 auto;
padding: 20px 0;
text-align: center;
box-sizing: content-box;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-player-intro-basic img {
width: 126px;
height: 170px;
object-fit: cover;
}
.zv-player-intro-basic ._vname {
display: block;
margin-top: 12px;
}
.zv-player-intro-basic ._vname ._name {
color: #F1F1F1;
font-size: 18px;
margin-right: 12px;
}
.zv-player-intro-basic ._info {
font-size: 14px;
margin-top: 10px;
color: rgba(241, 241, 241, 0.5);
}
.zv-player-intro-basic ._info ._continu {
margin-right: 10px;
}
.zv-player-intro-rate {
margin: 0 auto;
padding: 20px 0;
text-align: center;
box-sizing: content-box;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-player-intro-rate > h3 {
margin-top: 0;
font-size: 14px;
text-align: left;
color: rgba(241, 241, 241, 0.75);
}
.zv-player-intro-rate ._star {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.zv-player-intro-rate > * {
margin-top: 12px;
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
}
.zv-player-intro-text {
padding: 20px 0 80px;
box-sizing: content-box;
}
.zv-player-intro-text > p {
margin-top: 5px;
line-height: 1.8;
font-size: 14px;
color: rgba(241, 241, 241, 0.5);
}
.zv-player-discuss {
position: relative;
width: 100%;
color: #F1F1F1;
height: calc(100vh - 115px - 64px);
overflow-y: scroll;
}
.zv-player-discuss-list {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10px 30px;
}
.zv-player-discuss-item {
padding: 15px 0;
border-bottom: 1px solid rgba(241, 241, 241, 0.08);
}
.zv-player-discuss-item-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-player-discuss-item-header ._discuss-avatar {
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-player-discuss-item-header ._discuss-avatar.vip {
color: #F4D398;
font-size: 14px;
}
.zv-player-discuss-item-header ._discuss-avatar.vip svg {
font-size: 28px;
}
.zv-player-discuss-item-header ._discuss-avatar img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.zv-player-discuss-item-header ._discuss-avatar ._nick {
margin-right: 3px;
}
.zv-player-discuss-item-header ._discuss-date {
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
}
.zv-player-discuss-item-body {
padding: 15px 0;
color: #F1F1F1;
font-size: 14px;
overflow: hidden;
text-align: left;
text-wrap: wrap;
word-break: break-all;
user-select: text;
}
.zv-player-discuss-item-body > p > span {
padding: 0 3px;
color: rgba(241, 241, 241, 0.5);
}
.zv-player-discuss-item-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-player-discuss-item-footer ._footer-left {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
.zv-player-discuss-item-footer ._footer-left > * {
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-player-discuss-item-footer ._footer-left ._like._liked svg path,
.zv-player-discuss-item-footer ._footer-left ._reply._liked svg path {
fill: #FF585F;
}
.zv-player-discuss-item-footer ._footer-left ._like._liked span,
.zv-player-discuss-item-footer ._footer-left ._reply._liked span {
color: #FF585F;
}
.zv-player-discuss-item-footer ._footer-left ._like span,
.zv-player-discuss-item-footer ._footer-left ._reply span {
margin-left: 5px;
font-size: 14px;
color: rgba(241, 241, 241, 0.75);
}
.zv-player-discuss-item-footer ._footer-left ._report {
opacity: 0;
}
.zv-player-discuss-item-footer ._footer-left ._report > svg {
font-size: 20px;
}
.zv-player-discuss-item-footer ._footer-left ._report span {
margin-left: 5px;
font-size: 12px;
color: rgba(241, 241, 241, 0.75);
}
.zv-player-discuss-item-footer ._footer-right .zv-popover-inner {
background: rgba(0, 0, 0, 0.75);
}
.zv-player-discuss-item-footer ._footer-right ._actions > span {
display: block;
cursor: pointer;
padding: 3px 10px;
border-radius: 0;
text-align: center;
}
.zv-player-discuss-item-footer ._footer-right ._actions > span:hover {
background-color: #8e8e8f;
}
.zv-player-discuss-item-extra {
margin-top: 15px;
padding: 10px 8px;
background: rgba(241, 241, 241, 0.08);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 5px;
}
.zv-player-discuss-item-extra-item {
line-height: 1.5;
}
.zv-player-discuss-item-extra-item ._nickname {
display: inline-block;
}
.zv-player-discuss-item-extra-item ._nickname > span {
color: rgba(241, 241, 241, 0.5);
}
.zv-player-discuss-item-extra-item ._nickname > label {
color: rgba(241, 241, 241, 0.88);
margin: 0 3px;
}
.zv-player-discuss-item-extra-item ._content {
color: rgba(241, 241, 241, 0.88);
display: inline-block;
}
.zv-player-discuss-item-extra ._extra-more {
color: #FF585F;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.zv-player-discuss-item-extra ._extra-more svg path {
fill: #FF585F;
}
.zv-player-discuss-item:nth-last-of-type(1) {
border-bottom: 1px solid transparent;
}
.zv-player-discuss-item:hover ._report {
opacity: 1;
}
.zv-player-discuss-inputs {
position: fixed;
right: 0;
bottom: 0;
height: 64px;
width: 336px;
padding: 12px 30px;
transition: all 0.3s;
overflow: hidden;
background-color: #212426;
box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12);
}
.zv-player-discuss-inputs._textarea {
height: 224px;
}
.zv-player-discuss-inputs-inner {
display: flex;
gap: 12px;
justify-content: flex-start;
align-items: flex-start;
}
.zv-player-discuss-inputs-inner ._avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
margin-top: 5px;
}
.zv-player-discuss-inputs-inner ._avatar > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zv-player-discuss-inputs-inner ._avatar ._login {
width: 100%;
height: 100%;
background-color: #F1F1F1;
border-radius: 50%;
color: #2C2F31;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.zv-player-discuss-inputs ._submit {
gap: 10px;
display: flex;
margin-top: 10px;
justify-content: flex-end;
align-items: center;
}
.zv-player-discuss-inputs ._submit > button {
border-radius: 20px;
}
.zv-player-discuss-drawer {
position: relative;
width: 100%;
height: calc(100vh - 60px - 64px);
}
.zv-player-discuss-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px 16px;
font-size: 18px;
color: rgba(241, 241, 241, 0.75);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.zv-player-discuss-drawer-body {
position: absolute;
left: 0;
right: 0;
top: 41px;
height: 100%;
overflow-y: scroll;
padding: 0 30px 30px;
}
.zv-player-discuss-drawer-body ._discuss-drawer-inners {
padding-top: 20px;
color: rgba(241, 241, 241, 0.5);
font-size: 14px;
border-top: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-player-discuss-drawer._textarea {
height: calc(100vh - 60px - 224px);
}
.zv-discuss-report {
padding: 0 20px 20px;
}
.zv-discuss-report .ant-radio-group {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.zv-discuss-report ._report-title {
display: block;
width: 100%;
color: rgba(241, 241, 241, 0.5);
font-size: 14px;
padding: 10px 0;
}
.zv-discuss-report .row-1 {
width: 25%;
line-height: 2.3;
margin-right: 0;
}
.zv-discuss-report .row-2 {
width: 50%;
line-height: 2.3;
margin-right: 0;
}
.zv-discuss-report .row-1:hover .ant-radio-inner,
.zv-discuss-report .row-2:hover .ant-radio-inner {
border-color: #FF585F !important;
}
.zv-discuss-report .ant-radio .ant-radio-inner {
background-color: transparent;
border-color: rgba(241, 241, 241, 0.5);
}
.zv-discuss-report .zv-input-count {
color: #f1f1f1;
}
.zv-page-search {
padding: 10px 40px 40px;
color: rgba(241, 241, 241, 0.75);
box-sizing: border-box;
}
.zv-page-search-loading {
color: rgba(241, 241, 241, 0.75);
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(-5%);
}
.zv-page-search-empty {
margin-top: 150px;
text-align: center;
}
.zv-page-search-empty > i {
justify-content: center;
}
.zv-page-search-empty .zv-empty-body {
margin-top: 39px;
}
.zv-page-search-empty .zv-empty-body p {
font-size: 14px;
color: rgba(241, 241, 241, 0.75);
}
.zv-page-search-empty .zv-empty-body section {
margin-top: 10px;
font-size: 16px;
cursor: pointer;
color: #FF585F;
}
.zv-page-search-empty .zv-empty-body section:hover {
text-decoration: underline;
}
.zv-page-search-content .search-content-nav > nav {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
cursor: pointer;
}
.zv-page-search-content .search-content-nav > nav > span {
margin-left: 5px;
}
.zv-page-search-content .search-content-nav > div {
margin-top: 20px;
}
.search-content-menu {
display: flex;
justify-content: flex-start;
align-items: center;
}
.search-content-menu ._all {
cursor: pointer;
color: #ff5d01;
line-height: 40px;
border-radius: 2px;
border-bottom: 2px solid #ff5d01;
}
.search-content-menu ._filter {
cursor: pointer;
line-height: 40px;
margin-left: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
transition: all 0.3s linear;
}
.search-content-menu ._filter > i {
margin-left: 5px;
transform: rotate(-90deg);
}
.search-content-menu ._filter-active {
color: #ff5d01;
}
.search-content-menu ._filter-active > i {
transform: rotate(90deg);
}
.search-content-body {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.search-content-body-left {
width: 720px;
}
.search-content-body-left .filter-tv {
margin-top: 20px;
}
.search-content-body-left .filter-tv > * {
margin-bottom: 20px;
}
.search-content-body-right {
width: 300px;
}
.zv-card-box {
padding: 20px;
border-radius: 8px;
background: rgba(241, 241, 241, 0.1);
}
.zv-card-box ._tv-desc {
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-card-box ._tv-desc-thumb {
width: 155px;
box-sizing: content-box;
margin-right: 20px;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.zv-card-box ._tv-desc-thumb img {
object-fit: cover;
}
.zv-card-box ._tv-desc-thumb > svg {
position: absolute;
font-size: 40px;
top: -2px;
right: -2px;
border-color: transparent;
}
.zv-card-box ._tv-desc-thumb > svg path {
fill: #F4D398;
}
.zv-card-box ._tv-desc-info {
width: calc(100% - 174px);
}
.zv-card-box ._tv-desc-info-text > h3 {
font-size: 20px;
margin-bottom: 7px;
}
.zv-card-box ._tv-desc-info-text > section {
margin-top: 5px;
}
.zv-card-box ._tv-desc-info-text > section > label {
color: rgba(241, 241, 241, 0.5);
font-size: 14px;
}
.zv-card-box ._tv-desc-info-text > section > span {
font-size: 14px;
}
.zv-card-box ._tv-desc-info-text ._actor,
.zv-card-box ._tv-desc-info-text ._desc {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.zv-card-box ._tv-desc-info-text ._actor > span,
.zv-card-box ._tv-desc-info-text ._desc > span {
position: relative;
display: block;
width: calc(100% - 80px);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.zv-card-box ._tv-desc-info-text ._actor > span > label,
.zv-card-box ._tv-desc-info-text ._desc > span > label {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
padding-left: 30px;
cursor: pointer;
right: 0;
bottom: 0;
gap: 5px;
background-image: linear-gradient(90deg, rgba(53, 56, 58, 0) 0%, #35383A 30%);
}
.zv-card-box ._tv-desc-info-text ._actor > span > label > svg,
.zv-card-box ._tv-desc-info-text ._desc > span > label > svg {
width: 16px;
height: 16px;
transform: rotate(90deg);
}
.zv-card-box ._tv-desc-info-text ._actor > span > label > span,
.zv-card-box ._tv-desc-info-text ._desc > span > label > span {
color: #FFFFFF;
font-size: 14px;
}
.zv-card-box ._tv-desc-info-text ._actor > span {
-webkit-line-clamp: 1;
}
.zv-card-box ._tv-list {
margin-top: 20px;
border-top: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-card-box ._tv-list-nav {
padding: 20px 0 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-card-box ._tv-list-title h3 {
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
}
.zv-card-box ._tv-list-tabs {
gap: 8px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.zv-card-box ._tv-list-tabs > span {
font-size: 14px;
color: rgba(241, 241, 241, 0.5);
padding: 7px 20px;
border-radius: 8px;
cursor: pointer;
border: 1px solid rgba(241, 241, 241, 0.15);
}
.zv-card-box ._tv-list-tabs > span._active {
color: #ff5d01;
border-color: #ff5d01;
}
.zv-card-box ._tv-list-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.zv-card-box ._tv-list-list > section {
position: relative;
width: 46px;
height: 46px;
overflow: hidden;
margin: 5px;
border-radius: 8px;
text-align: center;
cursor: pointer;
background: rgba(241, 241, 241, 0.15);
}
.zv-card-box ._tv-list-list > section:hover {
background-color: #ff5d01;
}
.zv-card-box ._tv-list-list > section svg {
font-size: 28px;
position: absolute;
top: -2px;
right: -2px;
}
.zv-card-box ._tv-list-list > section svg path {
fill: #F4D398;
}
.zv-card-box ._tv-list-list > section > span {
line-height: 3;
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
}
.zv-card-box-buttons {
margin-top: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-card-box-buttons > * {
border-radius: 27px;
}
.zv-card-box-buttons > * svg path {
fill: #fff;
}
.zv-card-box-buttons ._collect {
margin-left: 15px;
width: 108px;
}
.zv-card-box-buttons ._collected svg path {
fill: #ff5d01;
}
.zv-video-related {
padding: 20px;
border-radius: 8px;
background: rgba(241, 241, 241, 0.1);
}
.zv-video-related-title {
font-size: 20px;
color: #F1F1F1;
}
.zv-video-related-title span {
font-size: 16px;
color: rgba(241, 241, 241, 0.5);
}
.zv-video-related-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.zv-video-related-list ._video-item {
width: calc((100% - 60px) / 4);
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
}
.zv-video-related-list ._video-item:nth-of-type(4n) {
margin-right: 0;
}
.zv-video-related-list ._video-item-image {
position: relative;
height: 216px;
border-radius: 8px;
overflow: hidden;
z-index: 9;
}
.zv-video-related-list ._video-item-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.zv-video-related-list ._video-item-image > svg {
position: absolute;
top: -2px;
right: -2px;
font-size: 40px;
z-index: 12;
}
.zv-video-related-list ._video-item-image > svg path {
fill: #F4D398;
}
.zv-video-related-list ._video-item-image > img {
position: relative;
object-fit: fill;
}
.zv-video-related-list ._video-item-image span {
z-index: 10;
position: absolute;
bottom: 5px;
right: 8px;
color: rgba(241, 241, 241, 0.75);
font-size: 12px;
}
.zv-video-related-list ._video-item-name {
margin-top: 10px;
}
.zv-video-related-list ._video-item-name span {
display: block;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.zv-channel-inner {
padding-bottom: 30px;
}
.zv-channel-swiper {
position: relative;
width: 100%;
height: calc(720px - 64px);
}
.zv-channel-swiper ._swiper-item {
position: relative;
background-size: cover;
height: calc(720px - 64px);
}
.zv-channel-swiper ._swiper-item::after {
position: absolute;
bottom: 0;
content: '';
width: 100%;
height: 200px;
background: linear-gradient(180deg, rgba(33, 36, 38, 0) 0%, #212426 100%);
}
.zv-channel-swiper ._swiper-item-mask {
height: calc(720px - 64px);
background: radial-gradient(44% 63% at 50% 50%, rgba(33, 36, 38, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.zv-channel-swiper ._swiper-dot {
position: absolute;
top: 50%;
right: 40px;
width: 300px;
border-radius: 8px;
overflow: hidden;
transform: translateY(-50%);
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
backdrop-filter: blur(8px);
background-color: rgba(36, 36, 36, 0.66);
}
.zv-channel-swiper ._swiper-dot-item {
padding: 12px 20px;
width: 100%;
cursor: pointer;
text-align: left;
}
.zv-channel-swiper ._swiper-dot-item > h3 {
width: 250px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
color: #F1F1F1;
}
.zv-channel-swiper ._swiper-dot-item > p {
display: none;
}
.zv-channel-swiper ._swiper-dot-item._active {
background: linear-gradient(90deg, #ff5d01 0%, rgba(33, 36, 38, 0) 100%);
}
.zv-channel-swiper ._swiper-dot-item._active > h3 {
font-size: 20px;
color: #F1F1F1;
}
.zv-channel-swiper ._swiper-dot-item._active > p {
width: 250px;
margin-top: 5px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
color: #F1F1F1;
display: block;
}
.zv-channel-sort {
height: auto;
margin-top: 30px;
padding: 0 30px;
margin-inline-start: 140px;
}
.zv-channel-filter {
position: absolute;
top: 530px;
width: calc(100% - 140px);
margin-inline-start: 140px;
}
.zv-channel-filter-inner {
display: flex;
color: rgba(241, 241, 241, 0.6);
font-size: 16px;
padding: 0 40px;
justify-content: space-between;
align-items: center;
}
.zv-channel-filter-inner ._divider {
width: 1px;
height: 52px;
background: linear-gradient(180deg, rgba(241, 241, 241, 0) 0%, rgba(241, 241, 241, 0.75) 51%, rgba(241, 241, 241, 0) 100%);
}
.zv-channel-filter-item._hot-rank {
width: 180px;
}
.zv-channel-filter-item._hot-rank section {
width: 90px;
}
.zv-channel-filter-item._area {
width: 300px;
}
.zv-channel-filter-item._area section {
width: 75px;
}
.zv-channel-filter-item._type {
width: 360px;
}
.zv-channel-filter-item._type section {
width: 60px;
}
.zv-channel-filter-item-title {
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-channel-filter-item-title > nav {
display: flex;
font-size: 14px;
justify-content: flex-start;
align-items: center;
margin-left: 15px;
cursor: pointer;
}
.zv-channel-filter-item-title > nav:hover {
color: #ff5d01;
}
.zv-channel-filter-item-title > nav:hover svg path {
fill: #ff5d01;
}
.zv-channel-filter-item-body {
margin-top: 10px;
height: 45px;
}
.zv-channel-filter-item-body > section {
display: inline-block;
cursor: pointer;
line-height: 1.7;
}
.zv-channel-filter-item-body > section:hover {
color: #ff5d01;
}
.zv-filters-inner {
padding: 10px 30px;
color: rgba(241, 241, 241, 0.5);
}
.zv-filters-navbar > nav {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
cursor: pointer;
}
.zv-filters-navbar > nav > span {
margin-left: 5px;
}
.zv-filters-filter {
margin-top: 20px;
}
.zv-filters-filter ._filter-item {
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-filters-filter ._filter-item > section {
margin-left: 20px;
width: 62px;
}
.zv-filters-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding-bottom: 30px;
}
.zv-filters-list-loading {
width: 100%;
padding-top: 30px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.zv-filters-empty {
padding-top: 80px;
font-size: 18px;
text-align: center;
}
.zv-mine {
user-select: none;
}
.zv-mine-inner {
color: rgba(241, 241, 241, 0.75);
}
.zv-mine-list-loading {
padding: 10px 0;
text-align: center;
font-size: 14px;
color: rgba(241, 241, 241, 0.75);
background-color: transparent;
}
.zv-mine-list-loading > td {
margin-top: 10px;
width: 100% !important;
text-align: center;
}
.zv-mine-user {
padding: 40px 40px 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.zv-mine-user-left {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.zv-mine-user-left._unlogin {
align-items: center;
}
.zv-mine-user-left._unlogin ._user-info > h3 {
cursor: pointer;
padding-bottom: 10px;
}
.zv-mine-user-left > img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.zv-mine-user-left ._user-info {
margin-left: 12px;
}
.zv-mine-user-left ._user-info ._user-name {
padding-top: 12px;
}
.zv-mine-user-left ._user-info ._user-link {
width: 260px;
display: flex;
justify-content: flex-start;
}
.zv-mine-user-left ._user-info ._user-link > section {
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
color: rgba(241, 241, 241, 0.75);
font-size: 12px;
margin-right: 12px;
}
.zv-mine-user-left ._user-info ._user-vips {
margin-top: 12px;
}
.zv-mine-user-right {
position: relative;
width: 340px;
height: 68px;
border-radius: 8px;
background: linear-gradient(90deg, #666666 0%, #333333 100%);
}
.zv-mine-user-right-mask {
position: absolute;
left: 0;
right: 20px;
top: 0;
bottom: 12px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALoAAABQCAYAAACu0W8VAAAAAXNSR0IArs4c6QAACilJREFUeF7tXYmOpDoQg3cf//+pe+/bPBmFFjBAnMROGBak1mjUkKPiVLmchB6H53os8BNYYAwhjMMw/DEMA/6qrjAMw9dxHPH33V0hhN+GYcBHdcG238dx/LYsMIQAu/86DEOtnVD+t3Ecv6cabBrvVLVn36Pvy88P/K/GzgTuEMKfEew1Dd4++4kxvLJCRVkRCP8Mw/CLorxFGR/Hcfxv/t9Qz+ftRNprfwgB/fpX3Dd1cQA7bDV9xnHE/1XXDHRH5+FhPle1rsPDIYS/hmH4XVz1l3Ecv268OWwPwKki6WoiHbU/Rqu/xf1zFgdvD8AjGgL0RdHvZeQQAjqvDNdoEIxfPRudVtyADzQC3lx5YZAQ3VYDFEJQ1kXbOoSASYzJ/B4v2BKUOEnRtp1bAt1hACqcXsHiBioxd2vX04o9K5wJ6kl6OxNNbT2EADoA/6KCqQYsga4Opah715ulGtXjexMA3lCWuW9iz4qQ/pGxmyFyM9U67sGkhn1XCf5RRSt+aBpsijs6LMGWKaYRc7Wnk1xsayofMkYt1tSO+wB0AP40mm2BruSNc6cQYr44eqgoMw4+8hP0XXmdTnCxZz2MHMsORcUFOYgqAVbaq6YsUBnQ5EOwb4GO/9WDTvPHmp6WPiumENTkNnhWSso1Ra5S06ufOwX7m5ltGnhqINQ9T5Vn8nDJiR2B3kNadAgOKTO3/P6QPewBHZq6OrxhVfBTyx4zdYnpw1xlMicRL9rkSIuOhUHG1C3v2VX6drmaYdGEHoxWFhHLexRlmW8S152MIIt61WslrYYrp55drB0B3ZGUUglTTo9K7zVwZDQlB3BKCkFJi8aku3QYnM+9UaGOgH7rpFQs7c0DRuch4vpzpEVlXuAEqqLsFYU8lJnizjpwOuWV5K/KyvbKMikPFNhMFIKKlKZ+u4erpvzVmJwB3ZGUZgGippcHIO8eqQwUgook4rxAPTSO8lZc/XThwKBKoPIPqVUsR69RpilKUUBbeHP1VgsqSpr67hoqVbkvBSYFdOxmVG/p7LLRyxS6syNUR2nRsf1YBUhXOS9ZOwV0fK8+hNB8o5eBLkwBomQbsphCUEqPqf8ucCrLfTGI5J4HU8ijwq2qx6bV3qLIJG5LjrSodliq4XGXM2GNAbrj9FGzjV6mZf7kJqKj0esoLSbH2o24TfloD7CFNRtQZFf7JodEFW5ISqmQqzC8oe1FlKWntKiwo7OM6IwgZStPuM1NnuRXFuiOpDRLrSgxtJgPz00ooixR9VHLm3Yblti95JnF2wnwZgTlNbEHFuiOpNS60cu0zF9MWRZAV65ONs11lOjbK8uUNE/KGAX0OEjqnW9VFCBl9CtuTOslLaZsdaXvDVE4G+jvZqOXSTOnltrPQCNuV7M8p+VEMOzV56mLiV+iWLmmbqIsknb2kBZbglRVVwgBUqjqaGMe0CPYldtLZ7tIeeaVdf8e0qIKfC3LEQOdV10W0ph6nwaKzl5GPzK6mBqs5CnFQIulzmoqpeiTugxDROZ19GVnTEle9UYvU8YuoSwm6ncbaXGDL7Uz5VZGtzPW5DWLtelFtLk0rTIkWVLKp/bMpeWJVZeXskfLixv6on4lRpXnNC3zS7cpPNIiB30xY3jhKhvoMQxj9eoyp4/E3BddlEt3Yk8lbx8HQ+9dBof1yv9Kge44fVTkQcUAmkdSzn8fafF8kkRqhz3zyv0u3MGLxOKHeiN/tpcyZOhSFWiTZClXlmVKlddHc6XHcYR9lO+l54/SJYDefaOXmM9ZKMsit1E6httIi8adi6u9VEXUZSGXqTfz0xu9TOqPnLI80uK+u4xeHB5c/ftZc4UrJa8Y6KaklNro9Z4oi8kpUNJi9Jbq32Li+MjxXWgPPs7DFm9ocC3QHaePkmHZsMxPTbDSEe4lLRqoXakJWj/3BkNVQI/eSv0+v9QL9B27KKsXrBL5jLLNdNIu3jPSGqyl9fHvXsypwSTvHf3uj/qEDrpK5wU5dtkoLspV25wD0cpDHqXdb/3cLiNQeHTH6aNd+UysRU8BqeSVFbkjJ6ZalLRoWHzJ7XaP+w+jXTXQI31RasQzAFcbvUwDZ6UsPaVFkyrVA7w5dR6qZiqgO5LSFQgNy/xV5z9zrC/mytTkNES/nC73uPd0ZV0CdFNS+gKiIQ9oQlkW0qKSK7PSojrK9gAvW2fSaSmBrky45g5+iDxavTCVlDBZC6fuE1MueoL+RNIieDkoy+kvlCuBrt4wDwzhZxtRrvJdH1VbglPA3n4v5sqUtGg6hJLb9Rb3UyBHQ2RANyalyjbCI2L20z+tXTtaYq6cIy2qo2CtKdTP0yB3AF25MKI2zBQh8HoyR8FHZXaUFpEX3PXKArkD6I4FHdVgNaUsc6PFXJmaqGK6pLK/qhwknrDDKSffVqakBVPZ4lCtMg7KodQKZYXRHsp3lFC7Ky88BrXmRTSGjHj4U+hHFTiA7jh9VG0gvGiytpDc5w27LKnJKn5/TG63HfcD2Fg/gDcvuuRAj15MecigqGOLhyiloraSvecfaVFiVVBOgDyLqtipSwT6lZJSygtKhmRTiJgrUxP2ZtJiMVVpBfSrJKVFB65VoBdz5Z9JWoQXR8Ipk4Et1CV6dccrMXIwSHnAnAJz732kxVyLTS+dhRfHpM5OOM9qcwK9d1JKKRTZQ5HxwCMtJo0FMMMhAeBINH+oAT63wAb06NXVp4+Slos3UHu22cJK7jNwZWriiukSQPitpP8nzwDcr09tksm2zQ10xysxUn3rTlniJFcfSKGSarG0aD99lRpM1fduoKsHm+k35fmYgmruuYm02DWZr7F/E9VlWYk4IUv1vTtlmRvYQ1qMkUS5Eksd8kgNyhW+t3r0aHjH6aM929F7tVsYXnxYpJe0SNGlFvasrcMO9IZJ6aW8jziSUZFKTJcwdDi3W7UiWQtQ1fOtgO5OSpNHqVQGY8u5gbSICFn9SySsvdz3tQK6Mym9FGVZcPTmXFksLVJ0yQ1QVflNgB7pi+uw7qUoyyMtqqCpLacl0B0bvS5HWRYJODy6wr50xBLTpdtIixgTxUBQU8+wUkgDgGqg8KZHWhQaU1RUM6BHT6d8JQZ1rExkp6xibiItXmLhLcvwJze3BrrqlRhdzn+yRn+kRdZS7e5rCnRRUtr8lRW5wyHmylTkEtOlW0mLTTn6Qnar3b57OZVlOxHE74mk+quWFuP7b6R7wnMdhvL+5h690qtTK4RKA+WW1fFAtPKgy212Lc7j1wvoJVz90rxcGLGWc4tWlsR06VbSYhfqsgBEzraAdwHyGK2U6wXU3nqDdEvRpdxo1/P+Lh59AXYm3F5yUeho0NRceRzHjymARKArX019K2mxq0dfgB3aOrYHbCcdwjYOyoKXv5ukKKofql9Axn6T5FG2CHTV73XC1rD5LXYtduXoOyrF/LuTCPu4psOydzN2yjM/3/ss0JW6+Lr1lPxYYG2B/wEMXe+ch3F9VwAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-size: 93px;
background-position: top left;
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-mine-user-right-mask > section {
margin-left: 20px;
margin-top: 12px;
}
.zv-mine-user-right-mask > section > h3 {
color: #F4D398;
font-size: 16px;
}
.zv-mine-user-right-mask > section > p {
margin-top: 5px;
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
}
.zv-mine-user-right-mask > button {
margin-top: 12px;
}
.zv-mine-tabs {
margin: 10px 40px 40px;
}
.zv-mine-views {
position: relative;
width: 100%;
height: 490px;
}
.zv-mine-views-scroll {
overflow-y: scroll;
position: absolute;
top: 26px;
bottom: 0;
right: 0;
left: 0;
}
.zv-mine-views.zv-data-empty {
margin-top: 100px;
}
.zv-mine-views ._views-edit {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding-bottom: 5px;
position: relative;
z-index: 9;
background-color: #212426;
}
.zv-mine-views ._views-edit > span {
padding: 2px 12px;
cursor: pointer;
font-size: 14px;
color: rgba(241, 241, 241, 0.5);
border-radius: 12px;
background: rgba(241, 241, 241, 0.15);
margin-left: 12px;
}
.zv-mine-views-timeline {
height: 450px;
margin: 10px 0 30px;
}
.zv-mine-views-timeline > h3 {
font-size: 18px;
color: #F1F1F1;
}
.zv-mine-views-timeline > ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
}
.zv-mine-views-timeline > ul > li {
position: relative;
width: 160px;
cursor: pointer;
}
.zv-mine-views-timeline > ul > li > section {
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding: 10px;
right: 0;
background-color: transparent;
}
.zv-mine-views-timeline > ul > li .zv-views-item > img {
width: 100%;
height: 90px;
object-fit: cover;
}
.zv-mine-views-timeline > ul > li .zv-views-item > h5 {
font-size: 14px;
width: 100%;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
color: rgba(241, 241, 241, 0.85);
}
.zv-mine-views-timeline > ul > li .zv-views-item > p {
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
}
.zv-mine-views-timeline > ul > li .zv-views-item-check {
position: absolute;
width: 100%;
height: 90px;
background-color: rgba(0, 0, 0, 0.3);
}
.zv-mine-views-timeline > ul > li .zv-views-item-check > input {
width: 100%;
height: 90px;
opacity: 0;
cursor: pointer;
}
.zv-mine-views-timeline > ul > li .zv-views-item-check span {
position: absolute;
left: 5px;
top: 5px;
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
pointer-events: none;
}
.zv-mine-views-timeline > ul > li .zv-views-item-check > input:checked + span {
background-color: #ff585f;
pointer-events: none;
}
.zv-mine-views-timeline > ul > li .zv-views-item-check > input:checked + span::before {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
content: '';
width: 10px;
height: 10px;
text-align: center;
background-color: #fff;
clip-path: polygon(14% 44%, 0 70%, 38% 100%, 100% 26%, 85% 9%, 34% 76%);
}
.zv-mine-edit-content {
padding: 20px 140px;
}
.zv-mine-edit-header > h3 {
font-size: 20px;
color: rgba(241, 241, 241, 0.75);
}
.zv-mine-edit-unlogin {
margin-top: 185px;
}
.zv-mine-edit-info > ._info-list {
margin-top: 40px;
}
.zv-mine-edit-item-inner {
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-mine-edit-item-left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.zv-mine-edit-item-left > label {
display: block;
width: 145px;
color: rgba(241, 241, 241, 0.75);
}
.zv-mine-edit-item-left > span {
color: #F1F1F1;
}
.zv-mine-edit-item-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.zv-mine-edit-item-right span {
color: #ff5d01;
cursor: pointer;
padding: 0 20px;
}
.zv-mine-edit-item-right ._divider {
width: 1px;
height: 20px;
background: rgba(241, 241, 241, 0.1);
}
.zv-mine-collect {
position: relative;
width: 100%;
height: 490px;
overflow-y: scroll;
}
.zv-mine-collect-scroll {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.zv-mine-collect.zv-data-empty {
margin-top: 100px;
}
.zv-mine-collect ._views-edit {
position: absolute;
top: 0;
right: 0;
}
.zv-mine-collect ._views-edit > span {
padding: 4px 12px;
cursor: pointer;
font-size: 14px;
color: rgba(241, 241, 241, 0.5);
border-radius: 12px;
background: rgba(241, 241, 241, 0.15);
margin-left: 12px;
}
.zv-mine-collect-timeline {
margin: 20px 0 30px;
min-height: 450px;
}
.zv-mine-collect-timeline > .zv-collect-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.zv-mine-collect-timeline > .zv-collect-list > li {
position: relative;
width: 160px;
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
}
.zv-mine-collect-timeline > .zv-collect-list > li > section {
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding: 10px;
right: 0;
background-color: transparent;
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item > img {
width: 100%;
height: 90px;
object-fit: cover;
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item > h5 {
font-size: 14px;
width: 100%;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
color: rgba(241, 241, 241, 0.85);
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item > p {
font-size: 12px;
color: rgba(241, 241, 241, 0.5);
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item-check {
position: absolute;
width: 100%;
height: 90px;
background-color: rgba(0, 0, 0, 0.3);
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item-check > input {
width: 100%;
height: 90px;
opacity: 0;
cursor: pointer;
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item-check span {
position: absolute;
left: 5px;
top: 5px;
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fff;
pointer-events: none;
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item-check > input:checked + span {
background-color: #ff585f;
pointer-events: none;
}
.zv-mine-collect-timeline > .zv-collect-list > li .zv-collect-item-check > input:checked + span::before {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
content: '';
width: 10px;
height: 10px;
text-align: center;
background-color: #fff;
clip-path: polygon(14% 44%, 0 70%, 38% 100%, 100% 26%, 85% 9%, 34% 76%);
}
.zv-mine-collect-timeline > .zv-collect-list > li:nth-of-type(6n) {
margin-right: 0;
}
.zv-collect-modal .ant-modal-confirm-body {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.zv-collect-modal .ant-modal-confirm-body .anticon {
padding: 10px 0 20px 0;
}
.zv-collect-modal .ant-modal-confirm-body .anticon > svg {
font-size: 48px;
}
.zv-collect-modal .ant-modal-confirm-body .anticon > svg path {
fill: #fff;
}
.zv-collect-modal .ant-modal-confirm-body .ant-modal-confirm-content {
color: #F1F1F1;
font-size: 16px;
}
.zv-collect-modal .zv-btn-groups {
padding-top: 40px;
gap: 20px;
display: flex;
justify-content: center;
}
.zv-collect-modal .zv-btn-groups .zv-btn {
width: 120px;
border-radius: 20px;
}
.zv-record-vip-inner {
padding: 30px 140px;
}
.zv-record-vip-title > span {
font-size: 24px;
color: #F4D398;
}
.zv-record-vip-empty {
margin: 180px auto 0;
width: 298px;
height: 127px;
text-align: center;
background-image: url('./vip-U_j6MFGD.png');
background-size: 100%;
background-repeat: no-repeat;
}
.zv-record-vip-empty > span {
font-size: 14px;
line-height: 127px;
color: rgba(241, 241, 241, 0.75);
}
.zv-record-vip-list {
width: 100%;
background-image: url('./vip-U_j6MFGD.png');
background-size: 298px;
background-repeat: no-repeat;
background-position: center center;
border-collapse: collapse;
table-layout: auto;
margin-top: 40px;
}
.zv-record-vip-list > tbody {
width: 100%;
height: 520px;
overflow-y: auto;
}
.zv-record-vip-list > tbody tr {
display: flex;
justify-content: space-between;
padding: 13px 40px;
border-radius: 8px;
}
.zv-record-vip-list > tbody tr:nth-of-type(2n) {
background: rgba(241, 241, 241, 0.15);
}
.zv-record-vip-list > tbody tr td {
width: 40%;
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
}
.zv-record-vip-list > tbody tr td:not(:nth-of-type(1)) {
width: 30%;
padding-left: 40px;
border-left: 1px solid #212426;
}
.zv-message-inner {
padding: 40px;
}
.zv-message-header {
color: #FFFFFF;
font-size: 20px;
}
.zv-message-body {
padding-top: 20px;
}
.zv-message-tabs {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-message-tabs-list {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 12px 0;
gap: 10px;
}
.zv-message-tabs-list > * {
cursor: pointer;
font-size: 14px;
padding: 6px 12px;
border-radius: 16px;
color: rgba(241, 241, 241, 0.75);
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.zv-message-tabs-list > * svg path {
fill: #BDBEBE;
}
.zv-message-tabs-list > *.active {
color: #ff5d01;
background-color: rgba(241, 241, 241, 0.15);
}
.zv-message-tabs-list > *.active svg path {
fill: #ff5d01;
}
.zv-message-tabs-extra {
display: flex;
justify-content: flex-end;
align-items: center;
}
.zv-message-tabs-extra .all-read {
margin: 10px 0;
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
cursor: pointer;
}
.zv-message-tabs-extra:hover {
border-radius: 5px;
}
.zv-message-list {
width: 100%;
height: 560px;
overflow: auto;
}
.zv-message-list-footer {
padding: 20px 0;
}
.zv-message-list-loading {
width: 100%;
height: 520px;
display: flex;
justify-content: center;
align-items: center;
}
.zv-message-list-item {
font-size: 14px;
display: flex;
cursor: pointer;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(241, 241, 241, 0.1);
}
.zv-message-list-item._show-details {
cursor: pointer;
}
.zv-message-list-item-left {
width: calc(100% - 100px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 15px;
}
.zv-message-list-item-left > svg {
min-width: 24px;
}
.zv-message-list-item-left-content > * > p {
line-height: 24px;
}
.zv-message-list-empty {
height: 490px;
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
flex-direction: column;
}
.zv-message-feedback-item,
.zv-message-system-item {
display: block;
color: rgba(241, 241, 241, 0.75);
}
.zv-message-feedback-item > div,
.zv-message-system-item > div {
line-height: 2;
margin-top: 5px;
padding-left: 8px;
border-left: 2px solid rgba(241, 241, 241, 0.25);
}
.zv-live-inner {
width: 100%;
height: 100%;
}
.zv-live-inner .dplayer-controller {
left: 160px;
}
.zv-live-inner .dplayer-next-icon {
display: none !important;
}
.zv-modal-header {
position: relative;
padding: 20px;
}
.zv-modal-header-title {
font-size: 16px;
color: #F1F1F1;
text-align: center;
}
.zv-modal-header-closed {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.zv-modal-header-closed > svg {
display: flex;
width: 20px;
height: 20px;
}
.zv-modal-body {
padding: 20px;
}
.zv-about,
.zv-update {
position: relative;
width: 100%;
height: 100%;
padding: 25px 0 0;
background-color: #212426;
color: rgba(241, 241, 241, 0.5);
}
.zv-about-close,
.zv-update-close {
position: absolute;
top: 0;
right: 0;
}
.zv-about-close > *,
.zv-update-close > * {
cursor: pointer;
}
.zv-about-close svg path,
.zv-update-close svg path {
fill: #8E8F90;
}
.zv-about-content,
.zv-update-content {
text-align: center;
}
.zv-about-content > *,
.zv-update-content > * {
height: calc(100% - 70px);
}
.zv-about-logo,
.zv-update-logo {
display: flex;
font-size: 18px;
color: #FF585F;
justify-content: center;
align-items: center;
}
.zv-about-logo > span,
.zv-update-logo > span {
margin-left: 5px;
}
.zv-about-logo > svg path,
.zv-update-logo > svg path {
fill: #FF585F;
}
.zv-about-logo > img,
.zv-update-logo > img {
width: 150px;
height: 25px;
object-fit: contain;
}
.zv-about-copyright {
color: rgba(241, 241, 241, 0.5);
margin-top: 45px;
font-size: 12px;
}
.zv-about-copyright > section {
line-height: 2.5;
}
.zv-update-logo {
margin-top: -10px;
font-size: 20px;
}
.zv-update-inner {
margin: 20px 0;
color: #F1F1F1;
font-size: 20px;
}
.zv-update-intro {
padding: 10px 0 20px;
}
.zv-update-intro > h3 {
color: #dfdfdf;
font-size: 20px;
padding-bottom: 15px;
}
.zv-update-intro-text {
text-align: left;
color: #dfdfdf;
white-space: pre-line;
font-size: 14px;
}
.zv-update-intro-text > h3 {
font-size: 16px;
padding-bottom: 5px;
}
.zv-update-button {
margin-top: 30px;
margin-bottom: -15x;
}
.zv-update-loading svg {
font-size: 50px;
animation: spin 1s linear infinite;
}
.zv-update-loading p {
font-size: 16px;
margin-top: 15px;
color: #dfdfdf;
}
.zv-update-text {
padding: 30px 0;
color: #f1f1f1;
font-size: 16px;
}
.zv-update-version {
margin-top: 10px;
font-size: 12px;
}
.zv-feedback-body {
padding: 0 20px;
font-size: 16px;
color: rgba(241, 241, 241, 0.75);
}
.zv-feedback-body .question-content {
width: 100%;
display: block;
margin-top: 10px;
}
.zv-feedback-body > section {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-top: 20px;
}
.zv-feedback-body > section > label {
width: 115px;
}
.zv-feedback-body > section > label + * {
width: calc(100% - 155px);
}
.zv-feedback-body > section .zv-radio > span {
margin: 0;
}
.zv-feedback-images {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
gap: 15px;
}
.zv-feedback-images-preview {
position: relative;
}
.zv-feedback-images-preview:hover .images-preview-closed {
display: flex;
}
.zv-feedback-images-preview .images-preview-closed {
display: none;
position: absolute;
justify-content: center;
align-items: center;
top: -6px;
right: -6px;
z-index: 9;
width: 16px;
height: 16px;
padding: 4px;
border-radius: 50%;
cursor: pointer;
background-color: #BCBCBD;
}
.zv-feedback-images-preview .images-preview-closed svg {
width: 8px;
}
.zv-feedback-images-preview .images-preview-closed svg path {
stroke-width: 5;
fill: #27292B;
}
.zv-feedback-images .ant-image {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 8px;
background: rgba(241, 241, 241, 0.05);
border: 1px solid rgba(241, 241, 241, 0.15);
}
.zv-feedback-images .ant-image > img {
width: 88px;
height: 88px;
object-fit: cover;
border-radius: 2px;
}
.zv-feedback-submit {
justify-content: center !important;
}
.zv-feedback-detail {
color: #f1f1f1;
min-height: 460px;
}
.zv-feedback-detail-response {
gap: 12px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.zv-feedback-detail-response ._title {
color: rgba(241, 241, 241, 0.75);
padding-bottom: 5px;
}
.zv-feedback-detail-divier {
margin: 20px 0;
width: 100%;
height: 1px;
background-color: rgba(241, 241, 241, 0.1);
}
.zv-feedback-detail-request {
margin-inline-start: 52px;
padding-bottom: 12px;
}
.zv-feedback-detail-request ._title {
color: rgba(241, 241, 241, 0.75);
padding-bottom: 12px;
}
.zv-affiche-header {
position: relative;
width: 100%;
height: 38px;
padding-bottom: 20px;
color: #F1F1F1;
box-sizing: content-box;
z-index: 99;
}
.zv-affiche-header-inner {
width: 100%;
height: 100%;
text-align: center;
font-size: 18px;
}
.zv-affiche-header-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
-webkit-app-region: no-drag;
}
.zv-affiche-header-close > svg {
font-size: 16px;
}
.zv-affiche-body {
position: relative;
padding: 10px 0 20px;
color: #F1F1F1;
font-size: 14px;
min-height: 100px;
max-height: 520px;
overflow-x: hidden;
overflow-y: scroll;
}
.zv-affiche-body a {
color: #F1F1F1;
text-decoration: underline;
background-color: transparent !important;
}
.zv-affiche-footer {
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-affiche-footer.lonely {
justify-content: center;
}
.zv-affiche-footer > button {
width: 220px;
border-radius: 20px;
}
.zv-logout-inner {
padding-top: 20px;
text-align: center;
}
.zv-logout-inner-text {
color: #F1F1F1;
font-size: 18px;
line-height: 1.8;
}
.zv-logout-inner-icons {
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.zv-logout-inner-icons li svg {
font-size: 28px;
}
.zv-logout-inner-icons li p {
padding-top: 3px;
font-size: 13px;
color: rgba(241, 241, 241, 0.75);
}
.zv-logout-footer {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.zv-logout-footer > button {
width: 120px;
border-radius: 20px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}