Initial commit
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
fish03
@@ -0,0 +1,325 @@
|
||||
:root {
|
||||
--not-found-bg: #0f0f0f;
|
||||
--not-found-panel: rgba(255, 255, 255, 0.05);
|
||||
--not-found-line: rgba(255, 255, 255, 0.1);
|
||||
--not-found-primary: #ec237f;
|
||||
--not-found-secondary: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.not-found-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--not-found-bg);
|
||||
}
|
||||
|
||||
.not-found-layout .site-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.site-shell.is-404-page {
|
||||
min-width: 0;
|
||||
padding-top: 0;
|
||||
background: var(--not-found-bg);
|
||||
}
|
||||
|
||||
body.is-404-page .h5-tabbar,
|
||||
body.is-404-page .floating-action,
|
||||
body.is-404-page .download-fab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.not-found-page {
|
||||
width: 100%;
|
||||
flex: 1 0 auto;
|
||||
min-height: 0;
|
||||
padding: 40px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--not-found-bg);
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.not-found-card {
|
||||
width: min(596px, 100%);
|
||||
max-width: 596px;
|
||||
padding: 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
border-radius: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.not-found-code {
|
||||
color: var(--not-found-primary);
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 120px;
|
||||
font-weight: 400;
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.not-found-badge {
|
||||
padding: 8px 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: var(--not-found-primary);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.not-found-badge-text {
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.not-found-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.not-found-desc {
|
||||
margin: 0;
|
||||
color: var(--not-found-secondary);
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.not-found-search {
|
||||
width: min(524px, 100%);
|
||||
height: 52px;
|
||||
padding: 2px 2px 2px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--not-found-line);
|
||||
border-radius: 999px;
|
||||
background: var(--not-found-panel);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.not-found-search-input {
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.not-found-search-input:focus,
|
||||
.not-found-search-input:focus-visible {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.not-found-search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.not-found-search-btn,
|
||||
.not-found-btn-primary,
|
||||
.not-found-btn-secondary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.not-found-search-btn {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
background: var(--not-found-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.not-found-btn-primary,
|
||||
.not-found-btn-secondary {
|
||||
width: 148px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.not-found-btn-primary {
|
||||
background: var(--not-found-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.not-found-btn-secondary {
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: var(--not-found-line);
|
||||
color: var(--not-found-secondary);
|
||||
}
|
||||
|
||||
.not-found-search-btn,
|
||||
.not-found-btn-primary,
|
||||
.not-found-btn-secondary {
|
||||
transition: filter 160ms ease, transform 160ms ease, border-color 160ms ease;
|
||||
}
|
||||
|
||||
.not-found-search-btn:hover,
|
||||
.not-found-btn-primary:hover,
|
||||
.not-found-btn-secondary:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.not-found-search-btn:active,
|
||||
.not-found-btn-primary:active,
|
||||
.not-found-btn-secondary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.site-shell.is-404-page {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body.is-404-page .site-header {
|
||||
display: flex !important;
|
||||
position: fixed !important;
|
||||
top: env(safe-area-inset-top, 0px) !important;
|
||||
height: 48px !important;
|
||||
min-height: 48px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.not-found-page {
|
||||
flex: 1 0 auto;
|
||||
min-height: 100dvh;
|
||||
padding: calc(48px + env(safe-area-inset-top, 0px)) 16px 24px;
|
||||
background: radial-gradient(circle at 50% 38%, rgba(236, 35, 127, 0.08), transparent 45%), var(--not-found-bg);
|
||||
}
|
||||
|
||||
.not-found-card {
|
||||
width: min(343px, 100%);
|
||||
padding: 24px 0;
|
||||
gap: 16px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.not-found-code {
|
||||
font-size: 80px;
|
||||
line-height: 84px;
|
||||
}
|
||||
|
||||
.not-found-badge {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.not-found-badge-text {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.not-found-title {
|
||||
max-width: 100%;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.not-found-desc {
|
||||
max-width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.not-found-search {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 2px 2px 2px 16px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.not-found-search-input {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.not-found-search-btn {
|
||||
width: 82px;
|
||||
height: 44px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.not-found-btn-primary,
|
||||
.not-found-btn-secondary {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px) {
|
||||
.not-found-card {
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.not-found-code {
|
||||
font-size: 70px;
|
||||
line-height: 74px;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.not-found-btn-primary,
|
||||
.not-found-btn-secondary {
|
||||
width: 100%;
|
||||
flex-basis: 44px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,545 @@
|
||||
/* Application list page — Figma 1920: side padding 60, content 1800. */
|
||||
|
||||
.application-page-body {
|
||||
--site-footer-margin-top: 0;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
color: #fff;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.application-page {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
min-height: 0;
|
||||
padding: 40px 60px 36px;
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 36px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.application-breadcrumb {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 16px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.application-breadcrumb a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.application-breadcrumb a:hover,
|
||||
.application-breadcrumb a:focus-visible,
|
||||
.application-breadcrumb [aria-current="page"] {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.application-page-title {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font: 600 36px/1.35 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.app-category-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-category-tab {
|
||||
min-width: 119px;
|
||||
height: 50px;
|
||||
padding: 13px 24px;
|
||||
border-radius: 25px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.app-category-tab--active {
|
||||
background: #EC237F;
|
||||
color: #fff;
|
||||
border-color: #EC237F;
|
||||
}
|
||||
|
||||
.app-category-tab:hover,
|
||||
.app-category-tab:focus-visible {
|
||||
color: #fff;
|
||||
background: rgba(236, 35, 127, 0.18);
|
||||
border-color: rgba(236, 35, 127, 0.45);
|
||||
}
|
||||
|
||||
.app-category-tab--active:hover,
|
||||
.app-category-tab--active:focus-visible {
|
||||
color: #181818;
|
||||
background: #ec237f;
|
||||
border-color: #ec237f;
|
||||
}
|
||||
|
||||
.app-list-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.app-list-section__head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-list-section__title {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
font-size: 36px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.app-list-section__subtitle {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.app-list-section__subtitle--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-card-grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 24px 28px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
width: 120px;
|
||||
border-radius: 18px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transform: translateY(0);
|
||||
transition: transform 220ms ease, filter 220ms ease;
|
||||
}
|
||||
|
||||
.app-card:hover,
|
||||
.app-card:focus-visible {
|
||||
transform: translateY(-5px);
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.app-card:focus-visible {
|
||||
outline: 2px solid rgba(236, 35, 127, 0.85);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.app-card__icon-wrap {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.app-card__icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 260ms ease;
|
||||
}
|
||||
|
||||
.app-card:hover .app-card__icon,
|
||||
.app-card:focus-visible .app-card__icon {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.app-card__title {
|
||||
align-self: stretch;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.app-card__desc {
|
||||
align-self: stretch;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.app-list-section__more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
height: 50px;
|
||||
padding: 13px 24px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: #EC237F;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.app-list-section__more:hover,
|
||||
.app-list-section__more:focus-visible {
|
||||
color: #fff;
|
||||
background: #d91d70;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.app-list-section__more-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.app-list-section__more-icon--up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.app-list-section__more[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-list-section__empty {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.app-list-section--collapsible:not(.app-list-section--expanded) .app-card-grid--collapsible .app-card:nth-child(n + 9) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-list-section--expanded .app-card-grid--collapsible .app-card:nth-child(n + 9) {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* PC — scale with 1920 canvas */
|
||||
@media (min-width: 768px) {
|
||||
body.application-page-body {
|
||||
--app-s: min(1, 100vw / 1920px);
|
||||
}
|
||||
|
||||
.application-page {
|
||||
width: 100%;
|
||||
max-width: calc(1920px * var(--app-s));
|
||||
padding: calc(40px * var(--app-s)) calc(60px * var(--app-s)) calc(36px * var(--app-s));
|
||||
gap: calc(36px * var(--app-s));
|
||||
}
|
||||
|
||||
.application-breadcrumb {
|
||||
gap: calc(8px * var(--app-s));
|
||||
font-size: calc(16px * var(--app-s));
|
||||
line-height: calc(24px * var(--app-s));
|
||||
}
|
||||
|
||||
.application-page-title {
|
||||
font-size: calc(36px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-category-tabs {
|
||||
gap: calc(18px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-category-tab {
|
||||
min-width: calc(119px * var(--app-s));
|
||||
height: calc(50px * var(--app-s));
|
||||
padding: calc(13px * var(--app-s)) calc(24px * var(--app-s));
|
||||
border-radius: calc(25px * var(--app-s));
|
||||
font-size: calc(18px * var(--app-s));
|
||||
line-height: calc(24px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-list-section {
|
||||
gap: calc(24px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-list-section__head {
|
||||
gap: calc(12px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-list-section__title {
|
||||
font-size: calc(36px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-list-section__subtitle {
|
||||
font-size: calc(18px * var(--app-s));
|
||||
line-height: calc(24px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-card-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: calc(120px * var(--app-s) * 10 + 28px * var(--app-s) * 9);
|
||||
margin-inline: auto;
|
||||
gap: calc(24px * var(--app-s)) calc(28px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-card {
|
||||
width: calc(120px * var(--app-s));
|
||||
border-radius: calc(18px * var(--app-s));
|
||||
gap: calc(8px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-card__icon-wrap,
|
||||
.app-card__icon {
|
||||
width: calc(120px * var(--app-s));
|
||||
height: calc(120px * var(--app-s));
|
||||
border-radius: calc(18px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-card__title {
|
||||
font-size: calc(16px * var(--app-s));
|
||||
line-height: calc(22px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-card__desc {
|
||||
font-size: calc(12px * var(--app-s));
|
||||
line-height: calc(18px * var(--app-s));
|
||||
}
|
||||
|
||||
.app-list-section__more {
|
||||
height: calc(50px * var(--app-s));
|
||||
padding: calc(13px * var(--app-s)) calc(24px * var(--app-s));
|
||||
border-radius: calc(25px * var(--app-s));
|
||||
font-size: calc(18px * var(--app-s));
|
||||
line-height: calc(24px * var(--app-s));
|
||||
gap: calc(10px * var(--app-s));
|
||||
}
|
||||
|
||||
/* PC: 1 row = 10 cards before collapse */
|
||||
.app-list-section--collapsible:not(.app-list-section--expanded) .app-card-grid--collapsible .app-card:nth-child(n + 9) {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.app-list-section--collapsible:not(.app-list-section--expanded) .app-card-grid--collapsible .app-card:nth-child(n + 11) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-list-section--expanded .app-card-grid--collapsible .app-card:nth-child(n + 11) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.application-page-body {
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.application-page {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
gap: 24px;
|
||||
padding: 16px var(--site-shell-gutter) 12px;
|
||||
}
|
||||
|
||||
.application-breadcrumb {
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.application-page-title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.app-category-tabs {
|
||||
flex-wrap: nowrap;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.app-category-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-category-tab {
|
||||
min-width: 0;
|
||||
height: auto;
|
||||
padding: 6px 12px;
|
||||
border-radius: 25px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
flex-shrink: 0;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.app-category-tab--active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-list-section {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-list-section__title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.app-list-section:has(.app-list-section__subtitle--bold) .app-list-section__title {
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-list-section__subtitle {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.app-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
justify-content: stretch;
|
||||
gap: 14px 10px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.app-card__icon-wrap {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.app-card__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-card__title {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-card__desc {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.app-list-section__more {
|
||||
height: auto;
|
||||
padding: 10px 18px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.app-list-section__more-icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.app-list-section--expanded .app-card-grid--collapsible .app-card:nth-child(n + 9) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-card:hover,
|
||||
.app-card:focus-visible {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.app-category-tab,
|
||||
.app-card,
|
||||
.app-card__icon,
|
||||
.app-list-section__more,
|
||||
.app-list-section__more-icon {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.section-empty,
|
||||
.application-empty {
|
||||
width: 100%;
|
||||
padding: 32px 16px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/* Basic reset: keep layout deterministic */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0A0A0A;
|
||||
font-family: PingFang SC, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 去掉浏览器默认输入框 focus 光圈 / outline；组件可自行保留边框高亮 */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
input:focus-visible,
|
||||
textarea:focus,
|
||||
textarea:focus-visible,
|
||||
select:focus,
|
||||
select:focus-visible {
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #3A3A3A #0A0A0A;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #3A3A3A;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #4A4A4A;
|
||||
}
|
||||
|
||||
/* 语义标题：避免浏览器默认 h1–h3 margin 影响现有布局 */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/* 仅供爬虫/读屏的语义内容，不影响视觉布局 */
|
||||
.seo-visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.category-detail-copy {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.category-detail-description {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body.category-detail-body .category-detail-description {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.category-detail-page.page-shell {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.category-detail-hero {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.category-detail-copy {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.category-detail-description {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.category-detail-page .list-section-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
.coin-dialog-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.coin-dialog-mask.is-open { display: flex; }
|
||||
.coin-dialog-stack {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.coin-dialog-card {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
padding: 36px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: #fff;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40px;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
.coin-dialog-icon { width: 60px; height: 60px; flex: 0 0 auto; object-fit: contain; }
|
||||
.coin-dialog-title { color: #fff; font-size: 24px; font-weight: 600; line-height: 32px; text-align: center; }
|
||||
.coin-dialog-desc { color: rgba(255,255,255,.55); font-size: 16px; font-weight: 400; line-height: 22px; text-align: center; }
|
||||
.coin-dialog-balance {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(255,255,255,.05);
|
||||
border: 1px solid rgba(255,255,255,.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.coin-dialog-balance-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
|
||||
.coin-dialog-balance-col--end { align-items: flex-end; gap: 2px; }
|
||||
.coin-dialog-balance-label { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 400; line-height: 18px; }
|
||||
.coin-dialog-balance-value,
|
||||
.coin-dialog-balance-cost { color: #fff; font-size: 16px; font-weight: 600; line-height: 22px; }
|
||||
.coin-dialog-balance-cost { color: #ec237f; }
|
||||
.coin-dialog-hint { color: rgba(255,255,255,.55); font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; }
|
||||
.coin-dialog-actions { width: 100%; display: flex; gap: 18px; }
|
||||
.coin-dialog-download,
|
||||
.coin-dialog-cta {
|
||||
min-width: 0;
|
||||
min-height: 58px;
|
||||
padding: 18px 24px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.coin-dialog-download { background: linear-gradient(135deg, #ff5f6e 0%, #fe2a7f 50%, #8c206e 100%); }
|
||||
.coin-dialog-cta {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
color: #8b1a15;
|
||||
background: linear-gradient(180deg, #fbc297 0%, #fae1c0 100%);
|
||||
}
|
||||
.coin-dialog-cta-label-h5 { display: none; }
|
||||
.coin-dialog-cta-loading { display: none; }
|
||||
.coin-dialog-cta.is-loading,
|
||||
.coin-dialog-cta:disabled { opacity: .75; cursor: not-allowed; }
|
||||
.coin-dialog-cta.is-loading .coin-dialog-cta-label { display: none; }
|
||||
.coin-dialog-cta.is-loading .coin-dialog-cta-loading { display: inline; }
|
||||
.coin-dialog-recharge {
|
||||
width: 100%;
|
||||
color: #ec237f;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.coin-dialog-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
flex: 0 0 36px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.coin-dialog-close img { display: block; width: 36px; height: 36px; }
|
||||
@media (max-width: 767px) {
|
||||
.coin-dialog-mask {
|
||||
padding: 16px;
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.coin-dialog-stack { width: 300px; }
|
||||
.coin-dialog-card { width: 300px; padding: 24px 20px; border-radius: 20px; }
|
||||
.coin-dialog-title { font-size: 18px; line-height: 24px; }
|
||||
.coin-dialog-desc { font-size: 14px; line-height: 20px; }
|
||||
.coin-dialog-hint { font-size: 12px; line-height: 18px; }
|
||||
.coin-dialog-actions { flex-direction: column; gap: 18px; }
|
||||
.coin-dialog-download,
|
||||
.coin-dialog-cta {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 12px 24px;
|
||||
flex: none;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.coin-dialog-cta { padding-right: 48px; padding-left: 48px; }
|
||||
.coin-dialog-cta-label-pc { display: none; }
|
||||
.coin-dialog-cta-label-h5 { display: inline; }
|
||||
.coin-dialog-recharge { font-size: 14px; font-weight: 400; line-height: 20px; }
|
||||
}
|
||||
@@ -0,0 +1,489 @@
|
||||
.collect-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.collect-layout .site-header,
|
||||
.collect-layout .footer-box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collect-page {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 36px 0;
|
||||
background: #0A0A0A;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collect-pc {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.collect-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collect-main {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.collect-breadcrumb {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.collect-breadcrumb-link {
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.collect-breadcrumb-sep {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.collect-breadcrumb-current {
|
||||
color: #8A8A8A;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.collect-head {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.collect-title {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collect-desc {
|
||||
margin: 0;
|
||||
color: #A3A3A3;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.collect-tabs {
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.collect-tab {
|
||||
padding: 7px 16px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collect-tab--active {
|
||||
background: #EC237F;
|
||||
border: none;
|
||||
color: #181818;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.collect-grid {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.collect-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collect-card-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 3 / 4;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.collect-card-cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.collect-card-eps {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
height: 28px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(0, 0, 0, 0.60);
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.collect-card-body {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collect-card-title {
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
color: #F5F5F5;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.collect-card-desc {
|
||||
width: 100%;
|
||||
min-height: 18px;
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collect-card-meta {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.collect-card-tag {
|
||||
min-width: 0;
|
||||
color: #8A8A8A;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collect-card-spacer {
|
||||
flex: 1 1 0;
|
||||
min-width: 4px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.collect-card-progress {
|
||||
flex-shrink: 0;
|
||||
color: #808080;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collect-empty {
|
||||
width: 100%;
|
||||
grid-column: 1 / -1;
|
||||
padding: 48px 16px;
|
||||
text-align: center;
|
||||
color: #A3A3A3;
|
||||
}
|
||||
|
||||
.collect-pagination {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.collect-pagination .pagination {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.is-collect-page {
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
body.is-collect-page .site-header,
|
||||
body.is-collect-page .footer-box,
|
||||
body.is-collect-page .floating-action,
|
||||
body.is-collect-page .download-fab {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-layout {
|
||||
min-height: 100vh;
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-page {
|
||||
padding: 0;
|
||||
background: #0A0A0A;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-nav-back {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-nav-back img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
opacity: 0.65;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-nav-title {
|
||||
margin: 0;
|
||||
flex: 1 1 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-nav-spacer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-main {
|
||||
width: calc(100% - 32px);
|
||||
max-width: 343px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 0;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-tabs {
|
||||
width: auto;
|
||||
height: 42px;
|
||||
padding: 4px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
align-self: flex-start;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-tab {
|
||||
width: 109px;
|
||||
flex: 0 0 109px;
|
||||
min-width: 109px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-tab--active {
|
||||
background: #EC237F;
|
||||
color: #171717;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
justify-content: stretch;
|
||||
gap: 12px 7px;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-body {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-title {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-desc {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-tag {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-progress {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-cover {
|
||||
height: 0;
|
||||
padding-bottom: calc(224 / 168 * 100%);
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-card-cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.is-collect-page .collect-pagination {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,864 @@
|
||||
.content-layout {
|
||||
--site-footer-margin-top: min(30px, 1.5625vw);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0f0f0f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.site-shell.content-layout {
|
||||
--site-footer-margin-top: min(30px, 1.5625vw);
|
||||
}
|
||||
|
||||
.content-layout .site-header,
|
||||
.content-layout .footer-box,
|
||||
.content-layout .home-mobile-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content-layout .download-fab,
|
||||
.content-layout .floating-action {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
width: 100%;
|
||||
flex: 1 0 auto;
|
||||
padding: min(30px, 1.5625vw) 60px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(30px, 1.5625vw);
|
||||
box-sizing: border-box;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.content-page.richtext-page,
|
||||
.content-page.feedback-page {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.content-pc,
|
||||
.content-main,
|
||||
.feedback-shell,
|
||||
.feedback-pc {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(30px, 1.5625vw);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-nav,
|
||||
.feedback-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(8px, 0.416667vw);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(14px, 0.9375vw, 18px)/1.35 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-breadcrumb a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.content-breadcrumb a:hover,
|
||||
.content-breadcrumb a:focus-visible,
|
||||
.content-breadcrumb-current {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.content-breadcrumb-sep {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.content-head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(8px, 0.416667vw);
|
||||
}
|
||||
|
||||
.content-title {
|
||||
margin: 0;
|
||||
color: #f5f5f5;
|
||||
font: 700 clamp(24px, 1.666667vw, 32px)/1.1875 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-subtitle {
|
||||
margin: 0;
|
||||
color: #a3a3a3;
|
||||
font: 400 clamp(12px, 0.729167vw, 14px)/1.43 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
width: 100%;
|
||||
padding: min(36px, 1.875vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(36px, 1.875vw);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: min(20px, 1.041667vw);
|
||||
}
|
||||
|
||||
.content-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(14px, 0.729167vw);
|
||||
}
|
||||
|
||||
.content-section-title,
|
||||
.legal-heading {
|
||||
margin: 0;
|
||||
color: #f5f5f5;
|
||||
font: 700 clamp(16px, 1.041667vw, 20px)/1.3 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-section-text,
|
||||
.legal-copy {
|
||||
margin: 0;
|
||||
color: #a3a3a3;
|
||||
font: 400 clamp(12px, 0.729167vw, 14px)/1.43 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-section-text--accent {
|
||||
color: #ec237f;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.content-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
flex: 0 0 1px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.content-updated {
|
||||
color: #a3a3a3;
|
||||
font: 400 clamp(11px, 0.625vw, 12px)/1.5 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.about-contact-card {
|
||||
width: 100%;
|
||||
padding: min(36px, 1.875vw);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: min(100px, 5.208333vw);
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: min(20px, 1.041667vw);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.about-contact-item {
|
||||
min-width: min(120px, 6.25vw);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: min(24px, 1.25vw);
|
||||
color: #fff;
|
||||
font: 400 clamp(16px, 1.25vw, 24px)/1.25 "PingFang SC", sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.about-contact-icon {
|
||||
width: min(120px, 6.25vw);
|
||||
height: min(120px, 6.25vw);
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.about-contact-label {
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.about-contact-item:hover,
|
||||
.about-contact-item:focus-visible {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.legal-article,
|
||||
.content-card--faq {
|
||||
padding: min(60px, 3.125vw);
|
||||
gap: min(18px, 0.9375vw);
|
||||
border-radius: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.legal-copy {
|
||||
white-space: pre-line;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-faq-heading {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 600 clamp(16px, 0.9375vw, 18px)/1.35 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-faq-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: min(8px, 0.416667vw);
|
||||
}
|
||||
|
||||
.content-faq-q {
|
||||
color: #fff;
|
||||
font: 600 clamp(12px, 0.729167vw, 14px)/1.43 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.content-faq-a {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
/* Feedback form */
|
||||
.feedback-page,
|
||||
.feedback-shell,
|
||||
.feedback-main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feedback-main,
|
||||
.feedback-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feedback-form {
|
||||
width: 100%;
|
||||
padding: min(60px, 3.125vw) min(120px, 6.25vw);
|
||||
align-items: stretch;
|
||||
gap: min(36px, 1.875vw);
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 0;
|
||||
border-radius: min(60px, 3.125vw);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.feedback-form-intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: min(12px, 0.625vw);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feedback-form-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 400 clamp(18px, 1.25vw, 24px)/1.33 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.feedback-form-desc,
|
||||
.feedback-note {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.feedback-field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: min(16px, 0.833333vw);
|
||||
}
|
||||
|
||||
.feedback-field--type { order: 1; }
|
||||
.feedback-field--frequency { order: 2; }
|
||||
.feedback-field--network { order: 3; }
|
||||
.feedback-field--device { order: 4; }
|
||||
.feedback-field--device ~ .feedback-field { order: 5; }
|
||||
.feedback-submit { order: 8; }
|
||||
.feedback-note { order: 9; }
|
||||
|
||||
.feedback-label {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 600 clamp(14px, 0.9375vw, 18px)/1.33 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.feedback-label span {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.feedback-panel {
|
||||
width: 100%;
|
||||
padding: min(24px, 1.25vw) min(36px, 1.875vw);
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 0;
|
||||
border-radius: min(24px, 1.25vw);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.feedback-chip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.feedback-chip {
|
||||
height: min(46px, 2.395833vw);
|
||||
min-height: 0;
|
||||
padding: 0 min(24px, 1.25vw);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: min(12px, 0.625vw);
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
font: 400 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-chip.is-active,
|
||||
.feedback-chip:hover,
|
||||
.feedback-chip:focus-visible {
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
border-color: #ec237f;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.feedback-chip-list--equal .feedback-chip {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.feedback-chip-list--compact .feedback-chip {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.feedback-detail-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.feedback-minor-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 500 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.feedback-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.feedback-control {
|
||||
width: 100%;
|
||||
min-height: min(70px, 3.645833vw);
|
||||
padding: min(20px, 1.041667vw) min(24px, 1.25vw);
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
caret-color: #ec237f;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: min(24px, 1.25vw);
|
||||
font: 400 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.feedback-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.feedback-control:focus {
|
||||
outline: none;
|
||||
border-color: rgba(236, 35, 127, 0.7);
|
||||
}
|
||||
|
||||
.feedback-select-control {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding-right: min(56px, 2.916667vw);
|
||||
background-image: url('/static/images/tringle_down.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right min(24px, 1.25vw) center;
|
||||
background-size: min(12px, 0.625vw) min(12px, 0.625vw);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-select-control:has(option:checked[disabled]),
|
||||
.feedback-select-control.is-placeholder,
|
||||
.feedback-select-control option[disabled] {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.feedback-select-control option {
|
||||
color: #fff;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.feedback-select-control:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.feedback-select-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feedback-select-native {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
min-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.feedback-select-trigger {
|
||||
width: 100%;
|
||||
height: min(58px, 3.020833vw);
|
||||
padding: 0 min(56px, 2.916667vw) 0 min(24px, 1.25vw);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: min(12px, 0.625vw);
|
||||
color: #fff;
|
||||
background: transparent url('/static/images/tringle_down.svg') no-repeat right min(24px, 1.25vw) center / min(12px, 0.625vw) min(12px, 0.625vw);
|
||||
font: 400 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.feedback-select-trigger.is-placeholder,
|
||||
.feedback-select-trigger:disabled {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.feedback-select-trigger:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.feedback-select-trigger:hover:not(:disabled),
|
||||
.feedback-select-trigger:focus-visible,
|
||||
.feedback-select-wrap.is-open .feedback-select-trigger {
|
||||
border-color: #ec237f;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.feedback-select-wrap.is-open .feedback-select-trigger {
|
||||
background-color: #1f1f21;
|
||||
}
|
||||
|
||||
.feedback-select-menu {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: calc(100% + min(8px, 0.416667vw));
|
||||
right: 0;
|
||||
left: 0;
|
||||
max-height: min(260px, 13.541667vw);
|
||||
padding: min(8px, 0.416667vw);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: min(12px, 0.625vw);
|
||||
background: #1f1f21;
|
||||
box-shadow: 0 min(14px, 0.729167vw) min(32px, 1.666667vw) rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.feedback-select-menu[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feedback-select-menu::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.feedback-select-menu::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.feedback-select-menu::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(236, 35, 127, 0.7);
|
||||
}
|
||||
|
||||
.feedback-select-menu-option {
|
||||
width: 100%;
|
||||
min-height: min(42px, 2.1875vw);
|
||||
padding: min(10px, 0.520833vw) min(14px, 0.729167vw);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: min(8px, 0.416667vw);
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
background: transparent;
|
||||
font: 400 clamp(12px, 0.833333vw, 16px)/1.375 "PingFang SC", sans-serif;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-select-menu-option:hover,
|
||||
.feedback-select-menu-option:focus-visible {
|
||||
color: #fff;
|
||||
background: rgba(236, 35, 127, 0.18);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.feedback-select-menu-option.is-selected {
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
.feedback-detail-panel .feedback-control {
|
||||
height: min(58px, 3.020833vw);
|
||||
min-height: min(58px, 3.020833vw);
|
||||
padding: 0 min(24px, 1.25vw);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: min(12px, 0.625vw);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.feedback-detail-panel .feedback-select-control {
|
||||
padding-right: min(56px, 2.916667vw);
|
||||
}
|
||||
|
||||
.feedback-textarea-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feedback-control--textarea {
|
||||
height: min(323px, 16.822917vw);
|
||||
min-height: 240px;
|
||||
padding-bottom: min(54px, 2.8125vw);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.feedback-counter {
|
||||
position: absolute;
|
||||
right: min(24px, 1.25vw);
|
||||
bottom: min(24px, 1.25vw);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(11px, 0.729167vw, 14px)/1.43 "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.feedback-upload-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
.feedback-upload-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.feedback-upload-list[hidden] { display: none; }
|
||||
|
||||
.feedback-upload-item {
|
||||
position: relative;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.feedback-upload-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.feedback-upload-remove {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-upload {
|
||||
position: relative;
|
||||
width: min(300px, 15.625vw);
|
||||
height: min(300px, 15.625vw);
|
||||
min-width: 200px;
|
||||
min-height: 200px;
|
||||
padding: min(24px, 1.25vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: min(24px, 1.25vw);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: min(24px, 1.25vw);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-upload.is-full { display: none; }
|
||||
|
||||
.feedback-upload-input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.feedback-upload-mark {
|
||||
width: min(60px, 3.125vw);
|
||||
height: min(60px, 3.125vw);
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.feedback-upload-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: min(6px, 0.3125vw);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(12px, 0.729167vw, 14px)/1.5 "PingFang SC", sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feedback-upload-copy strong {
|
||||
color: #fff;
|
||||
font-size: clamp(14px, 0.833333vw, 16px);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feedback-submit {
|
||||
width: 100%;
|
||||
height: min(58px, 3.020833vw);
|
||||
min-height: 0;
|
||||
padding: 0 min(90px, 4.6875vw);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #ec237f;
|
||||
color: #fff;
|
||||
font: 400 clamp(14px, 0.9375vw, 18px)/1.33 "PingFang SC", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-submit:disabled { opacity: 0.65; cursor: wait; }
|
||||
.feedback-note { text-align: center; }
|
||||
|
||||
/* Dynamic rich-text pages share the same shell. */
|
||||
.richtext-article { gap: min(28px, 1.458333vw); }
|
||||
.richtext-body {
|
||||
width: 100%;
|
||||
color: #a3a3a3;
|
||||
font: 400 clamp(12px, 0.729167vw, 14px)/1.55 "PingFang SC", sans-serif;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.richtext-body h1, .richtext-body h2, .richtext-body h3, .richtext-body h4 { margin: 0 0 14px; color: #fff; }
|
||||
.richtext-body p, .richtext-body ul, .richtext-body ol, .richtext-body table { margin: 0 0 14px; }
|
||||
.richtext-body img { max-width: 100%; height: auto; }
|
||||
.richtext-body a { color: #ec237f; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.content-layout {
|
||||
--site-footer-margin-top: 18px;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.site-shell.content-layout {
|
||||
--site-footer-margin-top: 18px;
|
||||
}
|
||||
|
||||
.content-page,
|
||||
body.is-feedback-page .content-page.feedback-page,
|
||||
body.is-richtext-page .content-page.richtext-page {
|
||||
flex: 0 0 auto;
|
||||
padding: 12px 16px 0;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.content-pc, .content-main, .feedback-shell, .feedback-pc { width: 100%; gap: 18px; }
|
||||
.content-head { display: none; }
|
||||
.content-breadcrumb { gap: 4px; font-size: 12px; line-height: 18px; }
|
||||
|
||||
.content-card {
|
||||
padding: 24px 20px;
|
||||
gap: 18px;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.content-section { gap: 14px; }
|
||||
.content-section-title, .legal-heading, .content-faq-heading { font-size: 16px; line-height: 22px; }
|
||||
.content-section-text, .content-updated, .legal-copy, .content-faq-a { font-size: 12px; line-height: 18px; }
|
||||
.content-section-text, .legal-copy { color: #fff; }
|
||||
.content-divider { background: rgba(255, 255, 255, 0.1); }
|
||||
|
||||
.about-contact-card {
|
||||
padding: 24px 16px;
|
||||
gap: 20px 12px;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 18px;
|
||||
}
|
||||
.about-contact-item {
|
||||
min-width: calc((100% - 24px) / 3);
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.about-contact-icon { width: 56px; height: 56px; }
|
||||
|
||||
.legal-article, .content-card--faq { padding: 24px 20px; gap: 18px; border-radius: 18px; }
|
||||
.content-faq-item { gap: 8px; }
|
||||
.content-faq-q { font-size: 14px; line-height: 20px; }
|
||||
|
||||
.feedback-main { width: 100%; }
|
||||
.feedback-form {
|
||||
padding: 24px 20px;
|
||||
gap: 18px;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 18px;
|
||||
}
|
||||
.feedback-form-intro { display: none; }
|
||||
.feedback-field--type { order: 1; }
|
||||
.feedback-field--network { order: 2; }
|
||||
.feedback-field--frequency { order: 3; }
|
||||
.feedback-field--device { order: 4; }
|
||||
.feedback-field { gap: 12px; }
|
||||
.feedback-label { font-size: 14px; line-height: 20px; }
|
||||
.feedback-label--responsive-star { display: flex; }
|
||||
.feedback-label--responsive-star span { order: -1; }
|
||||
.feedback-panel { padding: 24px 18px; border-radius: 24px; }
|
||||
.feedback-chip-list { gap: 12px; }
|
||||
.feedback-chip {
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
padding: 0 11px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.feedback-chip-list--equal .feedback-chip { flex: 1 1 calc(50% - 6px); }
|
||||
.feedback-detail-panel { gap: 12px; }
|
||||
.feedback-minor-label { font-size: 12px; line-height: 18px; }
|
||||
.feedback-grid { grid-template-columns: 1fr; gap: 12px; }
|
||||
.feedback-control {
|
||||
height: 68px;
|
||||
min-height: 68px;
|
||||
padding: 0 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.feedback-detail-panel .feedback-control {
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
padding: 0 18px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.feedback-select-control {
|
||||
padding-right: 44px;
|
||||
background-position: right 18px center;
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
.feedback-select-trigger {
|
||||
height: 42px;
|
||||
padding: 0 44px 0 18px;
|
||||
border-radius: 12px;
|
||||
background-position: right 18px center;
|
||||
background-size: 10px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.feedback-select-menu {
|
||||
top: calc(100% + 6px);
|
||||
max-height: 224px;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.58);
|
||||
}
|
||||
.feedback-select-menu-option {
|
||||
min-height: 38px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.feedback-control--textarea {
|
||||
height: 267px;
|
||||
min-height: 267px;
|
||||
padding: 24px 24px 54px;
|
||||
border-radius: 24px;
|
||||
resize: none;
|
||||
}
|
||||
.feedback-counter { right: 24px; bottom: 24px; font-size: 12px; line-height: 18px; }
|
||||
.feedback-upload-item { width: 72px; height: 72px; }
|
||||
.feedback-upload {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
min-width: 160px;
|
||||
min-height: 160px;
|
||||
padding: 24px;
|
||||
gap: 12px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.feedback-upload-mark { width: 24px; height: 24px; }
|
||||
.feedback-upload-copy { gap: 6px; font-size: 12px; line-height: 18px; }
|
||||
.feedback-upload-copy strong { font-size: 14px; line-height: 20px; }
|
||||
.feedback-submit { height: 58px; min-height: 58px; padding: 0 20px; font-size: 16px; line-height: 22px; }
|
||||
.feedback-note { font-size: 12px; line-height: 18px; text-align: left; }
|
||||
.richtext-article { padding: 24px 20px; }
|
||||
.richtext-body { font-size: 12px; line-height: 18px; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.content-page { padding: 28px 32px 0; }
|
||||
.content-page.richtext-page,
|
||||
.content-page.feedback-page { padding-bottom: 60px; }
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,93 @@
|
||||
.dialog-ad-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1900;
|
||||
padding: 24px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
background: rgba(0, 0, 0, 0.70);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog-ad-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dialog-ad-panel {
|
||||
width: min(400px, calc(100vw - 48px));
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dialog-ad-panel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog-ad-media {
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.dialog-ad-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dialog-ad-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex: 0 0 36px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.dialog-ad-close img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dialog-ad-close:hover,
|
||||
.dialog-ad-close:focus-visible {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dialog-ad-mask {
|
||||
padding: 16px;
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.dialog-ad-panel {
|
||||
width: min(300px, calc(100vw - 32px));
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.dialog-ad-media {
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dialog-ad-close {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
.download-app-page {
|
||||
width: 100%;
|
||||
min-height: 703px;
|
||||
padding: 72px 20px;
|
||||
background: radial-gradient(ellipse 50% 50% at 50% 50%, #210F2E 0%, #0A0A0A 100%);
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.download-app-dialog {
|
||||
width: 760px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
background: linear-gradient(90deg, #2B1233 0%, #101F41 100%);
|
||||
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.download-app-title {
|
||||
left: 28px;
|
||||
top: 22px;
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.download-app-subtitle {
|
||||
left: 28px;
|
||||
top: 60px;
|
||||
position: absolute;
|
||||
color: #A49DB4;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.download-app-divider {
|
||||
width: 760px;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 92px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.download-app-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
left: 700px;
|
||||
top: 24px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
color: #BCB7C8;
|
||||
font-size: 20px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.download-app-feature {
|
||||
width: 440px;
|
||||
height: 102px;
|
||||
left: 28px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.download-app-feature--1 {
|
||||
top: 116px;
|
||||
}
|
||||
|
||||
.download-app-feature--2 {
|
||||
top: 232px;
|
||||
}
|
||||
|
||||
.download-app-feature--3 {
|
||||
top: 348px;
|
||||
}
|
||||
|
||||
.download-app-feature-title {
|
||||
left: 18px;
|
||||
top: 15px;
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.download-app-feature-desc {
|
||||
left: 18px;
|
||||
top: 50px;
|
||||
right: 18px;
|
||||
position: absolute;
|
||||
color: #A6A0B5;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.download-app-qr-panel {
|
||||
width: 236px;
|
||||
height: 334px;
|
||||
left: 492px;
|
||||
top: 116px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.download-app-platform-tabs {
|
||||
left: 18px;
|
||||
top: 16px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.download-app-platform {
|
||||
height: 30px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.download-app-platform--active {
|
||||
background: #EC237F;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.download-app-qr-box {
|
||||
width: 184px;
|
||||
height: 184px;
|
||||
left: 26px;
|
||||
top: 58px;
|
||||
position: absolute;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.download-app-qr-img {
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.download-app-copy {
|
||||
width: 204px;
|
||||
height: 42px;
|
||||
left: 16px;
|
||||
top: 254px;
|
||||
position: absolute;
|
||||
background: #EC237F;
|
||||
overflow: hidden;
|
||||
border-radius: 21px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.download-app-qr-hint {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
top: 306px;
|
||||
position: absolute;
|
||||
color: #918A9E;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
.download-app-dialog-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.download-app-dialog-mask.is-open { display: flex; }
|
||||
.download-app-dialog-stack {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.download-app-dialog-card {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
padding: 36px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: #fff;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40px;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
.download-app-dialog-brand { position: relative; display: block; width: 183px; height: 49px; }
|
||||
.download-app-dialog-brand img { position: absolute; top: -4px; left: 0; display: block; width: 183px; height: 57px; object-fit: contain; }
|
||||
.download-app-dialog-title {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
.download-app-dialog-desc {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.download-app-dialog-qr {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.download-app-dialog-qr > img,
|
||||
.download-app-dialog-qr > canvas {
|
||||
display: block;
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
flex: 0 0 auto;
|
||||
object-fit: contain;
|
||||
background: #fff;
|
||||
}
|
||||
.download-app-dialog-url {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: #ec237f;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.download-app-dialog-url:hover { color: #ff5b9f; }
|
||||
.download-app-dialog-cta { display: none; }
|
||||
.download-app-dialog-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
flex: 0 0 36px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.download-app-dialog-close img { display: block; width: 36px; height: 36px; }
|
||||
@media (max-width: 767px) {
|
||||
.download-app-dialog-mask {
|
||||
padding: 16px;
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.download-app-dialog-stack { width: 300px; }
|
||||
.download-app-dialog-card {
|
||||
width: 300px;
|
||||
padding: 24px 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.download-app-dialog-brand { width: 127px; height: 34px; }
|
||||
.download-app-dialog-brand img { top: -3px; width: 127px; height: 40px; }
|
||||
.download-app-dialog-title { font-size: 14px; line-height: 20px; }
|
||||
.download-app-dialog-desc { font-size: 12px; line-height: 18px; }
|
||||
.download-app-dialog-cta {
|
||||
align-self: stretch;
|
||||
min-height: 46px;
|
||||
padding: 12px 24px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, #ff5f6e 0%, #fe2a7f 50%, #8c206e 100%);
|
||||
border-radius: 9px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
.download-fab {
|
||||
width: 132px;
|
||||
height: 44px;
|
||||
position: fixed;
|
||||
right: max(24px, calc((100vw - 1800px) / 2));
|
||||
bottom: 138px;
|
||||
z-index: 10;
|
||||
background: #EC237F;
|
||||
overflow: hidden;
|
||||
border-radius: 22px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease, filter 0.18s ease;
|
||||
}
|
||||
|
||||
.download-fab:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.download-fab.is-scrolling {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
|
||||
.download-fab-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.download-fab-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body[class] .download-fab {
|
||||
width: 132px;
|
||||
height: 44px;
|
||||
right: max(24px, calc((100vw - 1800px) / 2));
|
||||
bottom: 138px;
|
||||
display: flex !important;
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
body[class] .download-fab-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
body[class] .download-fab-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body[class] .download-fab {
|
||||
display: flex !important;
|
||||
width: 132px !important;
|
||||
height: 44px !important;
|
||||
right: 16px !important;
|
||||
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
|
||||
z-index: 80;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 22px;
|
||||
background: #EC237F;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
body[class] .download-fab-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex: 0 0 24px;
|
||||
}
|
||||
|
||||
body[class] .download-fab-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
body[class].is-detail-page .download-fab,
|
||||
body[class].is-play-page .download-fab {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.download-fab {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,382 @@
|
||||
.edit-password-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
.edit-password-layout .site-header,
|
||||
.edit-password-layout .footer-box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-password-page {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
padding: 36px 0 48px;
|
||||
background: #0A0A0A;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-password-pc {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.edit-password-breadcrumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.edit-password-breadcrumb-link {
|
||||
color: #EC237F;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, "Noto Sans SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.edit-password-breadcrumb-sep {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, "Noto Sans SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.edit-password-breadcrumb-current {
|
||||
color: #8A8A8A;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, "Noto Sans SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.edit-password-pc-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.edit-password-pc-title {
|
||||
margin: 0;
|
||||
color: #F5F5F5;
|
||||
font-size: 30px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.edit-password-pc-desc {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.edit-password-shell {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.edit-password-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-password-form {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-password-intro {
|
||||
width: 100%;
|
||||
height: 86px;
|
||||
min-height: 86px;
|
||||
padding: 14px 16px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-password-intro-title {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 18px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.edit-password-intro-desc {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.edit-password-field {
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
min-height: 78px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-password-field.is-error {
|
||||
height: auto;
|
||||
min-height: 78px;
|
||||
border-color: rgba(255, 107, 107, 0.65);
|
||||
}
|
||||
|
||||
.edit-password-error {
|
||||
margin: 0;
|
||||
color: #FF6B6B;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.edit-password-error[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-password-label {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.edit-password-input-row {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
min-height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-password-input {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.edit-password-input:focus,
|
||||
.edit-password-input:focus-visible {
|
||||
border: none;
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.edit-password-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.40);
|
||||
}
|
||||
|
||||
.edit-password-toggle {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.edit-password-submit {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #EC237F;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
color: #171717;
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-password-submit:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.edit-password-reset {
|
||||
width: 100%;
|
||||
min-height: 18px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.is-edit-password-page {
|
||||
background: #0A0A0A;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.is-edit-password-page .site-header,
|
||||
body.is-edit-password-page .footer-box,
|
||||
body.is-edit-password-page .floating-action,
|
||||
body.is-edit-password-page .download-fab {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.edit-password-page {
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.edit-password-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-password-shell {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-password-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #181818;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-password-back {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-password-back img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
opacity: 0.65;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.edit-password-nav-title {
|
||||
flex: 1 1 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #F5F5F5;
|
||||
font-size: 18px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-password-nav-spacer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-password-form {
|
||||
width: calc(100% - 32px);
|
||||
max-width: 343px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,347 @@
|
||||
.edit-profile-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
.edit-profile-layout .site-header,
|
||||
.edit-profile-layout .footer-box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-profile-page {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
background: #0A0A0A;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-profile-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-breadcrumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.setting-breadcrumb-link {
|
||||
color: #EC237F;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.setting-breadcrumb-sep {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.setting-breadcrumb-current {
|
||||
color: #8A8A8A;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.edit-profile-h5 {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-profile-h5-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #181818;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-profile-h5-back {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-profile-h5-back img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
opacity: 0.65;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.edit-profile-h5-nav-title {
|
||||
flex: 1 1 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #F5F5F5;
|
||||
font-size: 18px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-profile-h5-nav-spacer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-profile-h5-body {
|
||||
width: calc(100% - 32px);
|
||||
max-width: 343px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 14px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-profile-avatar-card {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-profile-avatar-text {
|
||||
width: 190px;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-profile-avatar-title {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.edit-profile-avatar-desc {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.edit-profile-avatar-wrap {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-profile-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border: 1px solid rgba(250, 220, 68, 0.35);
|
||||
}
|
||||
|
||||
.edit-profile-field {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
min-height: 76px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-profile-field--bio {
|
||||
height: 96px;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.edit-profile-field-label {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.edit-profile-field-input {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-profile-field-input:focus,
|
||||
.edit-profile-field-input:focus-visible {
|
||||
border: none;
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.edit-profile-field-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.40);
|
||||
}
|
||||
|
||||
.edit-profile-field-input--bio {
|
||||
resize: none;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.edit-profile-submit {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #EC237F;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
color: #171717;
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.edit-profile-submit:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.edit-profile-tip {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.40);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.edit-profile-page {
|
||||
padding: 36px 0 60px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.edit-profile-pc {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.edit-profile-h5 {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.edit-profile-h5-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-profile-h5-body {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.is-edit-profile-page {
|
||||
background: #0A0A0A;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.is-edit-profile-page .site-header,
|
||||
body.is-edit-profile-page .footer-box,
|
||||
body.is-edit-profile-page .floating-action {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.edit-profile-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-profile-h5 {
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
.eight-pop-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: rgba(0, 0, 0, 0.76);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.eight-pop-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.eight-pop-dialog {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.eight-pop-card {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
padding: 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 36px;
|
||||
overflow: hidden;
|
||||
color: #FFFFFF;
|
||||
background: #0D0D0D;
|
||||
border: 1px solid rgba(255, 255, 255, 0.20);
|
||||
border-radius: 40px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.eight-pop-icon {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
display: block;
|
||||
flex: 0 0 78px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.eight-pop-copy {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.eight-pop-title {
|
||||
margin: 0;
|
||||
min-height: 36px;
|
||||
color: #FFFFFF;
|
||||
font: 400 24px/32px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.eight-pop-desc {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: #FFFFFF;
|
||||
font: 400 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.eight-pop-actions {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.eight-pop-btn {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
flex: 0 0 46px;
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: #FFFFFF;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font: 600 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-align: center;
|
||||
transition: filter 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.eight-pop-btn--confirm {
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
.eight-pop-btn--exit {
|
||||
background: #1A1A1A;
|
||||
}
|
||||
|
||||
.eight-pop-btn:hover,
|
||||
.eight-pop-btn:focus-visible {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.eight-pop-btn:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.eight-pop-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
flex: 0 0 36px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.eight-pop-close img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.eight-pop-close:hover,
|
||||
.eight-pop-close:focus-visible {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.eight-pop-mask {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.eight-pop-dialog {
|
||||
width: 300px;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.eight-pop-card {
|
||||
width: 300px;
|
||||
padding: 24px 20px;
|
||||
gap: 18px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.eight-pop-copy {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.eight-pop-title {
|
||||
min-height: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.eight-pop-desc {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.eight-pop-actions {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.eight-pop-btn {
|
||||
height: 50px;
|
||||
flex-basis: 50px;
|
||||
padding: 13px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.eight-pop-btn--exit {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.eight-pop-btn,
|
||||
.eight-pop-close {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
.empty-state {
|
||||
width: 100%;
|
||||
min-height: 480px;
|
||||
padding: 128px 20px 96px;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-illus {
|
||||
width: 220px;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-illus-glow {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
left: 30px;
|
||||
top: 4px;
|
||||
position: absolute;
|
||||
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(250, 220, 68, 0.30) 0%, rgba(250, 220, 68, 0) 100%);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.empty-illus-card {
|
||||
width: 132px;
|
||||
height: 84px;
|
||||
left: 44px;
|
||||
top: 62px;
|
||||
position: absolute;
|
||||
background: #242424;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 2px solid #EC237F;
|
||||
}
|
||||
|
||||
.empty-illus-line {
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.empty-illus-line--1 {
|
||||
width: 64px;
|
||||
height: 8px;
|
||||
left: 34px;
|
||||
top: 22px;
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
.empty-illus-line--2 {
|
||||
width: 76px;
|
||||
height: 6px;
|
||||
left: 28px;
|
||||
top: 44px;
|
||||
background: #666666;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.empty-illus-line--3 {
|
||||
width: 46px;
|
||||
height: 6px;
|
||||
left: 43px;
|
||||
top: 58px;
|
||||
background: #F5F5F5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.empty-illus-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
background: #EC237F;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.empty-illus-dot--1 {
|
||||
left: 28px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.empty-illus-dot--2 {
|
||||
left: 182px;
|
||||
top: 54px;
|
||||
}
|
||||
|
||||
.empty-illus-dot--3 {
|
||||
left: 174px;
|
||||
top: 134px;
|
||||
}
|
||||
|
||||
.empty-copy {
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
color: #A3A3A3;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.empty-actions {
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
border-radius: 22px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.empty-btn--primary {
|
||||
background: #EC237F;
|
||||
color: #181818;
|
||||
}
|
||||
|
||||
.empty-btn--secondary {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
color: #D4D4D4;
|
||||
}
|
||||
@@ -0,0 +1,970 @@
|
||||
.footer-box {
|
||||
background-color: #181818;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-social-home {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.footer-social-home-item {
|
||||
border-radius: 50%;
|
||||
transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
/* Homepage PC footer — exact 1920px Figma proportions with viewport scaling. */
|
||||
@media (min-width: 1024px) {
|
||||
body.home-page .footer-box {
|
||||
min-height: min(252px, 13.125vw);
|
||||
background: #282828;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
body.home-page .footer-outer {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
min-height: min(251px, 13.072917vw);
|
||||
padding: min(24px, 1.25vw) 0;
|
||||
gap: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-main {
|
||||
gap: min(32px, 1.666667vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-product {
|
||||
gap: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-brand {
|
||||
gap: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-logo {
|
||||
width: min(178px, 9.270833vw);
|
||||
height: min(49px, 2.552083vw);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
body.home-page .footer-brand .footer-muted-text {
|
||||
font-size: clamp(14px, 0.9375vw, 18px);
|
||||
line-height: clamp(20px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.home-page .footer-contact {
|
||||
gap: min(4px, 0.208333vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-contact-line,
|
||||
body.home-page .footer-links {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.home-page .footer-links {
|
||||
gap: min(15px, 0.78125vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-links a + a {
|
||||
padding-left: min(16px, 0.833333vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-links a + a::before {
|
||||
height: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-bottom {
|
||||
min-height: min(38px, 1.979167vw);
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-copy {
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.home-page .footer-social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.home-page .footer-social-home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(16px, 0.833333vw);
|
||||
}
|
||||
|
||||
body.home-page .footer-social-home-item,
|
||||
body.home-page .footer-social-home-item img {
|
||||
width: min(38px, 1.979167vw);
|
||||
height: min(38px, 1.979167vw);
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-muted-text {
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.footer-outer {
|
||||
align-self: stretch;
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
padding: 36px 0;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.footer-brand-lockup {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.footer-brand-lockup:hover,
|
||||
.footer-brand-lockup:focus-visible {
|
||||
opacity: 0.82;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: auto;
|
||||
height: 36px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer-icon-link--h5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
align-self: stretch;
|
||||
height: 24px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover,
|
||||
.footer-links a:focus-visible {
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-contact-line {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
a.footer-contact-line:hover,
|
||||
a.footer-contact-line:focus-visible {
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.footer-icon-link {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.footer-icon-link:hover,
|
||||
.footer-icon-link:focus-visible,
|
||||
a.footer-social-home-item:hover,
|
||||
a.footer-social-home-item:focus-visible {
|
||||
background-color: rgba(250, 220, 68, 0.18);
|
||||
box-shadow: 0 0 0 1px rgba(250, 220, 68, 0.45);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.footer-contact-sep {
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-icon-outer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.footer-icon-divider {
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-social-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h5-tabbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.footer-outer {
|
||||
padding-left: 48px;
|
||||
padding-right: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.footer-box {
|
||||
background: #0A0A0A;
|
||||
padding: 0 16px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer-outer {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 18px 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
gap: 4px;
|
||||
order: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-brand-lockup {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: auto;
|
||||
height: 32px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-brand .footer-muted-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
order: 2;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
order: 3;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
white-space: normal;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.footer-links a + a {
|
||||
position: relative;
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.footer-links a + a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
order: 4;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.10);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer-social-label {
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-icon-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-icon-link,
|
||||
.footer-icon-link--h5 {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-icon-link .footer-icon-outer {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
body.has-h5-tabbar .h5-tabbar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 90;
|
||||
width: 100%;
|
||||
padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
|
||||
background: #101010;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h5-tabbar-item {
|
||||
flex: 1 1 0;
|
||||
padding: 2px 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: #808080;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
transition: color 180ms ease, background-color 180ms ease;
|
||||
}
|
||||
|
||||
.h5-tabbar-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.h5-tabbar-item.is-active {
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.h5-tabbar-item:hover,
|
||||
.h5-tabbar-item:focus-visible {
|
||||
color: #EC237F;
|
||||
background: rgba(250, 220, 68, 0.08);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
body.has-h5-tabbar {
|
||||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Shared Figma footer shell used by the home and ranking pages. */
|
||||
.home-mobile-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.site-shell.rank-page-body,
|
||||
body.site-shell.list-page-body {
|
||||
--site-footer-margin-top: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body.site-shell .footer-box {
|
||||
min-height: min(252px, 13.125vw);
|
||||
background: #282828;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
body.site-shell .footer-outer {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
min-height: min(251px, 13.072917vw);
|
||||
padding: min(24px, 1.25vw) 0;
|
||||
gap: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.site-shell .footer-main {
|
||||
gap: min(32px, 1.666667vw);
|
||||
}
|
||||
|
||||
body.site-shell .footer-product,
|
||||
body.site-shell .footer-brand {
|
||||
gap: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.site-shell .footer-logo {
|
||||
width: min(178px, 9.270833vw);
|
||||
height: min(49px, 2.552083vw);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
body.site-shell .footer-brand .footer-muted-text {
|
||||
font-size: clamp(14px, 0.9375vw, 18px);
|
||||
line-height: clamp(20px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.site-shell .footer-contact {
|
||||
gap: min(4px, 0.208333vw);
|
||||
}
|
||||
|
||||
body.site-shell .footer-contact-line,
|
||||
body.site-shell .footer-links {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.site-shell .footer-bottom {
|
||||
min-height: min(38px, 1.979167vw);
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.site-shell .footer-copy {
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.site-shell .footer-social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.site-shell .footer-social-home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(16px, 0.833333vw);
|
||||
}
|
||||
|
||||
body.site-shell .footer-social-home-item,
|
||||
body.site-shell .footer-social-home-item img {
|
||||
width: min(38px, 1.979167vw);
|
||||
height: min(38px, 1.979167vw);
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.site-shell.has-h5-tabbar {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.site-shell.has-h5-tabbar .h5-tabbar,
|
||||
body.site-shell > .footer-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.site-shell .home-mobile-footer {
|
||||
width: calc(100% - (2 * var(--site-shell-gutter)));
|
||||
margin: var(--site-footer-margin-top) var(--site-shell-gutter) max(12px, env(safe-area-inset-bottom, 0px));
|
||||
padding: 18px 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-logo {
|
||||
width: auto;
|
||||
height: 39.5px;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-legal {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 12px/18px "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-legal p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
font: 400 12px/18px "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-links a {
|
||||
position: relative;
|
||||
padding-left: 13px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-links a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-links a:hover,
|
||||
.site-shell .home-mobile-footer-links a:focus-visible {
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-actions {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-social a,
|
||||
.site-shell .home-mobile-footer-social span,
|
||||
.site-shell .home-mobile-footer-social img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-social a {
|
||||
border-radius: 50%;
|
||||
transition: box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-social a:hover,
|
||||
.site-shell .home-mobile-footer-social a:focus-visible {
|
||||
box-shadow: 0 0 0 2px rgba(250, 220, 68, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-top {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-shell .home-mobile-footer-top img {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer structure shared by the refreshed home and the existing pages. */
|
||||
.footer-outer {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: 1800px;
|
||||
padding: 36px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.footer-product {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
.footer-brand .footer-muted-text {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.footer-contact-line {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 15px;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.footer-links a + a {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.footer-links a + a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-icon-link {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.footer-icon-link .footer-icon-outer {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.footer-icon-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Desktop: the brand row spans the full footer instead of inheriting the
|
||||
narrower product column used by contacts. */
|
||||
@media (min-width: 768px) {
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
column-gap: 32px;
|
||||
row-gap: 18px;
|
||||
}
|
||||
|
||||
.footer-product {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.footer-box {
|
||||
padding: 0 16px 24px;
|
||||
background: #0F0F0F;
|
||||
}
|
||||
|
||||
.footer-outer {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 18px 16px;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.footer-product {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.footer-brand .footer-muted-text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.footer-links a + a {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.footer-links a + a::before {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.footer-social-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
width: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-icon-link,
|
||||
.footer-icon-link--h5 {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
body.home-page.has-h5-tabbar {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.home-page.has-h5-tabbar .h5-tabbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,552 @@
|
||||
.history-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.history-layout .site-header,
|
||||
.history-layout .footer-box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.history-page {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 36px 0;
|
||||
background: #0A0A0A;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history-pc {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.history-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history-main {
|
||||
width: min(1800px, calc(100% - 120px));
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.history-breadcrumb {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.history-breadcrumb-link {
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.history-breadcrumb-sep {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.history-breadcrumb-current {
|
||||
color: #8A8A8A;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.history-head {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.history-head-text {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.history-desc {
|
||||
margin: 0;
|
||||
color: #A3A3A3;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.history-clear-btn {
|
||||
width: 96px;
|
||||
height: 36px;
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
color: #F5F5F5;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.history-clear-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.history-confirm-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history-confirm-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.history-confirm-mask[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.history-confirm-card {
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
padding: 32px 28px 28px;
|
||||
position: relative;
|
||||
background: linear-gradient(90deg, #21142E 0%, #0A0A17 100%);
|
||||
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.46);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(241, 43, 158, 0.44);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history-confirm-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
right: 14px;
|
||||
top: 14px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-confirm-close-ring {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history-confirm-close-x {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history-confirm-close-x::before,
|
||||
.history-confirm-close-x::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 1.5px;
|
||||
background: #C5C0D0;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.history-confirm-close-x::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.history-confirm-close-x::after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.history-confirm-title {
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.history-confirm-desc {
|
||||
text-align: center;
|
||||
color: #B2ABC4;
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.history-confirm-actions {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.history-confirm-btn {
|
||||
flex: 1 1 0;
|
||||
height: 44px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-confirm-btn--cancel {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #C5C0D0;
|
||||
}
|
||||
|
||||
.history-confirm-btn--cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.history-confirm-btn--ok {
|
||||
background: #EC237F;
|
||||
color: #181818;
|
||||
}
|
||||
|
||||
.history-confirm-btn--ok:hover {
|
||||
background: #ffe56a;
|
||||
}
|
||||
|
||||
.history-grid {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.history-card.poster-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.history-empty {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.history-card .poster-card-spacer {
|
||||
flex: 1 1 0;
|
||||
min-width: 8px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.history-progress {
|
||||
color: #808080 !important;
|
||||
}
|
||||
|
||||
.history-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history-pagination {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.is-history-page {
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
body.is-history-page .site-header,
|
||||
body.is-history-page .footer-box,
|
||||
body.is-history-page .floating-action,
|
||||
body.is-history-page .download-fab {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
body.is-history-page .history-layout {
|
||||
min-height: 100vh;
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
body.is-history-page .history-page {
|
||||
padding: 0;
|
||||
background: #0A0A0A;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body.is-history-page .history-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.is-history-page .history-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
body.is-history-page .history-nav-back {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.is-history-page .history-nav-back img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
opacity: 0.65;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
body.is-history-page .history-nav-title {
|
||||
margin: 0;
|
||||
flex: 1 1 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
body.is-history-page .history-nav-clear {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body.is-history-page .history-main {
|
||||
width: calc(100% - 32px);
|
||||
max-width: 343px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 0;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.is-history-page .history-grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
body.is-history-page .history-card.poster-card {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.is-history-page .history-card .poster-cover {
|
||||
width: 90px;
|
||||
height: 120px;
|
||||
padding-bottom: 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.is-history-page .history-card .poster-cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
body.is-history-page .history-card .free-badge-large,
|
||||
body.is-history-page .history-card .hot-badge-large,
|
||||
body.is-history-page .history-card .community-badge,
|
||||
body.is-history-page .history-card .poster-corner-badges,
|
||||
body.is-history-page .history-card .episode-badge,
|
||||
body.is-history-page .history-card .poster-card-body,
|
||||
body.is-history-page .history-pagination {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.is-history-page .history-info {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
body.is-history-page .history-name {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.is-history-page .history-intro {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.is-history-page .history-watch {
|
||||
width: 100%;
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
body.is-history-page .history-watch--done {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
body.is-history-page .history-time {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/* Shared home banner ad row (PC 2-col flex / H5 stack). */
|
||||
|
||||
/* PC Figma: stretch row, 94px, gap 36, two equal flex slots */
|
||||
.home-ad-row {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 36px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-ad-row.home-ad-row--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner {
|
||||
position: relative;
|
||||
flex: 1 1 calc((100% - 36px) / 2);
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: calc((100% - 36px) / 2);
|
||||
height: 94px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.home-ad-row {
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner {
|
||||
flex: 1 1 calc((100% - 36px) / 2);
|
||||
max-width: calc((100% - 36px) / 2);
|
||||
height: 94px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.home-ad-row,
|
||||
.home-ad-row.home-ad-row--mobile {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-self: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.home-ad-row.home-ad-row--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* H5 Figma: 343×43 banner — stretch, 43px, radius 6, image cover-crop */
|
||||
.home-ad-row .home-ad-banner {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
flex: 0 0 43px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 43px;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: #464646;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,650 @@
|
||||
.list-page-body {
|
||||
background: #0f0f0f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-page.page-shell {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 36px 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-hero {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.list-breadcrumb,
|
||||
.list-channel-title,
|
||||
.list-filters,
|
||||
.list-section-title,
|
||||
.list-hero .card-grid,
|
||||
.list-ad-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.list-breadcrumb a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.list-breadcrumb a:hover,
|
||||
.list-breadcrumb a:focus-visible,
|
||||
.list-breadcrumb [aria-current="page"] {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.list-channel-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 600 24px/32px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.list-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 48px;
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.filter-chip:hover,
|
||||
.filter-chip:focus-visible {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.filter-chip--active {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.filter-chip--active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 48px;
|
||||
height: 20px;
|
||||
background: url("/static/images/figma-list/filter-active-desktop.svg") center / contain no-repeat;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.filter-chip-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: inherit;
|
||||
font: 400 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-chip--active .filter-chip-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.list-section-title {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #fff;
|
||||
font: 600 24px/32px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.list-section-mark {
|
||||
width: 8px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
background: #ec237f;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.list-hero .card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
gap: 24px 18px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 519px;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.list-hero .poster-cover {
|
||||
height: 407px;
|
||||
flex: 0 0 407px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-body {
|
||||
height: 112px;
|
||||
min-height: 112px;
|
||||
flex: 0 0 112px;
|
||||
padding: 12px 10px;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.list-hero .poster-card-title {
|
||||
min-height: 22px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-subtitle {
|
||||
min-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-meta {
|
||||
min-height: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-tag {
|
||||
min-height: 24px;
|
||||
padding: 2px 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: #ec237f;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
border: 1px solid rgba(255, 74, 74, 0.08);
|
||||
border-radius: 9px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-hero .episode-badge {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
height: 26px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-hero .poster-corner-badges {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.list-hero .poster-corner-badges .free-badge-large,
|
||||
.list-hero .poster-corner-badges .hot-badge-large,
|
||||
.list-hero .poster-corner-badges .community-badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.list-hero .pagination {
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.list-hero .pagination-btn {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-btn--wide {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-btn--active {
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
.list-hero .pagination-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-ellipsis,
|
||||
.list-hero .pagination-jump-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-ellipsis {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-hero .pagination-jump-input {
|
||||
width: 72px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-jump-submit {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-jump-submit:hover,
|
||||
.list-hero .pagination-jump-submit:focus-visible {
|
||||
background: #f04491;
|
||||
}
|
||||
|
||||
.list-ad-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.list-ad {
|
||||
width: 100%;
|
||||
aspect-ratio: 758 / 94;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.list-ad picture,
|
||||
.list-ad img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-ad img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.list-page-body .download-fab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body.list-page-body .list-page.page-shell {
|
||||
padding:
|
||||
min(36px, 1.875vw)
|
||||
60px;
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero {
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-breadcrumb {
|
||||
gap: min(6px, 0.3125vw);
|
||||
font-size: clamp(12px, 0.9375vw, 18px);
|
||||
line-height: clamp(18px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-channel-title,
|
||||
body.list-page-body .list-section-title {
|
||||
font-size: clamp(16px, 1.25vw, 24px);
|
||||
line-height: clamp(22px, 1.666667vw, 32px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-filters {
|
||||
gap: min(36px, 1.875vw);
|
||||
}
|
||||
|
||||
body.list-page-body .filter-chip {
|
||||
width: min(72px, 3.75vw);
|
||||
height: min(48px, 2.5vw);
|
||||
padding: min(12px, 0.625vw) 0;
|
||||
border-radius: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.list-page-body .filter-chip--active::after {
|
||||
width: min(48px, 2.5vw);
|
||||
height: min(20px, 1.041667vw);
|
||||
}
|
||||
|
||||
body.list-page-body .filter-chip-text {
|
||||
font-size: clamp(12px, 0.9375vw, 18px);
|
||||
line-height: clamp(18px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-section-title {
|
||||
gap: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-section-mark {
|
||||
width: min(8px, 0.416667vw);
|
||||
height: min(22px, 1.145833vw);
|
||||
border-radius: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .card-grid {
|
||||
gap: min(24px, 1.25vw) min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card {
|
||||
height: min(519px, 27.03125vw);
|
||||
border-radius: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-cover {
|
||||
height: min(407px, 21.197917vw);
|
||||
flex-basis: min(407px, 21.197917vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card-body {
|
||||
height: min(112px, 5.833333vw);
|
||||
min-height: min(112px, 5.833333vw);
|
||||
flex-basis: min(112px, 5.833333vw);
|
||||
padding: min(12px, 0.625vw) min(10px, 0.520833vw);
|
||||
gap: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card-title {
|
||||
min-height: min(22px, 1.145833vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card-subtitle,
|
||||
body.list-page-body .list-hero .poster-card-tag {
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card-subtitle {
|
||||
min-height: min(20px, 1.041667vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card-meta,
|
||||
body.list-page-body .list-hero .poster-card-tag {
|
||||
min-height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .poster-card-tag {
|
||||
padding: min(2px, 0.104167vw) min(8px, 0.416667vw);
|
||||
border-radius: min(9px, 0.46875vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination {
|
||||
gap: min(12px, 0.625vw);
|
||||
padding: min(4px, 0.208333vw) 0;
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination-btn {
|
||||
width: min(48px, 2.5vw);
|
||||
min-width: min(48px, 2.5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination-arrow {
|
||||
width: min(24px, 1.25vw);
|
||||
height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination-ellipsis,
|
||||
body.list-page-body .list-hero .pagination-jump-label,
|
||||
body.list-page-body .list-hero .pagination-jump-input,
|
||||
body.list-page-body .list-hero .pagination-jump-submit {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination-ellipsis {
|
||||
width: min(32px, 1.666667vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination-jump-input {
|
||||
width: min(72px, 3.75vw);
|
||||
height: min(48px, 2.5vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-hero .pagination-jump-submit {
|
||||
width: min(96px, 5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-ad-list {
|
||||
gap: min(36px, 1.875vw);
|
||||
}
|
||||
|
||||
body.list-page-body .list-ad {
|
||||
border-radius: min(12px, 0.625vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.list-page.page-shell {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.list-hero .card-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.list-hero .poster-card {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.list-hero .poster-cover {
|
||||
height: auto;
|
||||
flex-basis: auto;
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-body {
|
||||
height: 112px;
|
||||
min-height: 112px;
|
||||
flex-basis: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.list-page-body,
|
||||
body.list-page-body.series-page-body {
|
||||
--site-footer-margin-top: 24px;
|
||||
}
|
||||
|
||||
.list-hero .poster-corner-badges {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.list-hero .poster-flag-badge {
|
||||
width: 40px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.list-page.page-shell {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 12px var(--site-shell-gutter) 24px;
|
||||
}
|
||||
|
||||
.list-hero {
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.list-breadcrumb {
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.list-channel-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list-filters {
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.list-filters::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
width: 72px;
|
||||
min-width: 72px;
|
||||
height: 30px;
|
||||
padding: 4px 8px 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.filter-chip--active::after {
|
||||
width: 44px;
|
||||
height: 20px;
|
||||
background-image: url("/static/images/figma-list/filter-active-mobile.svg");
|
||||
}
|
||||
|
||||
.filter-chip-text {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.list-section-title {
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.list-section-mark {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.list-hero .card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 7px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-hero .poster-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-body {
|
||||
height: clamp(68px, 21.333333vw, 92px);
|
||||
min-height: clamp(68px, 21.333333vw, 92px);
|
||||
flex: 0 0 clamp(68px, 21.333333vw, 92px);
|
||||
padding: 8px 0;
|
||||
gap: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-title {
|
||||
min-height: 20px;
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-subtitle {
|
||||
min-height: 18px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-meta {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.list-hero .poster-card-tag {
|
||||
min-height: 22px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.list-hero .episode-badge {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.list-hero .pagination-jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-ad-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.list-ad {
|
||||
aspect-ratio: 343 / 47;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
.login-dialog-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.login-dialog-mask.is-open { display: flex; }
|
||||
.login-dialog-stack {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.login-dialog-card {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
padding: 36px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: #fff;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
border-radius: 40px;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
.login-dialog-head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.login-dialog-title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
.login-dialog-title-h5 { display: none; }
|
||||
.login-dialog-desc {
|
||||
color: rgba(255,255,255,.55);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.login-dialog-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.login-dialog-field-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.login-dialog-label {
|
||||
display: block;
|
||||
color: rgba(255,255,255,.55);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.login-dialog-field {
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,.05);
|
||||
border: 1px solid rgba(255,255,255,.05);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.login-dialog-field--password { justify-content: space-between; gap: 10px; }
|
||||
.login-dialog-sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.login-dialog-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font: 400 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
.login-dialog-input::placeholder { color: rgba(255,255,255,.35); opacity: 1; }
|
||||
.login-dialog-eye {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
flex: 0 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-dialog-eye img { display: block; width: 20px; height: 20px; }
|
||||
.login-dialog-error {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
.login-dialog-error[hidden] { display: none; }
|
||||
.login-dialog-submit {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
padding: 13px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font: 600 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
background: #ec237f;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-dialog-submit.is-loading,
|
||||
.login-dialog-submit:disabled { opacity: .75; cursor: not-allowed; }
|
||||
.login-dialog-register {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.login-dialog-register-prefix,
|
||||
.login-dialog-register-link {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.login-dialog-register-prefix { color: rgba(255,255,255,.55); }
|
||||
.login-dialog-register-link { color: #ec237f; text-decoration: none; }
|
||||
.login-dialog-register-link:hover { color: #ff5b9f; }
|
||||
.login-dialog-register-link--h5 { display: none; }
|
||||
.login-dialog-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
flex: 0 0 36px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-dialog-close img { display: block; width: 36px; height: 36px; }
|
||||
@media (max-width: 767px) {
|
||||
.login-dialog-mask {
|
||||
padding: 16px;
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.login-dialog-stack { width: 300px; }
|
||||
.login-dialog-card { width: 300px; padding: 24px 20px; border-radius: 20px; }
|
||||
.login-dialog-title-pc { display: none; }
|
||||
.login-dialog-title-h5 { display: inline; }
|
||||
.login-dialog-title { font-size: 16px; line-height: 22px; }
|
||||
.login-dialog-desc { font-size: 12px; line-height: 18px; }
|
||||
.login-dialog-head { gap: 6px; }
|
||||
.login-dialog-form { gap: 12px; }
|
||||
.login-dialog-field-group { gap: 6px; }
|
||||
.login-dialog-label { font-size: 14px; line-height: 20px; }
|
||||
.login-dialog-field { min-height: 54px; padding: 16px 18px; }
|
||||
.login-dialog-input { font-size: 14px; line-height: 20px; }
|
||||
.login-dialog-submit { font-weight: 400; }
|
||||
.login-dialog-register { height: 24px; }
|
||||
.login-dialog-register-prefix,
|
||||
.login-dialog-register-link { font-size: 12px; line-height: 18px; }
|
||||
.login-dialog-register-link--pc { display: none; }
|
||||
.login-dialog-register-link--h5 { display: inline; }
|
||||
}
|
||||
@@ -0,0 +1,519 @@
|
||||
.topic-page-body {
|
||||
background: #0f0f0f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.more-page.page-shell {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 36px 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.more-hero {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.more-breadcrumb,
|
||||
.more-intro,
|
||||
.more-section-title,
|
||||
.more-hero .card-grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.more-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more-breadcrumb a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.more-breadcrumb a:hover,
|
||||
.more-breadcrumb a:focus-visible,
|
||||
.more-breadcrumb-current {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.more-breadcrumb-current {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.more-breadcrumb-current--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.more-topic-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 600 24px/32px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.more-topic-description {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.more-section-title {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #fff;
|
||||
font: 600 24px/32px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.more-section-mark {
|
||||
width: 8px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
background: #ec237f;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.more-hero .card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
gap: 24px 18px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 519px;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.more-hero .poster-cover {
|
||||
height: 407px;
|
||||
flex: 0 0 407px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-body {
|
||||
height: 112px;
|
||||
min-height: 112px;
|
||||
flex: 0 0 112px;
|
||||
padding: 12px 10px;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.more-hero .poster-card-title {
|
||||
min-height: 22px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-subtitle {
|
||||
min-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-meta {
|
||||
min-height: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-tag {
|
||||
min-height: 24px;
|
||||
padding: 2px 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: #ec237f;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
border: 1px solid rgba(255, 74, 74, 0.08);
|
||||
border-radius: 9px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.more-hero .episode-badge {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
height: 26px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.more-hero .pagination {
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.more-hero .pagination-btn,
|
||||
.more-hero .pagination-btn--wide {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-hero .pagination-btn--active {
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
.more-hero .pagination-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.more-hero .pagination-ellipsis,
|
||||
.more-hero .pagination-jump-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-hero .pagination-ellipsis {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more-hero .pagination-jump-input {
|
||||
width: 72px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-hero .pagination-jump-submit {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-hero .pagination-jump-submit:hover,
|
||||
.more-hero .pagination-jump-submit:focus-visible {
|
||||
background: #f04491;
|
||||
}
|
||||
|
||||
.topic-page-body .download-fab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body.topic-page-body .more-page.page-shell {
|
||||
padding: min(36px, 1.875vw) 60px;
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero,
|
||||
body.topic-page-body .more-intro {
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-breadcrumb {
|
||||
gap: min(6px, 0.3125vw);
|
||||
font-size: clamp(12px, 0.9375vw, 18px);
|
||||
line-height: clamp(18px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-topic-title,
|
||||
body.topic-page-body .more-section-title {
|
||||
font-size: clamp(16px, 1.25vw, 24px);
|
||||
line-height: clamp(22px, 1.666667vw, 32px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-topic-description {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-section-title {
|
||||
gap: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-section-mark {
|
||||
width: min(8px, 0.416667vw);
|
||||
height: min(22px, 1.145833vw);
|
||||
border-radius: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .card-grid {
|
||||
gap: min(24px, 1.25vw) min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card {
|
||||
height: min(519px, 27.03125vw);
|
||||
border-radius: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-cover {
|
||||
height: min(407px, 21.197917vw);
|
||||
flex-basis: min(407px, 21.197917vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card-body {
|
||||
height: min(112px, 5.833333vw);
|
||||
min-height: min(112px, 5.833333vw);
|
||||
flex-basis: min(112px, 5.833333vw);
|
||||
padding: min(12px, 0.625vw) min(10px, 0.520833vw);
|
||||
gap: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card-title {
|
||||
min-height: min(22px, 1.145833vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card-subtitle,
|
||||
body.topic-page-body .more-hero .poster-card-tag {
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card-subtitle {
|
||||
min-height: min(20px, 1.041667vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card-meta,
|
||||
body.topic-page-body .more-hero .poster-card-tag {
|
||||
min-height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .poster-card-tag {
|
||||
padding: min(2px, 0.104167vw) min(8px, 0.416667vw);
|
||||
border-radius: min(9px, 0.46875vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination {
|
||||
gap: min(12px, 0.625vw);
|
||||
padding: min(4px, 0.208333vw) 0;
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination-btn,
|
||||
body.topic-page-body .more-hero .pagination-btn--wide {
|
||||
width: min(48px, 2.5vw);
|
||||
min-width: min(48px, 2.5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination-arrow {
|
||||
width: min(24px, 1.25vw);
|
||||
height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination-ellipsis,
|
||||
body.topic-page-body .more-hero .pagination-jump-label,
|
||||
body.topic-page-body .more-hero .pagination-jump-input,
|
||||
body.topic-page-body .more-hero .pagination-jump-submit {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination-ellipsis {
|
||||
width: min(32px, 1.666667vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination-jump-input {
|
||||
width: min(72px, 3.75vw);
|
||||
height: min(48px, 2.5vw);
|
||||
}
|
||||
|
||||
body.topic-page-body .more-hero .pagination-jump-submit {
|
||||
width: min(96px, 5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.more-page.page-shell {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.more-hero .card-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.more-hero .poster-card {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.more-hero .poster-cover {
|
||||
height: auto;
|
||||
flex-basis: auto;
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.more-page.page-shell {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 12px var(--site-shell-gutter) 0;
|
||||
}
|
||||
|
||||
.more-hero {
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.more-breadcrumb {
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.more-breadcrumb-topic,
|
||||
.more-breadcrumb-sep--topic,
|
||||
.more-breadcrumb-current--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-breadcrumb-current--mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.more-intro {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.more-topic-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-topic-description {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.more-section-title {
|
||||
gap: 6px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.more-section-mark {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.more-hero .card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 7px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.more-hero .poster-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-body {
|
||||
height: clamp(68px, 21.333333vw, 92px);
|
||||
min-height: clamp(68px, 21.333333vw, 92px);
|
||||
flex: 0 0 clamp(68px, 21.333333vw, 92px);
|
||||
padding: 8px 0;
|
||||
gap: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-title {
|
||||
min-height: 20px;
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-subtitle {
|
||||
min-height: 18px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-meta,
|
||||
.more-hero .poster-card-tag {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.more-hero .poster-card-tag {
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.more-hero .episode-badge {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.more-hero .pagination-jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.topic-page-body {
|
||||
--site-footer-margin-top: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html {
|
||||
min-width: 320px;
|
||||
min-height: 100%;
|
||||
background: #0F0F0F;
|
||||
}
|
||||
|
||||
.nav-page-body {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden auto;
|
||||
color: #FFFFFF;
|
||||
background-color: #0F0F0F;
|
||||
background-image:
|
||||
linear-gradient(rgba(15, 15, 15, 0.88), rgba(15, 15, 15, 0.88)),
|
||||
url("/static/images/figma-nav/background-mobile.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 375px;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
padding: 12px 28px;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-page-title {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-brand-lockup {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.nav-brand-lockup:hover,
|
||||
.nav-brand-lockup:focus-visible {
|
||||
opacity: 0.88;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-brand-logo {
|
||||
width: auto;
|
||||
height: 57px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-brand-tagline {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-brand-highlight {
|
||||
color: #EC237F;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-entries {
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-entry {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
overflow: hidden;
|
||||
color: #F6F2F9;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.nav-entry::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
width: 92px;
|
||||
height: 63px;
|
||||
border-radius: 50%;
|
||||
background: #EC237F;
|
||||
filter: blur(50px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-entry:hover,
|
||||
.nav-entry:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
box-shadow: 0 0 0 1px rgba(236, 35, 127, 0.34);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-entry-copy {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-entry-name,
|
||||
.nav-entry-url {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-entry-name {
|
||||
color: #F6F2F9;
|
||||
}
|
||||
|
||||
.nav-entry-url {
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.nav-entry-cta {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-width: max-content;
|
||||
padding: 4px 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #EC237F;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
border: 1px solid #EC237F;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-entry-cta img {
|
||||
width: 5px;
|
||||
height: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-entry--forever {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-entry--forever::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-entry--forever:hover,
|
||||
.nav-entry--forever:focus-visible {
|
||||
background: rgba(255, 74, 74, 0.13);
|
||||
}
|
||||
|
||||
.nav-banner {
|
||||
position: relative;
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
height: 64px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
transition: box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.nav-banner:hover,
|
||||
.nav-banner:focus-visible {
|
||||
box-shadow: 0 0 0 1px rgba(236, 35, 127, 0.5);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-banner-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.nav-banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.nav-banner-text {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 22px 0 auto;
|
||||
color: #F6F2F9;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-contact {
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
transition: opacity 180ms ease;
|
||||
}
|
||||
|
||||
.nav-contact:hover,
|
||||
.nav-contact:focus-visible {
|
||||
opacity: 0.76;
|
||||
}
|
||||
|
||||
.nav-icons {
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-icon-item {
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-icon-circle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.nav-icon-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-icon-img--app {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.nav-icon-label {
|
||||
max-width: 100%;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-icon-item:hover .nav-icon-circle,
|
||||
.nav-icon-item:focus-visible .nav-icon-circle {
|
||||
background: rgba(236, 35, 127, 0.28);
|
||||
box-shadow: 0 0 0 1px rgba(236, 35, 127, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nav-icon-item:hover .nav-icon-label,
|
||||
.nav-icon-item:focus-visible .nav-icon-label {
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.nav-footer {
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-footer-note,
|
||||
.nav-footer-copy {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.nav-page-body {
|
||||
background-image:
|
||||
linear-gradient(rgba(15, 15, 15, 0.88), rgba(15, 15, 15, 0.88)),
|
||||
url("/static/images/figma-nav/background-desktop.png");
|
||||
}
|
||||
|
||||
.nav-entry {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-entry:hover,
|
||||
.nav-entry:focus-visible {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-entry--forever {
|
||||
background-color: rgba(255, 74, 74, 0.08);
|
||||
}
|
||||
|
||||
.nav-entry--forever:hover,
|
||||
.nav-entry--forever:focus-visible {
|
||||
background-color: rgba(255, 74, 74, 0.13);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nav-page-body {
|
||||
border-radius: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 374px) {
|
||||
.nav-page {
|
||||
padding-inline: max(20px, 7.466667vw);
|
||||
}
|
||||
|
||||
.nav-brand-highlight {
|
||||
font-size: clamp(16px, 4.8vw, 18px);
|
||||
}
|
||||
|
||||
.nav-entry {
|
||||
padding-inline: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-entry-name,
|
||||
.nav-entry-url {
|
||||
font-size: clamp(12px, 3.733333vw, 14px);
|
||||
}
|
||||
|
||||
.nav-icon-label {
|
||||
font-size: clamp(10px, 3.2vw, 12px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 760px) {
|
||||
.nav-page-body {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nav-brand-lockup,
|
||||
.nav-entry,
|
||||
.nav-banner,
|
||||
.nav-contact,
|
||||
.nav-icon-circle {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
.pagination {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
a.pagination-btn:hover {
|
||||
color: #F5F5F5;
|
||||
}
|
||||
|
||||
.pagination-btn.is-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pagination-btn--wide {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
}
|
||||
|
||||
.pagination-btn--active {
|
||||
background: #EC237F;
|
||||
color: #181818;
|
||||
}
|
||||
|
||||
.pagination-btn--arrow {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination-arrow {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pagination-jump {
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pagination-jump-label {
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pagination-jump-input {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pagination-jump-input::-webkit-outer-spin-button,
|
||||
.pagination-jump-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination-jump-input:focus,
|
||||
.pagination-jump-input:focus-visible {
|
||||
color: #F5F5F5;
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagination-jump-submit {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: #EC237F;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
color: #181818;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pagination-jump-submit:hover {
|
||||
background: #ffe56a;
|
||||
}
|
||||
|
||||
/* H5 Figma: 343 宽条、space-between、30 圆钮 / 箭头 pill
|
||||
使用页面容器前缀覆盖 list/rank/topic 等页面的 PC 尺寸规则 */
|
||||
@media (max-width: 767px) {
|
||||
.pagination,
|
||||
.list-hero .pagination,
|
||||
.rank-hero .pagination,
|
||||
.more-hero .pagination,
|
||||
.theme-index-page .pagination,
|
||||
.search-inner .pagination,
|
||||
.today-update-hero .pagination,
|
||||
.collect-pagination .pagination,
|
||||
.history-pagination .pagination {
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.pagination-btn,
|
||||
.pagination-btn--wide,
|
||||
.list-hero .pagination-btn,
|
||||
.list-hero .pagination-btn--wide,
|
||||
.rank-hero .pagination-btn,
|
||||
.rank-hero .pagination-btn--wide,
|
||||
.more-hero .pagination-btn,
|
||||
.more-hero .pagination-btn--wide,
|
||||
.theme-index-page .pagination-btn,
|
||||
.theme-index-page .pagination-btn--wide,
|
||||
.search-inner .pagination-btn,
|
||||
.search-inner .pagination-btn--wide,
|
||||
.today-update-hero .pagination-btn,
|
||||
.collect-pagination .pagination-btn,
|
||||
.history-pagination .pagination-btn {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
padding: 0 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.pagination-btn--active,
|
||||
.list-hero .pagination-btn--active,
|
||||
.rank-hero .pagination-btn--active,
|
||||
.more-hero .pagination-btn--active,
|
||||
.theme-index-page .pagination-btn--active,
|
||||
.search-inner .pagination-btn--active {
|
||||
background: #ec237f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination-btn--arrow,
|
||||
.list-hero .pagination-btn--arrow,
|
||||
.rank-hero .pagination-btn--arrow,
|
||||
.more-hero .pagination-btn--arrow,
|
||||
.theme-index-page .pagination-btn--arrow,
|
||||
.search-inner .pagination-btn--arrow {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 6px 7px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pagination-arrow,
|
||||
.list-hero .pagination-arrow,
|
||||
.rank-hero .pagination-arrow,
|
||||
.more-hero .pagination-arrow,
|
||||
.theme-index-page .pagination-arrow,
|
||||
.search-inner .pagination-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.pagination-ellipsis,
|
||||
.list-hero .pagination-ellipsis,
|
||||
.rank-hero .pagination-ellipsis,
|
||||
.more-hero .pagination-ellipsis,
|
||||
.theme-index-page .pagination-ellipsis,
|
||||
.search-inner .pagination-ellipsis {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
min-width: 20px;
|
||||
height: 30px;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-jump,
|
||||
.list-hero .pagination-jump,
|
||||
.rank-hero .pagination-jump,
|
||||
.more-hero .pagination-jump,
|
||||
.theme-index-page .pagination-jump,
|
||||
.search-inner .pagination-jump,
|
||||
.today-update-hero .pagination-jump {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,672 @@
|
||||
.rank-page-body {
|
||||
background: #0f0f0f;
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.rank-page.page-shell {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 36px 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rank-hero {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.rank-breadcrumb,
|
||||
.rank-channel,
|
||||
.rank-tabs,
|
||||
.rank-hero .card-grid,
|
||||
.rank-ad-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rank-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.rank-breadcrumb a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.rank-breadcrumb a:hover,
|
||||
.rank-breadcrumb a:focus-visible,
|
||||
.rank-breadcrumb [aria-current="page"] {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.rank-channel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.rank-channel-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 600 24px/32px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.rank-channel-desc {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.rank-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.rank-tab {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
text-decoration: none;
|
||||
transition: background-color 180ms ease, border-color 180ms ease;
|
||||
}
|
||||
|
||||
.rank-tab:hover,
|
||||
.rank-tab:focus-visible {
|
||||
border-color: rgba(236, 35, 127, 0.5);
|
||||
background: rgba(236, 35, 127, 0.16);
|
||||
}
|
||||
|
||||
.rank-tab--active,
|
||||
.rank-tab--active:hover,
|
||||
.rank-tab--active:focus-visible {
|
||||
border-color: #ec237f;
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
.rank-tab-text {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rank-tab-text--active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rank-hero .card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
gap: 24px 18px;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: auto;
|
||||
aspect-ratio: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 296 / 415;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-body {
|
||||
height: auto;
|
||||
min-height: 104px;
|
||||
flex: 0 0 auto;
|
||||
padding: 12px 10px;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-title {
|
||||
flex: 0 0 auto;
|
||||
min-height: 22px;
|
||||
color: #fff;
|
||||
font: 600 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-subtitle {
|
||||
flex: 0 0 auto;
|
||||
min-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 14px/20px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-meta {
|
||||
min-height: 24px;
|
||||
margin-top: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .ranking-card-tags {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .ranking-card-tag {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 2px 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 74, 74, 0.08);
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
color: #ec237f;
|
||||
font: 400 14px/20px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rank-hero .episode-badge {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
height: auto;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.poster-rank-badge,
|
||||
.poster-rank-bg-gold,
|
||||
.poster-rank-bg-silver,
|
||||
.poster-rank-bg-bronze,
|
||||
.poster-rank-bg-dark {
|
||||
width: 43px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.poster-rank-badge {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.poster-rank-bg-gold,
|
||||
.poster-rank-bg-silver,
|
||||
.poster-rank-bg-bronze,
|
||||
.poster-rank-bg-dark {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.poster-rank-bg-gold { background-image: url("../images/r_1.png"); }
|
||||
.poster-rank-bg-silver { background-image: url("../images/r_2.png"); }
|
||||
.poster-rank-bg-bronze { background-image: url("../images/r_3.png"); }
|
||||
.poster-rank-bg-dark { background-image: url("../images/r_4.png"); }
|
||||
|
||||
.poster-rank-text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font: 600 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.rank-hero .pagination {
|
||||
width: auto;
|
||||
align-self: center;
|
||||
padding: 4px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-btn {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
background: #3d3d3d;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-btn--wide {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-btn--active {
|
||||
background: #ec237f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-ellipsis,
|
||||
.rank-hero .pagination-jump-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-ellipsis {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-jump-input {
|
||||
width: 72px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
background: #3d3d3d;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-jump-submit {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
background: #ec237f;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-jump-submit:hover,
|
||||
.rank-hero .pagination-jump-submit:focus-visible {
|
||||
background: #f04491;
|
||||
}
|
||||
|
||||
.rank-ad-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.rank-ad {
|
||||
width: 100%;
|
||||
aspect-ratio: 758 / 94;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.rank-ad picture,
|
||||
.rank-ad img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rank-ad img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.rank-page-body {
|
||||
--rank-h5-gutter: clamp(14px, 4.266667vw, 18px);
|
||||
--site-footer-margin-top: 24px;
|
||||
padding-top: calc(48px + env(safe-area-inset-top, 0px));
|
||||
}
|
||||
|
||||
.rank-page.page-shell {
|
||||
padding: 12px var(--rank-h5-gutter) 24px;
|
||||
}
|
||||
|
||||
.rank-hero {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.rank-breadcrumb {
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.rank-channel {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rank-channel-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.rank-channel-desc {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.rank-tabs {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.rank-tab {
|
||||
width: auto;
|
||||
height: 30px;
|
||||
flex: 1 1 0;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.rank-tab-text {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.rank-hero .card-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 7px;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card {
|
||||
height: auto;
|
||||
min-height: 304px;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-cover {
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-body {
|
||||
height: auto;
|
||||
min-height: 92px;
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 0;
|
||||
gap: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-title {
|
||||
min-height: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-subtitle {
|
||||
flex: 0 0 18px;
|
||||
min-height: 18px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .poster-card-meta {
|
||||
flex: 0 0 22px;
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .ranking-card-tags {
|
||||
height: 22px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rank-hero .rank-card .ranking-card-tag {
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.poster-rank-badge,
|
||||
.poster-rank-bg-gold,
|
||||
.poster-rank-bg-silver,
|
||||
.poster-rank-bg-bronze,
|
||||
.poster-rank-bg-dark {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.poster-rank-text {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.rank-hero .pagination-jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-ad-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rank-ad {
|
||||
aspect-ratio: 343 / 47;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Desktop scales from the 1920px Figma frame, matching the homepage strategy. */
|
||||
@media (min-width: 1024px) {
|
||||
body.rank-page-body {
|
||||
padding-top: min(90px, 4.6875vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-page.page-shell {
|
||||
padding:
|
||||
min(36px, 1.875vw)
|
||||
60px;
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero {
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-breadcrumb {
|
||||
gap: min(6px, 0.3125vw);
|
||||
font-size: clamp(12px, 0.9375vw, 18px);
|
||||
line-height: clamp(18px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-channel {
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-channel-title {
|
||||
font-size: clamp(18px, 1.25vw, 24px);
|
||||
line-height: clamp(24px, 1.666667vw, 32px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-channel-desc {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-tabs {
|
||||
gap: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-tab {
|
||||
width: min(120px, 6.25vw);
|
||||
height: min(48px, 2.5vw);
|
||||
padding: 0 min(24px, 1.25vw);
|
||||
border-radius: min(9px, 0.46875vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-tab-text {
|
||||
font-size: clamp(12px, 0.9375vw, 18px);
|
||||
line-height: clamp(18px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .card-grid {
|
||||
column-gap: min(18px, 0.9375vw);
|
||||
row-gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .rank-card {
|
||||
min-height: 0;
|
||||
border-radius: min(18px, 0.9375vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .rank-card .poster-card-body {
|
||||
min-height: clamp(84px, 5.416667vw, 104px);
|
||||
flex: 0 0 auto;
|
||||
padding: min(12px, 0.625vw) min(10px, 0.520833vw);
|
||||
gap: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .rank-card .poster-card-title {
|
||||
min-height: min(22px, 1.145833vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .rank-card .poster-card-subtitle {
|
||||
min-height: min(20px, 1.041667vw);
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .rank-card .poster-card-meta {
|
||||
min-height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .rank-card .ranking-card-tag {
|
||||
padding: min(2px, 0.104167vw) min(8px, 0.416667vw);
|
||||
border-radius: min(9px, 0.46875vw);
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .episode-badge {
|
||||
right: min(8px, 0.416667vw);
|
||||
bottom: min(16px, 0.833333vw);
|
||||
min-height: min(24px, 1.25vw);
|
||||
padding: min(3px, 0.15625vw) min(8px, 0.416667vw);
|
||||
border-radius: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .episode-badge .text-white-xs {
|
||||
font-size: clamp(11px, 0.729167vw, 14px);
|
||||
line-height: clamp(16px, 1.041667vw, 20px);
|
||||
}
|
||||
|
||||
body.rank-page-body .poster-rank-badge,
|
||||
body.rank-page-body .poster-rank-bg-gold,
|
||||
body.rank-page-body .poster-rank-bg-silver,
|
||||
body.rank-page-body .poster-rank-bg-bronze,
|
||||
body.rank-page-body .poster-rank-bg-dark {
|
||||
width: min(43px, 2.239583vw);
|
||||
height: min(34px, 1.770833vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .poster-rank-text {
|
||||
font-size: clamp(12px, 0.9375vw, 18px);
|
||||
line-height: clamp(18px, 1.25vw, 24px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination {
|
||||
padding: min(4px, 0.208333vw) 0;
|
||||
gap: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-btn,
|
||||
body.rank-page-body .rank-hero .pagination-btn--wide {
|
||||
width: min(48px, 2.5vw);
|
||||
min-width: min(48px, 2.5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-arrow {
|
||||
width: min(24px, 1.25vw);
|
||||
height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-ellipsis {
|
||||
width: min(32px, 1.666667vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-ellipsis,
|
||||
body.rank-page-body .rank-hero .pagination-jump-label {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-jump {
|
||||
gap: min(8px, 0.416667vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-jump-input {
|
||||
width: min(72px, 3.75vw);
|
||||
height: min(48px, 2.5vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-hero .pagination-jump-submit {
|
||||
width: min(96px, 5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: clamp(18px, 1.145833vw, 22px);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-ad-list {
|
||||
gap: min(36px, 1.875vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .rank-ad {
|
||||
border-radius: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
body.rank-page-body .floating-action {
|
||||
right: max(24px, calc((100vw - 1800px) / 2));
|
||||
bottom: min(60px, 3.125vw);
|
||||
width: min(60px, 3.125vw);
|
||||
height: min(60px, 3.125vw);
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
body.rank-page-body .floating-action-icon {
|
||||
width: min(20px, 1.041667vw);
|
||||
height: min(20px, 1.041667vw);
|
||||
}
|
||||
}
|
||||
|
||||
.rank-page-body .download-fab {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
.register-dialog-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0,0,0,.7);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.register-dialog-mask.is-open { display: flex; }
|
||||
.register-dialog-stack {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.register-dialog-card {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
padding: 36px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: #fff;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
border-radius: 40px;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
.register-dialog-head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.register-dialog-title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
.register-dialog-desc {
|
||||
color: rgba(255,255,255,.55);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.register-dialog-desc-h5 { display: none; }
|
||||
.register-dialog-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.register-dialog-field-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.register-dialog-label {
|
||||
display: block;
|
||||
color: rgba(255,255,255,.55);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.register-dialog-field {
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,.05);
|
||||
border: 1px solid rgba(255,255,255,.05);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.register-dialog-sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.register-dialog-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font: 400 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
.register-dialog-input::placeholder { color: rgba(255,255,255,.35); opacity: 1; }
|
||||
.register-dialog-error {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
.register-dialog-error[hidden] { display: none; }
|
||||
.register-dialog-submit {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
padding: 13px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font: 600 18px/24px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
background: #ec237f;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.register-dialog-submit.is-loading,
|
||||
.register-dialog-submit:disabled { opacity: .75; cursor: not-allowed; }
|
||||
.register-dialog-login {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.register-dialog-login-prefix,
|
||||
.register-dialog-login-link {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.register-dialog-login-prefix { display: inline; color: rgba(255,255,255,.55); }
|
||||
.register-dialog-login-link { color: #ec237f; text-decoration: none; }
|
||||
.register-dialog-login-link:hover { color: #ff5b9f; }
|
||||
.register-dialog-login-link--h5 { display: none; }
|
||||
.register-dialog-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
flex: 0 0 36px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.register-dialog-close img { display: block; width: 36px; height: 36px; }
|
||||
@media (max-width: 767px) {
|
||||
.register-dialog-mask {
|
||||
padding: 16px;
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.register-dialog-stack { width: 300px; }
|
||||
.register-dialog-card { width: 300px; padding: 24px 20px; border-radius: 20px; }
|
||||
.register-dialog-title { font-size: 16px; line-height: 22px; }
|
||||
.register-dialog-desc { font-size: 12px; line-height: 18px; }
|
||||
.register-dialog-desc-pc { display: none; }
|
||||
.register-dialog-desc-h5 { display: inline; }
|
||||
.register-dialog-head { gap: 6px; }
|
||||
.register-dialog-form { gap: 12px; }
|
||||
.register-dialog-field-group { gap: 6px; }
|
||||
.register-dialog-label { font-size: 14px; line-height: 20px; }
|
||||
.register-dialog-field { min-height: 54px; padding: 16px 18px; }
|
||||
.register-dialog-input { font-size: 14px; line-height: 20px; }
|
||||
.register-dialog-submit { font-weight: 400; }
|
||||
.register-dialog-login { height: 24px; }
|
||||
.register-dialog-login-prefix,
|
||||
.register-dialog-login-link { font-size: 12px; line-height: 18px; }
|
||||
.register-dialog-login-link--pc { display: none; }
|
||||
.register-dialog-login-link--h5 { display: inline; }
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.floating-action {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
right: max(24px, calc((100vw - 1800px) / 2));
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
gap: 12px;
|
||||
background: #EC237F;
|
||||
border-radius: 9999px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.floating-action.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.floating-action-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body[class] .floating-action {
|
||||
right: max(24px, calc((100vw - 1800px) / 2));
|
||||
bottom: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex !important;
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
body[class] .floating-action-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.floating-action {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,737 @@
|
||||
body.site-shell.search-layout {
|
||||
--site-footer-margin-top: min(30px, 1.5625vw);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.search-layout .site-header,
|
||||
.search-layout .footer-box,
|
||||
.search-layout .home-mobile-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-layout .download-fab,
|
||||
.search-layout .floating-action {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body.site-shell.search-layout > .footer-box {
|
||||
margin-top: var(--site-footer-margin-top);
|
||||
}
|
||||
}
|
||||
|
||||
.search-page {
|
||||
width: 100%;
|
||||
flex: 1 0 auto;
|
||||
padding: min(30px, 1.5625vw) 60px 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.search-inner {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(30px, 1.5625vw);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(30px, 1.5625vw);
|
||||
}
|
||||
|
||||
.mobile-search-landing,
|
||||
.search-breadcrumb-search-root {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-breadcrumb {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(8px, 0.416667vw);
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(14px, 0.9375vw, 18px)/1.333333 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-breadcrumb-link,
|
||||
.search-breadcrumb-sep,
|
||||
.search-breadcrumb-current {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.search-breadcrumb-link,
|
||||
.search-breadcrumb-current {
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.search-breadcrumb-link:hover,
|
||||
.search-breadcrumb-link:focus-visible,
|
||||
.search-breadcrumb-current {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.search-page-title {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
color: #fff;
|
||||
font: 600 clamp(22px, 1.667vw, 32px)/1.35 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.search-summary {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(30px, 1.5625vw);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-summary-title,
|
||||
.search-summary-description,
|
||||
.search-summary-count {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-summary-title {
|
||||
color: #fff;
|
||||
font: 600 clamp(18px, 1.25vw, 24px)/1.333333 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.search-summary-title span,
|
||||
.search-summary-count span {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.search-summary-description,
|
||||
.search-summary-count {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(13px, 0.833333vw, 16px)/1.375 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.search-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
column-gap: min(10px, 0.520833vw);
|
||||
row-gap: min(30px, 1.5625vw);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-grid > .empty-state {
|
||||
width: 100%;
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: min(519px, 27.03125vw);
|
||||
border-radius: min(18px, 0.9375vw);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.search-card .poster-cover {
|
||||
height: min(417px, 21.71875vw);
|
||||
padding: 0;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.search-card .poster-card-body {
|
||||
min-height: min(102px, 5.3125vw);
|
||||
padding: min(12px, 0.625vw) min(10px, 0.520833vw);
|
||||
gap: min(6px, 0.3125vw);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.search-card .poster-card-title {
|
||||
min-height: min(22px, 1.145833vw);
|
||||
color: #fff;
|
||||
font-size: clamp(13px, 0.833333vw, 16px);
|
||||
font-weight: 600;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.search-card .poster-card-subtitle {
|
||||
min-height: min(20px, 1.041667vw);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: clamp(12px, 0.729167vw, 14px);
|
||||
line-height: 1.428571;
|
||||
}
|
||||
|
||||
.search-card .poster-card-tag {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
padding: min(2px, 0.104167vw) min(8px, 0.416667vw);
|
||||
overflow: hidden;
|
||||
color: #ec237f;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
border: 0;
|
||||
border-radius: min(9px, 0.46875vw);
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 74, 74, 0.08);
|
||||
font-size: clamp(12px, 0.729167vw, 14px);
|
||||
line-height: 1.428571;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search-card .poster-like-badge,
|
||||
.search-card .poster-card-heat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-card .poster-card-spacer {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-card .episode-badge,
|
||||
.search-card .episode-badge-shifted {
|
||||
right: min(14px, 0.729167vw);
|
||||
bottom: min(14px, 0.729167vw);
|
||||
min-height: min(28px, 1.458333vw);
|
||||
height: min(28px, 1.458333vw);
|
||||
padding: min(3px, 0.15625vw) min(8px, 0.416667vw);
|
||||
border-radius: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
.search-card .episode-badge .text-white-xs,
|
||||
.search-card .episode-badge-shifted .text-white-xs {
|
||||
color: #fff;
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.search-inner .pagination {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-inner .pagination-btn {
|
||||
width: min(48px, 2.5vw);
|
||||
min-width: min(48px, 2.5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.search-inner .pagination-btn--wide {
|
||||
width: min(48px, 2.5vw);
|
||||
min-width: min(48px, 2.5vw);
|
||||
}
|
||||
|
||||
.search-inner .pagination-btn--active,
|
||||
.search-inner .pagination-jump-submit {
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
.search-inner .pagination-arrow {
|
||||
width: min(24px, 1.25vw);
|
||||
height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.search-inner .pagination-ellipsis,
|
||||
.search-inner .pagination-jump-label,
|
||||
.search-inner .pagination-jump-input,
|
||||
.search-inner .pagination-jump-submit {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.search-inner .pagination-jump-input {
|
||||
width: min(72px, 3.75vw);
|
||||
height: min(48px, 2.5vw);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.search-inner .pagination-jump-submit {
|
||||
width: min(96px, 5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.search-inner .pagination-jump-submit:hover,
|
||||
.search-inner .pagination-jump-submit:focus-visible {
|
||||
background: #f04493;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.search-page {
|
||||
padding: 24px 24px 0;
|
||||
}
|
||||
|
||||
.search-inner,
|
||||
.search-summary {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.search-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px 10px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
min-height: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.search-card .poster-card-body {
|
||||
min-height: 96px;
|
||||
padding: 10px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.search-card .poster-cover {
|
||||
height: auto;
|
||||
aspect-ratio: 5 / 7;
|
||||
}
|
||||
|
||||
.search-card .poster-card-title,
|
||||
.search-card .poster-card-subtitle {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.site-shell.search-layout {
|
||||
--site-footer-margin-top: 18px;
|
||||
}
|
||||
|
||||
.search-page {
|
||||
padding: 12px var(--site-shell-gutter) 0;
|
||||
}
|
||||
|
||||
.search-inner {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
body.is-search-landing .search-results {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-breadcrumb-search-root {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.search-breadcrumb {
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.search-page-title {
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.search-summary {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-summary-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.search-summary-description,
|
||||
.search-summary-count {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.search-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 7px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
.search-grid > .empty-state {
|
||||
min-height: 320px;
|
||||
padding: 42px 16px 54px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-grid > .empty-state .empty-actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
min-height: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.search-card .poster-cover {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.search-card .poster-card-body {
|
||||
min-height: 80px;
|
||||
padding: 8px 0;
|
||||
gap: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-card .poster-card-title {
|
||||
min-height: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-card .poster-card-subtitle {
|
||||
min-height: 18px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.search-card .poster-card-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 9px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.search-card .episode-badge,
|
||||
.search-card .episode-badge-shifted {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
min-height: 24px;
|
||||
height: 24px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.search-card .episode-badge .text-white-xs,
|
||||
.search-card .episode-badge-shifted .text-white-xs {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.search-inner .pagination-jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-search-landing {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.mobile-search-form {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 36px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.mobile-search-input {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
font: 400 14px/20px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.mobile-search-input::placeholder {
|
||||
color: #757575;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-search-input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-search-submit {
|
||||
flex: 0 0 auto;
|
||||
height: 30px;
|
||||
padding: 6px 12px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
font: 400 12px/18px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-search-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mobile-search-section[hidden],
|
||||
.mobile-search-divider[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mobile-search-heading {
|
||||
width: 100%;
|
||||
min-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-search-heading h1,
|
||||
.mobile-search-heading h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font: 600 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.mobile-search-heading button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #ec237f;
|
||||
background: transparent;
|
||||
font: 400 12px/18px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-search-history-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-search-history-tag {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 7px 12px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
font: 400 12px/18px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-search-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mobile-search-hot {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mobile-search-hot-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mobile-search-hot-item {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 9px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-search-hot-rank {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
font: 600 14px/20px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.mobile-search-hot-item:nth-child(1) .mobile-search-hot-rank {
|
||||
color: #8f4e18;
|
||||
background: linear-gradient(225deg, #ffcd9a 0%, #e88a33 100%);
|
||||
}
|
||||
|
||||
.mobile-search-hot-item:nth-child(2) .mobile-search-hot-rank {
|
||||
color: #536d82;
|
||||
background: linear-gradient(225deg, #cce9ff 0%, #8da9bf 100%);
|
||||
}
|
||||
|
||||
.mobile-search-hot-item:nth-child(3) .mobile-search-hot-rank {
|
||||
color: #874728;
|
||||
background: linear-gradient(225deg, #ffbfa4 0%, #d88867 100%);
|
||||
}
|
||||
|
||||
.mobile-search-hot-keyword {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font: 400 14px/20px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-search-hot-count {
|
||||
flex: 0 0 auto;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 12px/18px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.mobile-search-guess {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mobile-search-guess-list {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.mobile-search-guess-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
color: inherit;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-search-guess-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 164 / 219;
|
||||
overflow: hidden;
|
||||
border-radius: 12px 12px 0 0;
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.mobile-search-guess-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-search-guess-episode {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: rgba(15, 15, 15, 0.65);
|
||||
backdrop-filter: blur(5px);
|
||||
font: 400 12px/18px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.mobile-search-guess-copy {
|
||||
min-height: 102px;
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mobile-search-guess-title,
|
||||
.mobile-search-guess-desc {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-search-guess-title {
|
||||
color: #fff;
|
||||
font: 600 16px/22px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.mobile-search-guess-desc {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 14px/20px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.mobile-search-guess-tag-row {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-search-guess-tag {
|
||||
max-width: 100%;
|
||||
padding: 2px 8px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 9px;
|
||||
color: #ec237f;
|
||||
background: rgba(255, 74, 74, 0.08);
|
||||
font: 400 12px/18px "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.search-dialog-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
/* 让弹层层级低于站点顶部 header（header z-index=100），避免遮住 header */
|
||||
z-index: 90;
|
||||
display: none;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
padding-top: 72px; /* pc 默认站位 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-dialog-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-dialog-card {
|
||||
width: 343px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-dialog-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-dialog-bar {
|
||||
width: 100%;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
border-radius: 36px;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-dialog-input {
|
||||
width: 190px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-dialog-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.search-dialog-submit {
|
||||
width: 71px;
|
||||
height: 30px;
|
||||
background: #EC237F;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
color: #181818;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.search-dialog-mask {
|
||||
padding-top: 64px; /* 移动端 header 高度 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,721 @@
|
||||
.setting-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
.setting-layout .site-header,
|
||||
.setting-layout .footer-box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-page {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 36px 0;
|
||||
background: #0A0A0A;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.setting-pc {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.setting-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-main {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
height: 370px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.setting-breadcrumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-breadcrumb-link {
|
||||
color: #EC237F;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.setting-breadcrumb-sep {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.setting-breadcrumb-current {
|
||||
color: #8A8A8A;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.setting-head {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
margin: 0;
|
||||
color: #A3A3A3;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.setting-panel,
|
||||
.setting-aside {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.setting-profile-pc {
|
||||
width: 560px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-profile-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-aside {
|
||||
flex: 1 1 0;
|
||||
align-self: stretch;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.setting-panel-title,
|
||||
.setting-aside-title {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.setting-section-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-avatar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-avatar-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-avatar-name {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.setting-avatar-change {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.setting-field {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.setting-input {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
color: #F5F5F5;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.setting-input--static {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.setting-input:focus,
|
||||
.setting-input:focus-visible {
|
||||
border-color: rgba(250, 220, 68, 0.55);
|
||||
outline: none;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.setting-input:read-only,
|
||||
.setting-input[readonly] {
|
||||
opacity: 1;
|
||||
color: #F5F5F5;
|
||||
-webkit-text-fill-color: #F5F5F5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.setting-input::placeholder {
|
||||
color: #A3A3A3;
|
||||
-webkit-text-fill-color: #A3A3A3;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.setting-save-btn {
|
||||
width: 128px;
|
||||
height: 40px;
|
||||
background: #EC237F;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
color: #181818;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.setting-group--security {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
align-self: stretch;
|
||||
padding: 12px 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas:
|
||||
"label action"
|
||||
"hint action";
|
||||
align-items: center;
|
||||
column-gap: 12px;
|
||||
row-gap: 2px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-group--notify .setting-item {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.setting-item-label {
|
||||
grid-area: label;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.setting-group--notify .setting-item-label {
|
||||
color: #DBD7E4;
|
||||
}
|
||||
|
||||
.setting-item-hint {
|
||||
grid-area: hint;
|
||||
color: #8A8A8A;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.setting-item-action {
|
||||
grid-area: action;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-item-right,
|
||||
.setting-item-value,
|
||||
.setting-item-arrow,
|
||||
.setting-item-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.setting-switch::after {
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
background: white;
|
||||
border-radius: 9999px;
|
||||
transition: left 0.15s ease;
|
||||
}
|
||||
|
||||
.setting-switch--on {
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
.setting-switch--on::after {
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
.setting-logout {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #EC237F;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #EC237F;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.setting-main {
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.setting-profile-pc,
|
||||
.setting-aside {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.is-setting-page {
|
||||
background: #0A0A0A;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.is-setting-page .site-header,
|
||||
body.is-setting-page .footer-box,
|
||||
body.is-setting-page .floating-action,
|
||||
body.is-setting-page .download-fab {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.setting-layout {
|
||||
min-height: 100vh;
|
||||
background: #0A0A0A;
|
||||
}
|
||||
|
||||
.setting-page {
|
||||
padding: 0;
|
||||
background: #0A0A0A;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.setting-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #181818;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-nav-back {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-nav-back img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
opacity: 0.55;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.setting-nav-title {
|
||||
margin: 0;
|
||||
flex: 1 1 0;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-nav-spacer {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-main {
|
||||
width: calc(100% - 32px);
|
||||
max-width: 343px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding: 14px 0;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-profile-pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-profile-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-aside {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.setting-aside-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-section-label {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 0 14px;
|
||||
border-bottom: 1px rgba(255, 255, 255, 0.10) solid;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-group .setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-item--avatar {
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.setting-item-hint,
|
||||
.setting-item-action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-item-label {
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setting-item-right {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-item-value {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.setting-item-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(250, 220, 68, 0.35);
|
||||
}
|
||||
|
||||
.setting-item-arrow {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.55;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.setting-group--security .setting-item {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.setting-group--notify .setting-item {
|
||||
height: 52px;
|
||||
padding: 0 14px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.setting-group--notify .setting-item-label {
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.setting-switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
margin-left: 0;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.setting-switch::after {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.setting-switch--on {
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
.setting-switch--on::after {
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
.setting-logout {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.90);
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", PingFang SC, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,210 @@
|
||||
/* Shared square promo ads — used by home / detail / play / user-center. */
|
||||
.square-promo {
|
||||
--square-promo-s: var(--detail-s, var(--play-s, var(--account-s, min(1, 100vw / 1920px))));
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.square-promo__track {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.square-promo__group {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.square-promo.is-marquee .square-promo__track {
|
||||
max-width: none;
|
||||
animation: square-promo-marquee 28s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.square-promo.is-marquee .square-promo__group {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.square-promo.is-marquee:hover .square-promo__track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes square-promo-marquee {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.square-promo.is-marquee .square-promo__track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square-promo__item {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
flex: 0 0 80px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.square-promo__item:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.square-promo__cover {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
background: #464646;
|
||||
border-radius: 12px;
|
||||
outline: 1px solid rgba(255, 255, 255, 0.3);
|
||||
outline-offset: -1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.square-promo__cover img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.square-promo__title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: #fff;
|
||||
font-size: inherit;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.square-promo {
|
||||
height: calc(102px * var(--square-promo-s));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.square-promo__track {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.square-promo__group {
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: calc(16px * var(--square-promo-s));
|
||||
}
|
||||
|
||||
.square-promo.is-marquee .square-promo__group {
|
||||
padding-right: calc(16px * var(--square-promo-s));
|
||||
}
|
||||
|
||||
.square-promo__item {
|
||||
width: calc(80px * var(--square-promo-s));
|
||||
min-width: calc(80px * var(--square-promo-s));
|
||||
flex: 0 0 calc(80px * var(--square-promo-s));
|
||||
gap: calc(4px * var(--square-promo-s));
|
||||
font-size: calc(12px * var(--square-promo-s));
|
||||
line-height: calc(18px * var(--square-promo-s));
|
||||
}
|
||||
|
||||
.square-promo__cover {
|
||||
width: calc(80px * var(--square-promo-s));
|
||||
height: calc(80px * var(--square-promo-s));
|
||||
border-radius: calc(12px * var(--square-promo-s));
|
||||
}
|
||||
|
||||
.square-promo__title {
|
||||
font-size: calc(12px * var(--square-promo-s));
|
||||
line-height: calc(18px * var(--square-promo-s));
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.square-promo--pc-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.square-promo {
|
||||
min-height: 78px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.square-promo__group {
|
||||
gap: 8px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.square-promo.is-marquee .square-promo__group {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.square-promo__item {
|
||||
width: clamp(48px, 14.933333vw, 56px);
|
||||
min-width: clamp(48px, 14.933333vw, 56px);
|
||||
flex: 0 0 clamp(48px, 14.933333vw, 56px);
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.square-promo__cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 9px;
|
||||
outline-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.square-promo__title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/* 标签详情与专题详情共用同一套 Figma 卡片、分页和响应式比例。 */
|
||||
.tag-page-body .tag-list-breadcrumb-current {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-page-body .tag-list-hero .section-empty {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,377 @@
|
||||
.theme-index-page-body {
|
||||
--site-footer-margin-top: min(24px, 1.25vw);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.theme-index-page-body .site-header,
|
||||
.theme-index-page-body .footer-box,
|
||||
.theme-index-page-body .home-mobile-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-index-page-body .download-fab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-index-page {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
padding: min(36px, 1.875vw) 60px min(18px, 0.9375vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(24px, 1.25vw);
|
||||
box-sizing: border-box;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.theme-index-breadcrumb {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(8px, 0.416667vw);
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(14px, 0.9375vw, 18px)/1.333333 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-index-breadcrumb a,
|
||||
.theme-index-breadcrumb span {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.theme-index-breadcrumb a,
|
||||
.theme-index-breadcrumb .is-current {
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.theme-index-breadcrumb a:hover,
|
||||
.theme-index-breadcrumb a:focus-visible,
|
||||
.theme-index-breadcrumb .is-current {
|
||||
color: #ec237f;
|
||||
}
|
||||
|
||||
.theme-index-intro {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.theme-index-intro h1,
|
||||
.theme-index-intro p {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-index-intro h1 {
|
||||
color: #fff;
|
||||
font: 600 clamp(18px, 1.25vw, 24px)/1.333333 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.theme-index-intro p {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 clamp(13px, 0.833333vw, 16px)/1.375 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.theme-index-section-title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(12px, 0.625vw);
|
||||
color: #fff;
|
||||
font: 600 clamp(18px, 1.25vw, 24px)/1.333333 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
|
||||
.theme-index-section-title > span {
|
||||
width: min(8px, 0.416667vw);
|
||||
height: min(22px, 1.145833vw);
|
||||
flex: 0 0 auto;
|
||||
background: #ec237f;
|
||||
border-radius: min(6px, 0.3125vw);
|
||||
}
|
||||
|
||||
.theme-index-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: min(20px, 1.041667vw);
|
||||
}
|
||||
|
||||
.theme-index-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: min(210px, 10.9375vw);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: min(18px, 0.9375vw);
|
||||
text-decoration: none;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.theme-index-card > img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.theme-index-card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);
|
||||
}
|
||||
|
||||
.theme-index-card-copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: min(8px, 0.416667vw);
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: min(12px, 0.625vw) min(24px, 1.25vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: min(8px, 0.416667vw);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.theme-index-card-count {
|
||||
max-width: 100%;
|
||||
padding: min(4px, 0.208333vw) min(8px, 0.416667vw);
|
||||
overflow: hidden;
|
||||
color: #EC237F;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: min(6px, 0.3125vw);
|
||||
box-sizing: border-box;
|
||||
font: 400 clamp(12px, 0.729167vw, 14px)/1.428571 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.theme-index-card-name {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font: 600 clamp(14px, 0.9375vw, 18px)/1.333333 "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.theme-index-empty {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font: 400 16px/22px "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
gap: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-btn,
|
||||
.theme-index-page .pagination-btn--wide {
|
||||
width: min(48px, 2.5vw);
|
||||
min-width: min(48px, 2.5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
border-radius: 999px;
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-btn--active,
|
||||
.theme-index-page .pagination-jump-submit {
|
||||
color: #fff;
|
||||
background: #ec237f;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-arrow {
|
||||
width: min(24px, 1.25vw);
|
||||
height: min(24px, 1.25vw);
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-ellipsis,
|
||||
.theme-index-page .pagination-jump-label,
|
||||
.theme-index-page .pagination-jump-input,
|
||||
.theme-index-page .pagination-jump-submit {
|
||||
font-size: clamp(12px, 0.833333vw, 16px);
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-jump-input {
|
||||
width: min(72px, 3.75vw);
|
||||
height: min(48px, 2.5vw);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-jump-submit {
|
||||
width: min(96px, 5vw);
|
||||
height: min(48px, 2.5vw);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-jump-submit:hover,
|
||||
.theme-index-page .pagination-jump-submit:focus-visible {
|
||||
background: #f04493;
|
||||
}
|
||||
|
||||
.theme-index-ads {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: min(36px, 1.875vw);
|
||||
}
|
||||
|
||||
.theme-index-ad {
|
||||
width: 100%;
|
||||
aspect-ratio: 758 / 94;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: min(12px, 0.625vw);
|
||||
}
|
||||
|
||||
.theme-index-ad img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.theme-index-page {
|
||||
padding: 24px 24px 18px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.theme-index-intro {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.theme-index-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.theme-index-card {
|
||||
height: auto;
|
||||
aspect-ratio: 373 / 210;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.theme-index-ad {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.site-shell.theme-index-page-body {
|
||||
--site-footer-margin-top: 24px;
|
||||
}
|
||||
|
||||
.theme-index-page {
|
||||
padding: 12px var(--site-shell-gutter) 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.theme-index-breadcrumb {
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.theme-index-intro {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.theme-index-intro h1 {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.theme-index-intro p {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.theme-index-section-title {
|
||||
gap: 6px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.theme-index-section-title > span {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.theme-index-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.theme-index-card {
|
||||
height: auto;
|
||||
aspect-ratio: 343 / 194;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.theme-index-card-copy {
|
||||
bottom: 8px;
|
||||
padding: 10px 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.theme-index-card-count {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.theme-index-card-name {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.theme-index-empty {
|
||||
min-height: 320px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.theme-index-page .pagination-jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-index-ads {
|
||||
height: auto;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.theme-index-ad {
|
||||
aspect-ratio: 343 / 47;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
.toast-host {
|
||||
--toast-bg: rgba(22, 18, 32, 0.88);
|
||||
--toast-border: rgba(255, 255, 255, 0.08);
|
||||
--toast-text: #F3EFFA;
|
||||
--toast-muted: #B7AEC8;
|
||||
--toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.28);
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 50%;
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 32px);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast-item {
|
||||
position: relative;
|
||||
min-width: 180px;
|
||||
max-width: min(380px, calc(100vw - 32px));
|
||||
padding: 13px 18px 13px 14px;
|
||||
background: var(--toast-bg);
|
||||
backdrop-filter: blur(18px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.2);
|
||||
box-shadow: var(--toast-shadow);
|
||||
border: 1px solid var(--toast-border);
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
color: var(--toast-text);
|
||||
font-size: 14px;
|
||||
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.45;
|
||||
word-break: break-word;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.96);
|
||||
transition:
|
||||
opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toast-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 3px;
|
||||
border-radius: 16px 0 0 16px;
|
||||
background: var(--toast-accent, rgba(255, 255, 255, 0.28));
|
||||
}
|
||||
|
||||
.toast-item.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.toast-item.is-leaving {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.97);
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--toast-icon-bg, rgba(255, 255, 255, 0.08));
|
||||
color: var(--toast-accent, var(--toast-muted));
|
||||
box-shadow: inset 0 0 0 1px var(--toast-icon-ring, rgba(255, 255, 255, 0.06));
|
||||
}
|
||||
|
||||
.toast-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.toast-item--info {
|
||||
--toast-accent: #A99BC4;
|
||||
--toast-icon-bg: rgba(169, 155, 196, 0.14);
|
||||
--toast-icon-ring: rgba(169, 155, 196, 0.22);
|
||||
}
|
||||
|
||||
.toast-item--success {
|
||||
--toast-accent: #EC237F;
|
||||
--toast-icon-bg: rgba(241, 43, 158, 0.16);
|
||||
--toast-icon-ring: rgba(241, 43, 158, 0.28);
|
||||
box-shadow:
|
||||
var(--toast-shadow),
|
||||
0 0 0 1px rgba(241, 43, 158, 0.08),
|
||||
0 10px 28px rgba(241, 43, 158, 0.12);
|
||||
}
|
||||
|
||||
.toast-item--error {
|
||||
--toast-accent: #FF6B7A;
|
||||
--toast-icon-bg: rgba(255, 107, 122, 0.14);
|
||||
--toast-icon-ring: rgba(255, 107, 122, 0.26);
|
||||
box-shadow:
|
||||
var(--toast-shadow),
|
||||
0 0 0 1px rgba(255, 107, 122, 0.08),
|
||||
0 10px 28px rgba(255, 107, 122, 0.1);
|
||||
}
|
||||
|
||||
.toast-item--warning {
|
||||
--toast-accent: #FFB84D;
|
||||
--toast-icon-bg: rgba(255, 184, 77, 0.14);
|
||||
--toast-icon-ring: rgba(255, 184, 77, 0.26);
|
||||
box-shadow:
|
||||
var(--toast-shadow),
|
||||
0 0 0 1px rgba(255, 184, 77, 0.08),
|
||||
0 10px 28px rgba(255, 184, 77, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.toast-host {
|
||||
top: 56px;
|
||||
gap: 10px;
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
|
||||
.toast-item {
|
||||
min-width: 0;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 24px);
|
||||
padding: 12px 14px 12px 12px;
|
||||
border-radius: 14px;
|
||||
font-size: 13px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.toast-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
.today-update-page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.today-update-hero {
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.today-update-channel {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 7px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.today-update-channel-label {
|
||||
color: #EC237F;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.today-update-channel-title {
|
||||
color: white;
|
||||
font-size: 34px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.today-update-channel-desc {
|
||||
color: #A3A3A3;
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.today-update-hero .card-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-cover {
|
||||
height: auto;
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card-tag {
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card-heat {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card-subtitle {
|
||||
color: #A3A3A3;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.today-update-page.page-shell {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 12px 16px;
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.today-update-hero {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.today-update-channel {
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.today-update-channel-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.today-update-channel-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.today-update-channel-desc {
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
.today-update-hero .card-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
justify-content: stretch;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-cover {
|
||||
height: 0;
|
||||
padding-bottom: 133.33%;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card-title {
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 700;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card-subtitle,
|
||||
.today-update-hero .poster-card-tag {
|
||||
color: #A3A3A3;
|
||||
}
|
||||
|
||||
.today-update-hero .poster-card-heat {
|
||||
color: #D4D4D4;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,241 @@
|
||||
.vip-dialog-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.vip-dialog-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vip-dialog-card {
|
||||
width: 456px;
|
||||
max-width: 100%;
|
||||
padding: 36px;
|
||||
position: relative;
|
||||
background: #0A0A0A;
|
||||
box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.46);
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vip-dialog-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vip-dialog-close-ring {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vip-dialog-close-x {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vip-dialog-close-x::before,
|
||||
.vip-dialog-close-x::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 1.5px;
|
||||
background: #808080;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.vip-dialog-close-x::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.vip-dialog-close-x::after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.vip-dialog-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.vip-dialog-icon-bg {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
opacity: 0.10;
|
||||
background: #EC237F;
|
||||
}
|
||||
|
||||
.vip-dialog-icon-crown {
|
||||
width: 24px;
|
||||
height: 21px;
|
||||
left: 14px;
|
||||
top: 16px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vip-dialog-title {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.vip-dialog-desc {
|
||||
text-align: center;
|
||||
color: #8A8A8A;
|
||||
font-size: 14px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.vip-dialog-benefits {
|
||||
text-align: center;
|
||||
color: #F59E0B;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.vip-dialog-cta {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #EC237F;
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
color: #181818;
|
||||
font-size: 16px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vip-dialog-skip {
|
||||
text-align: center;
|
||||
color: #8A8A8A;
|
||||
font-size: 12px;
|
||||
font-family: "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
word-wrap: break-word;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.vip-dialog-mask {
|
||||
background: rgba(0, 0, 0, 0.70);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.vip-dialog-card {
|
||||
width: 300px;
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: 32px 24px;
|
||||
background: rgba(23, 23, 23, 0.98);
|
||||
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.45);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.vip-dialog-close {
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.vip-dialog-close-ring {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vip-dialog-close-x::before,
|
||||
.vip-dialog-close-x::after {
|
||||
background: rgba(255, 255, 255, 0.60);
|
||||
}
|
||||
|
||||
.vip-dialog-icon {
|
||||
color: #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vip-dialog-icon-bg {
|
||||
opacity: 1;
|
||||
background: linear-gradient(135deg, #F12B9E 0%, #6D4BFF 100%);
|
||||
}
|
||||
|
||||
.vip-dialog-desc {
|
||||
align-self: stretch;
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
}
|
||||
|
||||
.vip-dialog-benefits {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.vip-dialog-cta {
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.vip-dialog-skip {
|
||||
color: rgba(255, 255, 255, 0.60);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user