Initial commit
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
fish03
Vendored
+4
File diff suppressed because one or more lines are too long
Vendored
+2
File diff suppressed because one or more lines are too long
Vendored
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,228 @@
|
||||
function imgEncrypt(buffer) {
|
||||
var bytes = new Uint8Array(buffer);
|
||||
var encoder = new TextEncoder();
|
||||
var KEY = encoder.encode('2019ysapp7527');
|
||||
for (var i = 0; i < Math.min(100, bytes.length); i++) {
|
||||
bytes[i] ^= KEY[i % KEY.length];
|
||||
}
|
||||
var mime = 'image/jpeg';
|
||||
if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38) {
|
||||
mime = 'image/gif';
|
||||
} else if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) {
|
||||
mime = 'image/png';
|
||||
} else if (
|
||||
bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 &&
|
||||
bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50
|
||||
) {
|
||||
mime = 'image/webp';
|
||||
}
|
||||
var blob = new Blob([bytes], {
|
||||
type: mime,
|
||||
});
|
||||
return URL.createObjectURL(blob);
|
||||
}
|
||||
|
||||
var IMG_PLACEHOLDER = '/static/images/placeholder.png?v=2';
|
||||
var lazyImageObserver = null;
|
||||
var decryptedURLCache = Object.create(null);
|
||||
var decryptInflight = Object.create(null);
|
||||
var decryptQueue = [];
|
||||
var decryptActive = 0;
|
||||
// H5 弱网降低并发，优先完成 LCP 主图；PC 保持 4
|
||||
var DECRYPT_CONCURRENCY =
|
||||
window.matchMedia && window.matchMedia("(max-width: 767px)").matches ? 2 : 4;
|
||||
|
||||
function shouldDecryptImage(url) {
|
||||
if (!url) return false;
|
||||
var u = String(url).trim();
|
||||
if (!u) return false;
|
||||
if (u.indexOf('data:') === 0 || u.indexOf('blob:') === 0) return false;
|
||||
if (u.indexOf('/static/') === 0) return false;
|
||||
if (u.indexOf('placehold.co') >= 0) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function applyImageResult(dom, type, url) {
|
||||
if (!dom || !url) return;
|
||||
if (type === 'bgImg') {
|
||||
dom.style.setProperty('background-image', 'url("' + url + '")');
|
||||
} else {
|
||||
dom.src = url;
|
||||
}
|
||||
}
|
||||
|
||||
function fetchDecrypt(url, priority) {
|
||||
if (decryptedURLCache[url]) {
|
||||
return Promise.resolve(decryptedURLCache[url]);
|
||||
}
|
||||
if (decryptInflight[url]) {
|
||||
return decryptInflight[url];
|
||||
}
|
||||
|
||||
decryptInflight[url] = new Promise(function (resolve, reject) {
|
||||
var run = function () {
|
||||
decryptActive += 1;
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.onload = function () {
|
||||
decryptActive -= 1;
|
||||
pumpDecryptQueue();
|
||||
if (xhr.status === 200) {
|
||||
var blobUrl = imgEncrypt(xhr.response);
|
||||
decryptedURLCache[url] = blobUrl;
|
||||
resolve(blobUrl);
|
||||
return;
|
||||
}
|
||||
reject(xhr.status);
|
||||
};
|
||||
xhr.onerror = function () {
|
||||
decryptActive -= 1;
|
||||
pumpDecryptQueue();
|
||||
reject('network');
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
if (decryptActive < DECRYPT_CONCURRENCY) {
|
||||
run();
|
||||
} else if (priority) {
|
||||
decryptQueue.unshift(run);
|
||||
} else {
|
||||
decryptQueue.push(run);
|
||||
}
|
||||
});
|
||||
decryptInflight[url].then(
|
||||
function () { delete decryptInflight[url]; },
|
||||
function () { delete decryptInflight[url]; }
|
||||
);
|
||||
|
||||
return decryptInflight[url];
|
||||
}
|
||||
|
||||
function pumpDecryptQueue() {
|
||||
while (decryptActive < DECRYPT_CONCURRENCY && decryptQueue.length) {
|
||||
var next = decryptQueue.shift();
|
||||
if (typeof next === 'function') next();
|
||||
}
|
||||
}
|
||||
|
||||
function processImage(url, dom, type, fallback) {
|
||||
if (!url || !dom) {
|
||||
return Promise.resolve('');
|
||||
}
|
||||
|
||||
if (!shouldDecryptImage(url)) {
|
||||
applyImageResult(dom, type, url);
|
||||
return Promise.resolve(url);
|
||||
}
|
||||
|
||||
var priority =
|
||||
!!dom &&
|
||||
(dom.getAttribute('fetchpriority') === 'high' ||
|
||||
dom.getAttribute('data-lazy-eager') === '1');
|
||||
|
||||
return fetchDecrypt(url, priority)
|
||||
.then(function (blobUrl) {
|
||||
applyImageResult(dom, type, blobUrl);
|
||||
return blobUrl;
|
||||
})
|
||||
.catch(function () {
|
||||
if (dom.tagName === 'IMG') {
|
||||
dom.src = fallback || IMG_PLACEHOLDER;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
}
|
||||
|
||||
function loadLazyNode(node) {
|
||||
if (!node || node.getAttribute('data-decrypted') === '1') {
|
||||
return;
|
||||
}
|
||||
var src = node.getAttribute('data-src');
|
||||
if (!src) {
|
||||
return;
|
||||
}
|
||||
node.setAttribute('data-decrypted', '1');
|
||||
if (node.tagName === 'IMG') {
|
||||
if (!node.getAttribute('src')) {
|
||||
node.src = IMG_PLACEHOLDER;
|
||||
}
|
||||
processImage(src, node);
|
||||
return;
|
||||
}
|
||||
if (node.classList && node.classList.contains('blog-background')) {
|
||||
processImage(src, node, 'bgImg');
|
||||
}
|
||||
}
|
||||
|
||||
function getLazyImageObserver() {
|
||||
if (lazyImageObserver) {
|
||||
return lazyImageObserver;
|
||||
}
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
return null;
|
||||
}
|
||||
lazyImageObserver = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) {
|
||||
return;
|
||||
}
|
||||
var node = entry.target;
|
||||
lazyImageObserver.unobserve(node);
|
||||
loadLazyNode(node);
|
||||
});
|
||||
},
|
||||
{
|
||||
rootMargin: '180px 0px',
|
||||
threshold: 0.01,
|
||||
}
|
||||
);
|
||||
return lazyImageObserver;
|
||||
}
|
||||
|
||||
function observeLazyNode(node, eager) {
|
||||
if (!node || node.getAttribute('data-decrypted') === '1') {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
eager ||
|
||||
node.getAttribute('fetchpriority') === 'high' ||
|
||||
node.getAttribute('data-lazy-eager') === '1'
|
||||
) {
|
||||
loadLazyNode(node);
|
||||
return;
|
||||
}
|
||||
var observer = getLazyImageObserver();
|
||||
if (!observer) {
|
||||
loadLazyNode(node);
|
||||
return;
|
||||
}
|
||||
observer.observe(node);
|
||||
}
|
||||
|
||||
function initLazyImages(root, options) {
|
||||
root = root || document;
|
||||
options = options || {};
|
||||
var eager = !!options.eager;
|
||||
|
||||
root.querySelectorAll('img.lazy[data-src]:not([data-decrypted])').forEach(function (img) {
|
||||
observeLazyNode(img, eager);
|
||||
});
|
||||
|
||||
root.querySelectorAll('.blog-background.lazy[data-src]:not([data-decrypted])').forEach(function (node) {
|
||||
observeLazyNode(node, eager);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
initLazyImages();
|
||||
});
|
||||
|
||||
window.initLazyImages = initLazyImages;
|
||||
window.__lazyLoadImages = initLazyImages;
|
||||
window.loadLazyNode = loadLazyNode;
|
||||
window.processImage = processImage;
|
||||
window.imgEncrypt = imgEncrypt;
|
||||
window.shouldDecryptImage = shouldDecryptImage;
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
+13
File diff suppressed because one or more lines are too long
+14
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
@@ -0,0 +1,74 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40094_467923)">
|
||||
<rect x="-0.0709839" y="-0.204613" width="512" height="512" fill="url(#paint0_linear_40094_467923)"/>
|
||||
<g filter="url(#filter0_d_40094_467923)">
|
||||
<path d="M238.524 404.369C316.134 404.369 379.049 341.454 379.049 263.845C379.049 186.236 316.134 123.321 238.524 123.321C160.915 123.321 98 186.236 98 263.845C98 341.454 160.915 404.369 238.524 404.369Z" fill="url(#paint1_linear_40094_467923)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_40094_467923)">
|
||||
<path d="M271.513 127.259C238.02 119.177 204.433 123.825 175.855 138.098C179.605 156.057 193.295 171.181 212.31 175.781C215.177 176.474 218.029 176.884 220.88 177.057C226.457 191.614 238.855 203.271 255.16 207.21C271.466 211.148 287.251 206.58 298.83 196.545C299.886 196.875 300.957 197.19 302.06 197.458C321.074 202.058 340.168 194.843 351.7 180.57C332.78 154.828 305.021 135.357 271.529 127.275L271.513 127.259Z" fill="white"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_d_40094_467923)">
|
||||
<path d="M291.246 115.426C292.945 108.094 288.383 100.774 281.055 99.0751C273.728 97.3767 266.41 101.943 264.711 109.275L259.631 131.191C257.932 138.522 262.494 145.842 269.822 147.541C277.149 149.239 284.467 144.673 286.166 137.341L291.246 115.426Z" fill="url(#paint2_linear_40094_467923)"/>
|
||||
</g>
|
||||
<path d="M154.541 192.464C159.661 184.966 171.933 192.055 166.781 199.617C154.131 218.174 143.182 237.268 139.81 258.867C139.472 261.037 139.199 263.253 138.991 265.502C140.594 266.304 142.298 266.877 144.104 267.289C144.826 261.066 146.254 254.887 148.239 248.721C151.028 240.057 164.717 243.775 161.913 252.487C158.258 263.845 156.305 275.219 158.668 287.05C160.448 295.967 146.79 299.748 144.994 290.816C144.373 287.713 143.964 284.63 143.75 281.563C141.997 281.279 140.262 280.923 138.562 280.451C139.079 296.383 142.639 312.792 149.326 326.23C153.39 334.375 141.15 341.558 137.086 333.382C126.137 311.374 122.435 283.695 125.522 259.434C128.768 234.054 140.347 213.291 154.556 192.449L154.541 192.464Z" fill="white"/>
|
||||
<g filter="url(#filter3_d_40094_467923)">
|
||||
<path d="M408.839 354.729L304.943 414.72C298.011 418.721 289.33 413.711 289.33 405.708V285.743C289.33 277.74 297.995 272.73 304.943 276.732L408.839 336.722C415.771 340.724 415.771 350.743 408.839 354.745V354.729Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40094_467923" x="46.0123" y="71.333" width="407.079" height="407.079" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="11.0277" dy="11.0277"/>
|
||||
<feGaussianBlur stdDeviation="31.5077"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40094_467923"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40094_467923" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_40094_467923" x="164.828" y="112.278" width="219.955" height="129.423" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="11.0277" dy="11.0277"/>
|
||||
<feGaussianBlur stdDeviation="11.0277"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40094_467923"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40094_467923" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_40094_467923" x="257.701" y="97.1452" width="44.928" height="61.778" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="4.72615" dy="4.72615"/>
|
||||
<feGaussianBlur stdDeviation="3.15077"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40094_467923"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40094_467923" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_40094_467923" x="237.343" y="223.337" width="250.738" height="266.833" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="11.0277" dy="11.0277"/>
|
||||
<feGaussianBlur stdDeviation="31.5077"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40094_467923"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40094_467923" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_40094_467923" x1="-0.0236807" y1="-0.204612" x2="511.976" y2="511.795" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF5F6E"/>
|
||||
<stop offset="0.5" stop-color="#FE2A7F"/>
|
||||
<stop offset="1" stop-color="#8C206E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_40094_467923" x1="312.091" y1="383.828" x2="165.578" y2="143.989" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.04" stop-color="#F9A77C"/>
|
||||
<stop offset="0.48" stop-color="#F9DA29"/>
|
||||
<stop offset="1" stop-color="#FFE292"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_40094_467923" x1="282.758" y1="145.348" x2="268.119" y2="101.268" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.04" stop-color="#F9A77C"/>
|
||||
<stop offset="0.48" stop-color="#F9DA29"/>
|
||||
<stop offset="1" stop-color="#FFE292"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_40094_467923">
|
||||
<rect width="512" height="512" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 10L12.0008 14.58L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 220 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.875 6L10.875 9L7.875 12" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 223 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 5.25L11.25 9L7.5 12.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 224 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14.5834L12.0008 10L17 14.5834" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 227 B |
@@ -0,0 +1,17 @@
|
||||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40748_78467)">
|
||||
<rect x="12" y="12" width="120" height="120" rx="60" fill="white" fill-opacity="0.05"/>
|
||||
<path d="M86.3182 46.0879H57.6819C55.6939 46.0915 53.7883 46.8828 52.3826 48.2886C50.9768 49.6943 50.1855 51.5999 50.1819 53.5879V90.4061C50.1855 92.3941 50.9768 94.2996 52.3826 95.7054C53.7883 97.1111 55.6939 97.9025 57.6819 97.9061H86.3182C88.3074 97.9061 90.215 97.1159 91.6215 95.7094C93.0281 94.3028 93.8182 92.3952 93.8182 90.4061V53.5879C93.8182 51.5988 93.0281 49.6911 91.6215 48.2846C90.215 46.8781 88.3074 46.0879 86.3182 46.0879ZM78.1364 86.997H65.8637C65.3212 86.997 64.8009 86.7815 64.4173 86.3979C64.0337 86.0143 63.8182 85.494 63.8182 84.9515C63.8182 84.409 64.0337 83.8888 64.4173 83.5052C64.8009 83.1216 65.3212 82.9061 65.8637 82.9061H78.1364C78.6789 82.9061 79.1992 83.1216 79.5828 83.5052C79.9664 83.8888 80.1819 84.409 80.1819 84.9515C80.1819 85.494 79.9664 86.0143 79.5828 86.3979C79.1992 86.7815 78.6789 86.997 78.1364 86.997Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40748_78467" x="0" y="0" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40748_78467"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40748_78467" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40748_78473)">
|
||||
<rect x="12" y="12" width="120" height="120" rx="60" fill="white" fill-opacity="0.05"/>
|
||||
<path d="M63.1914 61.9375C62.0297 61.5379 60.7822 61.4526 59.5771 61.6914C58.7293 61.8502 57.9253 62.1894 57.2197 62.6855C56.514 63.1819 55.9225 63.8249 55.4863 64.5693C54.6806 66.1078 54.5146 67.9026 55.0254 69.5625C55.5362 71.2224 56.6825 72.6133 58.2139 73.4326L60.8184 74.9326L56.5908 77.373C56.2002 77.5979 55.8954 77.9461 55.7227 78.3623C55.5499 78.7786 55.5191 79.2404 55.6357 79.6758C55.7524 80.111 56.0096 80.4954 56.3672 80.7695C56.7248 81.0436 57.1628 81.1918 57.6133 81.1914C57.972 81.1899 58.3249 81.0963 58.6367 80.9189L63.123 78.3145V95.1826H52.2139C51.2285 95.1826 50.2528 94.9882 49.3428 94.6104C48.4327 94.2324 47.6057 93.6785 46.9102 92.9805C46.2146 92.2824 45.6637 91.4534 45.2891 90.542C44.9145 89.6307 44.7239 88.6542 44.7275 87.6689V56.3057C44.7275 55.3168 44.9233 54.3375 45.3037 53.4248C45.6842 52.512 46.2419 51.6834 46.9443 50.9873C47.6467 50.2913 48.4804 49.7413 49.3965 49.3691C50.3126 48.997 51.2935 48.8103 52.2822 48.8193H63.1914V61.9375ZM91.7998 48.8184C92.7841 48.8201 93.7585 49.0168 94.667 49.3955C95.5754 49.7742 96.4007 50.3276 97.0947 51.0254C97.7887 51.7232 98.3382 52.5515 98.7119 53.4619C99.0856 54.3724 99.276 55.3479 99.2725 56.332V87.6963C99.2724 88.6804 99.0782 89.6554 98.7012 90.5645C98.3241 91.4734 97.7716 92.299 97.0752 92.9941C96.3786 93.6895 95.5515 94.2408 94.6416 94.6162C93.7318 94.9916 92.7567 95.1844 91.7725 95.1826H67.2275V78.6416L71.1953 81C71.5085 81.174 71.8605 81.2684 72.2188 81.2734C72.6692 81.2738 73.1073 81.1255 73.4648 80.8516C73.8225 80.5774 74.0797 80.1922 74.1963 79.7568C74.3129 79.3215 74.2821 78.8596 74.1094 78.4434C73.9366 78.0273 73.6316 77.6798 73.2412 77.4551L69 74.9326L71.6318 73.3643C73.156 72.5255 74.32 71.1572 74.9043 69.5186C75.19 68.7069 75.2968 67.8431 75.2168 66.9863C75.1368 66.1295 74.8725 65.2995 74.4414 64.5547C74.0045 63.8108 73.4127 63.1691 72.707 62.6729C72.0015 62.1767 71.1973 61.8374 70.3496 61.6777C69.3228 61.482 68.2653 61.5195 67.2549 61.7871V48.8184H91.7998ZM60.3408 65.7002C61.0639 65.5604 61.8138 65.6967 62.4414 66.082C62.6511 66.2034 62.8828 66.2828 63.123 66.3145V71.5508L60.2451 69.8867C59.648 69.6153 59.1813 69.1204 58.9443 68.5088C58.7074 67.8971 58.7191 67.2172 58.9775 66.6143C59.1268 66.3738 59.3254 66.1673 59.5605 66.0098C59.7956 65.8523 60.0617 65.7468 60.3408 65.7002ZM67.377 66.0664C68.0036 65.6785 68.7544 65.5421 69.4775 65.6846C69.7574 65.7286 70.0244 65.8326 70.2598 65.9902C70.4952 66.148 70.6936 66.3555 70.8408 66.5977C70.9764 66.846 71.0579 67.1212 71.0791 67.4033C71.1002 67.6853 71.0608 67.9687 70.9639 68.2344C70.713 68.9263 70.2186 69.5036 69.5732 69.8574L67.2139 71.2207V66.1338L67.377 66.0664Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40748_78473" x="0" y="0" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40748_78473"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40748_78473" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40748_78502)">
|
||||
<rect x="12" y="12" width="120" height="120" rx="60" fill="white" fill-opacity="0.05"/>
|
||||
<path d="M92.6234 56.2994H95.6875C96.566 56.2994 97.4086 56.6458 98.0298 57.2624C98.651 57.8791 99 58.7154 99 59.5874V76.0273C99 76.8994 98.651 77.7357 98.0298 78.3523C97.4086 78.9689 96.566 79.3153 95.6875 79.3153H89.6571L75.7959 59.4394L74.1844 57.174L64.3198 61.695C63.6823 61.9871 62.9677 62.0706 62.2793 61.9334C59.2682 61.3333 58.2579 60.2877 59.2483 58.795C60.2073 57.3499 64.2883 54.4433 71.493 50.072C71.6818 49.9569 71.8773 49.8583 72.0777 49.7793C75.1036 48.3655 78.5569 48.8751 82.4358 51.3099C85.6426 53.3281 89.0573 55.0008 92.6218 56.2994H92.6234ZM48.2624 79.146C47.6035 78.9274 47.0304 78.5086 46.6244 77.9489C46.2184 77.3892 45.9999 76.717 46 76.0273V59.5874C46 58.7154 46.349 57.8791 46.9702 57.2624C47.5914 56.6458 48.434 56.2994 49.3125 56.2994H56.9511L56.9379 56.3109C56.4767 56.7232 56.1112 57.23 55.8666 57.7961C55.6219 58.3623 55.504 58.9744 55.5208 59.5902C55.5377 60.206 55.6889 60.8108 55.9642 61.363C56.2394 61.9151 56.6321 62.4014 57.1151 62.7883C58.3089 63.7447 59.7315 64.3786 61.2449 64.6283C62.7583 64.878 64.3111 64.7352 65.7524 64.2136L73.2039 61.5175L78.4294 69.0141C78.5901 69.167 78.7349 69.3355 78.8617 69.5171L88.0207 82.6559C88.2913 83.0441 88.4744 83.4855 88.5578 83.9502C88.6411 84.4149 88.6227 84.892 88.5037 85.349C88.3848 85.806 88.1681 86.2322 87.8684 86.5987C87.5687 86.9652 87.193 87.2633 86.7669 87.4728L72.1356 94.6587C71.4566 94.9924 70.7113 95.0746 70.0156 94.9349L70.5572 94.3907C71.7831 93.1598 72.4706 91.4987 72.4706 89.7678C72.4706 88.037 71.7831 86.3759 70.5572 85.1449L59.9572 74.4984C59.4951 74.0342 58.9447 73.6656 58.338 73.414C57.7313 73.1624 57.0803 73.0329 56.4228 73.0329C55.7653 73.0329 55.1143 73.1624 54.5076 73.414C53.9009 73.6656 53.3505 74.0342 52.8883 74.4984L48.2608 79.146H48.2624ZM58.6471 77.7322L68.048 87.172C68.4533 87.5793 68.7445 88.0847 68.8926 88.638C69.0408 89.1913 69.0408 89.7735 68.8927 90.3268L68.419 92.1072C68.3123 92.5065 68.109 92.8738 67.8267 93.1773C67.5443 93.4807 67.1916 93.7111 66.7991 93.8484C66.4066 93.9856 65.9863 94.0256 65.5747 93.9649C65.163 93.9041 64.7726 93.7444 64.4374 93.4997L52.3501 84.6747C51.967 84.395 51.6492 84.0367 51.4181 83.6241C51.187 83.2116 51.0481 82.7545 51.0109 82.2839C50.9736 81.8133 51.0389 81.3403 51.2023 80.897C51.3656 80.4537 51.6232 80.0505 51.9575 79.7148L53.9334 77.7289C54.2415 77.4195 54.6084 77.1738 55.0128 77.0061C55.4173 76.8385 55.8512 76.7521 56.2895 76.7521C56.7277 76.7521 57.1617 76.8385 57.5661 77.0061C57.9705 77.1738 58.3374 77.4195 58.6455 77.7289L58.6471 77.7322Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40748_78502" x="0" y="0" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40748_78502"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40748_78502" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40635_136217)">
|
||||
<rect x="12" y="12" width="120" height="120" rx="60" fill="white" fill-opacity="0.05"/>
|
||||
<path d="M90.6957 91.35L98.8474 54.0057C99.5674 50.7192 97.626 49.4269 95.409 50.233L47.5053 68.1772C44.2333 69.4208 44.2914 71.1956 46.9516 72.0017L59.2047 75.7202L87.6482 58.3097C88.98 57.4482 90.2002 57.9344 89.2046 58.7959L66.1955 79.0021L65.3092 91.2912C65.791 91.2943 66.267 91.1887 66.6997 90.9827C67.1324 90.7768 67.5101 90.476 67.803 90.1042L73.7888 84.5L86.2082 93.3907C88.4822 94.6343 90.0897 93.9853 90.7016 91.3421L90.6957 91.35Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40635_136217" x="0" y="0" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40635_136217"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40635_136217" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40635_136202)">
|
||||
<rect x="12" y="12" width="120" height="120" rx="60" fill="white" fill-opacity="0.05"/>
|
||||
<path d="M87.5281 48H95.8085L77.7184 68.3323L99 96H82.3367L69.2854 79.2197L54.3516 96H46.0663L65.4155 74.2523L45 48H62.0864L73.8836 63.3378L87.5281 48ZM84.622 91.1262H89.2103L59.5932 52.6179H54.6695L84.622 91.1262Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40635_136202" x="0" y="0" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40635_136202"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40635_136202" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40635_136197)">
|
||||
<rect x="12" y="12" width="120" height="120" rx="60" fill="white" fill-opacity="0.05"/>
|
||||
<path d="M79.3013 48.9671C74.4346 48.8443 69.5655 48.8443 64.6988 48.9671H64.5563C60.7425 49.0646 57.675 49.1433 55.2188 49.5708C52.6425 50.0208 50.55 50.8796 48.7838 52.6533C47.0213 54.4196 46.17 56.4783 45.7313 59.0133C45.3113 61.4246 45.2438 64.4133 45.1688 68.1258L45.165 68.2721C45.112 70.7568 45.112 73.2423 45.165 75.7271V75.8771C45.2475 79.5821 45.3113 82.5746 45.7275 84.9896C46.17 87.5171 47.025 89.5796 48.7838 91.3458C50.55 93.1196 52.6463 93.9783 55.2188 94.4283C57.675 94.8558 60.7425 94.9346 64.5563 95.0283L64.6988 95.0321C69.5655 95.1547 74.4346 95.1547 79.3013 95.0321H79.4475C83.2575 94.9346 86.325 94.8558 88.785 94.4283C91.3575 93.9783 93.4501 93.1196 95.2163 91.3458C96.9788 89.5833 97.83 87.5208 98.2688 84.9858C98.6888 82.5746 98.7563 79.5858 98.8313 75.8733L98.835 75.7271C98.8876 73.2371 98.8876 70.7621 98.835 68.2721V68.1221C98.7525 64.4171 98.6888 61.4246 98.2725 59.0133C97.83 56.4821 96.975 54.4196 95.2163 52.6533C93.4501 50.8796 91.3538 50.0208 88.785 49.5708C86.325 49.1433 83.2575 49.0646 79.4475 48.9708L79.2976 48.9671H79.3013ZM60.45 61.6346L67.8075 65.9846C69.9188 67.2333 71.04 67.6233 71.9963 67.6233C72.9525 67.6233 74.0775 67.2333 76.1888 65.9846L83.5425 61.6346C83.7546 61.5092 83.9892 61.4269 84.233 61.3922C84.4768 61.3576 84.7251 61.3713 84.9636 61.4326C85.2021 61.4938 85.4263 61.6015 85.6232 61.7494C85.8201 61.8973 85.986 62.0826 86.1113 62.2946C86.2366 62.5066 86.319 62.7412 86.3536 62.985C86.3883 63.2288 86.3746 63.4771 86.3133 63.7156C86.252 63.9542 86.1443 64.1783 85.9964 64.3752C85.8485 64.5721 85.6633 64.738 85.4513 64.8633L78.0975 69.2133C75.9188 70.4996 74.04 71.3733 71.9963 71.3733C69.9525 71.3733 68.0738 70.4996 65.8988 69.2133L58.5413 64.8633C58.1228 64.6052 57.8224 64.1931 57.7049 63.7157C57.5873 63.2383 57.662 62.7339 57.9127 62.311C58.1635 61.8881 58.5704 61.5806 59.0457 61.4548C59.5209 61.329 60.0266 61.3949 60.4538 61.6383L60.45 61.6346Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40635_136197" x="0" y="0" width="144" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40635_136197"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40635_136197" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 17L10 12L15 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 12.5L10.5 16L17 8.5" stroke="#EC237F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.25731 0.913926C9.45132 0.632201 9.71152 0.401732 10.0154 0.242481C10.3192 0.08323 10.6575 0 11.001 0C11.3445 0 11.6828 0.08323 11.9867 0.242481C12.2905 0.401732 12.5507 0.632201 12.7447 0.913926L15.3437 4.68251C15.5195 4.93642 15.7769 5.12351 16.0737 5.21037L20.4841 6.50189C20.8135 6.59856 21.1142 6.7735 21.3603 7.01158C21.6064 7.24966 21.7904 7.54373 21.8965 7.86835C22.0026 8.19298 22.0276 8.53841 21.9693 8.87477C21.9109 9.21114 21.7711 9.52832 21.5617 9.79892L18.7581 13.4195C18.5689 13.6639 18.47 13.9655 18.4796 14.2729L18.6054 18.8405C18.6148 19.1817 18.5404 19.52 18.3886 19.8263C18.2369 20.1325 18.0124 20.3974 17.7346 20.598C17.4567 20.7987 17.1339 20.9291 16.794 20.978C16.4541 21.0268 16.1073 20.9926 15.7836 20.8784L11.452 19.3473C11.16 19.2441 10.8411 19.2441 10.5491 19.3473L6.21747 20.8784C5.89381 20.9929 5.54696 21.0272 5.20694 20.9785C4.86692 20.9297 4.54398 20.7993 4.26607 20.5986C3.98816 20.3979 3.76366 20.1329 3.61199 19.8266C3.46033 19.5202 3.38607 19.1817 3.39565 18.8405L3.52243 14.2729C3.53106 13.9651 3.43269 13.6637 3.24389 13.4195L0.43936 9.79892C0.229598 9.52832 0.0893836 9.21098 0.0308657 8.87438C-0.0276522 8.53778 -0.00270912 8.19208 0.103534 7.86722C0.209777 7.54237 0.394116 7.24816 0.640579 7.01008C0.887043 6.772 1.1882 6.59724 1.51795 6.50093L5.92741 5.20847C6.22515 5.12256 6.48255 4.93546 6.65736 4.68155L9.25731 0.912972V0.913926Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.5037 4H8.49635C6.08759 4 4 6.1581 4 8.64822V17.9447C4 20.4348 6.08759 22.5929 8.49635 22.5929H8.9781C8.9781 22.5929 8.9781 22.7589 9.13869 22.7589L10.9051 24.751C11.2263 25.083 11.708 25.083 11.8686 24.751L13.4745 22.9249L13.635 22.7589H21.5037C23.9124 22.7589 26 20.6008 26 18.1107V8.64822C26 6.1581 23.9124 4 21.5037 4ZM8.81752 15.1225C7.85401 15.1225 7.21168 14.2925 7.21168 13.2964C7.21168 12.3004 8.0146 11.4704 8.9781 11.4704C9.94161 11.4704 10.7445 12.3004 10.7445 13.2964C10.5839 14.2925 9.78102 15.1225 8.81752 15.1225ZM14.9197 15.1225C13.9562 15.1225 13.1533 14.2925 13.1533 13.2964C13.1533 12.3004 13.9562 11.4704 14.9197 11.4704C15.8832 11.4704 16.6861 12.3004 16.6861 13.2964C16.6861 14.2925 15.8832 15.1225 14.9197 15.1225ZM21.1825 15.1225C20.219 15.1225 19.4161 14.2925 19.4161 13.2964C19.4161 12.3004 20.219 11.4704 21.1825 11.4704C22.146 11.4704 22.9489 12.3004 22.9489 13.2964C22.7883 14.2925 21.9854 15.1225 21.1825 15.1225Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.78935 5.85395C11.9034 5.85395 13.5507 7.50126 13.5507 9.61529C13.5507 10.0546 13.4683 10.6037 13.2487 10.9606L15.4176 13.1296C16.5433 12.1412 17.4493 10.9606 17.971 9.58784C16.6806 6.29322 13.4683 3.95955 9.70698 3.95955C8.6637 3.95955 7.67531 4.1792 6.6869 4.48121L8.33422 6.1285C8.82842 5.93632 9.35008 5.85397 9.78937 5.85397L9.78935 5.85395ZM2.26668 3.84972L4.29835 5.8814C3.03542 6.84233 2.04702 8.13272 1.52539 9.61529C2.81578 12.9099 6.02803 15.2436 9.78937 15.2436C10.915 15.2436 12.0407 15.0239 13.1114 14.6396L15.5824 17.1105L16.5708 16.1221L3.25504 2.86133L2.26664 3.8497L2.26668 3.84972ZM6.4124 7.968L7.53806 9.09365V9.61532C7.53806 10.9057 8.52644 11.8666 9.78937 11.8666C9.92666 11.8666 10.0914 11.8666 10.311 11.7843L11.4367 12.9099C10.915 13.2119 10.3934 13.3492 9.78938 13.3492C7.67536 13.3492 6.02806 11.7019 6.02806 9.58789C6.02806 9.01134 6.1928 8.48967 6.41246 7.96805L6.4124 7.968ZM9.65211 7.36398L11.9858 9.69766V9.56038C11.9858 8.26999 10.9974 7.30906 9.73446 7.30906C9.73446 7.36398 9.73448 7.36398 9.65211 7.36398Z" fill="#A8A1B8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 3.33331C15.8158 3.33331 18.75 7.49998 18.75 9.99998C18.75 12.5 15.8158 16.6666 10 16.6666C4.18417 16.6666 1.25 12.5 1.25 9.99998C1.25 7.49998 4.18417 3.33331 10 3.33331ZM10 4.99998C4.99583 4.99998 2.91667 8.12498 2.91667 9.99998C2.91667 11.875 4.99583 15 10 15C15.0042 15 17.0833 11.875 17.0833 9.99998C17.0833 8.12498 15.0042 4.99998 10 4.99998ZM9.93583 7.08581C9.97107 7.08729 10.0052 7.09858 10.0344 7.11843C10.0635 7.13827 10.0865 7.16587 10.1008 7.19812C10.1151 7.23036 10.1201 7.26595 10.1153 7.30089C10.1104 7.33582 10.0959 7.3687 10.0733 7.39581L10.005 7.48248C9.89 7.63665 9.77167 7.84081 9.69167 8.09915C9.47667 8.78581 9.71333 9.47998 10.0792 9.84915C10.4267 10.1991 10.8933 10.5241 11.6667 10.4908C12.0408 10.4591 12.3567 10.2933 12.5775 10.1383L12.6167 10.1175C12.648 10.1045 12.6822 10.0997 12.7159 10.1035C12.7496 10.1072 12.7818 10.1195 12.8096 10.139C12.8374 10.1585 12.8597 10.1847 12.8747 10.2152C12.8896 10.2457 12.8966 10.2794 12.895 10.3133L12.8933 10.3541C12.8926 10.3686 12.8915 10.3831 12.89 10.3975C12.8143 10.9478 12.583 11.465 12.2233 11.8883C11.8637 12.3116 11.3906 12.6234 10.8598 12.787C10.329 12.9507 9.76247 12.9593 9.2269 12.812C8.69133 12.6646 8.20898 12.3674 7.83656 11.9553C7.46414 11.5432 7.21715 11.0333 7.12464 10.4856C7.03213 9.93786 7.09794 9.37512 7.31434 8.86354C7.53073 8.35196 7.88871 7.91281 8.34617 7.59773C8.80363 7.28266 9.34155 7.10477 9.89667 7.08498L9.93583 7.08581Z" fill="#A8A1B8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 5.18754L12.7463 0L0 12.5857L0.00468579 17.7687H0.0103087V17.9991L17.4049 18V16.612H6.42984L18 5.18754Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 275 B |
@@ -0,0 +1,13 @@
|
||||
<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.2676 0.87793C14.7429 -0.424404 17.0448 0.409539 17.3868 2.35254L19.3145 13.2998L19.3399 13.4785C19.5386 15.3219 17.7536 16.7952 15.9844 16.1416L15.6866 16.0322C14.9051 15.7438 14.0307 15.8824 13.3809 16.4072C13.0329 16.688 12.6759 17.0789 12.3321 17.6191C10.6263 20.2994 7.54206 21.5733 4.93073 22.1826C3.61958 22.4885 2.41365 22.6303 1.53619 22.6953C1.09742 22.7278 0.739667 22.7417 0.491272 22.7471C0.367292 22.7497 0.270439 22.75 0.204163 22.75C0.171046 22.75 0.145398 22.7502 0.127991 22.75C0.119286 22.7499 0.112085 22.7491 0.107483 22.749H0.100647L0.0547485 22.2627L0.0527954 22.2549H0.0547485C0.0561389 22.2546 0.0583894 22.2537 0.0615845 22.2529C0.0682333 22.2514 0.0786545 22.2486 0.0928345 22.2451C0.121207 22.2381 0.16429 22.2269 0.220764 22.2109C0.333963 22.1788 0.501483 22.1279 0.710999 22.0508C1.13007 21.8966 1.71918 21.6401 2.39264 21.2354C3.73903 20.4261 5.42329 19.0214 6.7569 16.6387C7.05382 16.1082 7.24255 15.6269 7.34967 15.1924C7.63805 14.0223 6.99486 12.8221 5.8819 12.4111C4.08173 11.746 3.65211 9.36597 5.09283 8.09375L13.2676 0.87793Z" fill="url(#paint0_linear_40217_177083)" stroke="url(#paint1_linear_40217_177083)" stroke-width="0.5"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_40217_177083" x1="9.60553" y1="0.5" x2="9.60553" y2="22.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0C0C0C"/>
|
||||
<stop offset="1" stop-color="#767676"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_40217_177083" x1="9.60553" y1="0.5" x2="9.60553" y2="22.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,29 @@
|
||||
<svg width="343" height="81" viewBox="0 0 343 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40108_172028)">
|
||||
<rect width="343" height="81" fill="url(#paint0_linear_40108_172028)"/>
|
||||
<g clip-path="url(#clip1_40108_172028)">
|
||||
<path d="M212.547 15L176.179 45.9539H164L200.451 15H212.547Z" fill="#2D2D2D"/>
|
||||
<path d="M176.179 45.9539H164V81.94H176.179V45.9539Z" fill="#202020"/>
|
||||
<path d="M212.545 15V81.94H176.178V45.9539L212.545 15Z" fill="#1B1B1B"/>
|
||||
<path d="M224.722 26.614L188.357 57.5699H176.178L212.629 26.614H224.722Z" fill="#2D2D2D"/>
|
||||
<path d="M188.357 57.5699H176.178V93.556H188.357V57.5699Z" fill="#202020"/>
|
||||
<path d="M224.723 26.614V93.556H188.357V57.5699L224.723 26.614Z" fill="#1B1B1B"/>
|
||||
<path d="M236.902 39.7516L200.535 70.7055H188.357L224.809 39.7516H236.902Z" fill="#2D2D2D"/>
|
||||
<path d="M200.537 70.7055H188.357V106.692H200.537V70.7055Z" fill="#202020"/>
|
||||
<path d="M236.903 39.7516V106.694H200.535V70.7055L236.903 39.7516Z" fill="#1B1B1B"/>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M18 0.5H325C334.665 0.5 342.5 8.33502 342.5 18V63C342.5 72.665 334.665 80.5 325 80.5H18C8.33502 80.5 0.5 72.665 0.5 63V18C0.5 8.33502 8.33502 0.5 18 0.5Z" stroke="white" stroke-opacity="0.1"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_40108_172028" x1="8.41068e-08" y1="40.5" x2="342.002" y2="-7.16334" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#020202"/>
|
||||
<stop offset="1" stop-color="#2F2F2F"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_40108_172028">
|
||||
<path d="M0 18C0 8.05887 8.05888 0 18 0H325C334.941 0 343 8.05888 343 18V63C343 72.9411 334.941 81 325 81H18C8.05888 81 0 72.9411 0 63V18Z" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_40108_172028">
|
||||
<rect width="72.9028" height="91.6936" fill="white" transform="translate(164 15)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.3685 18.931L20.8386 17.6856C20.3372 17.5087 20 17.019 20 16.4681V12.5319C20 11.981 20.3372 11.4913 20.8386 11.3144L24.3685 10.069C25.1692 9.78652 26 10.4062 26 11.2865V17.7135C26 18.5938 25.1692 19.2135 24.3685 18.931Z" fill="white" fill-opacity="0.3"/>
|
||||
<path d="M6.67446 7H20.3255C22.1085 7 23 7.87641 23 9.62922V19.3708C23 21.1236 22.1085 22 20.3255 22H6.67446C4.89149 22 4 21.1236 4 19.3708V9.62922C4 7.87641 4.89149 7 6.67446 7Z" fill="#EC237F"/>
|
||||
<path d="M16.5216 13.2508L12.4352 11.1172C11.7974 10.7842 11 11.2004 11 11.8665V16.1334C11 16.7995 11.7974 17.216 12.4352 16.8827L16.5216 14.749C17.1595 14.416 17.1595 13.5833 16.5216 13.2503V13.2508Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 784 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25 23.5C25 24.5 24.422 25 23.2659 25H14.7341C13.578 25 13 24.5 13 23.5C13 22.5 13.578 22 14.7341 22H23.2659C24.422 22 25 22.5 25 23.5Z" fill="white" fill-opacity="0.3"/>
|
||||
<path d="M5 15.5C5 18.2848 6.10625 20.9555 8.07538 22.9246C10.0445 24.8938 12.7152 26 15.5 26C18.2848 26 20.9555 24.8938 22.9246 22.9246C24.8938 20.9555 26 18.2848 26 15.5C26 12.7152 24.8938 10.0445 22.9246 8.07538C20.9555 6.10625 18.2848 5 15.5 5C12.7152 5 10.0445 6.10625 8.07538 8.07538C6.10625 10.0445 5 12.7152 5 15.5Z" fill="#EC237F"/>
|
||||
<path d="M13 11C13 11.5304 13.2107 12.0391 13.5858 12.4142C13.9609 12.7893 14.4696 13 15 13C15.5304 13 16.0391 12.7893 16.4142 12.4142C16.7893 12.0391 17 11.5304 17 11C17 10.4696 16.7893 9.96086 16.4142 9.58579C16.0391 9.21071 15.5304 9 15 9C14.4696 9 13.9609 9.21071 13.5858 9.58579C13.2107 9.96086 13 10.4696 13 11Z" fill="black"/>
|
||||
<path d="M13 19C13 19.5304 13.2107 20.0391 13.5858 20.4142C13.9609 20.7893 14.4696 21 15 21C15.5304 21 16.0391 20.7893 16.4142 20.4142C16.7893 20.0391 17 19.5304 17 19C17 18.4696 16.7893 17.9609 16.4142 17.5858C16.0391 17.2107 15.5304 17 15 17C14.4696 17 13.9609 17.2107 13.5858 17.5858C13.2107 17.9609 13 18.4696 13 19Z" fill="black"/>
|
||||
<path d="M17 15C17 15.5304 17.2107 16.0391 17.5858 16.4142C17.9609 16.7893 18.4696 17 19 17C19.5304 17 20.0391 16.7893 20.4142 16.4142C20.7893 16.0391 21 15.5304 21 15C21 14.4696 20.7893 13.9609 20.4142 13.5858C20.0391 13.2107 19.5304 13 19 13C18.4696 13 17.9609 13.2107 17.5858 13.5858C17.2107 13.9609 17 14.4696 17 15Z" fill="black"/>
|
||||
<path d="M9 15C9 15.5304 9.21071 16.0391 9.58579 16.4142C9.96086 16.7893 10.4696 17 11 17C11.5304 17 12.0391 16.7893 12.4142 16.4142C12.7893 16.0391 13 15.5304 13 15C13 14.4696 12.7893 13.9609 12.4142 13.5858C12.0391 13.2107 11.5304 13 11 13C10.4696 13 9.96086 13.2107 9.58579 13.5858C9.21071 13.9609 9 14.4696 9 15Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="9" y="2" width="12" height="4" rx="2" fill="white" fill-opacity="0.3"/>
|
||||
<path d="M13 4.1547C14.2376 3.44017 15.7624 3.44017 17 4.1547L23.3923 7.8453C24.6299 8.55983 25.3923 9.88034 25.3923 11.3094V18.6906C25.3923 20.1197 24.6299 21.4402 23.3923 22.1547L17 25.8453C15.7624 26.5598 14.2376 26.5598 13 25.8453L6.6077 22.1547C5.37009 21.4402 4.6077 20.1197 4.6077 18.6906V11.3094C4.6077 9.88034 5.37009 8.55983 6.6077 7.8453L13 4.1547Z" fill="#EC237F"/>
|
||||
<circle cx="15" cy="15" r="4" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 607 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.10521 8.22075L20.7665 5.10946C22.4904 4.71685 23.5491 5.38041 23.9426 7.10014L25.8903 15.6107C26.2838 17.3305 25.6187 18.3866 23.8948 18.7792L10.2335 21.8905C8.50963 22.2831 7.45091 21.6196 7.05735 19.8999L5.10972 11.3893C4.71617 9.66953 5.38133 8.61336 7.10521 8.22075Z" fill="white" fill-opacity="0.3"/>
|
||||
<path d="M7.67822 9H23.3218C25.1073 9 26 9.87641 26 11.6292V21.3708C26 23.1236 25.1073 24 23.3218 24H7.67822C5.89274 24 5 23.1236 5 21.3708V11.6292C5 9.87641 5.89274 9 7.67822 9Z" fill="#EC237F"/>
|
||||
<path d="M19.292 14H23.2731C23.6742 14 24 14.2843 24 14.6343V17.3657C24 17.7157 23.6742 18 23.2731 18H19.292C18.0271 18 17 17.1038 17 16C17 14.8962 18.0271 14 19.292 14Z" fill="black"/>
|
||||
<path d="M18 16C18 16.2652 18.1054 16.5196 18.2929 16.7071C18.4804 16.8946 18.7348 17 19 17C19.2652 17 19.5196 16.8946 19.7071 16.7071C19.8946 16.5196 20 16.2652 20 16C20 15.7348 19.8946 15.4804 19.7071 15.2929C19.5196 15.1054 19.2652 15 19 15C18.7348 15 18.4804 15.1054 18.2929 15.2929C18.1054 15.4804 18 15.7348 18 16Z" fill="#EC237F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,35 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="url(#paint0_linear_40108_173685)"/>
|
||||
<circle cx="12" cy="12" r="8.75" fill="url(#paint1_linear_40108_173685)" stroke="url(#paint2_linear_40108_173685)" stroke-width="0.5"/>
|
||||
<g filter="url(#filter0_d_40108_173685)">
|
||||
<path d="M12.5123 17.1767C12.1999 17.3857 11.7992 17.3857 11.4871 17.1761C10.631 16.6012 10.0239 16.2525 8.89332 15.3057C3.98568 11.525 8.17438 5.73567 11.9992 8.92344C15.8142 5.738 20.0182 11.516 15.105 15.3057C13.9814 16.2476 13.3648 16.6059 12.5123 17.1767Z" fill="url(#paint3_linear_40108_173685)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40108_173685" x="4.66602" y="6" width="14.666" height="13.3333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40108_173685"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40108_173685" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_40108_173685" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FDE0B9"/>
|
||||
<stop offset="1" stop-color="#FEC691"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_40108_173685" x1="3" y1="3" x2="21" y2="21" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FEC997"/>
|
||||
<stop offset="1" stop-color="#FFAB75"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_40108_173685" x1="3" y1="3" x2="21" y2="21" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D4A06D" stop-opacity="0.3"/>
|
||||
<stop offset="1" stop-color="#D4A06D" stop-opacity="0.1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_40108_173685" x1="6.99927" y1="8" x2="16.9993" y2="17" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FEE9CF"/>
|
||||
<stop offset="1" stop-color="#FECD9C"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.0215 18.7807C20.0215 19.7019 19.5609 20.1626 18.6396 20.1626H11.8409C10.9196 20.1626 10.459 19.7019 10.459 18.7807C10.459 17.8594 10.9196 17.3988 11.8409 17.3988H18.6396C19.5609 17.3988 20.0215 17.8594 20.0215 18.7807Z" fill="#FFD495" fill-opacity="0.5"/>
|
||||
<path d="M3.80273 12.0101C3.80273 14.1857 4.66699 16.2722 6.20537 17.8106C7.74376 19.3489 9.83026 20.2132 12.0059 20.2132C14.1815 20.2132 16.268 19.3489 17.8063 17.8106C19.3447 16.2722 20.209 14.1857 20.209 12.0101C20.209 9.83447 19.3447 7.74797 17.8063 6.20959C16.268 4.6712 14.1815 3.80695 12.0059 3.80695C9.83026 3.80695 7.74376 4.6712 6.20537 6.20959C4.66699 7.74797 3.80273 9.83447 3.80273 12.0101Z" fill="#FFD495"/>
|
||||
<path d="M10.4121 8.92804C10.4121 9.35384 10.5813 9.76219 10.8823 10.0633C11.1834 10.3644 11.5918 10.5335 12.0176 10.5335C12.4434 10.5335 12.8517 10.3644 13.1528 10.0633C13.4539 9.76219 13.623 9.35384 13.623 8.92804C13.623 8.50224 13.4539 8.09389 13.1528 7.7928C12.8517 7.49172 12.4434 7.32257 12.0176 7.32257C11.5918 7.32257 11.1834 7.49172 10.8823 7.7928C10.5813 8.09389 10.4121 8.50224 10.4121 8.92804Z" fill="#BD8B42"/>
|
||||
<path d="M10.4121 15.0687C10.4121 15.4945 10.5813 15.9028 10.8823 16.2039C11.1834 16.505 11.5918 16.6741 12.0176 16.6741C12.4434 16.6741 12.8517 16.505 13.1528 16.2039C13.4539 15.9028 13.623 15.4945 13.623 15.0687C13.623 14.6429 13.4539 14.2345 13.1528 13.9334C12.8517 13.6323 12.4434 13.4632 12.0176 13.4632C11.5918 13.4632 11.1834 13.6323 10.8823 13.9334C10.5813 14.2345 10.4121 14.6429 10.4121 15.0687Z" fill="#BD8B42"/>
|
||||
<path d="M13.4824 11.9984C13.4824 12.4241 13.6516 12.8325 13.9527 13.1336C14.2537 13.4347 14.6621 13.6038 15.0879 13.6038C15.5137 13.6038 15.922 13.4347 16.2231 13.1336C16.5242 12.8325 16.6934 12.4241 16.6934 11.9984C16.6934 11.5726 16.5242 11.1642 16.2231 10.8631C15.922 10.562 15.5137 10.3929 15.0879 10.3929C14.6621 10.3929 14.2537 10.562 13.9527 10.8631C13.6516 11.1642 13.4824 11.5726 13.4824 11.9984Z" fill="#BD8B42"/>
|
||||
<path d="M7.3418 11.9984C7.3418 12.4241 7.51094 12.8325 7.81203 13.1336C8.11311 13.4347 8.52147 13.6038 8.94727 13.6038C9.37306 13.6038 9.78142 13.4347 10.0825 13.1336C10.3836 12.8325 10.5527 12.4241 10.5527 11.9984C10.5527 11.5726 10.3836 11.1642 10.0825 10.8631C9.78142 10.562 9.37306 10.3929 8.94727 10.3929C8.52147 10.3929 8.11311 10.562 7.81203 10.8631C7.51094 11.1642 7.3418 11.5726 7.3418 11.9984Z" fill="#BD8B42"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6018 9.06354H7.57816L7.21676 5.6119C7.13777 4.85674 7.87652 4.27924 8.5902 4.53846L11.3089 5.52565C11.8135 5.70893 12.3665 5.70893 12.8711 5.52565L15.5898 4.53846C16.3035 4.27924 17.0425 4.85674 16.9632 5.6119L16.6018 9.06354Z" fill="#FFD495" fill-opacity="0.5"/>
|
||||
<path d="M5.60539 7.17468H18.5743C19.5873 7.17468 20.0938 7.68117 20.0938 8.69414C20.0938 9.7071 19.5873 10.2136 18.5743 10.2136H5.60539C4.59242 10.2136 4.08594 9.7071 4.08594 8.69414C4.08594 7.68117 4.59242 7.17468 5.60539 7.17468Z" fill="#FFD495"/>
|
||||
<path d="M5.97313 9.1369H18.2066C18.6141 9.1369 18.9453 9.46784 18.9453 9.87565V17.6142C18.9453 18.4608 18.2581 19.148 17.4116 19.148H6.76812C5.92156 19.148 5.23438 18.4608 5.23438 17.6142V9.87565C5.23438 9.46807 5.56531 9.1369 5.97313 9.1369Z" fill="#FFD495"/>
|
||||
<path d="M11.5074 11.2266H12.6723C13.159 11.2266 13.4023 11.4699 13.4023 11.9566V16.9648C13.4023 17.4515 13.159 17.6948 12.6723 17.6948H11.5074C11.0207 17.6948 10.7773 17.4515 10.7773 16.9648V11.9566C10.7773 11.4699 11.0207 11.2266 11.5074 11.2266Z" fill="#BD8B42"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.7061 20.6182L12.7516 19.2178C12.5524 19.1235 12.3348 19.0746 12.1144 19.0746C11.8941 19.0746 11.6764 19.1235 11.4773 19.2178L8.52275 20.6182C7.96424 20.883 7.3265 20.4511 7.36494 19.8342L7.65978 15.1003C7.70361 14.3984 8.28556 13.8516 8.98869 13.8516H15.2402C15.9435 13.8516 16.5255 14.3984 16.5691 15.1003L16.8639 19.8342C16.9024 20.4511 16.2646 20.883 15.7061 20.6182Z" fill="#FFD495" fill-opacity="0.5"/>
|
||||
<path d="M5.01953 10.3685C5.01953 11.3001 5.20302 12.2226 5.55953 13.0833C5.91604 13.944 6.43859 14.7261 7.09733 15.3848C7.75608 16.0435 8.53812 16.5661 9.39881 16.9226C10.2595 17.2791 11.182 17.4626 12.1136 17.4626C13.0452 17.4626 13.9677 17.2791 14.8284 16.9226C15.6891 16.5661 16.4711 16.0435 17.1299 15.3848C17.7886 14.7261 18.3111 13.944 18.6677 13.0833C19.0242 12.2226 19.2077 11.3001 19.2077 10.3685C19.2077 8.48707 18.4602 6.68267 17.1299 5.35228C15.7995 4.02188 13.9951 3.27448 12.1136 3.27448C10.2321 3.27448 8.42773 4.02188 7.09733 5.35228C5.76694 6.68267 5.01953 8.48707 5.01953 10.3685Z" fill="#FFD495"/>
|
||||
<path d="M12.5124 7.63316L13.0995 8.82261C13.1644 8.95386 13.2896 9.04503 13.4344 9.06613L14.7471 9.25691C15.1121 9.30988 15.2579 9.75847 14.9937 10.0158L14.0438 10.9418C13.9921 10.9922 13.9535 11.0543 13.9312 11.1229C13.9089 11.1915 13.9036 11.2645 13.9158 11.3356L14.1401 12.6429C14.2025 13.0064 13.8209 13.2835 13.4944 13.1119L12.3202 12.4946C12.2563 12.461 12.1853 12.4434 12.1131 12.4434C12.041 12.4434 11.9699 12.461 11.9061 12.4946L10.7318 13.1119C10.4054 13.2835 10.0238 13.0064 10.0861 12.6429L10.3104 11.3356C10.3353 11.1912 10.2872 11.044 10.1825 10.9418L9.23254 10.0158C8.9684 9.75847 9.11418 9.30988 9.4791 9.25691L10.7918 9.06613C10.9367 9.04503 11.0621 8.9541 11.1268 8.82261L11.7139 7.63316C11.877 7.30246 12.3486 7.30246 12.5119 7.63316H12.5124Z" fill="#BD8B42"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40001_93530)">
|
||||
<path d="M78 39.0005C78 60.5399 60.5389 78.001 38.9995 78.001C17.4601 78.001 0 60.5389 0 39.0005C0 17.462 17.4611 0 39.0005 0C60.5399 0 78.001 17.4611 78.001 39.0005H78ZM53.0315 53.1697L51.3565 53.306C51.9924 51.7855 52.5434 50.3603 53.369 48.9274L64.235 59.803C75.0647 46.8044 73.9426 27.5901 62.0833 15.7947C50.2726 4.04781 31.1537 2.97532 18.1923 13.7631L27.8895 23.446L27.8676 32.3053L13.7622 18.198C2.95912 31.1708 4.04781 50.3193 15.8404 62.1319C27.6607 73.9722 46.8864 75.0304 59.8096 64.2273L53.0496 57.495L53.0315 53.1707V53.1697Z" fill="#EC237F"/>
|
||||
<path d="M50.5109 50.8522C48.8454 49.815 47.5928 48.364 46.4173 46.853L46.4707 49.9151L42.4706 49.917L42.5812 46.8473C41.7298 48.037 40.7174 49.1438 39.4876 50.1553L38.1558 47.9265L37.3226 49.447C36.4065 48.7072 35.6829 47.8006 34.9679 46.8664C34.9365 47.9331 34.9565 48.8617 35.0413 49.9141H31.0784L31.1498 46.8387L30.4244 47.7711C29.5635 48.9722 28.5244 50.0009 27.2879 50.8646C26.7789 49.5395 26.2393 48.3278 25.5491 47.1142C27.165 46.1027 28.6312 44.9692 29.7351 43.36C28.5377 43.3019 27.3785 43.3505 26.2154 43.4515L26.2069 39.1816C27.9209 39.358 29.4796 39.3561 31.1622 39.317L31.0431 37.3017L35.0165 37.2988L34.9593 39.3265C36.1329 39.3551 37.172 39.3294 38.3312 39.2093V43.4144L36.1272 43.3457C36.8831 44.3305 37.784 45.0531 38.7993 45.7595C39.7984 45.0493 40.5954 44.2952 41.3838 43.3257L39.0062 43.4372L38.9976 39.1807C40.2188 39.3132 41.3495 39.358 42.5754 39.3313L42.4744 37.3017L46.4736 37.2969L46.4202 39.3284C48.2506 39.3494 49.9561 39.3618 51.8131 39.1835L51.816 43.4535C50.4852 43.3391 49.1963 43.3038 47.8282 43.3591C49.0866 44.9645 50.6434 46.0408 52.4347 47.0599C51.7474 48.2592 51.0972 49.4108 50.5128 50.8512L50.5109 50.8522Z" fill="#EC237F"/>
|
||||
<path d="M51.4194 30.8057C49.7368 34.619 44.648 35.3998 41.1235 34.2796C38.3951 33.413 36.6801 31.1146 36.5342 28.3051C36.4084 25.8723 37.5562 23.6682 39.8251 22.4899C37.6191 20.9369 37.07 19.0045 37.4618 16.4248C37.8069 14.3466 39.1711 12.6802 41.1817 11.9728C44.892 10.6677 50.0857 11.5896 51.1287 16.0473C51.6263 18.4583 51.2326 21.0151 48.7845 22.2267C52.0076 23.8274 52.7503 27.7894 51.4194 30.8057ZM45.4211 20.3792C46.5213 20.1475 47.0885 19.2791 47.1295 18.2266C47.1676 17.2437 46.9321 16.2227 46.0456 15.6746C45.0341 15.0482 43.6413 15.0482 42.6079 15.6326C41.8071 16.0854 41.563 16.9749 41.5249 17.8376C41.4715 19.0512 42.1293 20.0827 43.3305 20.3716C43.9854 20.5289 44.7166 20.5279 45.4211 20.3802V20.3792ZM47.3945 29.1164C47.7272 28.2012 47.7263 27.2041 47.4183 26.2822C46.8578 24.6034 45.0808 24.2335 43.4973 24.4585C41.9815 24.673 41.0168 25.8684 40.9596 27.3814C40.9138 28.6026 41.3333 29.7914 42.4172 30.433C43.9482 31.3386 46.6557 31.148 47.3945 29.1174V29.1164Z" fill="#EC237F"/>
|
||||
<path d="M44.5422 59.2586L41.3933 59.2224L41.3581 64.1005C41.3495 65.3256 40.4743 66.1435 39.3008 66.3227C37.703 66.5668 36.1005 66.5201 34.4865 66.4219C34.3044 65.173 34.0289 64.0624 33.5885 62.9213C32.1451 64.4485 30.535 65.5544 28.6626 66.5468C27.8619 65.1339 26.9591 63.9032 25.7827 62.7401L27.8209 61.9346C29.1584 61.2587 30.3634 60.4827 31.3958 59.2453C29.82 59.1833 28.3147 59.2691 26.6654 59.353L26.6616 55.0869L30.1565 55.2203H47.7625C48.997 55.2194 50.0962 55.165 51.3108 55.0945L51.3012 59.3587L46.8978 59.2357C47.8016 60.15 48.8188 60.7506 49.9084 61.3569L52.2174 62.3655C51.1001 63.6449 50.265 64.9995 49.4918 66.5191C47.1552 65.2541 45.1571 63.6134 43.4354 61.6515L42.6069 60.6953L44.5422 59.2596V59.2586ZM37.0347 61.7992L37.0309 59.2233L33.5675 59.2538L35.5418 60.4846L34.2186 62.2816C34.9937 62.3131 37.0357 62.8622 37.0347 61.7992Z" fill="#EC237F"/>
|
||||
<path d="M29.6226 34.3444L29.616 17.5516C28.3881 18.055 27.2527 18.3486 25.9571 18.5021L25.9504 14.869C27.9143 14.3752 29.6341 13.4094 30.9697 11.8403L34.089 11.8355L34.0909 34.3225L29.6236 34.3444H29.6226Z" fill="#EC237F"/>
|
||||
<path d="M48.6405 50.5271H29.3318V54.307H48.6405V50.5271Z" fill="#EC237F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40001_93530">
|
||||
<rect width="78" height="78" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="18" cy="18" r="14" stroke="white" stroke-width="2"/>
|
||||
<path d="M23.0903 12.9082L12.908 23.0905" stroke="white" stroke-width="2.25" stroke-linecap="round"/>
|
||||
<path d="M23.0922 23.0893L12.9098 12.907" stroke="white" stroke-width="2.25" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 372 B |
@@ -0,0 +1,17 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40103_483046)">
|
||||
<rect x="12" y="12" width="44" height="44" rx="22" fill="#0D0D0D"/>
|
||||
<path d="M36.6767 25.5549C34.8923 25.5099 33.1069 25.5099 31.3225 25.5549H31.2702C29.8719 25.5906 28.7471 25.6195 27.8465 25.7762C26.9019 25.9412 26.1346 26.2561 25.487 26.9065C24.8407 27.5541 24.5286 28.309 24.3677 29.2385C24.2137 30.1226 24.189 31.2185 24.1615 32.5797L24.1601 32.6334C24.1406 33.5444 24.1406 34.4558 24.1601 35.3669V35.4219C24.1904 36.7804 24.2137 37.8776 24.3664 38.7631C24.5286 39.6899 24.8421 40.4461 25.487 41.0937C26.1346 41.7441 26.9032 42.059 27.8465 42.224C28.7471 42.3807 29.8719 42.4096 31.2702 42.444L31.3225 42.4454C33.1069 42.4904 34.8923 42.4904 36.6767 42.4454H36.7304C38.1274 42.4096 39.2521 42.3807 40.1541 42.224C41.0974 42.059 41.8646 41.7441 42.5122 41.0937C43.1585 40.4475 43.4706 39.6912 43.6315 38.7617C43.7855 37.8776 43.8102 36.7817 43.8377 35.4205L43.8391 35.3669C43.8584 34.4539 43.8584 33.5464 43.8391 32.6334V32.5784C43.8089 31.2199 43.7855 30.1226 43.6329 29.2385C43.4706 28.3104 43.1571 27.5541 42.5122 26.9065C41.8646 26.2561 41.096 25.9412 40.1541 25.7762C39.2521 25.6195 38.1274 25.5906 36.7304 25.5562L36.6754 25.5549H36.6767ZM29.7646 30.1996L32.4624 31.7946C33.2365 32.2525 33.6476 32.3955 33.9982 32.3955C34.3489 32.3955 34.7614 32.2525 35.5355 31.7946L38.2319 30.1996C38.3096 30.1537 38.3956 30.1235 38.485 30.1108C38.5744 30.0981 38.6654 30.1031 38.7529 30.1256C38.8404 30.148 38.9226 30.1875 38.9948 30.2417C39.067 30.296 39.1278 30.3639 39.1737 30.4416C39.2197 30.5194 39.2499 30.6054 39.2626 30.6948C39.2753 30.7842 39.2703 30.8752 39.2478 30.9627C39.2253 31.0501 39.1858 31.1323 39.1316 31.2045C39.0774 31.2767 39.0095 31.3375 38.9317 31.3835L36.2354 32.9785C35.4365 33.4501 34.7476 33.7705 33.9982 33.7705C33.2489 33.7705 32.56 33.4501 31.7625 32.9785L29.0647 31.3835C28.9113 31.2889 28.8011 31.1378 28.758 30.9627C28.7149 30.7877 28.7423 30.6027 28.8343 30.4476C28.9262 30.2926 29.0754 30.1798 29.2497 30.1337C29.4239 30.0876 29.6093 30.1117 29.766 30.201L29.7646 30.1996Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40103_483046" x="0" y="0" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40103_483046"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40103_483046" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40103_483061)">
|
||||
<rect x="12" y="12" width="44" height="44" rx="22" fill="#0D0D0D"/>
|
||||
<path d="M33.5687 40.9164C33.5343 40.2052 33.3938 39.5031 33.1521 38.8332C34.0143 38.6471 34.8536 38.3673 35.655 37.9989C36.3732 37.6353 37.0459 37.1883 37.6592 36.6671C37.6592 36.6671 37.7403 38.7678 36.8246 40.1663C35.9333 41.5147 34.653 42.561 33.153 43.1666C33.4145 42.4445 33.5549 41.6842 33.5687 40.9164ZM26.3094 42.1667L30.0644 38.4158L30.899 39.2497L26.3923 42.25L26.3094 42.1667ZM25.8084 41.666L28.8132 37.1664L29.6464 37.9989L25.8914 41.7493L25.8084 41.666ZM31.7179 38.5681L29.4123 36.265C29.3114 34.1948 30.8842 31.0982 33.6118 28.3755C34.7268 27.295 36.0558 26.4593 37.5134 25.9219C37.9783 26.8943 38.6059 27.7804 39.3692 28.5421C40.1571 29.3306 41.0784 29.974 42.0905 30.4426C41.5515 31.9117 40.7097 33.2515 39.6194 34.3752C36.9735 37.0173 33.9781 38.573 31.9085 38.573C31.8443 38.5726 31.7807 38.5712 31.7179 38.5681ZM36.2402 29.5832C36.0085 29.8144 35.8643 30.1187 35.8321 30.4442C35.7999 30.7697 35.8817 31.0963 36.0636 31.3683C36.2456 31.6403 36.5163 31.8409 36.8298 31.936C37.1432 32.031 37.4799 32.0145 37.7826 31.8894C38.0852 31.7643 38.3351 31.5383 38.4896 31.2498C38.644 30.9614 38.6936 30.6284 38.6297 30.3076C38.5658 29.9868 38.3926 29.698 38.1394 29.4905C37.8862 29.2829 37.5688 29.1695 37.2412 29.1695C37.0553 29.1694 36.8712 29.2059 36.6995 29.2769C36.5277 29.3479 36.3717 29.452 36.2402 29.5832ZM27.8409 31.1967C29.2383 30.2791 31.3304 30.3459 31.3304 30.3459C30.8074 30.9573 30.3577 31.6276 29.9904 32.3431C29.6196 33.1403 29.3365 33.9752 29.1459 34.8334C28.4798 34.5966 27.7818 34.4611 27.0753 34.4317C26.3094 34.4504 25.5518 34.595 24.833 34.8598C25.4453 33.3653 26.4933 32.0891 27.8409 31.1967ZM39.7033 28.208C38.9916 27.4981 38.4261 26.6559 38.0386 25.7289C39.6917 25.1694 41.4212 24.8673 43.1663 24.8333C43.1319 26.5613 42.8338 28.274 42.2824 29.9124C41.3162 29.5241 40.4388 28.9443 39.7033 28.208Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40103_483061" x="0" y="0" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40103_483061"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40103_483061" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40103_483056)">
|
||||
<rect x="12" y="12" width="44" height="44" rx="22" fill="#0D0D0D"/>
|
||||
<path d="M25.8045 35.4752C25.1104 37.1538 24.9964 38.7552 25.5554 39.0531C25.9395 39.2608 26.5435 38.79 27.1078 37.9279C27.333 38.867 27.8841 39.7156 28.6735 40.3994C27.8444 40.7133 27.3039 41.2267 27.3039 41.8068C27.3039 42.7617 28.7689 43.5333 30.5757 43.5333C32.205 43.5333 33.556 42.9054 33.8051 42.0808C33.9348 42.0781 34.0647 42.0781 34.1945 42.0808C34.4436 42.9054 35.7973 43.5333 37.4266 43.5333C39.2332 43.5333 40.6984 42.7591 40.6984 41.8068C40.6984 41.2267 40.158 40.7133 39.3287 40.3993C40.1183 39.7184 40.6718 38.867 40.8944 37.9279C41.4587 38.7899 42.06 39.2581 42.4442 39.0532C43.0031 38.7554 42.8918 37.1511 42.1951 35.4752C41.6495 34.1556 40.9076 33.1846 40.3433 32.969C40.3513 32.8866 40.3566 32.7988 40.3566 32.7164C40.3566 32.2082 40.219 31.7347 39.983 31.3516C39.9883 31.3223 39.9883 31.2904 39.9883 31.2611C39.9883 31.027 39.9327 30.8062 39.84 30.6173C39.6969 27.1882 37.522 24.4666 34.0011 24.4666C30.4802 24.4666 28.3027 27.1882 28.1622 30.6174C28.065 30.818 28.0143 31.0381 28.0139 31.2612C28.0139 31.2903 28.0165 31.3223 28.0165 31.3516C27.7835 31.7347 27.6456 32.2056 27.6456 32.7164C27.6456 32.8015 27.6483 32.8839 27.6562 32.9691C27.0946 33.1846 26.3501 34.1556 25.8045 35.4752Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40103_483056" x="0" y="0" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40103_483056"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40103_483056" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40103_483066)">
|
||||
<rect x="12" y="12" width="44" height="44" rx="22" fill="#0D0D0D"/>
|
||||
<path d="M40.8547 41.0949L43.8437 27.402C44.1077 26.1969 43.3958 25.7231 42.5829 26.0187L25.0182 32.5982C23.8185 33.0542 23.8398 33.705 24.8152 34.0005L29.308 35.364L39.7373 28.9801C40.2256 28.6642 40.673 28.8425 40.3079 29.1584L31.8713 36.5673L31.5463 41.0733C31.723 41.0745 31.8975 41.0358 32.0562 40.9602C32.2148 40.8847 32.3533 40.7744 32.4607 40.6381L34.6555 38.5832L39.2093 41.8431C40.0431 42.2991 40.6325 42.0612 40.8569 41.092L40.8547 41.0949Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40103_483066" x="0" y="0" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40103_483066"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40103_483066" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_40103_483051)">
|
||||
<rect x="12" y="12" width="44" height="44" rx="22" fill="#0D0D0D"/>
|
||||
<path d="M39.6933 25.2001H42.7294L36.0964 32.6553L43.8996 42.8001H37.7897L33.0042 36.6473L27.5285 42.8001H24.4906L31.5853 34.8259L24.0996 25.2001H30.3646L34.6903 30.824L39.6933 25.2001ZM38.6277 41.013H40.31L29.4504 26.8933H27.6451L38.6277 41.013Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40103_483051" x="0" y="0" width="68" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_40103_483051"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40103_483051" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40018_422289)">
|
||||
<path d="M35.8312 4.17921C32.0569 0.419802 26.6307 0 20 0C13.3609 0 7.92673 0.424753 4.15446 4.19406C0.382178 7.96337 0 13.3876 0 20.0193C0 26.651 0.383168 32.0792 4.15842 35.8485C7.93366 39.6178 13.3614 40 20 40C26.6386 40 32.0718 39.6183 35.8416 35.8485C39.6114 32.0787 40 26.6515 40 20.0193C40 13.3787 39.6119 7.94753 35.8312 4.17921Z" fill="white" fill-opacity="0.1"/>
|
||||
<g filter="url(#filter0_f_40018_422289)">
|
||||
<g clip-path="url(#clip1_40018_422289)">
|
||||
<rect x="12" y="18" width="16" height="4" rx="2" fill="white"/>
|
||||
<rect x="22" y="12" width="16" height="4" rx="2" transform="rotate(90 22 12)" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_40018_422289" x="9" y="9" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_40018_422289"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_40018_422289">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_40018_422289">
|
||||
<rect width="16" height="16" fill="white" transform="translate(12 12)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="18" cy="18" r="14" stroke="white" stroke-width="2"/>
|
||||
<path d="M23.0903 12.9082L12.908 23.0905" stroke="white" stroke-width="2.25" stroke-linecap="round"/>
|
||||
<path d="M23.0922 23.0893L12.9098 12.907" stroke="white" stroke-width="2.25" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 372 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.6004 16.5992C19.3828 13.45 20.0303 10.4566 20.0303 10.4566H14.0355V8.25163H21.1652V7.30738H14.0355V4H10.7957V7.30738H4.31341V8.25163H10.7957V10.4566H5.28587V11.4008H16.4679C16.4679 11.559 16.4679 11.559 16.3054 11.7147C16.3054 12.8172 15.4955 14.3918 14.848 15.6524C6.58334 12.5033 4.15345 14.3918 3.50345 14.7082C-2.00634 18.4877 3.17845 23.2115 3.98841 23.0557C9.82319 24.3164 13.548 21.9533 16.1429 18.9598C16.3054 19.118 16.4679 19.118 16.6279 19.118C18.4103 20.0623 27 24 27 24V19.2762C25.7025 19.2762 21.0053 17.7017 17.6004 16.5992ZM13.388 18.0156C9.33569 23.0557 4.47591 21.4812 3.66595 21.1647C1.72102 20.6926 1.07356 17.2295 3.50345 16.1271C7.5558 14.8664 11.1207 16.2853 13.713 17.5434C13.5505 17.8574 13.388 18.0156 13.388 18.0156Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 876 B |
@@ -0,0 +1,35 @@
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="30" cy="30" r="30" fill="url(#paint0_linear_40217_177127)"/>
|
||||
<circle cx="30" cy="30" r="21.875" fill="url(#paint1_linear_40217_177127)" stroke="url(#paint2_linear_40217_177127)" stroke-width="1.25"/>
|
||||
<g filter="url(#filter0_d_40217_177127)">
|
||||
<path d="M31.2819 42.9456C30.5011 43.468 29.4992 43.468 28.7191 42.9441C26.5787 41.507 25.0609 40.6352 22.2345 38.2681C9.96542 28.8164 20.4372 14.3431 29.9991 22.3125C39.5366 14.3489 50.0467 28.7939 37.7637 38.2681C34.9547 40.6229 33.4132 41.5186 31.2819 42.9456Z" fill="url(#paint3_linear_40217_177127)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_40217_177127" x="11.6663" y="15.0039" width="36.6667" height="33.334" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="2.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40217_177127"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40217_177127" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_40217_177127" x1="30" y1="0" x2="30" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FDE0B9"/>
|
||||
<stop offset="1" stop-color="#FEC691"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_40217_177127" x1="7.5" y1="7.5" x2="52.5" y2="52.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FEC997"/>
|
||||
<stop offset="1" stop-color="#FFAB75"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_40217_177127" x1="7.5" y1="7.5" x2="52.5" y2="52.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D4A06D" stop-opacity="0.3"/>
|
||||
<stop offset="1" stop-color="#D4A06D" stop-opacity="0.1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_40217_177127" x1="17.4994" y1="20.0039" x2="42.4994" y2="42.5039" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FEE9CF"/>
|
||||
<stop offset="1" stop-color="#FECD9C"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="18" cy="18" r="14" stroke="white" stroke-width="2"/>
|
||||
<path d="M23.0903 12.9082L12.908 23.0905" stroke="white" stroke-width="2.25" stroke-linecap="round"/>
|
||||
<path d="M23.0923 23.0898L12.9099 12.9075" stroke="white" stroke-width="2.25" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 373 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user