/* --- AI聊天平台WWII主题UI --- */
/* --- 设计师：多功能创作引擎 --- */

ai{
/* --- 色彩与字体变量定义 --- */
--bg: #1a1a1a;
--panel-bg: #222;
--text: #c9c9c9;
--header-text: #e0e0e0;
--gold: #c9a400;
--gold-dark: #a68a00;
--red: #9e2a2b;
--green: #6a994e;
--yellow: #f0e68c;
--border: #444;
--font-header: 'Oswald', sans-serif;
--font-body: 'Georgia', serif;
/* --- 基础样式 --- */
background-color: var(--bg);
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23303030' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/svg%3E");
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
padding: 10px;
border: 1px solid var(--border);
border-radius: 4px;
}
/* --- 顶部信息栏 (时间地点) --- */
ai hd{
display: block;
font-family: var(--font-header);
font-size: 0.85em;
text-align: center;
letter-spacing: 1px;
color: var(--gold);
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
text-transform: uppercase;
}
/* --- 叙事正文 --- */
ai article p{
margin: 0 5px 15px;
text-indent: 2em;
}
/* --- 状态面板 --- */
ai details{
border: 1px solid var(--border);
border-radius: 3px;
background: var(--panel-bg);
}
ai details[open] summary{
border-bottom: 1px solid var(--border);
}
ai summary{
font-family: var(--font-header);
background: #333;
padding: 8px 12px;
cursor: pointer;
outline: none;
color: var(--header-text);
font-size: 1.1em;
letter-spacing: 0.5px;
transition: background 0.2s;
position: relative;
list-style: none; /* 移除默认箭头 for webkit */
}
ai summary::-webkit-details-marker {
display: none; /* 移除默认箭头 */
}
ai summary:hover{
background: #3e3e3e;
}
ai summary::after{ /* 自定义箭头 */
content: '▶';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%) rotate(0);
transition: transform 0.2s;
font-size: 0.8em;
color: var(--gold);
}
ai details[open] summary::after{
transform: translateY(-50%) rotate(90deg);
}
/* --- 信息区块 (个人/单位/情报...) --- */
ai details>p[t]{
padding: 12px;
margin: 0;
border-bottom: 1px dashed var(--border);
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
padding-left: 20px;
}
ai details>p[t]:last-child{
border-bottom: none;
}
/* 区块标题伪元素 */
ai details>p[t]::before{
content: attr(t);
position: absolute;
left: -1px;
top: -1px;
background: var(--gold);
color: var(--bg);
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: var(--font-header);
padding: 8px 2px;
font-size: 0.9em;
border-radius: 2px 0 0 2px;
text-align: center;
}
/* 不同区块的标题颜色 */
ai details>p[t="个人"]::before{ background: var(--gold); }
ai details>p[t="单位"]::before{ background: #778da9; }
ai details>p[t="情报"]::before{ background: var(--green); }
ai details>p[t="行动"]::before{ background: var(--red); }
/* --- 区块内元素 --- */
/* 小标题 */
ai f{
font-family: var(--font-header);
font-size: 1.1em;
color: var(--header-text);
font-weight: bold;
letter-spacing: 0.5px;
}
/* 角色等级/军衔 (示例) */
ai f[lv="1"]::after{
content: '★';
color: var(--gold);
font-size: 0.8em;
margin-left: 8px;
}
/* 数据行 */
ai d{
display: block;
font-size: 0.95em;
color: #bbb;
}
/* --- 状态值 (健康/士气) --- */
ai v{
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-family: sans-serif;
font-size: 0.9em;
font-weight: bold;
}
/* 根据百分比p值改变背景颜色 */
ai v[p="100"], ai v[p^="9"], ai v[p^="8"] { background: var(--green); color: white; }
ai v[p^="7"], ai v[p^="6"], ai v[p^="5"] { background: #e9c46a; color: #333; }
ai v[p^="4"], ai v[p^="3"], ai v[p^="2"] { background: #f4a261; color: #333; }
ai v[p^="1"], ai v[p="0"] { background: var(--red); color: white; }
/* --- 行动选项 --- */
ai p[t="行动"]{
counter-reset: actions;
}
ai p[t="行动"] d{
cursor: pointer;
transition: background 0.2s, color 0.2s;
padding: 4px 8px;
margin: 0 -8px; /* 扩展hover区域 */
border-radius: 3px;
position: relative;
}
/* 添加自动编号 */
ai p[t="行动"] d::before{
counter-increment: actions;
content: counter(actions) ". ";
font-weight: bold;
color: var(--gold);
}
ai p[t="行动"] d:hover{
background: var(--gold-dark);
color: white;
}
ai p[t="行动"] d:hover::before{
color: white;
}