Module:Infobox/styles.css:修订间差异
来自卡车模拟中文维基
更多操作
Imxiaoanag(留言 | 贡献) 小无编辑摘要 标签:已被回退 |
Imxiaoanag(留言 | 贡献) 小 撤销Imxiaoanag(讨论)的修订版本121 标签:撤销 |
||
| 第1行: | 第1行: | ||
.infobox { | .infobox { | ||
max-width: 400px; | |||
background: var(--color-surface-2); | |||
border-radius: 8px; | |||
box-shadow: var(--box-shadow-drop-medium); | |||
margin: 0; | |||
padding: 0; | |||
font-size: 0.875rem; | |||
overflow: hidden; | |||
float: right; | |||
margin-left: 16px; | |||
} | } | ||
.infobox-align-left { | .infobox-align-left { | ||
margin-right: auto; | |||
float: left; | |||
margin-right: 16px; | |||
} | } | ||
.infobox-align-center { | .infobox-align-center { | ||
margin-left: auto; | |||
margin-right: auto; | |||
float: none; | |||
} | } | ||
.infobox-align-right { | .infobox-align-right { | ||
margin-left: auto; | |||
float: right; | |||
margin-left: 16px; | |||
} | } | ||
.infobox-header { | .infobox-header { | ||
padding: 16px; | |||
border-bottom: 1px solid var(--border-color-base); | |||
display: flex; | |||
align-items: center; | |||
} | |||
.infobox-logo { | |||
margin-left: 8px; | |||
align-self: center; | |||
} | } | ||
.infobox-title-and-subtitle { | .infobox-title-and-subtitle { | ||
display: flex; | |||
flex-direction: column; | |||
} | } | ||
.infobox-title { | .infobox-title { | ||
font-size: 1.4rem; | |||
margin: 0; | |||
color: var(--color-emphasized); | |||
font-weight: bold; | |||
} | } | ||
.infobox-subtitle { | .infobox-subtitle { | ||
font-size: 0.9em; | |||
color: var(--color-subtle); | |||
margin: 0; | |||
} | } | ||
.infobox-section { | .infobox-section { | ||
padding: 12px 16px; | |||
border-bottom: 1px solid var(--border-color-base); | |||
} | } | ||
.infobox-columns { | .infobox-columns { | ||
display: grid; | |||
gap: 12px; | |||
} | } | ||
.columns-1 { | .columns-1 { grid-template-columns: repeat(1, 1fr); } | ||
.columns-2 { grid-template-columns: repeat(2, 1fr); } | |||
} | .columns-3 { grid-template-columns: repeat(3, 1fr); } | ||
.columns-2 { | |||
} | |||
.columns-3 { | |||
} | |||
.infobox-columns .label { | .infobox-columns .label { | ||
font-size: 0.8125rem; | |||
color: var(--color-subtle); | |||
margin-bottom: 2px; | |||
} | } | ||
.infobox-columns .value { | .infobox-columns .value { | ||
font-weight: 600; | |||
word-break: break-word; | |||
} | } | ||
.tabber.infobox-tabber { | .tabber.infobox-tabber { | ||
border-radius: 8px 8px 0 0; | |||
} | } | ||
.tabber .tabbertab { | .tabber .tabbertab { | ||
padding: 0; | |||
} | } | ||
.infobox-image { | .infobox-image { | ||
text-align: center; | |||
line-height: 0; | |||
} | } | ||
.infobox-image img { | .infobox-image img { | ||
max-width: 100%; | |||
height: auto; | |||
object-fit: cover; | |||
} | |||
@media (max-width: 720px) { | |||
.infobox { | |||
width: 95%; | |||
margin: 1rem auto; | |||
float: none; | |||
} | |||
.columns-2, .columns-3 { | |||
grid-template-columns: 1fr; | |||
} | |||
} | } | ||
.title-style-left { | .title-style-left { | ||
justify-content: space-between; | |||
} | } | ||
.title-style-center { | .title-style-center { | ||
justify-content: center; | |||
gap: 16px; | |||
flex-direction: row-reverse; | |||
} | } | ||
.infobox-logo { | |||
margin-left: 0; | |||
align-self: center; | |||
} | } | ||
2026年7月21日 (二) 02:55的最新版本
.infobox {
max-width: 400px;
background: var(--color-surface-2);
border-radius: 8px;
box-shadow: var(--box-shadow-drop-medium);
margin: 0;
padding: 0;
font-size: 0.875rem;
overflow: hidden;
float: right;
margin-left: 16px;
}
.infobox-align-left {
margin-right: auto;
float: left;
margin-right: 16px;
}
.infobox-align-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.infobox-align-right {
margin-left: auto;
float: right;
margin-left: 16px;
}
.infobox-header {
padding: 16px;
border-bottom: 1px solid var(--border-color-base);
display: flex;
align-items: center;
}
.infobox-logo {
margin-left: 8px;
align-self: center;
}
.infobox-title-and-subtitle {
display: flex;
flex-direction: column;
}
.infobox-title {
font-size: 1.4rem;
margin: 0;
color: var(--color-emphasized);
font-weight: bold;
}
.infobox-subtitle {
font-size: 0.9em;
color: var(--color-subtle);
margin: 0;
}
.infobox-section {
padding: 12px 16px;
border-bottom: 1px solid var(--border-color-base);
}
.infobox-columns {
display: grid;
gap: 12px;
}
.columns-1 { grid-template-columns: repeat(1, 1fr); }
.columns-2 { grid-template-columns: repeat(2, 1fr); }
.columns-3 { grid-template-columns: repeat(3, 1fr); }
.infobox-columns .label {
font-size: 0.8125rem;
color: var(--color-subtle);
margin-bottom: 2px;
}
.infobox-columns .value {
font-weight: 600;
word-break: break-word;
}
.tabber.infobox-tabber {
border-radius: 8px 8px 0 0;
}
.tabber .tabbertab {
padding: 0;
}
.infobox-image {
text-align: center;
line-height: 0;
}
.infobox-image img {
max-width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 720px) {
.infobox {
width: 95%;
margin: 1rem auto;
float: none;
}
.columns-2, .columns-3 {
grid-template-columns: 1fr;
}
}
.title-style-left {
justify-content: space-between;
}
.title-style-center {
justify-content: center;
gap: 16px;
flex-direction: row-reverse;
}
.infobox-logo {
margin-left: 0;
align-self: center;
}