mediawiki-extensions-Discus.../modules/dt.init.less
Bartosz Dziewoński 9ded06a655 First-run experience popup for automatic topic subscriptions
Bug: T262103
Change-Id: I9f9336718ad060d553146c4e27604565ce5822c6
2021-11-15 22:45:42 +01:00

308 lines
5.9 KiB
Plaintext

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
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;
}
}
}
&.ext-discussiontools-init-replylink-active {
visibility: hidden;
}
.ext-discussiontools-init-replylink-open & > a {
color: #72777d;
pointer-events: none;
}
@media print {
display: none;
}
}
.ext-discussiontools-init-highlight {
position: absolute;
pointer-events: none;
opacity: 0;
}
@supports ( mix-blend-mode: darken ) {
.ext-discussiontools-init-highlight {
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 );
}
@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 );
}
@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;
}
}
// NB Directional properties for anything immediately visible
// in the header must be based on content direction.
.ext-discussiontools-init-section {
&-subscribe {
display: none;
.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 & {
// Temporary fix for desktop Minerva (T292241)
float: none;
white-space: nowrap;
}
.ext-discussiontools-topicsubscription-enabled & {
display: block;
}
// 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;
}
}
}
.ext-discussiontools-init-new-topic {
margin-top: 1em;
}
.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;
}
}
/* stylelint-disable selector-class-pattern */
.ext-discussiontools-init-replylink-open {
.ext-discussiontools-emptystate,
> .error,
> .warningbox {
display: none;
}
}
/* stylelint-enable selector-class-pattern */
// 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;
transform: translate( 0, -20px );
transition: opacity 0.2s, transform 0.2s;
&-fadein {
opacity: 1;
transform: translate( 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%;
}
&-body {
margin-bottom: 1em;
margin-top: 1em;
}
&-title,
&-body,
&-actions {
margin-right: 200px;
}
}
// Mobile
@media ( max-width: 719px ) {
.oo-ui-popupWidget-popup {
width: 320px;
}
&-image {
width: 100%;
}
&-body {
margin-bottom: 1em;
}
}
}