Module:Comment/Styles.css

/* [[Category:Template Styles]] */

.comments {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.comments--manual {
	margin-top: 0.125rem;
}

.comments__toggle-more:active, .comments__toggle-more:focus, .comments__toggle-more:hover {
	text-decoration: underline;
}

.comments__toggle-more {
	display: inline-block;
	margin-top: 0.25rem;
	margin-left: calc(80px + 1rem);
	color: #f4f26b;
	cursor: pointer;
	transition: color .3s;
}

.comments__additional-comments:not(.mw-collapsed) .comments__toggle-more { 
	display: none;
}

.comments__first-comment, .comments__additional-comments-content {
	display: grid;
	grid-template-columns: 80px auto 1fr;
	align-items: center;
	column-gap: 1rem;
}

.comments__commenter {
	text-align: center;
	grid-column: 1;
}

.comments__spacer {
	grid-column: 2;
	margin-top: 1.5rem;
}

.comments__quote-context {
	grid-column: 2;
	font-size: 0.875rem;
	font-style: italic;
}
body.skin-vector .comments__quote-context {
	color: #bbbbbb;
}

.comments__quote-bubble {
	display: inline-block;
	grid-column: 2;
	padding: 1.5rem;
	background-color: #17568c;
	border: 0.375rem solid #426787;
	border-radius: 1.5rem;
}

.comments--manual .comments__quote-bubble {
	padding: 1rem;
}

blockquote.comments__quote-bubble {
	margin: 0;
}

.comments__quote-bubble p {
	margin: 0;
}
.comments__quote-bubble p+p {
	margin-top: 0.5rem;
}

.comments__entry {
	display: flex;
	align-items: center;
	column-gap: 1rem;
}

.comments__subject {
	font-size: 1.25rem;
	font-weight: bold;
}