模板:IdeologyCompass/styles.css
来自Blockland Wiki
更多操作
/* Template:Infobox Country/styles.css */
/* 容器:卡片化,带阴影,无边框 */
.country-card {
width: 320px;
background: var(--background-color-surface, #fff);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-bottom: 1em;
float: right;
clear: right;
margin-left: 1em;
}
/* 顶部通栏:国名 */
.country-header {
/* 背景色由行内样式控制 */
color: #fff;
padding: 20px 15px;
text-align: center;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.country-name {
font-size: 1.8em;
font-weight: 800;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
margin-bottom: 4px;
}
.country-fullname {
font-size: 0.8em;
opacity: 0.9;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 图片容器 (国旗/地图) */
.country-image-box {
background: var(--background-color-neutral-subtle, #f8f9fa);
padding: 20px;
text-align: center;
border-bottom: 1px solid var(--border-color-subtle, #eee);
}
.country-caption {
font-size: 0.85em;
color: var(--color-subtle, #666);
margin-top: 8px;
}
/* 核心数据仪表盘 (GDP/人口等) */
.country-dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border-color-subtle, #eee); /*以此形成分割线*/
border-bottom: 1px solid var(--border-color-subtle, #eee);
}
.dashboard-item {
background: var(--background-color-surface, #fff);
padding: 12px 10px;
text-align: center;
}
.dashboard-label {
font-size: 0.75em;
color: var(--color-subtle, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.dashboard-value {
font-size: 1.1em;
font-weight: 800;
/* 颜色由行内样式继承 */
}
.dashboard-sub {
font-size: 0.7em;
color: var(--color-subtle, #999);
}
/* 普通列表数据 */
.country-list {
padding: 10px 0;
}
.country-row {
display: flex;
padding: 8px 15px;
border-bottom: 1px solid var(--border-color-subtle, #f5f5f5);
align-items: baseline;
}
.country-row:last-child {
border-bottom: none;
}
.country-label {
width: 35%;
font-size: 0.9em;
color: var(--color-subtle, #666);
flex-shrink: 0;
}
.country-data {
width: 65%;
font-size: 0.95em;
font-weight: 500;
color: var(--color-base, #222);
}
/* 分区标题 */
.section-header {
background: var(--background-color-neutral-subtle, #f4f5f7);
color: var(--color-subtle, #555);
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
padding: 6px 15px;
letter-spacing: 1px;
border-top: 1px solid var(--border-color-subtle, #eee);
border-bottom: 1px solid var(--border-color-subtle, #eee);
}