公开统计
1,007热度分
279消息量
2,351世界书字符
6,448固定设定字符
以下状态来自本地公开导出字段;样式与模板仅提供安全预览/下载,不在本站自动执行。
cover: yrb4d8d8visuehigs5of9n8s.webpbackground: qdj6zzcc17pc51jsduln3xr9.webp导出中只有文件名引用,未包含实际图片二进制资源。
共 11,077 字符;仅作为文本显示,不会在本站执行。
/* ============================================
星河Live · 直播间UI系统
适配移动端 & PC端
============================================ */
/* ---------- 全局容器限定(防污染平台样式)---------- */
.live-wrapper {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
color: #e8e8f0;
max-width: 780px;
margin: 0 auto;
}
/* ---------- 顶部状态栏:直播间信息面板 ---------- */
.live-wrapper details {
background: linear-gradient(135deg, rgba(15,12,35,0.92) 0%, rgba(28,18,55,0.95) 100%);
border: 1px solid rgba(130,80,255,0.3);
border-radius: 12px;
margin: 6px 0;
overflow: hidden;
backdrop-filter: blur(8px);
transition: border-color 0.3s ease;
}
.live-wrapper details:hover {
border-color: rgba(160,100,255,0.6);
}
.live-wrapper details summary {
padding: 10px 16px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
background: linear-gradient(90deg, rgba(120,60,220,0.4), rgba(60,30,120,0.2));
display: flex;
align-items: center;
gap: 6px;
user-select: none;
list-style: none;
color: #c8a8ff;
transition: background 0.3s;
}
.live-wrapper details summary:hover {
background: linear-gradient(90deg, rgba(140,80,255,0.5), rgba(80,40,160,0.3));
}
.live-wrapper details summary::-webkit-details-marker {
display: none;
}
.live-wrapper details[open] summary::after {
content: ' ▲';
font-size: 10px;
margin-left: auto;
color: rgba(200,168,255,0.6);
}
.live-wrapper details:not([open]) summary::after {
content: ' ▼';
font-size: 10px;
margin-left: auto;
color: rgba(200,168,255,0.4);
}
.live-wrapper details p {
margin: 0;
padding: 7px 16px;
font-size: 12.5px;
line-height: 1.8;
border-top: 1px solid rgba(255,255,255,0.04);
color: #d0c8e8;
}
.live-wrapper details p:first-of-type {
padding-top: 10px;
}
.live-wrapper details p:last-of-type {
padding-bottom: 10px;
}
/* ---------- 直播间顶部标识栏 ---------- */
.live-top-bar {
background: linear-gradient(90deg, #0f0823 0%, #1a0f3a 50%, #0f0823 100%);
border: 1px solid rgba(160,80,255,0.4);
border-radius: 14px;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
position: relative;
overflow: hidden;
}
.live-top-bar::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(160,80,255,0.08), transparent);
animation: scanline 4s linear infinite;
}
@keyframes scanline {
0% { left: -100%; }
100% { left: 200%; }
}
.live-badge {
background: linear-gradient(135deg, #e8003d, #ff4d6d);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
letter-spacing: 1px;
animation: live-pulse 2s ease-in-out infinite;
box-shadow: 0 0 12px rgba(232,0,61,0.5);
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 8px rgba(232,0,61,0.5); }
50% { box-shadow: 0 0 20px rgba(232,0,61,0.8), 0 0 35px rgba(255,77,109,0.3); }
}
.live-room-name {
font-size: 14px;
font-weight: 700;
color: #e8d8ff;
text-shadow: 0 0 12px rgba(160,80,255,0.6);
}
.live-viewers {
font-size: 12px;
color: #a898cc;
display: flex;
align-items: center;
gap: 4px;
}
.live-viewers::before {
content: '👁';
font-size: 11px;
}
/* ---------- 正文区域 ---------- */
.live-wrapper text {
display: block;
background: #0e0820;
border: 1px solid rgba(100,60,200,0.25);
border-left: 3px solid rgba(140,80,255,0.7);
border-radius: 12px;
padding: 18px 20px;
margin: 8px 0;
color: #ddd8f0;
}
.live-wrapper text p {
display: block;
background: transparent;
border: none;
border-left: none;
border-radius: 0;
padding: 4px 0;
margin: 0;
font-size: 15px;
line-height: 2;
color: #ddd8f0;
letter-spacing: 0.2px;
}
@media (max-width: 600px) {
.live-wrapper text,
.live-wrapper text p {
font-size: 14px;
padding: 14px;
line-height: 1.95;
}
}
/* ---------- 弹幕区域 ---------- */
.danmu-stage {
position: relative;
width: 100%;
height: 120px;
background: linear-gradient(180deg, rgba(8,5,20,0.6) 0%, rgba(15,10,35,0.8) 100%);
border: 1px solid rgba(100,60,200,0.2);
border-radius: 12px;
overflow: hidden;
margin: 8px 0;
}
.danmu-stage::before {
content: '💬 直播弹幕';
position: absolute;
top: 6px;
left: 12px;
font-size: 11px;
color: rgba(160,120,255,0.5);
z-index: 10;
pointer-events: none;
}
.danmu {
position: absolute;
white-space: nowrap;
font-size: 13px;
font-weight: 500;
padding: 3px 10px;
border-radius: 20px;
animation: danmu-scroll linear infinite;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
/* 弹幕轨道(4条轨道错位) */
.danmu:nth-child(1) { top: 14px; animation-duration: 12s; animation-delay: 0s; }
.danmu:nth-child(2) { top: 42px; animation-duration: 15s; animation-delay: -4s; }
.danmu:nth-child(3) { top: 70px; animation-duration: 13s; animation-delay: -7s; }
.danmu:nth-child(4) { top: 98px; animation-duration: 11s; animation-delay: -2s; }
.danmu:nth-child(5) { top: 14px; animation-duration: 14s; animation-delay: -9s; }
.danmu:nth-child(6) { top: 42px; animation-duration: 16s; animation-delay: -1s; }
.danmu:nth-child(7) { top: 70px; animation-duration: 12s; animation-delay: -6s; }
.danmu:nth-child(8) { top: 98px; animation-duration: 15s; animation-delay: -11s; }
@keyframes danmu-scroll {
0% { transform: translateX(820px); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateX(-100%); opacity: 0; }
}
/* 弹幕颜色主题(每种对应一个class) */
.danmu-pink { color: #ff6eb4; background: rgba(255,110,180,0.12); border: 1px solid rgba(255,110,180,0.25); }
.danmu-cyan { color: #40e0ff; background: rgba(64,224,255,0.10); border: 1px solid rgba(64,224,255,0.22); }
.danmu-gold { color: #ffd966; background: rgba(255,217,102,0.10); border: 1px solid rgba(255,217,102,0.22); }
.danmu-green { color: #6effa0; background: rgba(110,255,160,0.08); border: 1px solid rgba(110,255,160,0.2); }
.danmu-purple { color: #c87eff; background: rgba(200,126,255,0.10); border: 1px solid rgba(200,126,255,0.22); }
.danmu-white { color: #e8e8f0; background: rgba(232,232,240,0.07); border: 1px solid rgba(232,232,240,0.15); }
.danmu-orange { color: #ffaa44; background: rgba(255,170,68,0.10); border: 1px solid rgba(255,170,68,0.22); }
.danmu-red { color: #ff5555; background: rgba(255,85,85,0.10); border: 1px solid rgba(255,85,85,0.22); }
/* ---------- 好感度进度条 ---------- */
.affection-bar-wrap {
margin: 6px 0 2px;
}
.affection-label {
font-size: 11.5px;
color: #a898cc;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
}
.affection-bar-bg {
width: 100%;
height: 8px;
background: rgba(60,30,100,0.5);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(160,80,255,0.2);
}
.affection-bar-fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #8040ff, #e060ff, #ff80d4);
box-shadow: 0 0 8px rgba(200,80,255,0.6);
transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
position: relative;
overflow: hidden;
}
.affection-bar-fill::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: bar-shine 2.5s ease-in-out infinite;
}
@keyframes bar-shine {
0% { left: -100%; }
100% { left: 200%; }
}
/* ---------- 礼物特效标签 ---------- */
.gift-tag {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
margin: 2px 3px;
animation: gift-pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes gift-pop {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.gift-rocket { background: linear-gradient(135deg,#ff4400,#ff8800); color:#fff; box-shadow: 0 0 10px rgba(255,100,0,0.5); }
.gift-castle { background: linear-gradient(135deg,#6600cc,#aa44ff); color:#fff; box-shadow: 0 0 10px rgba(140,0,255,0.5); }
.gift-yacht { background: linear-gradient(135deg,#0066cc,#00bbff); color:#fff; box-shadow: 0 0 10px rgba(0,150,255,0.4); }
.gift-car { background: linear-gradient(135deg,#cc4400,#ff6600); color:#fff; }
.gift-rose { background: linear-gradient(135deg,#cc0044,#ff2266); color:#fff; }
.gift-god { background: linear-gradient(135deg,#b8860b,#ffd700,#b8860b); color:#fff; box-shadow: 0 0 16px rgba(255,215,0,0.7); animation: god-glow 1.5s ease-in-out infinite; }
@keyframes god-glow {
0%,100% { box-shadow: 0 0 12px rgba(255,215,0,0.6); }
50% { box-shadow: 0 0 28px rgba(255,215,0,1), 0 0 50px rgba(255,180,0,0.4); }
}
/* ---------- 用户等级徽章 ---------- */
.rank-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.rank-god { background: linear-gradient(135deg,#b8860b,#ffd700); color:#1a0800; }
.rank-captain { background: linear-gradient(135deg,#1a6bcc,#44aaff); color:#fff; }
.rank-admiral { background: linear-gradient(135deg,#9b30cc,#cc66ff); color:#fff; }
.rank-guard { background: linear-gradient(135deg,#cc4400,#ff6600); color:#fff; }
/* ---------- 打赏记录条目 ---------- */
.gift-record {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 12.5px;
}
.gift-record:last-child { border-bottom: none; }
.gift-amount-positive { color: #6effa0; font-weight: 600; }
.gift-amount-cost { color: #ffaa44; font-weight: 600; }
/* ---------- 记忆区条目 ---------- */
.memory-item {
padding: 6px 10px;
margin: 3px 0;
background: rgba(255,255,255,0.03);
border-left: 2px solid rgba(140,80,255,0.4);
border-radius: 0 8px 8px 0;
font-size: 12px;
color: #b8b0d0;
line-height: 1.6;
}
.memory-long {
border-left-color: rgba(255,160,60,0.5);
background: rgba(255,160,60,0.05);
}
/* ---------- 行动建议按钮样式 ---------- */
.action-btn {
display: block;
padding: 8px 14px;
margin: 4px 0;
background: rgba(80,40,160,0.2);
border: 1px solid rgba(120,60,220,0.3);
border-radius: 10px;
font-size: 13px;
color: #c0a8ff;
cursor: default;
transition: all 0.25s;
text-decoration: none;
}
.action-btn:hover {
background: rgba(100,50,200,0.35);
border-color: rgba(160,80,255,0.6);
color: #e0c8ff;
transform: translateX(4px);
}
/* ---------- 分隔线 ---------- */
.live-divider {
border: none;
border-top: 1px solid rgba(120,60,220,0.2);
margin: 10px 0;
}
/* ---------- 移动端适配 ---------- */
@media (max-width: 600px) {
.live-wrapper text,
.live-wrapper text p {
font-size: 14px;
padding: 14px 14px;
line-height: 1.95;
}
.live-wrapper details summary {
font-size: 12px;
padding: 9px 13px;
}
.live-wrapper details p {
font-size: 12px;
padding: 6px 13px;
}
.danmu-stage {
height: 108px;
}
.danmu {
font-size: 12px;
}
.danmu:nth-child(4),
.danmu:nth-child(8) {
top: 90px;
}
.live-top-bar {
flex-wrap: wrap;
gap: 6px;
}
.live-room-name {
font-size: 13px;
}
}{
"renderTemplate": null,
"assistantRegexReplace": null,
"enableMemorySchema": false,
"memorySchema": null,
"introPage": "zfp3fpbl7t311oti19x1hw0r.html",
"options": {
"items": []
},
"defaultModelSettings": {
"model": "apple/gemini-3-flash-preview"
},
"cover": "yrb4d8d8visuehigs5of9n8s.webp",
"background": "qdj6zzcc17pc51jsduln3xr9.webp"
}本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。