模板:Infobox/styles.css - 版本历史

2023年12月8日 (五) 08:23 Zeroclanzhang

2023-12-08T08:23:31Z

←上一版本		2023年12月8日 (五) 16:23的版本
第95行：		第95行：
	display: block;		display: block;
	max-width: 100%;		max-width: 100%;
			height: auto;
	background: var( --background-color-quiet--hover );		background: var( --background-color-quiet--hover );
	}		}

Zeroclanzhang：撤销Zeroclanzhang（讨论）的版本3390

2023-12-08T08:22:50Z

撤销Zeroclanzhang（讨论）的版本3390

←上一版本		2023年12月8日 (五) 16:22的版本
第25行：		第25行：
	flex-direction: column;		flex-direction: column;
	padding: 0 10px;		padding: 0 10px;
	margin-top: ~~10px~~;		margin-top: 8px;
			margin-bottom: 0px;
	}		}

第48行：		第49行：

	.infobox .infobox-col1 {		.infobox .infobox-col1 {
	~~display: block; /* Required to apply margins */~~
	~~content: " "; /* Required to apply margins */~~
	~~/margin-block-end: 10px;/~~
	~~/margin-block: 10px;/~~
	width: 100%;		width: 100%;
	}		}
第98行：		第95行：
	display: block;		display: block;
	max-width: 100%;		max-width: 100%;
	~~width: auto;~~
	background: var( --background-color-quiet--hover );		background: var( --background-color-quiet--hover );
	}		}
第217行：		第213行：
	}		}

	@media only screen and ( max-width: ~~720px~~ ) {		@media only screen and ( max-width: 1280px ) {
	.infobox {		.infobox {
	width: ~~fit-content~~;		width: auto;
	~~position~~: ~~relative~~;		height: auto;
	margin-right: auto;		margin-right: auto;
	margin-left: auto;		margin-left: auto;

2023年12月8日 (五) 08:18 Zeroclanzhang

2023-12-08T08:18:36Z

←上一版本		2023年12月8日 (五) 16:18的版本
第25行：		第25行：
	flex-direction: column;		flex-direction: column;
	padding: 0 10px;		padding: 0 10px;
	margin-top: ~~8px;~~		margin-top: 10px;
	~~margin-bottom: 0px~~;
	}		}

第49行：		第48行：

	.infobox .infobox-col1 {		.infobox .infobox-col1 {
			display: block; /* Required to apply margins */
			content: " "; /* Required to apply margins */
			/margin-block-end: 10px;/
			/margin-block: 10px;/
	width: 100%;		width: 100%;
	}		}
第95行：		第98行：
	display: block;		display: block;
	max-width: 100%;		max-width: 100%;
			width: auto;
	background: var( --background-color-quiet--hover );		background: var( --background-color-quiet--hover );
	}		}
第213行：		第217行：
	}		}

	@media only screen and ( max-width: ~~1280px~~ ) {		@media only screen and ( max-width: 720px ) {
	.infobox {		.infobox {
	width: ~~auto~~;		width: fit-content;
	~~height~~: ~~auto~~;		position: relative;
	margin-right: auto;		margin-right: auto;
	margin-left: auto;		margin-left: auto;

2023年12月8日 (五) 05:51 Zeroclanzhang

2023-12-08T05:51:53Z

←上一版本		2023年12月8日 (五) 13:51的版本
第213行：		第213行：
	}		}

	@media only screen and ( max-width: ~~720px~~ ) {		@media only screen and ( max-width: 1280px ) {
	.infobox {		.infobox {
	width: auto;		width: auto;

2023年12月8日 (五) 05:48 Zeroclanzhang

2023-12-08T05:48:46Z

←上一版本		2023年12月8日 (五) 13:48的版本
第216行：		第216行：
	.infobox {		.infobox {
	width: auto;		width: auto;
	margin-right: ~~8px~~;		height: auto;
	margin-left: ~~8px~~;		margin-right: auto;
			margin-left: auto;
	}		}

2023年12月8日 (五) 04:27 Zeroclanzhang

2023-12-08T04:27:03Z

←上一版本		2023年12月8日 (五) 12:27的版本
第215行：		第215行：
	@media only screen and ( max-width: 720px ) {		@media only screen and ( max-width: 720px ) {
	.infobox {		.infobox {
	margin-right: ~~auto~~;		width: auto;
	margin-left: ~~auto~~;		margin-right: 8px;
			margin-left: 8px;
	}		}

2023年7月26日 (三) 07:42 Zeroclanzhang

2023-07-26T07:42:51Z

新页面

.infobox {
/* In case if tooltips go out of boundary */
overflow: visible;
width: 400%;
max-width: 400px;
margin-top: 0;
margin-bottom: 1.6rem;
background: var( --color-surface-2 );
border-radius: var( --border-radius--medium );
border-spacing: 0;
box-shadow: var( --box-shadow-card );
font-size: 0.875rem;
text-align: left;
}

/* Table elements */
.infobox tbody {
display: flex;
flex-wrap: wrap;
}

.infobox tr {
display: flex;
box-sizing: border-box;
flex-direction: column;
padding: 0 10px;
margin-top: 8px;
margin-bottom: 0px;
}

.infobox th,
.infobox td {
padding: 0 5px;
}

/* Infobox column */
.infobox .infobox-nocol {
width: 100%;
flex-direction: row;
}

.infobox .infobox-nocol th {
width: 30%;
}

.infobox .infobox-nocol td {
width: 70%;
}

.infobox .infobox-col1 {
width: 100%;
}

.infobox .infobox-col2 {
width: 50%;
}

.infobox .infobox-col3 {
width: calc( 100% / 3 );
}

.infobox .infobox-col4 {
width: 25%;
}

.infobox-data {
min-width: 25%;
}

/* Infobox image */
.infobox .infobox-image {
overflow: hidden;
padding: 0;
margin-top: 0;
border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
}

.infobox-image td {
padding: 0;
}

.infobox-image--light .image {
background: #eaecf0;
}

.infobox-image--dark .image {
background: #2b2f36;
}

.infobox-image .image:hover img {
transform: scale( 1.1 );
}

.infobox-image .image img {
display: block;
max-width: 100%;
background: var( --background-color-quiet--hover );
}

/* Neutral background for all transprent SVG */
.infobox-image .image img[ src$='.svg' ] {
background: #eaecf0;
}

/* Infobox title */
.infobox .infobox-title {
width: 100%;
margin-top: 20px;
margin-bottom: 5px;
color: var( --color-base--emphasized );
font-size: 1.4rem;
line-height: 1.4;
}

/* Infobox indicator */
.infobox .infobox-indicator {
margin-top: 0;
padding: 0;
}

/* Infobox subtitle */
.infobox .infobox-subtitle {
/* Cancel infobox-title bottom margin */
margin-top: -5px;
margin-bottom: 5px;
}

.infobox .infobox-indicator th,
.infobox .infobox-subtitle th {
display: none;
}

/* Infobox header */
.infobox .infobox-header {
width: 100%;
padding-top: 15px;
border-top: 1px solid;
border-color: var( --border-color-base );
margin-top: 15px;
color: var( --color-base--emphasized );
font-size: 1rem;
}

/* Infobox value */
.infobox-data th {
color: var( --color-base--subtle );
font-size: 0.8125rem;
font-weight: normal;
letter-spacing: 0.75px;
}

.infobox-data td {
font-weight: 600;
}

.infobox-data ul,
.infobox-data ol {
margin-top: 0;
}

/* Infobox button */
.infobox .infobox-button-bar {
width: 100%;
padding: 0;
margin-top: 25px;
text-align: center;
}

.infobox-button-bar th {
padding: 0;
}

/* Collapsible toggle */
.infobox tr:first-of-type .mw-collapsible-toggle {
position: relative;
display: none;
float: none;
}

.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text {
position: absolute;
right: 0;
display: block;
padding: 5px 15px;
background: var( --color-destructive );
border-radius: 0 var( --border-radius--medium );
color: #fff;
}

.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:hover {
background: var( --color-destructive--hover );
}

.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:active {
background: var( --color-destructive--active );
}

.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text {
background: var( --color-primary );
}

.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:hover {
background: var( --color-primary--hover );
}

.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:active {
background: var( --color-primary--active );
}

.infobox tr:first-of-type .mw-collapsible-toggle:before,
.infobox tr:first-of-type .mw-collapsible-toggle:after {
content: none;
}

@media only screen and ( max-width: 720px ) {
.infobox {
margin-right: auto;
margin-left: auto;
}

.infobox tr:first-of-type .mw-collapsible-toggle {
display: block;
}
}