Module:Documentation/styles.css

/* Markup comes from Module:Documentation. */

/* The wrapper holds the whole /doc page, so its border is the rule where the doc ends. */
.t-documentation {
	margin-top: var(--space-md);
	padding-bottom: var(--space-xl);
	border-bottom: var(--border-base);
}

/* On a module page, Scribunto's doc message ends the doc with an <hr>, which lands inside the wrapper. */
.t-documentation > hr:last-child {
	display: none;
}

.t-documentation__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-md);
	padding: var(--space-sm);
	background-color: var(--color-surface-1);
	border: var(--border-base);
	border-radius: var(--border-radius-medium);
}

.t-documentation__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--border-radius-base);
	background-color: var(--color-surface-2);
	color: var(--color-emphasized);
}

.t-documentation__heading {
	flex-grow: 1;
	min-width: 0;
}

.t-documentation__title {
	color: var(--color-emphasized);
	font-size: var(--font-size-medium);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-medium);
}

.t-documentation__subtitle {
	color: var(--color-subtle);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.t-documentation__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xxs);
}

.t-documentation__notices {
	display: flow-root;
	margin-bottom: var(--space-md);
}

/* A git= doc is converted from a README whose first paragraph is also the
   TemplateData description, so TemplateData would show it a second time. */
.t-documentation--git .mw-templatedata-doc-desc {
	display: none;
}

/* A phone puts the actions on their own row under the title, where each
   stretches to share its width, a larger tap target. */
@media ( max-width: 639px ) {
	.t-documentation__actions {
		flex-basis: 100%;
	}

	.t-documentation__action,
	.t-documentation__action > .t-button,
	.t-documentation__action a,
	.t-documentation__action .cdx-button {
		display: flex;
		flex-grow: 1;
	}
}