Module:Message box/mbox.css:修订间差异
外观
IdleTap-bot(留言 | 贡献) 扩展 mbox 容器样式(背景/边框/布局),修复文字不可见 |
IdleTap-bot(留言 | 贡献) 小 修复:恢复 CC 许可证图标三角形排列 |
||
| (未显示同一用户的5个中间版本) | |||
| 第1行: | 第1行: | ||
/* Message box styles (aligned with Qiuwen Baike) */ | |||
.mbox { | .mbox { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
margin: | margin: 4px 24px; | ||
border: 1px solid # | border: 1px solid #c8ccd1; | ||
border-left: | border-left-width: 6px; | ||
background-color: # | background-color: #ddeeff; | ||
color: #202122; | color: #202122; | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
align-items: | align-items: center; | ||
width: | width: auto; | ||
max-width: 100%; | max-width: 100%; | ||
} | } | ||
| 第16行: | 第17行: | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
align-items: | align-items: center; | ||
width: 100%; | width: 100%; | ||
} | } | ||
| 第22行: | 第23行: | ||
.mbox-text, .mbox-text { | .mbox-text, .mbox-text { | ||
border: none; | border: none; | ||
padding: | padding: 8px; | ||
width: 100%; | width: 100%; | ||
flex: 1 1 auto; | flex: 1 1 auto; | ||
line-height: 1.75; | |||
font-size: 16px; | |||
} | } | ||
| 第35行: | 第36行: | ||
.mbox-image { | .mbox-image { | ||
border: none; | border: none; | ||
padding: 0 | padding: 8px 0 8px 8px; | ||
text-align: center; | text-align: center; | ||
flex: 0 0 auto; | flex: 0 0 auto; | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | } | ||
.mbox-imageright { | .mbox-imageright { | ||
border: none; | border: none; | ||
padding: | padding: 8px 8px 8px 0; | ||
text-align: center; | text-align: center; | ||
flex: 0 0 auto; | flex: 0 0 auto; | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | } | ||
| 第57行: | 第64行: | ||
} | } | ||
/* Type color accents */ | /* Type color accents - per type background + border (aligned with Qiuwen) */ | ||
.mbox-speedy { border-left-color: # | .mbox { | ||
.mbox-delete { border-left-color: # | background-color: #f8f9fa; | ||
.mbox-content { border-left-color: #f28500; } | } | ||
.mbox-style { border-left-color: # | .mbox-speedy { background-color: #ffeeee; border-left-color: #bb2222; } | ||
.mbox-move { border-left-color: # | .mbox-delete { background-color: #f0f0d8; border-left-color: #aa9977; } | ||
.mbox-protection { border-left-color: # | .mbox-content { background-color: #ffeedd; border-left-color: #f28500; } | ||
.mbox-notice { border-left-color: # | .mbox-style { background-color: #ffffcc; border-left-color: #ffbb33; } | ||
.mbox-license { border-left-color: # | .mbox-move { background-color: #ffeeff; border-left-color: #9933cc; } | ||
.mbox-featured { border-left-color: # | .mbox-protection { background-color: #eeeeee; border-left-color: #606060; } | ||
.mbox-policy { border-left-color: # | .mbox-notice { background-color: #ddeeff; border-left-color: #3366cc; } | ||
.mbox-guideline { border-left-color: # | .mbox-license { background-color: #f7f8ff; border-left-color: #999999; } | ||
.mbox-rule { border-left-color: # | .mbox-featured { background-color: #ffeecc; border-left-color: #cba135; } | ||
.mbox-draft { border-left-color: # | .mbox-policy { background-color: #ccffcc; border-left-color: #118811; } | ||
.mbox-setindex { border-left-color: # | .mbox-guideline { background-color: #ddeeff; border-left-color: #3366cc; } | ||
.mbox-disambig { border-left-color: # | .mbox-rule { background-color: #ffffcc; border-left-color: #ffbb33; } | ||
.mbox-draft { background-color: #eeeeee; border-left-color: #606060; } | |||
.mbox-setindex { background-color: #fefefe; border-left-color: #999999; } | |||
.mbox-disambig { background-color: #fefefe; border-left-color: #999999; } | |||
/* | /* Fmbox */ | ||
. | .fmbox { | ||
box-sizing: border-box; | |||
width: | margin: 4px 24px; | ||
border: 1px solid #c8ccd1; | |||
border-left-width: 6px; | |||
background-color: #f8f9fa; | |||
color: #202122; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
width: auto; | |||
max-width: 100%; | max-width: 100%; | ||
} | |||
.fmbox-warning { border-left-color: #b32424; } | |||
.fmbox-editnotice { border-left-color: #36c; } | |||
.fmbox-system { border-left-color: #a2a9b1; } | |||
.fmbox-copyright { border-left-color: #00803b; } | |||
/* Creative Commons license icons: triangular layout. */ | |||
.mbox.license-cc .mbox-image > div { | |||
width: 52px; | |||
} | |||
.mbox.license-cc .mbox-image .nowrap { | |||
white-space: nowrap; | |||
} | } | ||
2026年8月4日 (二) 12:38的最新版本
/* Message box styles (aligned with Qiuwen Baike) */
.mbox {
box-sizing: border-box;
margin: 4px 24px;
border: 1px solid #c8ccd1;
border-left-width: 6px;
background-color: #ddeeff;
color: #202122;
display: flex;
flex-direction: row;
align-items: center;
width: auto;
max-width: 100%;
}
.mbox-body {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.mbox-text, .mbox-text {
border: none;
padding: 8px;
width: 100%;
flex: 1 1 auto;
line-height: 1.75;
font-size: 16px;
}
.mbox-text > .mbox-text-span {
display: inline;
}
.mbox-image {
border: none;
padding: 8px 0 8px 8px;
text-align: center;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.mbox-imageright {
border: none;
padding: 8px 8px 8px 0;
text-align: center;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.mbox-empty-cell {
border: none;
padding: 0;
width: 1px;
}
.hide-when-compact {
display: inline;
}
/* Type color accents - per type background + border (aligned with Qiuwen) */
.mbox {
background-color: #f8f9fa;
}
.mbox-speedy { background-color: #ffeeee; border-left-color: #bb2222; }
.mbox-delete { background-color: #f0f0d8; border-left-color: #aa9977; }
.mbox-content { background-color: #ffeedd; border-left-color: #f28500; }
.mbox-style { background-color: #ffffcc; border-left-color: #ffbb33; }
.mbox-move { background-color: #ffeeff; border-left-color: #9933cc; }
.mbox-protection { background-color: #eeeeee; border-left-color: #606060; }
.mbox-notice { background-color: #ddeeff; border-left-color: #3366cc; }
.mbox-license { background-color: #f7f8ff; border-left-color: #999999; }
.mbox-featured { background-color: #ffeecc; border-left-color: #cba135; }
.mbox-policy { background-color: #ccffcc; border-left-color: #118811; }
.mbox-guideline { background-color: #ddeeff; border-left-color: #3366cc; }
.mbox-rule { background-color: #ffffcc; border-left-color: #ffbb33; }
.mbox-draft { background-color: #eeeeee; border-left-color: #606060; }
.mbox-setindex { background-color: #fefefe; border-left-color: #999999; }
.mbox-disambig { background-color: #fefefe; border-left-color: #999999; }
/* Fmbox */
.fmbox {
box-sizing: border-box;
margin: 4px 24px;
border: 1px solid #c8ccd1;
border-left-width: 6px;
background-color: #f8f9fa;
color: #202122;
display: flex;
flex-direction: row;
align-items: center;
width: auto;
max-width: 100%;
}
.fmbox-warning { border-left-color: #b32424; }
.fmbox-editnotice { border-left-color: #36c; }
.fmbox-system { border-left-color: #a2a9b1; }
.fmbox-copyright { border-left-color: #00803b; }
/* Creative Commons license icons: triangular layout. */
.mbox.license-cc .mbox-image > div {
width: 52px;
}
.mbox.license-cc .mbox-image .nowrap {
white-space: nowrap;
}