Module:Comment/Styles.css

/* This is a stylesheet for Module:Comment and associated templates in Category:Comment Templates. * It is meant to be imported into MediaWiki:Common.css as well as the mobile stylesheet, currently MediaWiki:FandomMobile.css. * Additional skin specific styles may be found at MediaWiki:Fandomdesktop.css or MediaWiki:FandomMobile.css - these should be kept to a minimum however. */

.comments { margin-bottom: 0.5rem; }

.comments .mw-collapsible-toggle { float: none; white-space: nowrap; }

/* A hack to show the heading before the toggle - we can't control how MediaWiki inserts the toggle ahead of the HTML */ .comments.mw-collapsible { display: grid; grid-template-columns: auto 1fr; column-gap: 0.25rem; align-items: center; } .comments__heading { grid-row: 1; grid-column: 1; } .comments > .mw-collapsible-toggle { grid-row: 1; grid-column: 2; } .comments__content { grid-column: 1/3; }

.comments__content { margin-top: 0.75rem; margin-bottom: 1rem }

.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; }

.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__entry { display: flex; align-items: center; column-gap: 1rem; }

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