Template:Databox/styles.css

/**
 * [[Category:Template style pages]]
 */
.databox {
	background: #f8f9fa;
	border: 1px solid #a2a9b1;
	clear: both;
	margin: 1em 0;
}
.databox.float {
	box-sizing: border-box;
	float: right;
	margin: 0 0 1em 1em;
	width: 330px;
}
.databox.hide {
	display: none;
}
.databox.collapse tbody {
	display: none;
}
.databox caption {
	background: #888c9e;
	color: white;
	cursor: pointer;
	font-weight: bold;
	margin: .5em;
	position: relative;
	text-align: center;
}
.databox-icon {
	float: left;
}
.databox-arrow {
	float: right;
}
.databox-icon img,
.databox-arrow img {
	filter: invert(1);
	margin: 0 5px;
	position: relative;
	bottom: 1px;
	vertical-align: middle;
}
.databox table {
	border-collapse: separate;
	border-spacing: .5em;
	width: 100%;
}
.databox th,
.databox td {
	padding: .1em .5em;
	vertical-align: top;
}
.databox th {
	text-align: left;
	white-space: nowrap;
}
.databox th[title]:not([title=""]) {
	cursor: help;
	text-decoration: underline dotted;
}
.databox td {
	width: 100%;
}
.databox.trim td,
.databox .trim td {
	max-width: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.databox.trim a:hover,
.databox .trim a:hover {
	white-space: normal;
}
.databox .center {
	text-align: center;
}

/**
 * Visual editor
 */
.databox.ve-ce-leafNode .auto {
	opacity: .5;
}
body.new-page .ve-ce-leafNode .auto {
	display: none;
}

/**
 * Dark mode
 */
body.poncho-dark-mode .databox {
	background: #303134;
	border-color: #3c4043;
	color: #bdc1c6;
}

/**
 * Small screens
 */
@media screen and (max-width:600px) {
	.databox {
		float: none;
		margin: .5em 0;
		width: 100%;
	}
	.databox table {
		margin: 0;
	}
	.databox tbody {
		display: none;
	}
	.databox.trim td,
	.databox .trim td {
		white-space: normal;
	}
}