Template:Databox/sandbox/styles.css

.template-databox {
	background: var( --background-color-neutral-subtle );
	box-sizing: border-box;
	clear: both;
	margin: 1em 0;
}
.template-databox caption {
	cursor: pointer;
	font-weight: bold;
	margin: .5em;
}
.template-databox caption:after {
	content: "▼";
	margin-left: .5em;
}
.template-databox table {
	border-spacing: .5em;
	width: 100%;
}
.template-databox tbody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: .5em;
}
.template-databox th,
.template-databox td {
	padding: .1em .5em;
	vertical-align: top;
}
.template-databox th {
	text-align: left;
	white-space: nowrap;
}
.template-databox th[title]:not([title=""]) {
	cursor: help;
	text-decoration: underline dotted;
}
.template-databox td {
	grid-column-start: 2;
	width: 100%;
}
.template-databox tr {
	border: 1px solid var( --border-color-subtle );
	border-radius: 4px;
}
.template-databox .hide {
	display: none;
}
.template-databox .EditParam {
	float: right;
}
.template-databox .smw-highlighter {
	float: right;
	margin-right: .5em;
}
.template-databox.trim td,
.template-databox .trim td {
	max-width: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.template-databox.trim a:hover,
.template-databox .trim a:hover {
	white-space: normal;
}
.template-databox .center {
	text-align: center;
}

.template-databox.float {
	float: right;
	margin: 0 0 1em 1em;
	width: 310px;
}
.template-databox.hide {
	display: none;
}
.template-databox.collapse tbody {
	display: none;
}
body.read-mode .template-databox tbody {
	display: none;
}

/**
 * Visual editor
 */
.template-databox.ve-ce-leafNode .auto {
	opacity: .5;
}

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

/* [[Category:Template style pages]] */