Template:方剂条目/styles.css:修订间差异
外观
删除的内容 添加的内容
小 // Edit via Wikiplus |
小 // Edit via Wikiplus 标签:已被回退 |
||
| 第3行: | 第3行: | ||
2. 切换冷调学术蓝灰:注释A全部,取消主题B外层注释 |
2. 切换冷调学术蓝灰:注释A全部,取消主题B外层注释 |
||
3. 切换复古浅赭石科普:注释A+B全部,取消主题C外层注释 |
3. 切换复古浅赭石科普:注释A+B全部,取消主题C外层注释 |
||
三套共用布局、交互、移动端代码,仅配色区分 |
|||
========================= */ |
========================= */ |
||
| 第38行: | 第37行: | ||
padding: 0 12px 0 0; |
padding: 0 12px 0 0; |
||
vertical-align: top; |
vertical-align: top; |
||
white-space: nowrap; |
|||
} |
} |
||
.fangji-entry .fj-label span { |
.fangji-entry .fj-label span { |
||
display: block; |
display: inline-block; |
||
width: 100%; |
width: 100%; |
||
| ⚫ | |||
text-align: justify; /* 文字两端对齐,二字/四字左右顶边 */ |
|||
text-align: justify; |
|||
line-height: 2.2; /* 色块内文字垂直居中 */ |
|||
line-height: 2.2; |
|||
padding: 0 10px; |
padding: 0 10px; |
||
border-left: 3px solid #397c57; |
border-left: 3px solid #397c57; |
||
| 第51行: | 第50行: | ||
color: #333; |
color: #333; |
||
font-weight: 500; |
font-weight: 500; |
||
| ⚫ | |||
} |
} |
||
/* 强制单行两端对齐核心伪元素 */ |
|||
/* 解决单行justify最后空白问题,强制末尾填充空白字符撑开 */ |
|||
.fangji-entry .fj-label span::after { |
.fangji-entry .fj-label span::after { |
||
content: ""; |
content: ""; |
||
display: inline-block; |
display: inline-block; |
||
width: 100%; |
width: 100%; |
||
height: 0; |
|||
overflow: hidden; |
|||
} |
} |
||
.fangji-entry .fj-warning span { |
.fangji-entry .fj-warning span { |
||
| 第96行: | 第96行: | ||
margin-bottom: 4px; |
margin-bottom: 4px; |
||
} |
} |
||
/* 移动端 |
/* 移动端取消两端对齐,恢复正常左读 */ |
||
.fangji-entry .fj-label span { |
.fangji-entry .fj-label span { |
||
text-align: left; |
text-align: left; |
||
| 第140行: | 第140行: | ||
padding: 0 12px 0 0; |
padding: 0 12px 0 0; |
||
vertical-align: top; |
vertical-align: top; |
||
white-space: nowrap; |
|||
} |
} |
||
.fangji-entry .fj-label span { |
.fangji-entry .fj-label span { |
||
display: block; |
display: inline-block; |
||
width: 100%; |
width: 100%; |
||
| ⚫ | |||
text-align: justify; |
text-align: justify; |
||
line-height: 2.2; |
line-height: 2.2; |
||
| 第153行: | 第153行: | ||
color: #2d3748; |
color: #2d3748; |
||
font-weight: 500; |
font-weight: 500; |
||
| ⚫ | |||
} |
} |
||
.fangji-entry .fj-label span::after { |
.fangji-entry .fj-label span::after { |
||
| 第159行: | 第158行: | ||
display: inline-block; |
display: inline-block; |
||
width: 100%; |
width: 100%; |
||
height: 0; |
|||
overflow: hidden; |
|||
} |
} |
||
.fangji-entry .fj-warning span { |
.fangji-entry .fj-warning span { |
||
| 第232行: | 第233行: | ||
padding: 0 12px 0 0; |
padding: 0 12px 0 0; |
||
vertical-align: top; |
vertical-align: top; |
||
white-space: nowrap; |
|||
} |
} |
||
.fangji-entry .fj-label span { |
.fangji-entry .fj-label span { |
||
display: block; |
display: inline-block; |
||
width: 100%; |
width: 100%; |
||
| ⚫ | |||
text-align: justify; |
text-align: justify; |
||
line-height: 2.2; |
line-height: 2.2; |
||
| 第245行: | 第246行: | ||
color: #483424; |
color: #483424; |
||
font-weight: 500; |
font-weight: 500; |
||
| ⚫ | |||
} |
} |
||
.fangji-entry .fj-label span::after { |
.fangji-entry .fj-label span::after { |
||
| 第251行: | 第251行: | ||
display: inline-block; |
display: inline-block; |
||
width: 100%; |
width: 100%; |
||
height: 0; |
|||
overflow: hidden; |
|||
} |
} |
||
.fangji-entry .fj-warning span { |
.fangji-entry .fj-warning span { |
||
2026年7月9日 (四) 00:36的版本
/* ===== 使用切换说明 =====
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 {
width: 6em;
padding: 0 12px 0 0;
vertical-align: top;
}
.fangji-entry .fj-label span {
display: inline-block;
width: 100%;
box-sizing: border-box;
text-align: justify;
line-height: 2.2;
padding: 0 10px;
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;
overflow: hidden;
}
.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;
}
/* 消除卡片之间的空行 */
.fangji-card + p,
.fangji-entry + p {
margin: 0;
padding: 0;
height: 0;
}
@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;
}
.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: 6em;
padding: 0 12px 0 0;
vertical-align: top;
}
.fangji-entry .fj-label span {
display: inline-block;
width: 100%;
box-sizing: border-box;
text-align: justify;
line-height: 2.2;
padding: 0 10px;
border-left: 3px solid #366699;
background-color: #f0f4f8;
border-radius: 0 6px 6px 0;
color: #2d3748;
font-weight: 500;
}
.fangji-entry .fj-label span::after {
content: "";
display: inline-block;
width: 100%;
height: 0;
overflow: hidden;
}
.fangji-entry .fj-warning span {
border-left-color: #c44536;
background-color: #fcf0ef;
}
.fangji-entry .fj-value {
padding: 2px 0;
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;
}
.fangji-card {
padding: 16px;
}
}
*/
/* ------------------------------
主题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 {
border: none;
border-spacing: 0 6px;
width: 100%;
table-layout: fixed;
}
.fangji-entry .fj-label {
width: 6em;
padding: 0 12px 0 0;
vertical-align: top;
}
.fangji-entry .fj-label span {
display: inline-block;
width: 100%;
box-sizing: border-box;
text-align: justify;
line-height: 2.2;
padding: 0 10px;
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;
overflow: hidden;
}
.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;
}
.fangji-card {
padding: 16px;
}
}
*/