Template:方剂条目/styles.css：修订间差异
删除的内容 添加的内容
小无编辑摘要 |
小 页面内容被替换为“→标签列（灰色底色 + 左侧竖条）： .fangji-entry .fj-label { padding: 0 5px; vertical-align: top; white-space: nowrap; } →竖条画在 span 上（不拉伸，只跟文字等高）： .fangji-entry .fj-label span { display: inline; padding: 0 5px; border-left: 2px solid #696969; →灰色竖条： background-color: #ddd; →灰色底色： } →内容区（左侧留 5px 间距）： .fangji-entry .fj-val…” 标签：替换 |
||
| 第1行： | 第1行： | ||
/* 标签列（灰色底色 + 左侧竖条） */ |
|||
/* ===== 使用切换说明 ===== |
|||
1. 默认启用【主题A：中医绿标准版】 |
|||
2. 切换冷调学术蓝灰：注释A全部，取消主题B外层注释 |
|||
3. 切换复古浅赭石科普：注释A+B全部，取消主题C外层注释 |
|||
三套共用布局、交互、移动端代码，仅配色区分 |
|||
=========================*/ |
|||
/* 主题A：中医绿标准版（默认生效） |
|||
.fangji-card { |
|||
background: #ffffff; |
|||
border-radius: 14px; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.06); |
|||
padding: 24px; |
|||
margin: 16px 0 28px; |
|||
border: 1px solid #eee; |
|||
transition: 0.2s ease; |
|||
} |
|||
.fangji-card:hover { |
|||
box-shadow: 0 4px 18px rgba(0,0,0,0.09); |
|||
transform: translateY(-2px); |
|||
} |
|||
.fangji-entry h2 { |
|||
margin-top: 0; |
|||
margin-bottom: 8px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
color: #222; |
|||
font-weight: 600; |
|||
} |
|||
.fangji-entry .fj-table { |
|||
border: none; |
|||
border-spacing: 0 6px; |
|||
width: 100%; |
|||
table-layout: fixed; |
|||
} |
|||
.fangji-entry .fj-label { |
.fangji-entry .fj-label { |
||
padding: 0 5px; |
|||
padding: 0 12px 0 0; |
|||
vertical-align: top; |
vertical-align: top; |
||
white-space: nowrap; |
white-space: nowrap; |
||
} |
} |
||
/* 竖条画在 span 上（不拉伸，只跟文字等高） */ |
|||
.fangji-entry .fj-label span { |
.fangji-entry .fj-label span { |
||
display: inline |
display: inline; |
||
padding: 0 5px; |
|||
border-left: 2px solid #696969; /* 灰色竖条 */ |
|||
box-sizing: border-box; |
|||
background-color: #ddd; /* 灰色底色 */ |
|||
line-height: 2.2; |
|||
padding: 0 10px; |
|||
text-align: justify; |
|||
text-align-last: justify; |
|||
text-justify: inter-character; |
|||
border-left: 3px solid #397c57; |
|||
background-color: #f1f4f2; |
|||
border-radius: 0 6px 6px 0; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
.fangji-entry .fj-label span::after { |
|||
content: ''; |
|||
display: inline-block; |
|||
width: 100%; |
|||
height: 0; |
|||
line-height: 0; |
|||
font-size: 0; |
|||
} |
|||
.fangji-entry .fj-warning span { |
|||
border-left-color: #c44536; |
|||
background-color: #fcf0ef; |
|||
} |
|||
.fangji-entry .fj-value { |
|||
padding: 2px 0; |
|||
line-height: 1.65; |
|||
color: #444; |
|||
} |
|||
.fj-important { |
|||
color: #245e42; |
|||
} |
|||
.fj-warning-text { |
|||
color: #b83227; |
|||
} |
} |
||
/* 内容区（左侧留 5px 间距） */ |
|||
@media (max-width:768px) { |
|||
.fangji-entry .fj-table tr { |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
.fangji-entry .fj-table td { |
|||
display: block; |
|||
width: 100% !important; |
|||
} |
|||
.fangji-entry .fj-label { |
|||
padding-right: 0; |
|||
margin-bottom: 4px; |
|||
} |
|||
.fangji-entry .fj-label span { |
|||
text-align: left; |
|||
text-align-last: auto; |
|||
text-justify: auto; |
|||
} |
|||
.fangji-entry .fj-label span::after { |
|||
display: none; |
|||
} |
|||
.fangji-card { |
|||
padding: 16px; |
|||
} |
|||
}*/ |
|||
/*------------------------------ |
|||
主题B：冷调学术风（蓝灰学术Wiki） |
|||
启用方式：注释上方A段全部代码，删除本段首尾注释标记 |
|||
--------------------------------*/ |
|||
.fangji-card { |
|||
background: #ffffff; |
|||
border-radius: 14px; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.05); |
|||
padding: 24px; |
|||
margin: 16px 0 28px; |
|||
border: 1px solid #e7ecf2; |
|||
transition: 0.2s ease; |
|||
} |
|||
.fangji-card:hover { |
|||
box-shadow: 0 4px 18px rgba(0,0,0,0.08); |
|||
transform: translateY(-2px); |
|||
} |
|||
.fangji-entry h2 { |
|||
margin-top: 0; |
|||
margin-bottom: 8px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #dce3ec; |
|||
color: #1f2937; |
|||
font-weight: 600; |
|||
} |
|||
.fangji-entry .fj-table { |
|||
border: none; |
|||
border-spacing: 0 6px; |
|||
width: 100%; |
|||
table-layout: fixed; |
|||
} |
|||
.fangji-entry .fj-label { |
|||
width: 5.5em; |
|||
padding: 0 12px 0 0; |
|||
vertical-align: top; |
|||
white-space: nowrap; |
|||
} |
|||
.fangji-entry .fj-label span { |
|||
display: inline-block; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
line-height: 2.2; |
|||
padding: 0 10px; |
|||
text-align: justify; |
|||
text-align-last: center; |
|||
text-justify: inter-character; |
|||
border-left: 3px solid #366699; |
|||
background-color: #f0f4f8; |
|||
border-radius: 0 6px 6px 0; |
|||
color: #2d3748; |
|||
font-weight: 500; |
|||
} |
|||
.fangji-entry .fj-warning span { |
|||
border-left-color: #c44536; |
|||
background-color: #fcf0ef; |
|||
} |
|||
.fangji-entry .fj-value { |
.fangji-entry .fj-value { |
||
padding: |
padding: 0 0 0 5px; |
||
line-height: 1.65; |
|||
color: #4a5568; |
|||
} |
|||
.fj-important { |
|||
color: #285480; |
|||
} |
|||
.fj-warning-text { |
|||
color: #b83227; |
|||
} |
|||
@media (max-width:768px) { |
|||
.fangji-entry .fj-table tr { |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
.fangji-entry .fj-table td { |
|||
display: block; |
|||
width: 100% !important; |
|||
} |
|||
.fangji-entry .fj-label { |
|||
padding-right: 0; |
|||
margin-bottom: 4px; |
|||
} |
|||
.fangji-entry .fj-label span { |
|||
text-align: left; |
|||
text-align-last: auto; |
|||
text-justify: auto; |
|||
} |
|||
.fangji-card { |
|||
padding: 16px; |
|||
} |
|||
} |
} |
||
/* 表格无外边框，行间距 5px */ |
|||
/* ------------------------------ |
|||
主题C：复古雅致浅赭石风（科普向） |
|||
启用方式：注释A、B两段，删除本段首尾注释标记 |
|||
-------------------------------- |
|||
.fangji-card { |
|||
background: #fffdfa; |
|||
border-radius: 14px; |
|||
box-shadow: 0 2px 12px rgba(130,90,50,0.07); |
|||
padding: 24px; |
|||
margin: 16px 0 28px; |
|||
border: 1px solid #eee6dd; |
|||
transition: 0.2s ease; |
|||
} |
|||
.fangji-card:hover { |
|||
box-shadow: 0 4px 18px rgba(130,90,50,0.1); |
|||
transform: translateY(-2px); |
|||
} |
|||
.fangji-entry h2 { |
|||
margin-top: 0; |
|||
margin-bottom: 8px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #e9dfd3; |
|||
color: #3c2e20; |
|||
font-weight: 600; |
|||
} |
|||
.fangji-entry .fj-table { |
.fangji-entry .fj-table { |
||
border: none; |
border: none; |
||
border-spacing: 0 |
border-spacing: 0 5px; |
||
width: 100%; |
|||
table-layout: fixed; |
|||
} |
|||
.fangji-entry .fj-label { |
|||
width: 5.5em; |
|||
padding: 0 12px 0 0; |
|||
vertical-align: top; |
|||
white-space: nowrap; |
|||
} |
|||
.fangji-entry .fj-label span { |
|||
display: inline-block; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
line-height: 2.2; |
|||
padding: 0 10px; |
|||
text-align: justify; |
|||
text-align-last: justify; |
|||
text-justify: inter-character; |
|||
border-left: 3px solid #a0683b; |
|||
background-color: #f8f3ee; |
|||
border-radius: 0 6px 6px 0; |
|||
color: #483424; |
|||
font-weight: 500; |
|||
} |
|||
.fangji-entry .fj-label span::after { |
|||
content: ''; |
|||
display: inline-block; |
|||
width: 100%; |
|||
height: 0; |
|||
line-height: 0; |
|||
font-size: 0; |
|||
} |
|||
.fangji-entry .fj-warning span { |
|||
border-left-color: #c44536; |
|||
background-color: #fcf0ef; |
|||
} |
|||
.fangji-entry .fj-value { |
|||
padding: 2px 0; |
|||
line-height: 1.65; |
|||
color: #574433; |
|||
} |
|||
.fj-important { |
|||
color: #85532d; |
|||
} |
|||
.fj-warning-text { |
|||
color: #b83227; |
|||
} |
|||
@media (max-width:768px) { |
|||
.fangji-entry .fj-table tr { |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
.fangji-entry .fj-table td { |
|||
display: block; |
|||
width: 100% !important; |
|||
} |
|||
.fangji-entry .fj-label { |
|||
padding-right: 0; |
|||
margin-bottom: 4px; |
|||
} |
|||
.fangji-entry .fj-label span { |
|||
text-align: left; |
|||
text-align-last: auto; |
|||
text-justify: auto; |
|||
} |
|||
.fangji-entry .fj-label span::after { |
|||
display: none; |
|||
} |
|||
.fangji-card { |
|||
padding: 16px; |
|||
} |
|||
} |
|||
*/ |
|||
/* 消除卡片之间的空行 */ |
|||
.fangji-card + p, |
|||
.fangji-entry + p { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 0; |
|||
} |
} |
||
2026年7月9日 (四) 18:40的版本
/* 标签列（灰色底色 + 左侧竖条） */
.fangji-entry .fj-label {
padding: 0 5px;
vertical-align: top;
white-space: nowrap;
}
/* 竖条画在 span 上（不拉伸，只跟文字等高） */
.fangji-entry .fj-label span {
display: inline;
padding: 0 5px;
border-left: 2px solid #696969; /* 灰色竖条 */
background-color: #ddd; /* 灰色底色 */
}
/* 内容区（左侧留 5px 间距） */
.fangji-entry .fj-value {
padding: 0 0 0 5px;
}
/* 表格无外边框，行间距 5px */
.fangji-entry .fj-table {
border: none;
border-spacing: 0 5px;
}