/* ========================================================= 1. 基础隔离与统一色彩变量 ========================================================= */ .ccps-sidebar, .ccps-sidebar *, .ccps-sidebar *::before, .ccps-sidebar *::after { box-sizing: border-box !important; } .ccps-sidebar { --ccps-wine: #6f2947; --ccps-wine-deep: #542036; --ccps-rose: #ae5d7e; --ccps-rose-dark: #873a5b; --ccps-rose-light: #f8dce7; --ccps-pink-soft: #fff4f8; --ccps-cream: #fffaf5; --ccps-gold: #c9a25f; --ccps-gold-light: #ead6a5; --ccps-text: #593746; --ccps-muted: #9a7a88; --ccps-border: rgba(197, 151, 86, 0.52); position: relative !important; isolation: isolate !important; width: 100% !important; max-width: 330px !important; margin: 18px 0 !important; padding: 0 !important; overflow: visible !important; color: var(--ccps-text) !important; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif !important; line-height: 1.5 !important; } /* ========================================================= 2. 外框：完整参考公寓公告组件 ========================================================= */ .ccps-panel-shell { position: relative !important; overflow: hidden !important; width: 100% !important; padding: 11px !important; border: 1px solid rgba(194, 149, 81, 0.72) !important; border-radius: 23px !important; background: radial-gradient( circle at 12% 0%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 31% ), linear-gradient( 150deg, #fffdf9 0%, #fff4f8 49%, #f9e3ec 100% ) !important; box-shadow: 0 18px 42px rgba(91, 34, 61, 0.16), inset 0 0 0 4px rgba(255, 255, 255, 0.58) !important; } .ccps-panel-shell::before { content: "" !important; position: absolute !important; top: -76px !important; right: -58px !important; width: 145px !important; height: 145px !important; pointer-events: none !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(217, 133, 168, 0.28), rgba(217, 133, 168, 0) ) !important; } .ccps-panel-inner { position: relative !important; z-index: 1 !important; width: 100% !important; padding: 17px 15px 15px !important; border: 1px solid rgba(199, 159, 96, 0.42) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.58) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; } /* ========================================================= 3. 顶部标题 ========================================================= */ .ccps-panel-heading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 0 11px !important; padding: 0 !important; text-align: center !important; } .ccps-heading-line { width: 30px !important; height: 1px !important; flex: 0 1 30px !important; background: linear-gradient( 90deg, transparent, rgba(197, 154, 88, 0.85) ) !important; } .ccps-heading-line:last-child { background: linear-gradient( 90deg, rgba(197, 154, 88, 0.85), transparent ) !important; } .ccps-heading-symbol { flex: 0 0 auto !important; color: var(--ccps-gold) !important; font-size: 15px !important; line-height: 1 !important; } .ccps-heading-title { display: block !important; color: var(--ccps-wine) !important; font-family: "Noto Serif SC", "Songti SC", "Times New Roman", serif !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0.13em !important; line-height: 1.2 !important; } /* ========================================================= 4. 第一板块：主题图区域 ========================================================= */ .ccps-question-section { position: relative !important; margin: 0 !important; padding: 0 !important; } .ccps-main-image-link { position: relative !important; display: block !important; width: 100% !important; height: 168px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: inherit !important; text-decoration: none !important; border: 1px solid rgba(177, 90, 126, 0.4) !important; border-radius: 5px !important; background: linear-gradient( 145deg, #8a3b5b, #542036 ) !important; box-shadow: 0 9px 20px rgba(101, 41, 69, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; } .ccps-main-image-link::before { content: "" !important; position: absolute !important; z-index: 6 !important; inset: 6px !important; pointer-events: none !important; border: 1px solid rgba(234, 214, 165, 0.55) !important; border-radius: 3px !important; } .ccps-image-viewport { position: absolute !important; z-index: 1 !important; inset: 0 !important; display: block !important; overflow: hidden !important; } .ccps-image-track { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; display: flex !important; align-items: center !important; width: max-content !important; min-width: max-content !important; height: 100% !important; will-change: transform !important; /* * 从左向右持续滚动。 * 初始显示第一张图左侧的“前一份副本”，然后向右移动一整张图宽度。 */ animation: ccpsPrinceBannerMoveRight 18s linear infinite !important; } .ccps-main-image { display: block !important; flex: 0 0 auto !important; width: auto !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: contain !important; filter: saturate(1.02) contrast(1.015) brightness(1.015) !important; } .ccps-image-glow { position: absolute !important; z-index: 3 !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 115deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 236, 245, 0.04) 69%, rgba(111, 41, 71, 0.12) 100% ) !important; } .ccps-image-edge { position: absolute !important; z-index: 4 !important; top: 0 !important; bottom: 0 !important; width: 25px !important; pointer-events: none !important; } .ccps-image-edge-left { left: 0 !important; background: linear-gradient( 90deg, rgba(84, 32, 54, 0.25), transparent ) !important; } .ccps-image-edge-right { right: 0 !important; background: linear-gradient( 90deg, transparent, rgba(84, 32, 54, 0.25) ) !important; } .ccps-main-image-link:hover .ccps-image-track { animation-play-state: paused !important; } .ccps-main-image-link:hover .ccps-main-image { filter: saturate(1.08) contrast(1.025) brightness(1.055) !important; } /* ========================================================= 5. 提问按钮与爱心 ========================================================= */ .ccps-question-action { position: relative !important; z-index: 7 !important; width: 100% !important; margin: 9px 0 0 !important; padding: 12px 2px 4px !important; overflow: visible !important; } .ccps-question-button { position: relative !important; z-index: 5 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 23px !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 9px 11px 9px 17px !important; overflow: hidden !important; appearance: none !important; -webkit-appearance: none !important; color: #fffaf5 !important; text-decoration: none !important; border: 1px solid rgba(234, 214, 165, 0.88) !important; border-radius: 13px !important; outline: none !important; background: linear-gradient( 145deg, #bd6e90 0%, #8a3b5b 47%, #62253f 100% ) !important; box-shadow: 0 9px 20px rgba(91, 34, 61, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(69, 19, 42, 0.28), 0 0 15px rgba(174, 93, 126, 0.2) !important; font-family: inherit !important; text-align: center !important; cursor: pointer !important; animation: ccpsQuestionButtonGlow 2.8s ease-in-out infinite !important; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important; } /* 按钮顶部玻璃高光 */ .ccps-question-button::before { content: "" !important; position: absolute !important; z-index: 0 !important; top: 1px !important; right: 2px !important; left: 2px !important; height: 48% !important; pointer-events: none !important; border-radius: 11px 11px 55% 55% !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.03) ) !important; } /* 默认状态下持续从左至右划过的光泽 */ .ccps-question-button::after { content: "" !important; position: absolute !important; z-index: 1 !important; top: -90% !important; left: -46% !important; width: 23% !important; height: 285% !important; pointer-events: none !important; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.9), transparent ) !important; filter: blur(1px) !important; transform: rotate(19deg) !important; animation: ccpsQuestionButtonShine 2.9s ease-in-out infinite !important; } .ccps-button-text, .ccps-button-arrow { position: relative !important; z-index: 3 !important; } .ccps-button-text { display: block !important; min-width: 0 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.075em !important; line-height: 1.3 !important; text-align: center !important; text-shadow: 0 1px 2px rgba(62, 15, 36, 0.7) !important; } .ccps-button-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; color: var(--ccps-gold-light) !important; border-radius: 50% !important; background: rgba(255, 248, 231, 0.14) !important; font-family: Arial, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; transition: transform 0.22s ease !important; } .ccps-question-button:hover { color: #ffffff !important; filter: brightness(1.045) saturate(1.04) !important; transform: translateY(-2px) scale(1.006) !important; box-shadow: 0 12px 25px rgba(91, 34, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -2px 0 rgba(69, 19, 42, 0.3), 0 0 23px rgba(174, 93, 126, 0.34) !important; } .ccps-question-button:hover .ccps-button-arrow { transform: translateX(3px) !important; } .ccps-question-button:active { transform: translateY(0) scale(0.995) !important; } /* 按钮持续冒出小爱心 */ .ccps-floating-hearts { position: absolute !important; z-index: 4 !important; right: 0 !important; bottom: 2px !important; left: 0 !important; height: 83px !important; overflow: visible !important; pointer-events: none !important; } .ccps-heart { position: absolute !important; bottom: 25px !important; display: block !important; opacity: 0 !important; color: var(--ccps-rose) !important; font-family: Arial, sans-serif !important; font-style: normal !important; font-weight: 700 !important; line-height: 1 !important; text-shadow: 0 0 4px rgba(255, 244, 248, 0.98), 0 0 8px rgba(174, 93, 126, 0.65), 0 0 13px rgba(201, 162, 95, 0.26) !important; animation: ccpsFloatingHeart 3.3s ease-in infinite !important; } .ccps-heart-1 { left: 3% !important; font-size: 8px !important; animation-delay: 0s !important; --ccps-heart-drift: -7px; } .ccps-heart-2 { left: 14% !important; font-size: 12px !important; animation-delay: 0.55s !important; --ccps-heart-drift: 5px; } .ccps-heart-3 { left: 26% !important; font-size: 9px !important; animation-delay: 1.1s !important; --ccps-heart-drift: -3px; } .ccps-heart-4 { left: 38% !important; font-size: 13px !important; animation-delay: 1.65s !important; --ccps-heart-drift: 7px; } .ccps-heart-5 { left: 48% !important; font-size: 8px !important; animation-delay: 2.2s !important; --ccps-heart-drift: -6px; } .ccps-heart-6 { left: 59% !important; font-size: 11px !important; animation-delay: 0.85s !important; --ccps-heart-drift: 4px; } .ccps-heart-7 { left: 70% !important; font-size: 9px !important; animation-delay: 1.4s !important; --ccps-heart-drift: -5px; } .ccps-heart-8 { left: 80% !important; font-size: 13px !important; animation-delay: 2.55s !important; --ccps-heart-drift: 6px; } .ccps-heart-9 { left: 90% !important; font-size: 8px !important; animation-delay: 1.9s !important; --ccps-heart-drift: -4px; } .ccps-heart-10 { left: 97% !important; font-size: 10px !important; animation-delay: 3s !important; --ccps-heart-drift: 3px; } /* ========================================================= 6. 王子名单板块 ========================================================= */ .ccps-prince-section { position: relative !important; z-index: 3 !important; margin: 9px 0 0 !important; padding: 13px 12px 11px !important; overflow: visible !important; border: 1px solid rgba(177, 90, 126, 0.35) !important; border-left: 4px solid var(--ccps-rose) !important; border-radius: 7px 13px 13px 7px !important; background: linear-gradient( 135deg, rgba(255, 250, 252, 0.98), rgba(251, 231, 240, 0.94) ) !important; box-shadow: 0 8px 18px rgba(101, 41, 69, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } .ccps-prince-section::before { content: "" !important; position: absolute !important; top: -28px !important; right: -23px !important; width: 78px !important; height: 78px !important; pointer-events: none !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(204, 119, 153, 0.18), rgba(204, 119, 153, 0) ) !important; } .ccps-section-heading { position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 0 8px !important; padding: 0 0 8px !important; border-bottom: 1px solid rgba(199, 157, 93, 0.22) !important; text-align: center !important; } .ccps-section-line { flex: 1 1 auto !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(197, 154, 88, 0.68) ) !important; } .ccps-section-line:last-child { background: linear-gradient( 90deg, rgba(197, 154, 88, 0.68), transparent ) !important; } .ccps-section-symbol { flex: 0 0 auto !important; color: var(--ccps-gold) !important; font-size: 9px !important; line-height: 1 !important; } .ccps-section-title { display: block !important; flex: 0 0 auto !important; color: var(--ccps-wine) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.11em !important; line-height: 1.25 !important; } /* ========================================================= 7. 王子列表 ========================================================= */ .ccps-featured-list, .ccps-more-menu, .ccps-noscript-list { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 12px !important; row-gap: 0 !important; width: 100% !important; } .ccps-prince-item { position: relative !important; display: grid !important; grid-template-columns: 25px minmax(0, 1fr) 10px !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; min-height: 34px !important; margin: 0 !important; padding: 4px 1px !important; overflow: hidden !important; color: var(--ccps-wine) !important; text-decoration: none !important; border: 0 !important; border-bottom: 1px solid rgba(174, 93, 126, 0.14) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transition: color 0.18s ease, padding 0.18s ease, background 0.18s ease !important; } .ccps-prince-item::before { content: none !important; display: none !important; } .ccps-prince-item:hover { color: var(--ccps-wine-deep) !important; padding-right: 3px !important; padding-left: 3px !important; border-color: rgba(174, 93, 126, 0.22) !important; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.12), rgba(248, 220, 231, 0.38), rgba(255, 255, 255, 0.08) ) !important; box-shadow: none !important; transform: none !important; } .ccps-avatar-wrap { position: relative !important; z-index: 1 !important; display: block !important; width: 25px !important; height: 25px !important; overflow: hidden !important; border: 1px solid rgba(201, 162, 95, 0.62) !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: 0 2px 5px rgba(91, 34, 61, 0.1) !important; } .ccps-avatar, .ccps-avatar-wrap img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; object-fit: cover !important; } .ccps-prince-name { position: relative !important; z-index: 1 !important; display: block !important; min-width: 0 !important; overflow: hidden !important; color: inherit !important; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; line-height: 1.25 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .ccps-prince-arrow { position: relative !important; z-index: 1 !important; display: block !important; width: auto !important; height: auto !important; color: rgba(201, 162, 95, 0.82) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-family: Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; text-align: right !important; transition: transform 0.18s ease !important; } .ccps-prince-item:hover .ccps-prince-arrow { transform: translateX(2px) !important; } /* ========================================================= 8. 更多王子按钮和下拉菜单 ========================================================= */ .ccps-more-area { position: relative !important; z-index: 2 !important; margin-top: 6px !important; } .ccps-more-button { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; min-height: 30px !important; margin: 0 !important; padding: 5px 8px !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; color: var(--ccps-wine) !important; border: 0 !important; border-top: 1px solid rgba(197, 151, 86, 0.28) !important; border-radius: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important; font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.07em !important; line-height: 1.2 !important; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; } .ccps-more-button[hidden] { display: none !important; } .ccps-more-button:hover { color: var(--ccps-wine-deep) !important; border-color: rgba(178, 93, 129, 0.38) !important; background: rgba(248, 220, 231, 0.28) !important; box-shadow: none !important; transform: none !important; } .ccps-more-icon { color: var(--ccps-gold) !important; font-size: 9px !important; line-height: 1 !important; } .ccps-more-arrow { color: var(--ccps-rose) !important; font-family: Arial, sans-serif !important; font-size: 15px !important; line-height: 1 !important; transition: transform 0.2s ease !important; } .ccps-more-button[aria-expanded="true"] .ccps-more-arrow { transform: rotate(180deg) !important; } .ccps-more-menu { max-height: 230px !important; margin-top: 3px !important; padding: 0 2px 2px !important; overflow-x: hidden !important; overflow-y: auto !important; border: 0 !important; border-top: 1px solid rgba(197, 151, 86, 0.2) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.16) !important; box-shadow: none !important; scrollbar-width: thin !important; scrollbar-color: rgba(174, 93, 126, 0.58) rgba(255, 244, 248, 0.84) !important; } .ccps-more-menu[hidden] { display: none !important; } .ccps-more-menu::-webkit-scrollbar { width: 7px !important; } .ccps-more-menu::-webkit-scrollbar-track { background: rgba(255, 244, 248, 0.84) !important; border-radius: 10px !important; } .ccps-more-menu::-webkit-scrollbar-thumb { border: 2px solid transparent !important; border-radius: 10px !important; background: rgba(174, 93, 126, 0.58) !important; background-clip: padding-box !important; } .ccps-author-source { display: none !important; } /* ========================================================= 9. 空状态、底部装饰与焦点 ========================================================= */ .ccps-empty { position: relative !important; z-index: 1 !important; padding: 12px 10px !important; color: var(--ccps-muted) !important; border: 1px dashed rgba(177, 90, 126, 0.38) !important; border-radius: 10px !important; background: rgba(255, 250, 252, 0.76) !important; font-size: 12px !important; line-height: 1.65 !important; text-align: center !important; } .ccps-footer-decoration { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-top: 12px !important; color: var(--ccps-gold) !important; font-size: 10px !important; line-height: 1 !important; } .ccps-footer-decoration::before, .ccps-footer-decoration::after { content: "" !important; width: 47px !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(197, 154, 88, 0.62) ) !important; } .ccps-footer-decoration::after { background: linear-gradient( 90deg, rgba(197, 154, 88, 0.62), transparent ) !important; } .ccps-main-image-link:focus-visible, .ccps-question-button:focus-visible, .ccps-prince-item:focus-visible, .ccps-more-button:focus-visible { outline: 3px solid rgba(216, 137, 172, 0.29) !important; outline-offset: 2px !important; } /* ========================================================= 10. 动画 ========================================================= */ /** * 图片向右持续滚动。 * 两张图片尺寸一致，因此移动一张图的宽度后可无缝回到起点。 */ @keyframes ccpsPrinceBannerMoveRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes ccpsQuestionButtonGlow { 0%, 100% { box-shadow: 0 9px 20px rgba(91, 34, 61, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(69, 19, 42, 0.28), 0 0 12px rgba(174, 93, 126, 0.17); } 50% { box-shadow: 0 11px 24px rgba(91, 34, 61, 0.29), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -2px 0 rgba(69, 19, 42, 0.3), 0 0 23px rgba(174, 93, 126, 0.34), 0 0 8px rgba(201, 162, 95, 0.16); } } @keyframes ccpsQuestionButtonShine { 0% { left: -46%; opacity: 0; } 12% { opacity: 0.92; } 46% { left: 123%; opacity: 0; } 100% { left: 123%; opacity: 0; } } @keyframes ccpsFloatingHeart { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.52) rotate(-10deg); } 17% { opacity: 0.96; } 64% { opacity: 0.78; } 100% { opacity: 0; transform: translate3d(var(--ccps-heart-drift, 4px), -55px, 0) scale(1.18) rotate(13deg); } } /* ========================================================= 11. 响应式 ========================================================= */ @media (max-width: 767px) { .ccps-sidebar { max-width: 100% !important; } } @media (max-width: 380px) { .ccps-panel-inner { padding-right: 12px !important; padding-left: 12px !important; } .ccps-main-image-link { height: 154px !important; } .ccps-question-button { min-height: 44px !important; padding-right: 9px !important; padding-left: 13px !important; } .ccps-button-text { font-size: 13px !important; } .ccps-featured-list, .ccps-more-menu, .ccps-noscript-list { column-gap: 6px !important; row-gap: 0 !important; } .ccps-prince-item { grid-template-columns: 24px minmax(0, 1fr) 9px !important; gap: 5px !important; padding-right: 1px !important; padding-left: 1px !important; } .ccps-avatar-wrap { width: 24px !important; height: 24px !important; } .ccps-prince-name { font-size: 11px !important; } } /* 用户主动关闭动画时 */ @media (prefers-reduced-motion: reduce) { .ccps-sidebar *, .ccps-sidebar *::before, .ccps-sidebar *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .ccps-heart { display: none !important; } .ccps-image-track { left: 50% !important; transform: translateX(-50%) !important; } .ccps-main-image-copy { display: none !important; } }