谢宇宁
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
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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,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
@@ -0,0 +1,557 @@
|
||||
/* 详情页：信息卡（海报 + 剧集信息）与选集卡，结构参考 huangguoai.com 详情页，配色沿用品牌粉。 */
|
||||
|
||||
.dh-card {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
background: #1A1A1A;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: PingFang SC, sans-serif;
|
||||
}
|
||||
|
||||
/* ---------- 信息卡 ---------- */
|
||||
.dh-hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.dh-poster {
|
||||
position: relative;
|
||||
flex: 0 0 210px;
|
||||
aspect-ratio: 3 / 4;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.dh-poster-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.dh-poster:hover .dh-poster-img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.dh-poster-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 2px 8px;
|
||||
background: #EC237F;
|
||||
border-radius: 6px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.dh-poster-eps {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
padding: 2px 8px;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
border-radius: 6px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.dh-poster-play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(236, 35, 127, 0.88);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.dh-poster-play img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/* player.svg 本身是黑色填充，粉底上统一显示为白色 */
|
||||
.dh-poster-play img,
|
||||
.dh-btn--primary img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.dh-poster:hover .dh-poster-play {
|
||||
background: #EC237F;
|
||||
transform: translate(-50%, -50%) scale(1.08);
|
||||
}
|
||||
|
||||
.dh-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dh-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dh-brand-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dh-title {
|
||||
margin: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.dh-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dh-meta span + span::before {
|
||||
content: "·";
|
||||
margin: 0 8px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.dh-intro-title {
|
||||
margin: 6px 0 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.dh-intro {
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.dh-intro.is-expanded {
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
}
|
||||
|
||||
.dh-intro-toggle {
|
||||
margin-top: -6px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: #EC237F;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dh-tags,
|
||||
.dh-themes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dh-tag {
|
||||
padding: 4px 12px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
transition: background 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
a.dh-tag:hover {
|
||||
background: rgba(236, 35, 127, 0.16);
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.dh-themes-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dh-theme {
|
||||
padding: 3px 12px;
|
||||
border: 1px solid rgba(236, 35, 127, 0.6);
|
||||
border-radius: 999px;
|
||||
color: #EC237F;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.dh-theme:hover {
|
||||
background: rgba(236, 35, 127, 0.12);
|
||||
}
|
||||
|
||||
.dh-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.dh-btn {
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 999px;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
|
||||
}
|
||||
|
||||
.dh-btn img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dh-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.45);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.dh-btn--primary {
|
||||
padding: 0 32px;
|
||||
background: #EC237F;
|
||||
border-color: #EC237F;
|
||||
}
|
||||
|
||||
.dh-btn--primary:hover {
|
||||
background: #EC237F;
|
||||
border-color: #EC237F;
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
/* ---------- 选集卡 ---------- */
|
||||
.dh-episodes-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dh-episodes-title {
|
||||
margin: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.dh-episodes-sub {
|
||||
margin-top: 4px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dh-episodes-hint {
|
||||
flex-shrink: 0;
|
||||
color: #EC237F;
|
||||
font-size: 13px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.dh-ranges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.dh-ranges::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dh-range {
|
||||
flex: 0 0 auto;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dh-range.is-active {
|
||||
background: rgba(236, 35, 127, 0.16);
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.dh-ep-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
|
||||
gap: 12px 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.dh-ep {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 10px;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.dh-ep:hover {
|
||||
background: rgba(236, 35, 127, 0.18);
|
||||
color: #EC237F;
|
||||
}
|
||||
|
||||
.dh-ep.is-range-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dh-ep-lock {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -4px;
|
||||
padding: 0 5px;
|
||||
background: #EC237F;
|
||||
border-radius: 6px 6px 6px 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
/* ---------- 官方地址卡（详情页内，含手机端） ---------- */
|
||||
body.is-detail-page .content-official-info {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 14px 24px;
|
||||
padding: 24px 32px;
|
||||
background: #1A1A1A;
|
||||
outline: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 20px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
body.is-detail-page .content-official-info::before {
|
||||
content: "官方地址 · 请收藏，防止迷路";
|
||||
grid-column: 1 / -1;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
body.is-detail-page .content-official-info a {
|
||||
color: #EC237F;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ---------- 平板：信息卡缩小海报 ---------- */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.dh-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.dh-poster {
|
||||
flex-basis: 170px;
|
||||
}
|
||||
|
||||
.dh-title {
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 手机 ---------- */
|
||||
@media (max-width: 767px) {
|
||||
.dh-card {
|
||||
padding: 16px;
|
||||
background: rgba(26, 26, 26, 0.82);
|
||||
border-radius: 16px;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.dh-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dh-poster {
|
||||
flex: none;
|
||||
width: 48%;
|
||||
max-width: 190px;
|
||||
}
|
||||
|
||||
.dh-poster-play {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.dh-poster-play img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dh-info {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dh-brand {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dh-brand-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.dh-title {
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.dh-meta {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.dh-meta span + span::before {
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.dh-intro-title {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.dh-intro {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dh-actions {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dh-actions {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.dh-btn {
|
||||
height: 42px;
|
||||
padding: 0 14px;
|
||||
gap: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.dh-btn img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dh-btn--primary {
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.dh-episodes-title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.dh-episodes-sub,
|
||||
.dh-episodes-hint {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dh-episodes-hint {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.dh-ep-grid {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 10px 8px;
|
||||
}
|
||||
|
||||
.dh-ep {
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body.is-detail-page .content-official-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
body.is-detail-page .content-official-info::before {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@@ -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,112 @@
|
||||
.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-play-page .download-fab {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.download-fab {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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,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,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 高度 */
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.3 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 |
@@ -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,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,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: 32 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 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="M18.339 5.70643C18.7769 5.95663 18.929 6.51443 18.6788 6.95233L17.2805 9.39933C19.8373 11.0022 21.6296 13.727 21.9457 16.9107C21.999 17.448 21.577 17.9141 21.0369 17.9141H2.86345C2.32345 17.9141 1.90141 17.448 1.95475 16.9107C2.25696 13.8667 3.90855 11.2422 6.28765 9.61678L4.7651 6.95233C4.51488 6.51443 4.66701 5.95663 5.1049 5.70643C5.5428 5.45618 6.1006 5.60833 6.35085 6.04623L7.88305 8.72758C9.1291 8.17513 10.5061 7.86908 11.9502 7.86908C13.2534 7.86908 14.5021 8.11838 15.6491 8.57308L17.093 6.04623C17.3433 5.60833 17.9011 5.45618 18.339 5.70643ZM7.8409 12.8916C7.3366 12.8916 6.92775 13.3004 6.92775 13.8047C6.92775 14.3091 7.3366 14.7179 7.8409 14.7179C8.3453 14.7179 8.7541 14.3091 8.7541 13.8047C8.7541 13.3004 8.3453 12.8916 7.8409 12.8916ZM16.0595 12.8916C15.5552 12.8916 15.1464 13.3004 15.1464 13.8047C15.1464 14.3091 15.5552 14.7179 16.0595 14.7179C16.5639 14.7179 16.9727 14.3091 16.9727 13.8047C16.9727 13.3004 16.5639 12.8916 16.0595 12.8916Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 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="M21.0002 6.50215V16.6992C21.0024 16.8964 20.9646 17.092 20.8891 17.2742C20.8136 17.4565 20.702 17.6214 20.561 17.7593C20.4238 17.9014 20.2589 18.0135 20.0765 18.0891C19.8941 18.1647 19.6981 18.202 19.5008 18.1986H14.3978C14.4017 18.446 14.453 18.6904 14.549 18.9186C14.6371 19.1455 14.7368 19.3678 14.8478 19.5846C14.9258 19.7083 14.9772 19.8468 14.999 19.9914C14.9975 20.1504 14.9338 20.3025 14.8213 20.4149C14.7089 20.5273 14.5568 20.5912 14.3978 20.5926H9.60076C9.44171 20.5912 9.28961 20.5273 9.17716 20.4149C9.06476 20.3025 9.00096 20.1504 8.99956 19.9914C9.01971 19.8444 9.07191 19.7037 9.15256 19.5792C9.26396 19.3658 9.36371 19.1464 9.45136 18.9221C9.54871 18.6907 9.60006 18.4425 9.60256 18.1914H4.50134C4.30404 18.1941 4.10826 18.1566 3.92596 18.0811C3.74367 18.0055 3.5787 17.8936 3.44114 17.7521C3.29973 17.6159 3.18767 17.4523 3.11183 17.2712C3.03599 17.0901 2.99798 16.8954 3.00014 16.6992V6.50215C2.9974 6.30485 3.03494 6.1091 3.11045 5.9268C3.18597 5.7445 3.29788 5.5795 3.43934 5.44195C3.57599 5.29955 3.74046 5.18675 3.92253 5.1106C4.1046 5.0344 4.30039 4.99649 4.49774 4.99915H19.4972C19.8956 4.99963 20.2776 5.15815 20.5594 5.4399C20.8412 5.72165 20.9997 6.1037 21.0002 6.50215ZM19.7978 14.3034V6.50215C19.7978 6.46295 19.79 6.42415 19.7748 6.388C19.7597 6.3518 19.7375 6.31905 19.7096 6.29155C19.682 6.26315 19.649 6.24065 19.6125 6.2255C19.5759 6.2103 19.5367 6.2028 19.4972 6.20335H4.50134C4.46213 6.20335 4.42332 6.21115 4.38716 6.22625C4.351 6.2414 4.31822 6.2636 4.29074 6.29155C4.26254 6.31885 4.24019 6.3516 4.22503 6.3878C4.20986 6.424 4.20221 6.4629 4.20254 6.50215V14.3015C4.20228 14.3411 4.20995 14.3802 4.2251 14.4167C4.24025 14.4532 4.26257 14.4862 4.29074 14.514C4.31804 14.5422 4.35078 14.5645 4.38698 14.5796C4.42318 14.5948 4.46209 14.6025 4.50134 14.6021H19.499C19.5385 14.6024 19.5776 14.5948 19.6141 14.5796C19.6506 14.5645 19.6837 14.5421 19.7114 14.514C19.7395 14.487 19.7618 14.4546 19.777 14.4187C19.7922 14.3828 19.7998 14.3441 19.7996 14.3052L19.7978 14.3034Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M35 4C38.0375 4 40.5 6.4625 40.5 9.5V38.5C40.5 41.5375 38.0375 44 35 44H13C9.9625 44 7.5 41.5375 7.5 38.5V9.5C7.5 6.4625 9.9625 4 13 4H35ZM28 36.5H20C19.6022 36.5 19.2206 36.658 18.9393 36.9393C18.658 37.2206 18.5 37.6021 18.5 38C18.5 38.3978 18.658 38.7793 18.9393 39.0606C19.2206 39.3419 19.6022 39.5 20 39.5H28C28.3978 39.5 28.7794 39.3419 29.0607 39.0606C29.342 38.7793 29.5 38.3978 29.5 38C29.5 37.6021 29.342 37.2206 29.0607 36.9393C28.7794 36.658 28.3978 36.5 28 36.5ZM35 7H13C12.6717 7 12.3466 7.06467 12.0433 7.1903C11.74 7.31594 11.4644 7.50009 11.2322 7.73223C11.0001 7.96438 10.8159 8.23998 10.6903 8.54329C10.5647 8.84661 10.5 9.1717 10.5 9.5V32H37.5V9.5C37.5 9.1717 37.4353 8.84661 37.3097 8.54329C37.1841 8.23998 36.9999 7.96438 36.7678 7.73223C36.5356 7.50009 36.26 7.31594 35.9567 7.1903C35.6534 7.06467 35.3283 7 35 7Z" fill="#EEEEEE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 967 B |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 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="M19.5408 16.0097C19.5183 16.0772 19.1662 17.2955 18.3011 18.5487C17.5519 19.6297 16.7769 20.7198 15.5541 20.7389C14.3504 20.7603 13.9657 20.0268 12.5921 20.0268C11.2209 20.0268 10.79 20.7198 9.6527 20.7603C8.47715 20.8075 7.57155 19.5791 6.82125 18.5037C5.28345 16.3 4.10115 12.2592 5.6873 9.55152C6.46915 8.19597 7.8719 7.33537 9.39955 7.31062C10.5515 7.28927 11.6472 8.08457 12.3469 8.08457C13.0657 8.08457 14.3909 7.12277 15.7892 7.26677C16.3742 7.29152 18.012 7.50862 19.0672 9.02617C18.9851 9.08242 17.1076 10.1803 17.129 12.4167C17.1571 15.1154 19.5161 16.0007 19.5408 16.0097ZM14.8746 5.82012C15.5045 5.05742 15.9197 4.00897 15.8105 2.96729C14.9106 3.00216 13.8127 3.56012 13.1614 4.31945C12.5843 4.98091 12.0769 6.04622 12.2187 7.07552C13.2187 7.13517 14.2469 6.55582 14.8735 5.82012" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 920 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.2998 21.0001L30.4998 18.8001C31.8998 18.2001 32.5998 16.6001 31.9998 15.2001C31.3998 13.8001 29.6998 13.2001 28.2998 13.8001L22.9998 15.9001C21.5998 16.5001 20.8998 18.1001 21.4998 19.5001C22.1998 20.9001 23.8998 21.6001 25.2998 21.0001ZM42.7998 17.0001L37.9998 6.1001C37.5998 5.2001 36.4998 4.7001 35.4998 5.1001L23.3998 10.2001C22.3998 10.6001 21.9998 11.7001 22.3998 12.6001L22.8998 13.8001L27.3998 11.9001C29.7998 10.9001 32.5998 12.0001 33.5998 14.3001C34.5998 16.6001 33.4998 19.3001 31.1998 20.4001L26.6998 22.3001L27.1998 23.5001C27.5998 24.4001 28.6998 24.9001 29.6998 24.5001L41.7998 19.4001C42.7998 19.0001 43.2998 17.9001 42.7998 17.0001ZM15.5998 32.0001C16.9998 32.7001 18.6998 32.2001 19.3998 30.8001L21.9998 25.9001C22.6998 24.5001 22.1998 22.9001 20.7998 22.2001C19.3998 21.5001 17.6998 22.0001 16.9998 23.4001L14.3998 28.3001C13.6998 29.7001 14.2998 31.4001 15.5998 32.0001ZM24.4998 28.0001L23.2998 27.4001L21.0998 31.6001C19.8998 33.9001 17.0998 34.8001 14.7998 33.6001C12.4998 32.4001 11.5998 29.7001 12.7998 27.4001L14.9998 23.2001L13.7998 22.6001C12.8998 22.1001 11.6998 22.5001 11.2998 23.4001L5.29985 34.9001C4.79985 35.8001 5.19985 36.9001 6.09985 37.4001L16.8998 42.8001C17.7998 43.3001 18.9998 42.9001 19.3998 42.0001L25.3998 30.5001C25.7998 29.6001 25.4998 28.5001 24.4998 28.0001Z" fill="#FF951C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 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="M7.75357 10.8504L7.75117 10.8589L7.75477 10.8619L7.75357 10.8504ZM18.0796 7.1729C17.3967 6.7908 16.4325 5.2013 16.4434 4.7204C16.4901 2.6912 15.1262 2.3941 14.4439 2.4498C12.9308 2.5729 11.9811 2.1193 11.2625 1.36C10.5439 0.600097 9.89927 0.632898 9.89927 0.632898C9.38617 0.632898 8.97507 0.821498 8.44497 1.4504C7.61417 2.4359 6.29877 2.4711 5.89967 2.4492C5.50127 2.428 4.56367 2.3449 3.99117 2.8131C3.41867 3.2813 3.40417 4.0927 3.26407 4.9933C3.12397 5.8933 2.18887 6.7817 1.71887 7.1729C1.24887 7.564 0.973568 7.8697 0.900768 8.2627C0.827968 8.6562 0.699368 8.7945 1.44657 10.0795C2.28227 11.5168 1.84987 12.5368 1.71947 13.5308C1.58907 14.5254 2.18277 15.1828 3.44667 15.529C4.71057 15.8753 5.52677 17.178 5.62807 17.4363C5.72937 17.6947 6.38127 18.6899 6.99137 18.799C7.78337 18.9403 8.29527 18.3878 8.80947 18.2538C9.32317 18.1198 10.4518 18.0021 11.0819 18.3448C13.0232 19.4 13.8425 18.3199 14.0814 17.6183C14.3385 16.8627 15.307 15.7892 16.3538 15.5291C18.6826 14.9512 17.9554 12.9111 17.899 12.7134C17.8426 12.5157 17.6728 10.8304 18.2629 10.17C19.4994 8.7842 18.7625 7.5549 18.0796 7.1729ZM11.8387 10.8528L11.8356 10.8419V10.8553L11.8387 10.8528C12.3384 12.5163 12.4494 13.9422 12.4494 13.9422L9.80037 12.3321C9.79901 12.3328 9.7976 12.3334 9.79617 12.3339L9.78707 12.3309C8.49347 13.2254 7.14297 13.9422 7.14297 13.9422C7.14297 13.9422 7.25267 12.52 7.75117 10.8589C6.52977 9.9426 5.55107 8.6358 5.55107 8.6358L8.46927 8.3708L9.79617 5.452L11.1231 8.3702L14.0413 8.6358C14.0413 8.6356 13.0613 9.9352 11.8387 10.8528Z" fill="#EC237F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.99881 34.0137C8.90963 36.1762 8.08686 39.908 8.08686 39.908C8.08686 39.908 11.8202 39.0865 13.9848 37.9975L15.9714 39.9831C15.7319 40.3942 15.4481 40.789 15.0954 41.1425C12.8655 43.3712 2 45.9906 2 45.9906C2 45.9906 4.62244 35.1334 6.85329 32.9046C7.20584 32.5514 7.59829 32.2658 8.01225 32.0283L9.99881 34.0137ZM29.5866 40.2724L30.9337 31.1603L39.4984 22.5999L39.4537 22.5554C41.5337 20.2933 49.0528 10.73 44.6297 3.37552C37.2728 -1.04326 27.7045 6.47087 25.4396 8.54973L25.418 8.52726L16.8534 17.0873L7.73728 18.4347L6.3088 19.8614L11.0752 24.6262L7.8134 26.1234C6.76322 27.1722 6.77954 28.894 7.85224 29.9667L18.0501 40.159C19.1219 41.2294 20.8453 41.2467 21.8955 40.1978L23.3927 36.9371L28.1582 41.7L29.5866 40.2724ZM34.1989 21.1081C33.1478 22.1585 31.4244 22.1398 30.3526 21.0682L26.9533 17.6709C25.8796 16.5978 25.8624 14.8765 26.9135 13.8265L30.2439 10.4979C31.2952 9.44727 33.0167 9.46465 34.0905 10.5374L37.4898 13.9349C38.5616 15.0062 38.5806 16.7288 37.5294 17.7794L34.1989 21.1081ZM17.963 31.5095L16.5056 30.054L22.4529 24.1098C22.8462 23.7172 23.4927 23.7229 23.8944 24.1244C24.2963 24.5261 24.3029 25.1733 23.9101 25.5654L17.963 31.5095Z" fill="#2ECC71"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M38 8.8C33.7 7.7 29.8 6.7 26.4 3.9C25.7 3.3 24.9 3 24 3C23.1 3 22.3 3.3 21.6 3.9C18.7 6.3 15.3 7.2 11.6 8.4C11.1 8.6 10.5 8.7 10 8.8C8.3 9.2 7.1 10.8 7 12.6V13.1L10.2 35.7C10.2 35.9 10.2 36.1 10.3 36.2C10.3 36 10.2 35.9 10.2 35.7C10.3 37 11 38.1 12.1 38.7L22 44.4C22.2 44.5 22.3 44.6 22.5 44.6C23 44.8 23.5 44.9 24 44.9C24.7 44.9 25.4 44.7 26 44.3L35.9 38.6C37 38 37.6 36.8 37.8 35.6C37.8 35.8 37.8 36 37.7 36.1C37.7 35.9 37.8 35.8 37.8 35.6L41 13.1C41.2 11.1 39.9 9.3 38 8.8ZM34.8 35.2V35.3C34.8 35.6 34.6 35.9 34.3 36.1H34.1L24.3 41.8C24.3 42 24.1 42 24 42C23.9 42 23.7 42 23.6 41.9L13.8 36.2H13.6C13.3 36 13.2 35.8 13.1 35.4V35.2L10 12.8C10 12.3 10.3 11.9 10.7 11.8C15.3 10.6 19.8 9.4 23.5 6.3C23.7 6 23.9 6 24 6C24.1 6 24.3 6 24.5 6.2C28.2 9.3 32.6 10.6 37.3 11.7C37.7 11.8 38.1 12.3 38 12.7L34.8 35.2Z" fill="#00D9FF"/>
|
||||
<path d="M34.0004 13.9C30.7004 12.8 27.5004 12.1 24.6004 10.1C24.3004 9.8 23.8004 9.8 23.4004 10.1C20.5004 12.2 17.3004 12.8 14.0004 13.9C13.5004 14.1 13.2004 14.5 13.3004 15L16.0004 33.7C16.0004 34 16.2004 34.2 16.4004 34.4L23.4004 38.2C23.7004 38.4 24.2004 38.4 24.5004 38.2L31.5004 34.4C31.7004 34.2 31.9004 34 31.9004 33.7L34.6004 15C34.7004 14.5 34.4004 14 34.0004 13.9ZM28.9004 22.5L24.0004 27.4C23.4004 28 22.5004 28 21.9004 27.4L19.1004 24.6C18.5004 24 18.5004 23.1 19.1004 22.5C19.7004 21.9 20.6004 21.9 21.2004 22.5L23.0004 24.3L26.9004 20.4C27.5004 19.8 28.4004 19.8 29.0004 20.4C29.5004 21 29.5004 21.9 28.9004 22.5Z" fill="#00D9FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.8609 25.6594C28.3969 25.4391 27.9281 25.2281 27.4406 25.0453C30.5859 22.8938 32.6531 19.2797 32.6531 15.1922C32.6531 8.61094 27.3 3.25781 20.7188 3.25781C14.1375 3.25781 8.78437 8.61094 8.78437 15.1922C8.78437 19.2797 10.8516 22.8938 13.9969 25.0453C7.55156 27.4781 3 33.2859 3 40.0594C3 41.1281 3.83906 41.9953 4.88906 42.0609H4.90781C4.94062 42.0609 4.97813 42.0703 5.01094 42.0703C5.04844 42.0703 5.08125 42.0609 5.11406 42.0609H25.9688C24.6141 40.1484 23.8125 37.8188 23.8125 35.2969C23.8125 31.2984 25.8141 27.7781 28.8609 25.6594ZM12.3563 15.2531C12.3563 10.65 16.0875 6.92344 20.6859 6.92344C25.2844 6.92344 29.0156 10.6547 29.0156 15.2531C29.0156 19.8563 25.2844 23.5828 20.6859 23.5828C16.0875 23.5828 12.3563 19.8563 12.3563 15.2531ZM35.55 25.8469C30.3328 25.8469 26.1 30.075 26.1 35.2969C26.1 40.5188 30.3281 44.7469 35.55 44.7469C40.7719 44.7469 45 40.5141 45 35.2969C45 30.0797 40.7719 25.8469 35.55 25.8469ZM30.8484 29.8641C31.1578 29.7047 31.5328 29.8266 31.6922 30.1313L32.7469 32.1609C32.9062 32.4656 32.7844 32.8453 32.4797 33.0047C32.4094 33.0375 32.3391 33.0609 32.2688 33.0703C32.0156 33.1031 31.7625 32.9766 31.6359 32.7375L30.5813 30.7078C30.4219 30.4031 30.5391 30.0234 30.8484 29.8641ZM28.5563 34.1484C28.2188 34.0688 28.0125 33.7313 28.0922 33.3984C28.1719 33.0609 28.5094 32.8547 28.8422 32.9344L31.0687 33.4594C31.3312 33.5203 31.5141 33.7359 31.5469 33.9891C31.5563 34.0594 31.5516 34.1344 31.5328 34.2094C31.4531 34.5469 31.1156 34.7531 30.7828 34.6734L28.5563 34.1484ZM40.8844 35.7094L35.7891 40.8047C35.3578 41.2359 34.8141 41.5359 34.2141 41.6719C33.9797 41.7234 33.7359 41.7516 33.5016 41.7516C32.6438 41.7516 31.8375 41.4141 31.2281 40.8047C30.6188 40.1953 30.2859 39.3891 30.2859 38.5266C30.2859 37.6641 30.6188 36.8531 31.2281 36.2438C31.3969 36.075 31.6219 35.9813 31.8562 35.9813C32.0953 35.9813 32.3156 36.075 32.4891 36.2438C32.6578 36.4125 32.7516 36.6375 32.7516 36.8719C32.7516 37.1063 32.6578 37.3313 32.4891 37.5C31.9266 38.0625 31.9266 38.9813 32.4891 39.5438C32.7609 39.8156 33.1219 39.9656 33.5062 39.9656C33.6141 39.9656 33.7219 39.9516 33.8297 39.9281C34.0969 39.8719 34.3406 39.7359 34.5328 39.5391L39.6328 34.4438C39.9047 34.1672 40.0547 33.8063 40.0547 33.4219C40.0547 33.0328 39.9047 32.6672 39.6281 32.4C39.3609 32.1281 39 31.9781 38.6156 31.9781C38.5078 31.9781 38.4 31.9922 38.2875 32.0156C38.0203 32.0766 37.7766 32.2078 37.5844 32.4047L35.3016 34.6875C35.1328 34.8563 34.9078 34.95 34.6734 34.95C34.4391 34.95 34.2141 34.8563 34.0453 34.6875C33.8766 34.5188 33.7875 34.2938 33.7875 34.0594C33.7875 33.825 33.8813 33.6 34.05 33.4313L36.3375 31.1484C36.7688 30.7172 37.3172 30.4172 37.9125 30.2859C38.1469 30.2344 38.3906 30.2063 38.6297 30.2063C39.4828 30.2063 40.2891 30.5438 40.8984 31.1531C41.5078 31.7625 41.8406 32.5734 41.8406 33.4313C41.8312 34.2938 41.4938 35.1 40.8844 35.7094Z" fill="#F4184C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 4L9 7L6 10" stroke="white" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -0,0 +1,12 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_0_95)">
|
||||
<circle cx="16" cy="16" r="16" fill="#FF4A4A" fill-opacity="0.08"/>
|
||||
<ellipse cx="16" cy="20.5" rx="8" ry="3.5" fill="#EC237F"/>
|
||||
<path d="M12 11.5C12 9.01472 14.0147 7 16.5 7H19C19.5523 7 20 7.44772 20 8V12C20 14.2091 18.2091 16 16 16C13.7909 16 12 14.2091 12 12V11.5Z" fill="#EC237F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_0_95">
|
||||
<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 619 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 2L8 13L18 24" stroke="white" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 164 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 2L18 13L8 24" stroke="white" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 163 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="29" height="32" viewBox="0 0 29 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.9474 10.5204C30.0175 12.8703 30.0175 18.7451 25.9474 21.095L9.1579 30.7884C5.08772 33.1383 2.22947e-06 30.2009 2.43491e-06 25.5011L3.28233e-06 6.1143C3.48777e-06 1.41447 5.08772 -1.52293 9.1579 0.826983L25.9474 10.5204Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
@@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_0_59)">
|
||||
<circle cx="12" cy="12" r="12" fill="white" fill-opacity="0.05"/>
|
||||
<ellipse cx="12" cy="15.375" rx="6" ry="2.625" fill="white"/>
|
||||
<path d="M9 8.625C9 6.76104 10.511 5.25 12.375 5.25H14.25C14.6642 5.25 15 5.58579 15 6V9C15 10.6569 13.6569 12 12 12C10.3431 12 9 10.6569 9 9V8.625Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_0_59">
|
||||
<path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 626 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="M17.0646 4.88238L12.2621 9.68489L7.45961 4.88238C6.91331 4.33608 6.02179 4.33608 5.47525 4.88238L5.41779 4.93985C4.87148 5.48616 4.87148 6.37767 5.41779 6.92421L10.2203 11.7267L5.41779 16.5292C4.87148 17.0755 4.87148 17.967 5.41779 18.5136L5.47525 18.5711C6.02156 19.1174 6.91307 19.1174 7.45961 18.5711L12.2621 13.7685L17.0646 18.5711C17.6109 19.1174 18.5024 19.1174 19.049 18.5711L19.1065 18.5136C19.6528 17.9673 19.6528 17.0758 19.1065 16.5292L14.304 11.7267L19.1065 6.92421C19.6528 6.37791 19.6528 5.48639 19.1065 4.93985L19.049 4.88238C18.5027 4.33608 17.6112 4.33608 17.0646 4.88238Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 718 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.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="M19.6168 19.9159L22.9378 4.63868C23.2312 3.2942 22.4402 2.76555 21.537 3.09531L2.02069 10.4361C0.687633 10.9449 0.711322 11.6709 1.79511 12.0007L6.7871 13.5219L18.3752 6.39942C18.9178 6.04699 19.4149 6.24589 19.0093 6.59831L9.63519 14.8645L9.27411 19.8918C9.47041 19.8931 9.66431 19.8499 9.84061 19.7657C10.0169 19.6814 10.1708 19.5584 10.2901 19.4063L12.7288 17.1136L17.7885 20.7507C18.715 21.2595 19.3699 20.994 19.6192 19.9127L19.6168 19.9159Z" fill="#989898"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 577 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="M17.8536 2.85913H20.9549L14.1796 10.6029L22.1502 21.1404H15.9093L11.0212 14.7494L5.42802 21.1404H2.32491L9.57178 12.8576L1.92554 2.85913H8.32492L12.7434 8.70069L17.8536 2.85913ZM16.7652 19.2841H18.4837L7.39115 4.61789H5.54707L16.7652 19.2841Z" fill="#989898"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 373 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="19" cy="19" r="19" fill="white" fill-opacity="0.1"/>
|
||||
<path d="M13.8407 17.083C13.8107 17.0576 13.7819 17.034 13.7556 17.0134C13.6658 17.0134 13.4964 17.4977 13.4218 17.8925C13.315 18.4574 13.2507 18.6931 13.2507 18.6931C13.2507 18.6931 13.2381 18.8008 13.2789 18.8345L13.2863 18.8406C13.0219 19.1492 12.7699 19.5138 12.5547 19.9192C11.7885 21.3652 11.9027 22.8264 12.3746 23.0646C12.6168 23.1865 13.2483 22.8036 13.8685 22.0925C13.9727 22.9589 14.4178 23.7469 15.0969 24.3724C14.0238 24.6674 13.3106 25.2574 13.4054 25.8565C13.523 26.6087 14.8666 27.0901 16.4083 26.9328C17.5845 26.8121 18.5349 26.3538 18.8667 25.8089C18.9311 25.8108 18.9957 25.8117 19.0606 25.8117C19.1728 25.8117 19.2842 25.8089 19.3947 25.8034C19.7258 26.3524 20.6535 26.8237 21.7929 26.9613C23.2872 27.1408 24.5809 26.6791 24.6812 25.929C24.7623 25.3248 24.0459 24.7177 22.983 24.4103C23.6566 23.8052 24.1085 23.0429 24.2385 22.2022C24.7892 22.9147 25.3523 23.3698 25.6467 23.3084C25.9949 23.2361 26.2436 21.6993 25.6059 20.2275C25.4319 19.8257 25.2198 19.4543 24.9913 19.1315C25.001 19.1242 25.0108 19.117 25.0205 19.1097C25.1538 19.0099 25.0075 18.5728 24.8629 18.171C24.7279 17.796 24.427 17.4271 24.4157 17.4369C24.3867 17.4626 24.3574 17.4881 24.3279 17.5133C24.4708 17.0579 24.5474 16.5758 24.5474 16.077C24.5474 13.2725 22.1271 11 19.1403 11C16.1552 11 13.7345 13.2725 13.7345 16.077C13.7345 16.4214 13.771 16.7578 13.8407 17.083Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="19" cy="19" r="19" fill="white" fill-opacity="0.1"/>
|
||||
<path d="M25.3494 12.0459C25.3494 12.0459 26.9677 11.4142 26.8327 12.9476C26.7886 13.5784 26.3836 15.7876 26.0686 18.1776L24.9894 25.2567C24.9894 25.2567 24.8994 26.2934 24.0894 26.4734C23.2811 26.6542 22.0669 25.8426 21.8419 25.6626C21.6619 25.5276 18.4694 23.4984 17.3444 22.5059C17.0302 22.2359 16.6702 21.6942 17.3902 21.0634L22.1119 16.5551C22.6511 16.0134 23.1911 14.7509 20.9427 16.2842L14.6469 20.5676C14.6469 20.5676 13.9269 21.0176 12.5786 20.6126L9.65525 19.7109C9.65525 19.7109 8.57608 19.0342 10.4194 18.3584C14.9169 16.2376 20.4477 14.0751 25.3494 12.0451V12.0459Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 763 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user