模板:Infobox/styles.css：修订间差异
来自CalcWiki
更多操作
创建页面，内容为“.custom-infobox { width: 300px; float: right; margin: 0 0 1em 1em; border: 1px solid var(--border-color-subtle, #ccc); border-radius: 4px; background: var(--background-color-base, #fff); color: var(--color-base, #000); overflow: hidden; } .infobox-title { font-weight: bold; text-align: center; padding: 12px; background: #f4ca30; color: #000; font-size: 1.1em; } .infobox-image { text-align: center; padding: 10px; } .infobox-tab…” |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
. | /* InfoBox CSS */ | ||
.calc-infobox { | |||
width: 300px; | width: 300px; | ||
float: right; | float: right; | ||
| 第8行： | 第9行： | ||
color: var(--color-base, #000); | color: var(--color-base, #000); | ||
overflow: hidden; | overflow: hidden; | ||
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |||
} | } | ||
. | .calc-title { | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
padding: 12px; | padding: 12px; | ||
background: #f4ca30; | background: linear-gradient(135deg, #f4ca30 0%, #e5b720 100%); | ||
color: #000; | color: #000; | ||
font-size: 1.1em; | font-size: 1.1em; | ||
} | } | ||
. | .calc-image { | ||
text-align: center; | text-align: center; | ||
padding: 10px; | padding: 10px; | ||
background: var(--background-color-neutral, #f9f9f9); | |||
} | } | ||
. | .calc-image img { | ||
width: 100%; | max-width: 100%; | ||
border- | height: auto; | ||
border-radius: 2px; | |||
} | } | ||
. | .calc-data { | ||
. | padding: 0; | ||
} | |||
.calc-row { | |||
display: flex; | |||
padding: 8px 12px; | padding: 8px 12px; | ||
border-bottom: 1px solid var(--border-color-subtle, #eee); | border-bottom: 1px solid var(--border-color-subtle, #eee); | ||
} | } | ||
. | .calc-row:last-child { | ||
border-bottom: none; | |||
} | |||
.calc-label { | |||
width: 40%; | width: 40%; | ||
font-weight: bold; | font-weight: bold; | ||
color: var(--color-base, #333); | |||
} | |||
.calc-value { | |||
width: 60%; | |||
text-align: right; | |||
color: var(--color-base, #666); | |||
} | } | ||
.infobox- | /* 深色模式适配 */ | ||
. | @media (prefers-color-scheme: dark) { | ||
.calc-infobox { | |||
background: #2a2a2a; | |||
border-color: #444; | |||
} | |||
.calc-title { | |||
background: linear-gradient(135deg, #d4a820 0%, #c5a010 100%); | |||
} | |||
.calc-image { | |||
background: #333; | |||
} | |||
.calc-row { | |||
border-color: #444; | |||
} | |||
.calc-label, | |||
.calc-value { | |||
color: #ddd; | |||
} | |||
} | } | ||
2026年2月10日 (二) 02:06的版本
/* InfoBox CSS */ .calc-infobox {
width: 300px; float: right; margin: 0 0 1em 1em; border: 1px solid var(--border-color-subtle, #ccc); border-radius: 4px; background: var(--background-color-base, #fff); color: var(--color-base, #000); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.calc-title {
font-weight: bold; text-align: center; padding: 12px; background: linear-gradient(135deg, #f4ca30 0%, #e5b720 100%); color: #000; font-size: 1.1em;
}
.calc-image {
text-align: center; padding: 10px; background: var(--background-color-neutral, #f9f9f9);
}
.calc-image img {
max-width: 100%; height: auto; border-radius: 2px;
}
.calc-data {
padding: 0;
}
.calc-row {
display: flex; padding: 8px 12px; border-bottom: 1px solid var(--border-color-subtle, #eee);
}
.calc-row:last-child {
border-bottom: none;
}
.calc-label {
width: 40%; font-weight: bold; color: var(--color-base, #333);
}
.calc-value {
width: 60%; text-align: right; color: var(--color-base, #666);
}
/* 深色模式适配 */ @media (prefers-color-scheme: dark) {
.calc-infobox {
background: #2a2a2a;
border-color: #444;
}
.calc-title {
background: linear-gradient(135deg, #d4a820 0%, #c5a010 100%);
}
.calc-image {
background: #333;
}
.calc-row {
border-color: #444;
}
.calc-label,
.calc-value {
color: #ddd;
}
}