mediawiki-extensions-DiscussionTools/modules/dt.init.less

@import 'mediawiki.ui/variables.less';

span[ data-mw-comment-start ] {
	// Give comment anchors a negative offset so we don't position
	// them right at the edge of the page when jumping to them
	position: relative;
	top: -1em;
}

.ext-discussiontools-init-replylink-buttons {
	user-select: none;
	display: none;

	// If a site has text-indent set on content, it would be inherited here and cause excessive padding
	text-indent: 0;

	.mw-content-ltr & {
		/* @noflip */
		margin-left: 0.5em;
	}

	.mw-content-rtl & {
		/* @noflip */
		margin-right: 0.5em;
	}

	.ext-discussiontools-replytool-enabled & {
		// Chromium bug (T260072): Element with `user-select: none` at the end of a paragraph causes
		// triple-click (to select the paragraph) to also select the first character of the next paragraph
		// https://bugs.chromium.org/p/chromium/issues/detail?id=1116214
		/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
		display: inline-flex;

		.client-nojs & {
			display: none;
		}
	}

	// No support for reply links in the mobile talk overlay
	// stylelint-disable-next-line no-descending-specificity, selector-class-pattern
	.talk-overlay & {
		display: none;
	}

	.ext-discussiontools-init-replylink {
		&-reply {
			cursor: pointer;
		}

		// Similar to mw-editsection-bracket
		&-bracket {
			color: #54595d;

			.mw-content-ltr &:first-of-type,
			.mw-content-rtl &:not( :first-of-type ) {
				/* @noflip */
				margin-right: 0.25em;
			}

			.mw-content-ltr &:not( :first-of-type ),
			.mw-content-rtl &:first-of-type {
				/* @noflip */
				margin-left: 0.25em;
			}
		}

		// Similar to mw-editsection-divider
		&-divider {
			color: #54595d;
			// display:inline-flex causes whitespace to collapse
			white-space: pre;
		}
	}

	.ext-discussiontools-init-replylink-open & > .ext-discussiontools-init-replylink-reply {
		color: #72777d;
		pointer-events: none;
	}

	&.ext-discussiontools-init-replylink-active > .ext-discussiontools-init-replylink-reply {
		color: #202122;
		text-decoration: none;
	}

	@media print {
		display: none;
	}
}

.ext-discussiontools-init-noMarker {
	list-style: none;
}

.ext-discussiontools-init-highlight {
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@supports ( mix-blend-mode: darken ) {
	.ext-discussiontools-init-highlight {
		/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
		mix-blend-mode: darken;
		// Support: Safari
		// Safari doesn't blend this overlay with the text unless GPU rendering is forced.
		transform: translateZ( 0 );
	}
}

.ext-discussiontools-init-highlight-fadein {
	opacity: 1;
}

.ext-discussiontools-init-highlight-fadeout {
	opacity: 0;
	transition: opacity 250ms ease-out;
}

.ext-discussiontools-init-publishedcomment {
	// Support: IE11
	// On supporting browsers, we instead use non-transparent color with mix-blend-mode.
	// Identical to #ffe29e on white background.
	background-color: rgba( 255, 198, 60, 0.5 );
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@supports ( mix-blend-mode: darken ) {
	.ext-discussiontools-init-publishedcomment {
		background-color: #ffe29e;
	}
}

.ext-discussiontools-init-targetcomment {
	// Support: IE11, see above
	background-color: rgba( 216, 235, 255, 0.5 );
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@supports ( mix-blend-mode: darken ) {
	.ext-discussiontools-init-targetcomment {
		// Same color as the :target selector for references (from Cite).
		// Not sure if that's a good idea, but it should be different from -publishedcomment.
		background-color: #eaf3ff;
	}
}

.ext-discussiontools-init-new-topic {
	margin-top: 1em;
}

// Topic subscriptions (link)
// Directional properties for anything immediately visible in the header must be based on content direction.
.ext-discussiontools-init-section-subscribe {
	display: none;

	.ext-discussiontools-topicsubscription-enabled & {
		display: block;
	}

	.mw-content-ltr & {
		/* @noflip */
		float: right;
	}

	.mw-content-rtl & {
		/* @noflip */
		float: left;
	}

	&.mw-editsection-like {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin-top: 0.7em;
	}

	.skin-minerva & {
		// Subscribe button is used instead in Minerva
		display: none;
	}

	// Similar to mw-editsection-bracket
	&-bracket {
		color: #54595d;

		.mw-content-ltr &:first-of-type,
		.mw-content-rtl &:not( :first-of-type ) {
			/* @noflip */
			margin-right: 0.25em;
		}

		.mw-content-ltr &:not( :first-of-type ),
		.mw-content-rtl &:first-of-type {
			/* @noflip */
			margin-left: 0.25em;
		}
	}

	&-link&-link-pending {
		color: #72777d;
		pointer-events: none;
	}
}

// Topic subscriptions (button)
.ext-discussiontools-init-section-subscribeButton.oo-ui-buttonElement {
	display: none;

	.ext-discussiontools-topicsubscription-enabled & {
		display: inline-block;
	}
}

// Visual enhancements disabled
.ext-discussiontools-init-section-bar,
.ext-discussiontools-init-readAsWikiPage {
	display: none;
}

// Visual enhancements enabled
.ext-discussiontools-visualenhancements-enabled {
	.ext-discussiontools-init-section {
		clear: both;
		margin: 1em 0 0 0;
		padding: 0.5em 0;
		font-weight: bold;
		// stylelint-disable-next-line declaration-no-important
		font-family: sans-serif !important;
		border: 0;

		&:not( :first-child ) {
			border-top: 1px solid #a2a9b1;
		}

		// Hide old subscribe link
		&-subscribe {
			display: none;
		}

		&-bar {
			// stylelint-disable-next-line declaration-property-unit-disallowed-list
			font-size: 14px;
			margin-top: 5px;
			display: flex;

			.oo-ui-buttonElement > .oo-ui-buttonElement-button {
				font-weight: normal;
			}
		}

		&-metadata {
			display: flex;
			flex-wrap: wrap;
		}

		&-metaitem {
			font-weight: normal;
			color: #666;
			// Make same height as "unsubscribe" button
			margin: 7px 0;

			& + .ext-discussiontools-init-section-metaitem {
				margin-left: 12px;
				padding-left: 12px;
				border-left: 1px solid #a2a9b1;
			}
		}

		&-actions {
			margin-left: auto;
			margin-right: -14px;
		}

		&-ellipsisButton {
			display: none;
		}
	}

	// Also re-style topic header input in new topic tool
	h2.ext-discussiontools-ui-newTopic-sectionTitle .oo-ui-inputWidget-input {
		font-weight: bold;
		font-family: sans-serif;
	}

	/* stylelint-disable no-descending-specificity */
	// Mobile
	&.skin-minerva .ext-discussiontools-init-section {
		flex-wrap: wrap;
		// stylelint-disable-next-line declaration-no-important
		border-bottom: 0 !important;
		margin: 12px 0;
		padding-bottom: 0;
		// The tap-highlight is an odd shape and shows even for cancelled events on -actions,
		// just hide it.
		-webkit-tap-highlight-color: transparent;

		> .mw-headline {
			width: auto;
			flex-grow: 1;
			flex-basis: 0;
		}

		&:not( :first-child ) {
			border-top: 1px solid #eaecf0;
		}

		&-bar {
			width: 100%;
			flex-wrap: wrap;
		}

		&-actions {
			border-top: 1px solid #eaecf0;
			width: 100%;
			margin-left: 0;
			padding: 12px 0;

			> .oo-ui-buttonElement-frameless:first-child {
				margin-left: 0;
			}
		}

		// stylelint-disable-next-line selector-class-pattern
		&.section-heading .ext-discussiontools-init-section-actions {
			// Hidden until expanded
			display: none;
		}

		&-subscribeButton {
			margin-left: 0;
			margin-right: 8px;

			> .oo-ui-buttonElement-button {
				margin-left: -0.42857143em;
			}
		}

		&-ellipsisButton {
			display: inline-block;
		}

		&-metadata {
			width: 100%;
			padding-left: 24px;
		}

		&-authorCountLabel,
		&-commentCountLabel {
			display: none;
		}

		// stylelint-disable-next-line selector-class-pattern
		&.open-block {
			.ext-discussiontools-init-section-bar {
				border-bottom: 1px solid #eaecf0;
			}

			.ext-discussiontools-init-section-metadata {
				padding-bottom: 12px;
			}

			.ext-discussiontools-init-section-actions {
				display: block;
			}
		}

		.mw-editsection {
			// stylelint-disable-next-line declaration-no-important
			display: none !important;
		}

		.mw-ui-icon + span {
			margin-left: 0;
		}
	}

	.ext-discussiontools-init-readAsWikiPage {
		display: block;
		/* Not sticky per T309889 */
		width: 100%;
		padding: 1em;
		color: @colorProgressive;
		background: @colorGray15;
		border-top: 1px solid @colorGray14;
		text-align: center;
	}

	&.skin-monobook .ext-discussiontools-init-section {
		&-bar {
			// stylelint-disable-next-line declaration-property-unit-disallowed-list
			font-size: 12px;
		}

		&-actions {
			margin-right: 0;
		}

		&-subscribeButton {
			margin-right: 0;
		}
	}
	/* stylelint-enable no-descending-specificity */
}

.ext-discussiontools-emptystate {
	display: flex;
	justify-content: space-between;

	.skin-minerva & {
		// Add space between this and page-actions-menu in Minerva
		margin-top: 1em;
	}

	> img {
		width: 250px;
	}
}

// Mobile
@media ( max-width: 719px ) {
	.ext-discussiontools-emptystate {
		display: block;

		.oo-ui-buttonElement {
			display: block;
			text-align: center;

			> a {
				width: 80%;
			}
		}

		> img {
			display: none;
		}
	}
}

.ext-discussiontools-init-replylink-open {
	.ext-discussiontools-emptystate,
	> .mw-message-box-warning {
		display: none;
	}
}

// Styles inspired by the Popups extension
// (and occasionally copypasted from there)
.ext-discussiontools-autotopicsubpopup {
	position: absolute;
	left: 0;
	right: 0;

	// Increase specificity to override .oo-ui-popupWidget
	.oo-ui-popupWidget& {
		// Animations
		opacity: 0;
		// Support: Safari
		// 3D transform is needed to work around a Safari bug, which causes shadows to remain when the
		// popup is removed (T297266, T226872). Otherwise this should just use 2D translate().
		transform: translate3d( 0, -20px, 0 );
		transition: opacity 0.2s, transform 0.2s;

		&-fadein {
			opacity: 1;
			// Support: Safari
			// 3D transform is needed to work around a Safari bug, which causes shadows to remain when the
			// popup is removed (T297266, T226872). Otherwise this should just use 2D translate().
			transform: translate3d( 0, 0, 0 );
		}
	}

	.oo-ui-popupWidget-popup {
		padding: 1.5em;
		box-sizing: border-box;
		// Center horizontally
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		// Position above the highlight
		bottom: 3em;

		&.ext-discussiontools-autotopicsubpopup-overlap {
			// If there isn't enough space above, position on top of the highlight
			top: -1em;
			bottom: auto;
		}
	}

	&-title {
		font-weight: bold;
		font-size: 1.2em;
		display: block;
	}

	&-image {
		/* @embed */
		background: url( autotopicsubpopup-image.svg ) center center no-repeat;
		width: 200px;
		height: 200px;
	}

	// Desktop
	@media ( min-width: 720px ) {
		.oo-ui-popupWidget-popup {
			width: 450px;
			min-height: 200px;
			padding-right: 0;
		}

		&-image {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			z-index: 1;
		}

		&-body {
			margin-bottom: 1em;
			margin-top: 1em;
			margin-right: 200px;
		}

		&-title,
		&-actions {
			margin-right: 150px;
			position: relative;
			z-index: 2;
		}
	}

	// Mobile
	@media ( max-width: 719px ) {
		.oo-ui-popupWidget-popup {
			width: 320px;
		}

		&-image {
			width: 100%;
		}

		&-body {
			margin-bottom: 1em;
		}
	}
}