/* 让站点信息卡片整个区域可点击 */ #site-stats-card .card-widget.card-webinfo { cursor: pointer; } @media (max-width: 600px) { /* 两列并排，自动换行，防止横向滚动 */ .card-info-social-icons{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch !important; } /* 按钮填满各自网格单元，紧凑尺寸 */ .card-info-social-icons .social-icon, .card-info-social-icons .social-icon.contact-btn, .card-info-social-icons a.contact-btn.social-icon { font-size: 14px !important; padding: 12px 10px !important; /* 纵向稍微拉长 */ height: auto !important; min-width: 0 !important; width: 88% !important; /* 横向稍微缩窄 */ justify-self: center !important; /* 居中对齐 */ border-radius: 12px !important; gap: 8px !important; box-shadow: none !important; box-sizing: border-box !important; justify-content: center !important; } .card-info-social-icons .social-icon .social-link-text { font-size: 14px !important; margin-left: 6px !important; font-weight: 500 !important; letter-spacing: 0 !important; white-space: nowrap !important; /* 保持一行 */ } .card-info-social-icons .social-icon i { font-size: 16px !important; margin-right: 6px !important; } } /* Gradient text utility for colorful headings */ .gradient-text { background: linear-gradient(90deg, #90caf9, #64b5f6, #1976d2, #90caf9); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; display: inline-block; -webkit-animation: gradientShift 3s linear infinite; animation: gradientShift 3s linear infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-webkit-keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* In dark mode, slightly increase contrast and add a subtle text-shadow to improve readability */ body.dark .gradient-text { filter: brightness(1.05); text-shadow: 0 1px 2px rgba(0,0,0,0.35); } /* Overrides to replace inline styles moved from JS/HTML */ .focus-title-error{ color: #f44336; } /* Ensure webinfo items render in a tidy two-column style */ .webinfo{ display:flex; flex-direction:column; gap:6px; } .webinfo-item{ display:flex; align-items:center; justify-content:space-between; } .webinfo-site-name{ font-size:13px; color:#666; } .webinfo-site-lastmodified{ font-size:13px; color:#222; text-align:right; } .webinfo-site-pv-count{ font-size:13px; color:#222; } /* Classes used in docs to replace inline color attributes */ .doc-inline-green { color: green; font-weight: 700; } .doc-inline-blue { color: blue; font-weight: 700; text-decoration: underline; } .doc-inline-gold { color: darkgoldenrod; font-weight: 700; } /* Fullscreen site loader styles */ .site-loader{ position:fixed; #refreshBtn{ position: fixed !important; left: 24px !important; top: 72px !important; /* 位于顶部导航下方，避免遮挡 */ z-index: 100000 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 150px !important; height: 48px !important; padding: 12.5px 30px !important; border: 0 !important; border-radius: 100px !important; /* 默认为蓝色渐变（未悬停也为蓝） */ background: linear-gradient(180deg,#2ba8fb,#1f6fc4) !important; color: #ffffff !important; font-weight: 700 !important; -webkit-transition: all 0.5s !important; transition: all 0.5s !important; box-shadow: 0 12px 34px rgba(43,138,229,0.12) !important; } #refreshBtn:hover{ background-color: #6fc5ff !important; box-shadow: 0 0 20px #6fc5ff50 !important; transform: scale(1.06) !important; } #refreshBtn:active{ background-color: #3d94cf !important; -webkit-transition: all 0.25s !important; transition: all 0.25s !important; box-shadow: none !important; transform: scale(0.98) !important; } .card-info-social-icons .social-icon{ padding:2px 8px; border-radius: 8px; font-size: 13px; min-width: 0; height: 32px; line-height: 1.2; gap: 4px; box-shadow: none; background: #f7fafd; border: 1px solid #e3eaf2; transition: background 0.18s, border 0.18s; } .card-info-social-icons .social-icon .social-link-text{ white-space:nowrap !important; line-height:1 !important; font-size:12px !important; margin-left:6px !important; display:inline-block !important; vertical-align:middle !important; } .card-info-social-icons .social-icon .social-link-text{ max-width: 90px !important; overflow: hidden !important; text-overflow: ellipsis !important; } .card-info-social-icons .social-icon i{ margin-right:4px; font-size:16px; } .contact-btn{ padding:4px 10px; } } /* Fullscreen loader: centered progress bar style (override / improve the simple spinner) */ #site-loader.site-loader{ position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.98)); z-index: 99999 !important; transition: opacity 360ms ease, visibility 360ms ease; } #site-loader.site-loader.hidden{ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } #site-loader .loader-inner{ width: min(520px, 86%); max-width: 520px; padding: 36px 32px; box-sizing: border-box; text-align:center; border-radius:18px; background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display:flex; flex-direction:column; align-items:center; gap:18px; box-shadow: 0 18px 48px rgba(31,111,196,0.14); } #site-loader .loader-text{ color:#546079; font-size:16px; letter-spacing:0.5px; } #site-loader .loader-spinner{ display:inline-flex !important; width:68px; height:68px; border-radius:50%; border:5px solid rgba(111,197,255,0.26); border-top-color:#2ba8fb; border-right-color:#2ba8fb; animation: loader-spin 840ms linear infinite; } #site-loader .loader-percent{ font-size:28px; font-weight:700; color:#2ba8fb; text-shadow: 0 2px 6px rgba(43,168,251,0.24); } @keyframes loader-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } /* Mobile submenu pop animation: smooth slide+fade for nested ULs */ @media (max-width: 768px) { /* Ensure menu uses visibility/opacity/transform for transitions (avoid display:none toggles on Edge) */ .nav-menu{ display:flex !important; visibility: hidden !important; opacity: 0 !important; transform: translateX(-50%) translateY(-6px) !important; pointer-events: none !important; transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms; } .nav-menu.open{ visibility: visible !important; opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; transition-delay: 0s !important; } /* Make submenu container animate with transform and opacity */ .nav-menu li ul{ transition: max-height 260ms ease, opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1); transform-origin: top left; transform: translateY(-6px) scaleY(0.98); opacity: 0; } .nav-menu li.submenu-open > ul{ transform: translateY(0) scaleY(1); opacity: 1; } /* Use transition-based staggered fade/slide for submenu items */ .nav-menu li ul li{ opacity: 0; transform: translateY(-6px); transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1); } .nav-menu li.submenu-open > ul li{ opacity: 1; transform: translateY(0); } /* Stagger using nth-child delays (simple, up to 8 items) */ .nav-menu li.submenu-open > ul li:nth-child(1){ transition-delay: 40ms; } .nav-menu li.submenu-open > ul li:nth-child(2){ transition-delay: 80ms; } .nav-menu li.submenu-open > ul li:nth-child(3){ transition-delay: 120ms; } .nav-menu li.submenu-open > ul li:nth-child(4){ transition-delay: 160ms; } .nav-menu li.submenu-open > ul li:nth-child(5){ transition-delay: 200ms; } .nav-menu li.submenu-open > ul li:nth-child(6){ transition-delay: 240ms; } .nav-menu li.submenu-open > ul li:nth-child(7){ transition-delay: 280ms; } .nav-menu li.submenu-open > ul li:nth-child(8){ transition-delay: 320ms; } } /* 强制底部服务条款为蓝色并去掉下划线 */ .copyright a.force-blue, .copyright a.force-blue:visited{ color: #2b8ae5 !important; text-decoration: none !important; } .copyright a.force-blue:hover, .copyright a.force-blue:focus{ color: #1f6fc4 !important; text-decoration: none !important; } /* 头像左上角的夜/日 切换按钮样式（已移除，保留注释以便日后恢复） .card-info-avatar{ position: relative; } .avatar-theme-toggle{ position: absolute; left: 14px; top: 12px; width:44px; height:24px; border-radius:14px; border: none; background: #e6e6e6; display:inline-flex; align-items:center; justify-content:flex-start; padding:2px; cursor:pointer; transition: background-color 220ms ease, box-shadow 220ms ease; } .avatar-theme-toggle .switch-track{ display:block; width:100%; height:100%; position:relative; } .avatar-theme-toggle .switch-knob{ position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,0.12); transition:left 200ms cubic-bezier(.22,.9,.29,1), background-color 180ms ease, transform 200ms ease; } .avatar-theme-toggle .switch-knob i{ font-size:12px; color:#333; transition: transform 200ms cubic-bezier(.22,.9,.29,1), color 180ms ease; } .avatar-theme-toggle.is-on{ background:#4cd964; } .avatar-theme-toggle.is-on .switch-knob{ left: calc(100% - 24px); background:#fff; } .avatar-theme-toggle.is-on .switch-knob i{ color:#4cd964; transform: rotate(0deg) scale(1); } */ /* 页面颜色主题过渡（背景/文字）—放慢节奏并使用与按钮一致的曲线 */ body, html{ transition: background-color 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00), color 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00), background 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00); } body.dark, html.dark{ transition: background-color 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00), color 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00), background 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00); } /* 更平滑的卡片样式过渡（统一曲线和更长时长） */ .card-widget, .card-content, .author-info__name, .author-info__description{ transition: background-color 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00), color 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00), box-shadow 300ms ease, border-color 600ms cubic-bezier(0.56, 1.35, 0.52, 1.00), background 1000ms cubic-bezier(0.56, 1.35, 0.52, 1.00); } @media (max-width:420px){ .avatar-theme-toggle{ left:6px; top:6px; width:40px; height:22px; padding:2px; } .avatar-theme-toggle .switch-knob{ width:18px; height:18px; left:2px; top:2px; } } /* Refresh button styles removed per request. */ /* 文字与图标微调 */ .refresh-btn__text{ font-size:14px; color:var(--accent); } .refresh-btn__icon{ display:inline-flex; align-items:center; justify-content:center; } /* Dark mode: invert background / text for the refresh button to keep contrast */ body.dark .refresh-btn{ --btn-bg: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); --btn-border: rgba(255,255,255,0.06); --accent: #9ecbff; color: var(--accent); } /* Ensure SVG icons inherit current text color */ .refresh-btn__icon .svg{ fill: currentColor; stroke: currentColor; } /* Mobile: increase tap target while keeping visual size */ /* Small clickable note below metric value (used under CPU card) */ .metric-note{ font-size:11px; /* 更小以避免换行 */ color: #6b778c !important; /* 一直保持灰色 */ margin-top:6px; -webkit-user-select: none; user-select: none; white-space: nowrap; /* 防止换行 */ overflow: hidden; text-overflow: ellipsis; cursor: default; /* 文本本身不表现为链接 */ } .metric-box.clickable .metric-note{ cursor: default; } @media (max-width:600px){ .refresh-btn{ padding:12px 16px; border-radius:12px; } .refresh-btn__text{ font-size:15px; } .refresh-btn__icon .svg{ width:20px; height:20px; } } /* Fix icon centering: remove stray transforms and baseline shifts */ #refreshBtn .refresh-btn__icon{ line-height: 0 !important; } #refreshBtn .refresh-btn__icon .svg{ display:block !important; margin: 0 auto !important; transform: none !important; } /* Accessibility: visible focus ring for keyboard users */ .refresh-btn:focus-visible{ box-shadow: 0 0 0 4px rgba(43,138,229,0.12); } /* Redesigned refresh button styles */ #refreshBtn { position: fixed; bottom: 20px; right: 20px; z-index: 1000; width: 60px; height: 60px; border: none; border-radius: 50%; background: linear-gradient(135deg, #ff5722, #ff9800); color: white; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } #refreshBtn:hover { transform: scale(1.15); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); } #refreshBtn:active { transform: scale(0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* Mobile-specific adjustments */ @media (max-width: 600px) { #refreshBtn { bottom: 15px; right: 15px; width: 50px; height: 50px; font-size: 20px; } } /* High-specificity modern variant that overrides older desktop/top-left styles */ /* modern-refresh: match site pill/button style on desktop, circular icon on small screens */ button.refresh-btn.modern-refresh, button#refreshBtn.modern-refresh { /* Follow existing site variables for a consistent look */ --btn-bg: linear-gradient(180deg, #ffffff, #f6fbff); --btn-border: rgba(43,138,229,0.12); --accent: #1f6fc4; position: fixed !important; left: 24px !important; top: 72px !important; right: auto !important; bottom: auto !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; min-width: 120px !important; height: auto !important; border-radius: 14px !important; background: var(--btn-bg) !important; color: var(--accent) !important; border: 1px solid var(--btn-border) !important; box-shadow: 0 10px 30px rgba(12,24,40,0.06) !important; font-weight: 700 !important; z-index: 11000 !important; } /* Uiverse-like skewed pill appearance on wider screens */ @media (min-width: 900px) { button.refresh-btn.modern-refresh { transform: skew(-21deg); background: #fff !important; padding: 10px 20px !important; width: 140px !important; height: 44px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; font-weight: 700 !important; color: var(--accent) !important; box-shadow: 0 8px 20px rgba(12,24,40,0.06) !important; position: fixed !important; left: 24px !important; top: 72px !important; } button.refresh-btn.modern-refresh .refresh-btn__text { display: inline-block !important; transform: skew(21deg); } button.refresh-btn.modern-refresh .refresh-btn__icon { margin-left: 8px !important; transform: skew(21deg); } /* hover background pseudo-element (dark fill) */ button.refresh-btn.modern-refresh { position: relative; overflow: hidden; } button.refresh-btn.modern-refresh::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 100%; background: var(--accent, #1f6fc4); opacity: 0; z-index: 0; transition: all 0.45s ease; } button.refresh-btn.modern-refresh:hover{ color: #fff !important; } button.refresh-btn.modern-refresh:hover::before{ left: 0; right: 0; opacity: 1; } /* ensure content sits above pseudo background */ button.refresh-btn.modern-refresh > * { position: relative; z-index: 1; } } button.refresh-btn.modern-refresh .svg { width: 18px !important; height: 18px !important; fill: currentColor !important; } button.refresh-btn.modern-refresh .refresh-btn__text { color: var(--accent) !important; } button.refresh-btn.modern-refresh.pressed { transform: translateY(1px) scale(0.98) !important; } button.refresh-btn.modern-refresh.is-spinning .refresh-btn__icon .svg { animation: spin 720ms linear infinite; transform-origin: 50% 50%; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width:600px){ /* On mobile, follow site pattern: compact circular icon positioned near nav (left/top) */ button.refresh-btn.modern-refresh{ left: 8px !important; top: calc(var(--nav-height) + 10px) !important; right: auto !important; bottom: auto !important; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 999px !important; min-width: 0 !important; box-shadow: 0 8px 18px rgba(31,45,61,0.08) !important; background: rgba(31,111,196,0.08) !important; } button.refresh-btn.modern-refresh .refresh-btn__text{ display:none !important; } button.refresh-btn.modern-refresh .svg{ width:20px !important; height:20px !important; } } /* Strong layout reset to avoid conflicts from other #refreshBtn rules */ button.refresh-btn.modern-refresh, button#refreshBtn.modern-refresh { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; /* force horizontal text flow */ text-orientation: mixed !important; overflow: hidden !important; } /* Ensure the visible text is not translucent or duplicated by other rules */ button.refresh-btn.modern-refresh .refresh-btn__text{ opacity: 1 !important; line-height: 1 !important; margin: 0 !important; padding: 0 6px !important; } /* If older rules applied transforms to inner elements, undo them for modern-refresh */ button.refresh-btn.modern-refresh .refresh-btn__text, button.refresh-btn.modern-refresh .refresh-btn__icon{ transform: none !important; } /* Ensure text flows horizontally and is not affected by vertical-writing rules */ button.refresh-btn.modern-refresh .refresh-btn__text, #refreshBtn.modern-refresh .refresh-btn__text, button#refreshBtn.modern-refresh .refresh-btn__text { display: inline-block !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; white-space: nowrap !important; letter-spacing: normal !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; line-height: 1.1 !important; vertical-align: middle !important; } /* Fallback: if any ancestor set writing-mode, explicitly reset it here */ button.refresh-btn.modern-refresh, #refreshBtn.modern-refresh { writing-mode: horizontal-tb !important; } /* Prevent pseudo-element artifacts from previous rules interfering */ button.refresh-btn.modern-refresh::after, button.refresh-btn.modern-refresh::before{ backface-visibility: hidden; } /* Defensive: hide any pseudo-element content on refresh button that might insert '+' */ button.refresh-btn.modern-refresh::before, button.refresh-btn.modern-refresh::after, #refreshBtn::before, #refreshBtn::after{ content: none !important; } /* Disable common-ligatures and font-feature-settings which sometimes turn sequences into decorative glyphs */ button.refresh-btn.modern-refresh .refresh-btn__text, #refreshBtn .refresh-btn__text{ font-variant-ligatures: none !important; -webkit-font-feature-settings: "liga" 0, "clig" 0 !important; font-feature-settings: "liga" 0, "clig" 0 !important; text-rendering: optimizeLegibility; /* keep readable */ } /* === Defensive final override: force perfect centering and ensure SVG is visible === */ /* This block intentionally has very high specificity and !important to override legacy rules */ #refreshBtn.modern-refresh, button#refreshBtn.modern-refresh, button.refresh-btn.modern-refresh { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 8px 14px !important; min-width: 44px !important; height: auto !important; border-radius: 14px !important; background: var(--btn-bg) !important; color: var(--accent, #1f6fc4) !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } #refreshBtn.modern-refresh .refresh-btn__text, button.refresh-btn.modern-refresh .refresh-btn__text{ display: inline-block !important; text-align: center !important; line-height: 1 !important; vertical-align: middle !important; margin: 0 !important; padding: 0 6px !important; color: inherit !important; } #refreshBtn.modern-refresh .refresh-btn__icon, button.refresh-btn.modern-refresh .refresh-btn__icon{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 !important; background: transparent !important; } #refreshBtn.modern-refresh .refresh-btn__icon .svg, button.refresh-btn.modern-refresh .refresh-btn__icon .svg{ display: block !important; width: 18px !important; height: 18px !important; fill: currentColor !important; stroke: none !important; color: inherit !important; } /* Make sure text is visible on small screens unless intentionally hidden by design */ @media (max-width:900px){ /* Mobile: show only icon (hide any visible text) */ #refreshBtn.modern-refresh .refresh-btn__text, button.refresh-btn.modern-refresh .refresh-btn__text, /* Also cover plain #refreshBtn or .refresh-btn when present */ #refreshBtn .refresh-btn__text, .refresh-btn .refresh-btn__text { display: none !important; } #refreshBtn.modern-refresh .refresh-btn__icon, button.refresh-btn.modern-refresh .refresh-btn__icon, #refreshBtn .refresh-btn__icon, .refresh-btn .refresh-btn__icon { margin-left: 0 !important; } } /* Hover micro-interaction for desktop: slight lift + icon rotate/scale */ button.refresh-btn.modern-refresh, button#refreshBtn.modern-refresh, #refreshBtn.modern-refresh, .refresh-btn.modern-refresh, .refresh-btn { transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms ease !important; } button.refresh-btn.modern-refresh:hover, button#refreshBtn.modern-refresh:hover, #refreshBtn.modern-refresh:hover, .refresh-btn.modern-refresh:hover, .refresh-btn:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 18px 40px rgba(31,111,196,0.12) !important; } /* Icon subtle rotation/scale on hover */ button.refresh-btn.modern-refresh:hover .refresh-btn__icon .svg, button#refreshBtn.modern-refresh:hover .refresh-btn__icon .svg, #refreshBtn.modern-refresh:hover .refresh-btn__icon .svg, .refresh-btn.modern-refresh:hover .refresh-btn__icon .svg, .refresh-btn:hover .refresh-btn__icon .svg { transform: rotate(18deg) scale(1.06) !important; transition: transform 260ms cubic-bezier(.2,.9,.2,1) !important; } /* Final defensive override: ensure text hidden on small screens for all variants */ @media (max-width: 600px){ /* match many selector variations to ensure high specificity */ #refreshBtn.modern-refresh .refresh-btn__text, button#refreshBtn.modern-refresh .refresh-btn__text, button.refresh-btn.modern-refresh .refresh-btn__text, #refreshBtn .refresh-btn__text, .refresh-btn .refresh-btn__text, button.refresh-btn .refresh-btn__text { display: none !important; visibility: hidden !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; line-height: 0 !important; font-size: 0 !important; } /* Ensure icon remains visible and centered */ #refreshBtn.modern-refresh .refresh-btn__icon, button.refresh-btn.modern-refresh .refresh-btn__icon, #refreshBtn .refresh-btn__icon, .refresh-btn .refresh-btn__icon { margin-left: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; } /* tighten the button to icon size while keeping tap-target (visual size smaller but clickable) */ #refreshBtn, button#refreshBtn, button.refresh-btn { min-width: 44px !important; height: 44px !important; padding: 6px !important; border-radius: 999px !important; } } /* === Projects Modal 弹窗样式 === */ .proj-modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100000; } .proj-modal.is-open{ display: flex; } .proj-modal__backdrop{ position: absolute; inset: 0; background: rgba(6,11,20,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .proj-modal__card{ position: relative; width: min(960px, 92vw); max-height: 86vh; overflow: auto; background: #ffffff; border-radius: 16px; box-shadow: 0 24px 64px rgba(12,24,40,0.22); padding: 18px 20px 18px; border: 1px solid rgba(12,24,40,0.06); } .proj-modal__header{ display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid rgba(12,24,40,0.06); } .proj-modal__close{ background: transparent; border: none; font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; color: #546079; } .proj-modal__close:hover{ background: rgba(31,111,196,0.08); color: #1f6fc4; } .proj-modal__body{ padding: 12px 6px 6px; } .proj-modal__grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px){ .proj-modal__grid{ grid-template-columns: 1fr 1fr; } } .proj-item{ display: flex; gap: 12px; padding: 12px; border: 1px solid rgba(12,24,40,0.08); border-radius: 12px; background: #fafcff; align-items: flex-start; } .proj-item__thumb{ width: 88px; height: 66px; object-fit: cover; border-radius: 10px; flex: none; background: #eee; } .proj-item__main{ flex: 1; min-width: 0; } .proj-item__title{ margin: 0 0 6px; font-size: 16px; } .proj-item__desc{ margin: 0 0 8px; font-size: 13px; color: #546079; } .proj-item__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .proj-item__tags span{ font-size: 12px; padding: 4px 8px; background: #eef5fd; color: #1f6fc4; border-radius: 999px; border: 1px solid rgba(31,111,196,0.14); } .proj-item__actions{ display: flex; gap: 8px; } .proj-item__btn{ display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(180deg,#2ba8fb,#1f6fc4); border-radius: 10px; text-decoration: none; box-shadow: 0 8px 20px rgba(31,111,196,0.16); } .proj-item__btn:hover{ filter: brightness(1.05); } /* 暗色模式适配 */ body.dark .proj-modal__backdrop{ background: rgba(0,0,0,0.6); } body.dark .proj-modal__card{ background: #0f1725; color: #eaf2ff; border-color: rgba(255,255,255,0.06); } body.dark .proj-modal__header{ border-bottom-color: rgba(255,255,255,0.06); } body.dark .proj-modal__close{ color: #cfe4ff; } body.dark .proj-modal__close:hover{ background: rgba(31,111,196,0.18); color: #ffffff; } body.dark .proj-item{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); } body.dark .proj-item__desc{ color: #9db1c9; } body.dark .proj-item__tags span{ background: rgba(31,111,196,0.26); color: #cfe4ff; border-color: rgba(31,111,196,0.35); } /* === Maintenance Notice Modal 弹窗样式（与项目弹窗风格统一） === */ /* 已移除 - 维护状态已解除 */ /* === 交互增强：过渡与动画、按钮样式、移动端底部抽屉适配 === */ /* 查看全部按钮：提升可点击性与动效 */ .projects-header .view-all{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(31,111,196,0.18); border-radius:10px; text-decoration:none; color:#1f6fc4; background:#f6fbff; font-weight:700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .projects-header .view-all:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(31,111,196,.12); background:#fff; color:#1a5fb0; } .projects-header .view-all:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(31,111,196,.22); } /* 以不依赖 display 的显隐方式，实现入场/退场动画 */ .proj-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:100000; opacity:0; visibility:hidden; pointer-events:none; } .proj-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .proj-modal.is-closing{ opacity:0; visibility:visible; pointer-events:none; } /* 动画关键帧 */ @keyframes modal-fade-in{ from{ opacity:0; } to{ opacity:1; } } @keyframes modal-fade-out{ from{ opacity:1; } to{ opacity:0; } } @keyframes modal-pop-in{ from{ opacity:0; transform: translateY(8px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } } @keyframes modal-pop-out{ from{ opacity:1; transform: translateY(0) scale(1); } to{ opacity:0; transform: translateY(8px) scale(.96); } } /* 桌面端：淡入 + 轻微缩放 */ .proj-modal.is-open .proj-modal__backdrop{ animation: modal-fade-in 220ms ease both; } .proj-modal.is-open .proj-modal__card{ animation: modal-pop-in 220ms cubic-bezier(.2,.9,.2,1) both; } .proj-modal.is-closing .proj-modal__backdrop{ animation: modal-fade-out 200ms ease both; } .proj-modal.is-closing .proj-modal__card{ animation: modal-pop-out 200ms cubic-bezier(.2,.9,.2,1) both; } /* 移动端：转换为底部抽屉（bottom sheet）并使用上滑/下滑动画 */ @keyframes sheet-in{ from{ transform: translateY(16px); opacity:.98; } to{ transform: translateY(0); opacity:1; } } @keyframes sheet-out{ from{ transform: translateY(0); opacity:1; } to{ transform: translateY(16px); opacity:.98; } } @media (max-width: 720px){ .proj-modal{ align-items:flex-end; } .proj-modal__card{ width:100vw; max-width:100vw; max-height:86vh; border-radius:16px 16px 0 0; padding:14px 14px 18px; box-shadow:0 -8px 28px rgba(0,0,0,.3); } .proj-modal.is-open .proj-modal__card{ animation: sheet-in 240ms cubic-bezier(.2,.9,.2,1) both; } .proj-modal.is-closing .proj-modal__card{ animation: sheet-out 200ms cubic-bezier(.2,.9,.2,1) both; } .proj-modal__grid{ grid-template-columns: 1fr; gap:10px; } .proj-item{ flex-direction: row; align-items:center; padding:10px; } .proj-item__thumb{ width:72px; height:54px; border-radius:10px; } .proj-item__title{ font-size:15px; } .proj-item__desc{ font-size:12px; } .proj-item__btn{ padding:10px 12px; border-radius:12px; } } /* === Homepage polish：不改布局，仅做视觉微调 === */ /* 背景淡色渐变云雾（浅色） */ body{ background-image: radial-gradient(900px 600px at 85% -10%, rgba(147,197,253,0.18), transparent 60%), radial-gradient(800px 520px at -8% 0%, rgba(255,213,213,0.14), transparent 60%); background-attachment: fixed; } /* 暗色下的更深渐变 */ body.dark{ background-image: radial-gradient(900px 600px at 85% -10%, rgba(56,116,203,0.22), transparent 60%), radial-gradient(800px 520px at -8% 0%, rgba(116,70,153,0.18), transparent 60%); } /* 卡片更柔和的阴影与边框 */ .card-widget, .panel-card{ border: 1px solid rgba(12,24,40,0.06); box-shadow: 0 10px 28px rgba(12,24,40,0.06); border-radius: 16px; } body.dark .card-widget, body.dark .panel-card{ border-color: rgba(255,255,255,0.06); box-shadow: 0 18px 40px rgba(0,0,0,0.35); } /* 项目卡轻浮动与缩略图轻微缩放 */ .proj-card{ transition: transform .18s ease, box-shadow .18s ease; border-radius: 14px; overflow: hidden; } .proj-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(12,24,40,0.12); } .proj-card .proj-thumb img{ display:block; width:100%; height:auto; transition: transform .26s ease; border-radius: 10px; } .proj-card:hover .proj-thumb img{ transform: scale(1.03); } /* 顶部作者区按钮的轻微悬浮反馈 */ .card-info-social-icons .social-icon{ transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .card-info-social-icons .social-icon:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12,24,40,0.10); background:#ffffff; } /* 分割线更细腻 */ hr{ border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(31,111,196,0.22), transparent); } /* 留言板样式已移除 */ /* Desktop 微调：更紧凑的排版与更小字号 */ @media (min-width: 1024px){ /* 桌面端：按钮更小，文本单行显示 */ .card-info-social-icons{ gap: 10px !important; } .card-info-social-icons .social-icon, .card-info-social-icons .social-icon.contact-btn, .card-info-social-icons a.contact-btn.social-icon{ padding: 6px 12px !important; height: 36px !important; min-width: 0 !important; border-radius: 10px !important; font-size: 14px !important; line-height: 1 !important; box-shadow: none !important; } .card-info-social-icons .social-icon i{ font-size: 14px !important; margin-right: 6px !important; } .card-info-social-icons .social-icon .social-link-text{ font-size: 14px !important; white-space: nowrap !important; } /* 让 随行内布局并与文字垂直对齐；尺寸由组件内部控制 */ .setting-switch theme-button{ display:inline-block; vertical-align: middle; } } /* 移动端留言板相关样式已移除 */ /* 站点统计卡片样式 */ #site-stats-card { cursor: pointer; } /* 统计模态框内容样式 */ .stats-modal-body { padding: 20px; } #stats-loading { text-align: center; padding: 40px; } #stats-loading p { margin-top: 15px; } #statsChart { display: none; max-width: 100%; height: 300px; } #stats-error { display: none; text-align: center; padding: 40px; color: #e74c3c; } #stats-error p { margin-top: 15px; } /* 仅在手机端显示的栏目 */ .mobile-only { display: none !important; } @media (max-width: 768px) { .mobile-only { display: block !important; } } /* 应用下载栏目样式 */ .app-download { display: none !important; } @media (max-width: 768px) { .app-download { display: flex !important; flex-direction: column; align-items: center; gap: 15px; padding: 20px; border-radius: 12px; background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1)); } } /* 下载按钮 - 参考 Uiverse 设计 */ .download-pill { --width: 140px; --height: 45px; --tooltip-height: 35px; --tooltip-width: 95px; --gap-between-tooltip-to-button: 18px; --button-color: #3498db; --tooltip-color: #fff; width: var(--width); height: var(--height); background: var(--button-color); position: relative; text-align: center; border-radius: 0.45em; font-family: "Arial", sans-serif; transition: background 0.3s; border: none; cursor: pointer; text-decoration: none; color: white; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .download-pill::before { position: absolute; content: attr(data-tooltip); width: var(--tooltip-width); height: var(--tooltip-height); background-color: var(--tooltip-color); font-size: 0.85rem; color: #111; border-radius: .25em; line-height: var(--tooltip-height); bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px); left: calc(50% - var(--tooltip-width) / 2); font-weight: 500; } .download-pill::after { position: absolute; content: ''; width: 0; height: 0; border: 10px solid transparent; border-top-color: var(--tooltip-color); left: calc(50% - 10px); bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px); } .download-pill::after, .download-pill::before { opacity: 0; visibility: hidden; transition: all 0.5s; } .download-pill .download-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .download-pill-wrapper, .download-text, .download-icon { overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; color: #fff; } .download-text { top: 0; display: flex; align-items: center; justify-content: center; } .download-text, .download-icon { transition: top 0.5s; } .download-icon { color: #fff; top: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; } .download-text-label { margin-left: 6px; } .download-pill:hover { background: #2980b9; } .download-pill:hover .download-text { top: -100%; } .download-pill:hover .download-icon { top: 0; } .download-pill:hover::before, .download-pill:hover::after { opacity: 1; visibility: visible; } .download-pill:hover::after { bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); } .download-pill:hover::before { bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); } .download-desc { color: #666; font-size: 14px; margin: 0; text-align: center; width: 100%; } body.dark .download-desc { color: #aaa; } body.dark .app-download { background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), rgba(155, 89, 182, 0.05)); } /* 联系方式图标容器样式 */ .contact-icons-container { display: flex; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .contact-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(0, 0, 0, 0.04); color: #666; text-decoration: none; transition: all 0.3s ease; font-size: 18px; } .contact-icon-link:hover { background: rgba(0, 0, 0, 0.08); color: #333; transform: translateY(-3px); } /* 夜间模式下的联系方式图标容器样式 */ body.dark .contact-icon-link { background: rgba(255, 255, 255, 0.1); color: #d0d0d0; } body.dark .contact-icon-link:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } /* 响应式调整 */ @media (max-width: 600px) { .contact-icons-container { gap: 8px; margin-top: 10px; } .contact-icon-link { width: 32px; height: 32px; font-size: 16px; border-radius: 6px; } } /* 兴趣爱好标签 - 基础样式 */ .hobby-pill { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .hobby-pill:hover { transform: translateY(-4px); } /* 兴趣爱好标签 - Tooltip 效果 */ .hobby-pill[data-tooltip] { position: relative; cursor: pointer; } .hobby-pill[data-tooltip]::before { position: absolute; content: attr(data-tooltip); color: #333; padding: 8px 12px; border-radius: 12px; font-size: 12px; white-space: nowrap; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 1002; font-weight: 500; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 彩色描边背景 - 使用 CSS 变量控制角度 */ --tooltip-angle: 0deg; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--tooltip-angle), #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; border: 4px solid transparent; /* 显示/隐藏过渡效果 */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } @keyframes rotate-border { 0% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 0deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 0.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 3deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 1.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 6deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 2.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 9deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 3.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 12deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 15deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 4.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 18deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 5.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 21deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 6.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 24deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 7.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 27deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 30deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 8.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 33deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 9.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 36deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 10.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 39deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 11.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 42deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 12% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 45deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 12.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 48deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 13.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 51deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 14.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 54deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 15.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 57deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 16% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 60deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 16.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 63deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 17.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 66deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 18.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 69deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 19.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 72deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 20% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 75deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 20.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 78deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 21.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 81deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 22.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 84deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 23.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 87deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 24% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 90deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 24.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 93deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 25.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 96deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 26.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 99deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 27.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 102deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 28% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 105deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 28.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 108deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 29.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 111deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 30.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 114deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 31.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 117deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 32% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 120deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 32.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 123deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 33.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 126deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 34.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 129deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 35.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 132deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 36% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 135deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 36.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 138deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 37.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 141deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 38.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 144deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 39.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 147deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 40% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 150deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 40.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 153deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 41.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 156deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 42.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 159deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 43.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 162deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 44% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 165deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 44.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 168deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 45.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 171deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 46.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 174deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 47.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 177deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 48% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 180deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 48.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 183deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 49.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 186deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 50.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 189deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 51.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 192deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 52% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 195deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 52.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 198deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 53.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 201deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 54.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 204deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 55.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 207deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 56% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 210deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 56.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 213deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 57.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 216deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 58.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 219deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 59.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 222deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 60% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 225deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 60.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 228deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 61.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 231deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 62.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 234deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 63.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 237deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 64% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 240deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 64.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 243deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 65.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 246deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 66.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 249deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 67.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 252deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 68% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 255deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 68.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 258deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 69.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 261deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 70.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 264deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 71.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 267deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 72% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 270deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 72.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 273deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 73.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 276deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 74.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 279deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 75.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 282deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 76% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 285deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 76.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 288deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 77.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 291deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 78.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 294deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 79.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 297deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 80% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 300deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 80.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 303deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 81.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 306deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 82.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 309deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 83.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 312deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 84% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 315deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 84.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 318deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 85.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 321deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 86.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 324deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 87.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 327deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 88% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 330deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 88.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 333deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 89.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 336deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 90.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 339deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 91.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 342deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 92% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 345deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 92.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 348deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 93.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 351deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 94.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 354deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 95.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 357deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 100% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 360deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } } .hobby-pill[data-tooltip]::after { position: absolute; content: ''; width: 0; height: 0; border: 6px solid transparent; border-top-color: #fff; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1001; filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1)); } .hobby-pill[data-tooltip]:hover::before, .hobby-pill[data-tooltip]:hover::after { opacity: 1; visibility: visible; } /* 舞萌DX - 铜色描边特殊样式 */ .hobby-pill[data-tooltip="Rating 12666"]::before { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--tooltip-angle), #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box !important; border: 4px solid transparent !important; } .hobby-pill[data-tooltip="Rating 12666"]::after { border-top-color: #fff; filter: drop-shadow(0 -2px 4px rgba(184, 115, 51, 0.3)); } /* Arcaea - 紫色描边特殊样式 */ .hobby-pill[data-tooltip*="ppt"]::before { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--tooltip-angle), #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box !important; border: 4px solid transparent !important; } .hobby-pill[data-tooltip*="ppt"]::after { border-top-color: #fff; filter: drop-shadow(0 -2px 4px rgba(156, 39, 176, 0.3)); } @keyframes rotate-border-bronze { 0% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 0deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 0.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 3deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 1.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 6deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 2.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 9deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 3.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 12deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 15deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 4.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 18deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 5.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 21deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 6.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 24deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 7.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 27deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 30deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 8.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 33deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 9.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 36deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 10.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 39deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 11.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 42deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 12% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 45deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 12.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 48deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 13.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 51deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 14.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 54deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 15.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 57deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 16% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 60deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 16.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 63deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 17.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 66deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 18.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 69deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 19.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 72deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 20% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 75deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 20.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 78deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 21.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 81deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 22.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 84deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 23.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 87deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 24% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 90deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 24.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 93deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 25.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 96deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 26.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 99deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 27.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 102deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 28% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 105deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 28.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 108deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 29.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 111deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 30.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 114deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 31.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 117deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 32% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 120deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 32.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 123deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 33.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 126deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 34.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 129deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 35.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 132deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 36% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 135deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 36.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 138deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 37.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 141deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 38.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 144deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 39.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 147deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 40% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 150deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 40.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 153deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 41.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 156deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 42.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 159deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 43.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 162deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 44% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 165deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 44.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 168deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 45.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 171deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 46.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 174deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 47.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 177deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 48% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 180deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 48.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 183deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 49.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 186deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 50.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 189deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 51.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 192deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 52% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 195deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 52.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 198deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 53.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 201deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 54.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 204deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 55.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 207deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 56% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 210deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 56.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 213deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 57.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 216deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 58.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 219deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 59.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 222deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 60% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 225deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 60.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 228deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 61.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 231deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 62.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 234deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 63.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 237deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 64% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 240deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 64.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 243deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 65.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 246deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 66.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 249deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 67.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 252deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 68% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 255deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 68.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 258deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 69.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 261deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 70.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 264deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 71.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 267deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 72% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 270deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 72.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 273deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 73.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 276deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 74.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 279deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 75.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 282deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 76% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 285deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 76.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 288deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 77.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 291deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 78.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 294deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 79.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 297deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 80% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 300deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 80.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 303deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 81.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 306deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 82.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 309deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 83.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 312deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 84% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 315deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 84.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 318deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 85.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 321deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 86.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 324deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 87.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 327deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 88% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 330deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 88.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 333deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 89.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 336deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 90.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 339deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 91.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 342deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 92% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 345deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 92.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 348deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 93.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 351deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 94.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 354deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 95.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 357deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 100% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 360deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } } @keyframes rotate-border-purple { 0% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 0deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 0.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 3deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 1.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 6deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 2.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 9deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 3.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 12deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 15deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 4.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 18deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 5.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 21deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 6.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 24deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 7.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 27deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 30deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 8.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 33deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 9.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 36deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 10.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 39deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 11.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 42deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 12% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 45deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 12.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 48deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 13.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 51deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 14.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 54deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 15.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 57deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 16% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 60deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 16.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 63deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 17.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 66deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 18.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 69deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 19.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 72deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 20% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 75deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 20.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 78deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 21.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 81deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 22.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 84deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 23.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 87deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 24% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 90deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 24.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 93deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 25.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 96deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 26.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 99deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 27.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 102deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 28% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 105deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 28.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 108deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 29.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 111deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 30.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 114deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 31.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 117deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 32% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 120deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 32.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 123deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 33.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 126deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 34.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 129deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 35.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 132deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 36% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 135deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 36.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 138deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 37.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 141deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 38.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 144deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 39.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 147deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 40% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 150deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 40.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 153deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 41.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 156deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 42.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 159deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 43.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 162deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 44% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 165deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 44.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 168deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 45.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 171deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 46.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 174deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 47.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 177deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 48% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 180deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 48.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 183deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 49.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 186deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 50.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 189deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 51.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 192deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 52% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 195deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 52.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 198deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 53.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 201deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 54.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 204deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 55.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 207deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 56% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 210deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 56.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 213deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 57.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 216deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 58.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 219deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 59.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 222deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 60% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 225deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 60.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 228deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 61.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 231deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 62.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 234deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 63.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 237deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 64% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 240deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 64.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 243deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 65.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 246deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 66.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 249deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 67.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 252deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 68% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 255deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 68.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 258deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 69.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 261deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 70.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 264deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 71.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 267deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 72% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 270deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 72.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 273deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 73.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 276deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 74.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 279deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 75.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 282deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 76% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 285deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 76.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 288deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 77.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 291deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 78.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 294deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 79.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 297deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 80% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 300deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 80.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 303deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 81.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 306deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 82.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 309deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 83.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 312deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 84% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 315deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 84.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 318deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 85.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 321deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 86.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 324deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 87.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 327deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 88% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 330deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 88.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 333deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 89.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 336deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 90.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 339deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 91.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 342deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 92% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 345deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 92.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 348deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 93.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 351deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 94.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 354deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 95.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 357deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 100% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 360deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } } /* 中二节奏 - 红色描边特殊样式 */ .hobby-pill[data-tooltip="Rating 7.09"]::before { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--tooltip-angle), #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box !important; border: 4px solid transparent !important; } .hobby-pill[data-tooltip="Rating 7.09"]::after { border-top-color: #fff; filter: drop-shadow(0 -2px 4px rgba(220, 20, 60, 0.3)); } @keyframes rotate-border-red { 0% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 0deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 0.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 3deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 1.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 6deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 2.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 9deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 3.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 12deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 15deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 4.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 18deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 5.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 21deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 6.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 24deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 7.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 27deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 30deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 8.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 33deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 9.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 36deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 10.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 39deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 11.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 42deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 12% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 45deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 12.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 48deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 13.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 51deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 14.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 54deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 15.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 57deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 16% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 60deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 16.8% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 63deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 17.6% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 66deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 18.4% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 69deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 19.2% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 72deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 20% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 75deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 25% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 90deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 30% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 108deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 35% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 126deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 40% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 144deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 45% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 162deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 50% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 180deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 55% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 198deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 60% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 216deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 65% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 234deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 70% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 252deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 75% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 270deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 80% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 288deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 85% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 306deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 90% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 324deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 95% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 342deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 100% { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 360deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } } /* 夜间模式 - Tooltip 样式 */ body.dark .hobby-pill[data-tooltip]::before { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; color: #f0f0f0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); /* Use the dark variant animation for the general case */ animation: rotate-border-dark 3s linear infinite !important; } body.dark .hobby-pill[data-tooltip="Rating 12666"]::before { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box !important; border: 4px solid transparent !important; animation: rotate-border-bronze-dark 3s linear infinite !important; } /* Arcaea 夜间模式 - 紫色描边 */ body.dark .hobby-pill[data-tooltip*="ppt"]::before { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box !important; border: 4px solid transparent !important; animation: rotate-border-purple 3s linear infinite !important; } /* Phigros (rks 16.19) 夜间模式 - 深色背景 */ body.dark .hobby-pill[data-tooltip="rks 16.19"]::before { animation: rotate-border-dark 3s linear infinite !important; } /* 舞立方 (战力 1843) 夜间模式 - 深色背景 */ body.dark .hobby-pill[data-tooltip="战力 1843"]::before { animation: rotate-border-dark 3s linear infinite !important; } /* 中二节奏 (Rating 7.09) 夜间模式 - 深色背景 */ body.dark .hobby-pill[data-tooltip="Rating 7.09"]::before { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box !important; animation: rotate-border-red-dark 3s linear infinite !important; } /* 深色模式 - 为Phigros、舞立方、中二节奏创建旋转描边动画 */ @keyframes rotate-border-dark { 0% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 0.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 3deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 1.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 6deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 2.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 9deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 3.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 12deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 15deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 4.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 18deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 5.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 21deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 6.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 24deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 7.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 27deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 30deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 8.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 33deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 9.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 36deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 10.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 39deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 11.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 42deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 12% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 45deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 12.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 48deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 13.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 51deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 14.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 54deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 15.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 57deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 16% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 60deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 16.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 63deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 17.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 66deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 18.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 69deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 19.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 72deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 20% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 75deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 20.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 78deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 21.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 81deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 22.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 84deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 23.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 87deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 24% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 90deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 24.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 93deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 25.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 96deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 26.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 99deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 27.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 102deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 28% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 105deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 28.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 108deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 29.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 111deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 30.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 114deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 31.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 117deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 32% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 120deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 32.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 123deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 33.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 126deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 34.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 129deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 35.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 132deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 36% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 135deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 36.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 138deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 37.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 141deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 38.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 144deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 39.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 147deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 40% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 150deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 40.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 153deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 41.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 156deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 42.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 159deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 43.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 162deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 44% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 165deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 44.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 168deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 45.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 171deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 46.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 174deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 47.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 177deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 48% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 180deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 48.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 183deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 49.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 186deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 50.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 189deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 51.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 192deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 52% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 195deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 52.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 198deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 53.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 201deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 54.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 204deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 55.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 207deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 56% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 210deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 56.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 213deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 57.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 216deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 58.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 219deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 59.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 222deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 60% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 225deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 60.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 228deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 61.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 231deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 62.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 234deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 63.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 237deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 64% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 240deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 64.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 243deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 65.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 246deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 66.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 249deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 67.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 252deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 68% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 255deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 68.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 258deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 69.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 261deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 70.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 264deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 71.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 267deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 72% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 270deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 72.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 273deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 73.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 276deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 74.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 279deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 75.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 282deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 76% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 285deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 76.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 288deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 77.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 291deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 78.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 294deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 79.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 297deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 80% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 300deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 80.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 303deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 81.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 306deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 82.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 309deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 83.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 312deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 84% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 315deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 84.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 318deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 85.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 321deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 86.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 324deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 87.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 327deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 88% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 330deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 88.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 333deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 89.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 336deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 90.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 339deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 91.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 342deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 92% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 345deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 92.8% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 348deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 93.6% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 351deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 94.4% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 354deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 95.2% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 357deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 100% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 360deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } } /* 夜间模式 - 舞萌DX 铜色旋转描边动画 */ @keyframes rotate-border-bronze-dark { 0% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 5% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 18deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 10% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 36deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 15% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 54deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 20% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 72deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 25% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 90deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 30% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 108deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 35% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 126deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 40% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 144deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 45% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 162deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 50% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 180deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 55% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 198deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 60% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 216deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 65% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 234deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 70% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 252deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 75% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 270deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 80% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 288deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 85% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 306deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 90% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 324deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 95% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 342deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 100% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 360deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } } /* 夜间模式 - 中二节奏 橙红色旋转描边动画 */ @keyframes rotate-border-red-dark { 0% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 0deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 5% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 18deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 10% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 36deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 15% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 54deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 20% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 72deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 25% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 90deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 30% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 108deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 35% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 126deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 40% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 144deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 45% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 162deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 50% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 180deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 55% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 198deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 60% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 216deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 65% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 234deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 70% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 252deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 75% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 270deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 80% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 288deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 85% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 306deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 90% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 324deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 95% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 342deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } 100% { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, conic-gradient(from 360deg, #DC143C, #FF0000, #FF1493, #FF0000, #DC143C) border-box; } } /* Phigros (rks 16.19) 夜间模式 - 深色背景 */ body.dark .hobby-pill[data-tooltip="rks 16.19"]::before { animation: rotate-border-dark 3s linear infinite !important; } /* 舞立方 (战力 1843) 夜间模式 - 深色背景 */ body.dark .hobby-pill[data-tooltip="战力 1843"]::before { animation: rotate-border-dark 3s linear infinite !important; } /* 舞萌DX 夜间模式 - 铜色箭头特殊样式 */ body.dark .hobby-pill[data-tooltip="Rating 12666"]::after { border-top-color: #2a2a2a; filter: drop-shadow(0 -2px 4px rgba(184, 115, 51, 0.4)); } /* 中二节奏 夜间模式 - 红色箭头特殊样式 */ body.dark .hobby-pill[data-tooltip="Rating 7.09"]::after { border-top-color: #2a2a2a; filter: drop-shadow(0 -2px 4px rgba(220, 20, 60, 0.4)); } /* Arcaea 夜间模式 - 紫色箭头特殊样式 */ body.dark .hobby-pill[data-tooltip="ptt 10.50"]::after { border-top-color: #2a2a2a; filter: drop-shadow(0 -2px 4px rgba(156, 39, 176, 0.4)); } body.dark .hobby-pill[data-tooltip]::after { border-top-color: #2a2a2a; filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.3)); } /* 夜间模式：兴趣爱好 tooltip 内容覆盖（深色气泡 + 浅色文字） */ body.dark .hobby-pill[data-tooltip]::before { /* 让 tooltip 在暗色背景上有足够对比，但不完全亮起白底 */ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 0deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; color: #e6e6e6; padding: 8px 12px; border-radius: 12px; font-size: 12px; white-space: nowrap; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); /* 不在这里强制隐藏/显示，让原来的 :hover 规则控制可见性 */ transition: all 0.3s ease; z-index: 10000; font-weight: 500; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); border: 4px solid transparent; /* 使用暗色版的描边动画（让内底保持深色） */ animation: rotate-border-dark 3s linear infinite; } /* 夜间模式下箭头颜色匹配深色气泡 */ body.dark .hobby-pill[data-tooltip]::after { border-top-color: #121212; } /* 特殊描边（铜色/紫色）在夜间模式下仍保留彩色边框，但使用深色内底 */ body.dark .hobby-pill[data-tooltip="Rating 12666"]::before { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 0deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box !important; color: #f3e8d8; border: 4px solid transparent !important; animation: rotate-border-bronze-dark 3s linear infinite !important; } body.dark .hobby-pill[data-tooltip*="ppt"]::before { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 0deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box !important; color: #e9dff8; border: 4px solid transparent !important; animation: rotate-border-purple-dark 3s linear infinite !important; } /* Dark-mode variants of the rotating-border keyframes: keep the colored border animation but use a dark inner fill so tooltip interior doesn't flash white. */ @keyframes rotate-border-dark { 0% { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 0deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } 100% { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 360deg, #EA4335, #FBBC04, #34A853, #4285F4, #EA4335) border-box; } } @keyframes rotate-border-bronze-dark { 0% { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 0deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } 100% { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 360deg, #B87333, #CD7F32, #D4AF37, #CD7F32, #B87333) border-box; } } @keyframes rotate-border-purple-dark { 0% { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 0deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } 100% { background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, conic-gradient(from 360deg, #9C27B0, #673AB7, #512DA8, #673AB7, #9C27B0) border-box; } } /* 友情链接 - 悬停效果 */ .friend-link { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .friend-link:hover { transform: translateY(-4px); }