Шаблон:DPWiremod/styles.css

.dp-wiremod-guide {
	color: inherit;
}

.dp-wiremod-guide * {
	box-sizing: border-box;
}

.wiremod-lead {
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(169, 108, 255, 0.38);
	border-left: 4px solid #a96cff;
	border-radius: 8px;
	background: linear-gradient(110deg, rgba(169, 108, 255, 0.12), transparent 75%);
	line-height: 1.55;
}

.wiremod-quick-grid,
.wiremod-concept-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem;
	margin: 0.8rem 0 1.1rem;
}

.wiremod-step,
.wiremod-concept {
	position: relative;
	min-width: 0;
	padding: 0.85rem 0.9rem;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(169, 108, 255, 0.12), transparent 72%);
}

.wiremod-step {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0.7rem;
	align-items: center;
}

.wiremod-step img,
.wiremod-concept img {
	max-width: 42px;
	max-height: 54px;
	object-fit: contain;
	image-rendering: pixelated;
}

.wiremod-step-number {
	position: absolute;
	top: 0.35rem;
	right: 0.45rem;
	color: #a96cff;
	font-size: 0.68rem;
	font-weight: 800;
}

.wiremod-step strong,
.wiremod-concept strong {
	display: block;
	margin-bottom: 0.18rem;
	color: inherit;
}

.wiremod-step small,
.wiremod-concept p {
	display: block;
	margin: 0;
	color: inherit;
	opacity: 0.8;
	font-size: 0.82rem;
	line-height: 1.38;
}

.wiremod-concept {
	text-align: center;
}

.wiremod-concept img {
	margin-bottom: 0.4rem;
}

.wiremod-note {
	margin: 0.85rem 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(169, 108, 255, 0.38);
	border-radius: 8px;
	background: rgba(169, 108, 255, 0.12);
	line-height: 1.48;
}

.wiremod-note--warning {
	border-color: rgba(255, 176, 55, 0.5);
	background: rgba(255, 176, 55, 0.1);
}

.wiremod-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	margin: 0.65rem 0 1rem;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 8px;
}

.dp-wiremod-guide table.wikitable {
	width: 100%;
	min-width: 680px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.dp-wiremod-guide table.wikitable th {
	padding: 0.58rem 0.65rem;
	border-color: rgba(169, 108, 255, 0.38);
	background: rgba(169, 108, 255, 0.2);
	color: inherit;
	text-align: left;
}

.dp-wiremod-guide table.wikitable td {
	padding: 0.52rem 0.65rem;
	border-color: rgba(128, 128, 128, 0.3);
	vertical-align: top;
	line-height: 1.4;
}

.dp-wiremod-guide table.wikitable tr:nth-child(even) td {
	background: rgba(127, 127, 127, 0.045);
}

.wiremod-components {
	margin: 0.65rem 0;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 8px;
	background: rgba(127, 127, 127, 0.04);
}

.wiremod-components__title {
	padding: 0.72rem 0.85rem;
	color: inherit;
	font-weight: 700;
	background: linear-gradient(110deg, rgba(169, 108, 255, 0.12), transparent 70%);
}

.wiremod-components:not(.mw-collapsed) .wiremod-components__title {
	border-bottom: 1px solid rgba(169, 108, 255, 0.38);
}

.wiremod-components .mw-collapsible-toggle {
	margin: 0.65rem 0.75rem 0 0.5rem;
}

.wiremod-components .wiremod-table-wrap {
	margin: 0;
	border: 0;
	border-radius: 0 0 8px 8px;
}

.wiremod-port {
	display: inline-block;
	margin: 0.08rem 0.12rem 0.08rem 0;
	padding: 0.12rem 0.38rem;
	border: 1px solid rgba(169, 108, 255, 0.38);
	border-radius: 999px;
	background: rgba(169, 108, 255, 0.12);
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

.wiremod-schematic {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
	justify-content: center;
	margin: 0.85rem 0;
	padding: 0.8rem;
	border: 1px dashed rgba(169, 108, 255, 0.38);
	border-radius: 8px;
}

.wiremod-schematic span {
	padding: 0.42rem 0.6rem;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 7px;
	background: rgba(127, 127, 127, 0.06);
	font-weight: 700;
}

.wiremod-schematic b {
	color: #a96cff;
}

.wiremod-attribution {
	margin-top: 1.1rem;
	color: inherit;
	opacity: 0.72;
	font-size: 0.78rem;
}

@media (max-width: 860px) {
	.wiremod-quick-grid,
	.wiremod-concept-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.wiremod-quick-grid,
	.wiremod-concept-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}