Vorlage:Gefährten/style.css

.sync-pairs {
	border-radius: 1em;
	margin: 2px auto;
	display: grid;
}

.sync-pairs .name {
	border-top-left-radius: 0.7em;
	border-top-right-radius: 0.7em;
	padding: 3px;
	font-weight: bold;
	text-align: center;
}

.sync-pairs .name span:first-of-type {
	float: left;
}

.sync-pairs .name span:last-of-type {
	float: right;
}

.sync-pairs .image {
	background: #FFFFFF;
	text-align: center;
}

.sync-pairs .info, .sync-pairs .stats-info, .sync-pairs .attack-info {
	display: grid;
}

.sync-pairs .info div:nth-child(odd), .sync-pairs .stats-info div, .sync-pairs .attack-info div {
	font-size: 90%;
	padding: 1px 3px;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}

.sync-pairs .info div:nth-child(even) {
	background: white;
	text-align: center;
	padding: 1px 3px;
}

.sync-pairs .stats {
	display: grid;
	grid-template-columns: repeat(2, auto);
}

.sync-pairs .stats div {
	padding: 1px 3px;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.sync-pairs .stats div:nth-child(1) {
	background: #FFFFFF;
	font-size: 90%;
	text-align: center;
	grid-column-end: span 2;
}

.sync-pairs .stats div:nth-child(n+2):nth-child(odd) {
	justify-content: flex-end;
}

.sync-pairs .stats div:nth-child(2), .sync-pairs .stats div:nth-child(3) {
	background: #C6F1D5;
}

.sync-pairs .stats div:nth-child(4), .sync-pairs .stats div:nth-child(5) {
	background: #EFECCD;
}

.sync-pairs .stats div:nth-child(6), .sync-pairs .stats div:nth-child(7) {
	background: #F5DFB8;
}

.sync-pairs .stats div:nth-child(8), .sync-pairs .stats div:nth-child(9) {
	background: #D3F1F9;
}

.sync-pairs .stats div:nth-child(10), .sync-pairs .stats div:nth-child(11) {
	background: #BCD4F0;
}

.sync-pairs .stats div:nth-child(12), .sync-pairs .stats div:nth-child(13) {
	background: #DBCDE7;
}

.sync-pairs .attacks {
	display: grid;
	grid-template-columns: repeat(3, auto);
}

.sync-pairs .attacks div {
	padding: 1px 3px;
}

.sync-pairs .attacks img {
	max-width: initial !important;
}

.sync-pairs .attacks .attack-name {
	display: flex;
	align-items: center;
}

.sync-pairs .attacks .attack-icon {
	display: flex;
	align-items: center;
}

.sync-pairs .attacks .heading {
	font-size: 90%;
	padding: 1px 3px;
	font-weight: bold;
	text-align: center;
	grid-column-end: span 3;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sync-pairs .attacks .content {
	background: #FFFFFF;
	padding: 1px 3px;
	text-align: center;
	grid-column-end: span 3;
	white-space: nowrap;
}

.sync-pairs .board-heading {
	font-size: 90%;
	padding: 1px 3px;
	font-weight: bold;
	text-align: center;
}

.sync-pairs .sync-pair-end {
	border-bottom-left-radius: 0.7em;
	border-bottom-right-radius: 0.7em;
}

.sync-pairs .board-content {
	gap: 2px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.sync-pairs .board-content div {
	background: white;
	padding: 1px 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.sync-pairs .board-content div:nth-child(-n+5) {
	font-size: 90%;
	font-weight: bold;
}

.sync-pairs .board-content div:nth-last-child(5) {
	border-bottom-left-radius: 0.7em;
}

.sync-pairs .board-content div:last-child {
	border-bottom-right-radius: 0.7em;
}

@media only screen and (min-width: 721px) {
	.sync-pairs {
		width: min-content;
		min-width: 49%;
		grid-template-columns: repeat(2, auto);
	}
	
	.sync-pairs .name, .sync-pairs .image, .sync-pairs .board-heading, .sync-pairs .board-content, .sync-pairs .grundpotenzial, .sync-pairs .rolle, .sync-pairs .trainerdex {
		grid-column-end: span 2;
	}
}

@media only screen and (max-width: 720px) {
	.sync-pairs {
		width: 100%;
		box-sizing: border-box;
	}
	
	.sync-pairs .name, .sync-pairs .image, .sync-pairs .info {
		order: 1;
	}
	
	.sync-pairs .stats-info, .sync-pairs .stats {
		order: 2;
	}
	
	.sync-pairs .attack-info, .sync-pairs .attacks, .sync-pairs .board-heading, .sync-pairs .board-content {
		order: 3;
	}
	
	.sync-pairs .left-end {
		border-bottom-left-radius: 0 !important;
	}
	
	.sync-pairs .right-end {
		border-bottom-left-radius: 0.7em;
	}
	
	.sync-pairs div {
		border-left: none !important;
		border-right: none !important;
		word-break: break-word;
		hyphens: auto;
	}
}

/* [[Kategorie:Vorlage:Non-Wikitext]] */