mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-12-18 02:51:26 +00:00
550 lines
11 KiB
Plaintext
550 lines
11 KiB
Plaintext
@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;
|
|
}
|
|
}
|
|
}
|