resources/src/mediawiki.diff.styles/diff.less

   1 /*!
   2  * Diff rendering
   3  *
   4  * Stable for use on any page where a diff is rendered.
   5  * The early-loaded part of the mediawiki.diff module.
   6  * Usually added via DifferenceEngine::showDiffStyle() and loaded for all diffs generated by DifferenceEngine
   7  * IMPORTANT: This stylesheet is loaded on various pages.
   8  * This includes (but is not limited to):
   9  * diff pages, undo workflow, edit preview, edit conflict workflow.
  10  */
  11
  12 @import 'mediawiki.skin.variables.less';
  13 @import 'mediawiki.mixins.less';
  14
  15 /* stylelint-disable selector-class-pattern */
  16
  17 .diff {
  18         border: 0;
  19         border-spacing: 4px;
  20         margin: 0;
  21         width: 100%;
  22         /* Ensure that columns are of equal width */
  23         table-layout: fixed;
  24
  25         td {
  26                 padding: 0.33em 0.5em;
  27
  28                 &.diff-marker {
  29                         /* Compensate padding for increased font-size */
  30                         padding: 0.25em;
  31                         text-align: right;
  32                         font-weight: bold;
  33                         font-size: 1.25em;
  34                         line-height: 1.2;
  35
  36                         &::before {
  37                                 content: attr( data-marker );
  38                         }
  39                 }
  40
  41                 div {
  42                         /* Force-wrap very long lines such as URLs or page-widening char strings */
  43                         word-wrap: break-word;
  44                 }
  45         }
  46
  47         col.diff-marker {
  48                 width: 2%;
  49         }
  50
  51         .diff-content {
  52                 width: 48%;
  53         }
  54 }
  55
  56 .diff-title {
  57         vertical-align: top;
  58 }
  59
  60 .diff-notice,
  61 .diff-multi,
  62 .diff-otitle,
  63 .diff-ntitle {
  64         text-align: center;
  65 }
  66
  67 .diff-lineno {
  68         font-weight: bold;
  69         .user-select( none );
  70 }
  71
  72 .mw-diff-inline-added,
  73 .mw-diff-inline-changed,
  74 .mw-diff-inline-moved,
  75 .mw-diff-inline-deleted {
  76         ins,
  77         del {
  78                 padding: 0.3em 1px;
  79                 text-decoration: none;
  80                 white-space: break-spaces;
  81                 // When JS is enabled, deleted and added content will show a popup explaining what the colors mean.
  82                 // Show a cursor pointer to make it clear it's clickable.
  83                 .client-js & {
  84                         // Note: This currently only happens at low resolutions.
  85                         @media only screen and ( max-width: @max-width-breakpoint-tablet ) {
  86                                 cursor: pointer;
  87                         }
  88                 }
  89         }
  90 }
  91
  92 .mw-diff-inline-added ins,
  93 .mw-diff-inline-changed ins,
  94 .mw-diff-inline-moved ins {
  95         background: @background-color-content-added;
  96 }
  97
  98 .mw-diff-inline-deleted del,
  99 .mw-diff-inline-changed del,
 100 .mw-diff-inline-moved del {
 101         background: @background-color-content-removed;
 102 }
 103
 104 .mw-diff-table-prefix {
 105         display: flex;
 106         justify-content: flex-end;
 107         align-items: center;
 108         margin: 1em 0;
 109
 110         .mw-diff-inline-legend {
 111                 margin-right: auto;
 112
 113                 .mw-diff-inline-legend-ins,
 114                 .mw-diff-inline-legend-del {
 115                         display: inline-block;
 116                         padding: 4px 6px;
 117                 }
 118
 119                 .mw-diff-inline-legend-ins {
 120                         background: @background-color-content-added;
 121                 }
 122
 123                 .mw-diff-inline-legend-del {
 124                         background: @background-color-content-removed;
 125                 }
 126         }
 127
 128         .mw-diffPage-inlineToggle-container {
 129                 margin-left: 1em;
 130         }
 131 }
 132
 133 .diff-addedline,
 134 .diff-deletedline,
 135 .diff-context {
 136         vertical-align: top;
 137         border-style: solid;
 138         border-width: 1px 1px 1px 4px;
 139         border-radius: 0.33em;
 140 }
 141
 142 .diff-addedline,
 143 .diff-deletedline,
 144 .diff-context,
 145 .mw-diff-inline-added,
 146 .mw-diff-inline-deleted,
 147 .mw-diff-inline-moved,
 148 .mw-diff-inline-changed,
 149 .mw-diff-inline-context {
 150         /* TODO: Re-evaluate whether we should keep this over-ride or switch to ems */
 151         /* stylelint-disable-next-line declaration-property-unit-disallowed-list */
 152         font-size: 13px;
 153         /* Standardize tab width */
 154         -moz-tab-size: 4;
 155         tab-size: 4;
 156         line-height: 1.6;
 157         // Support Chrome <= 75, Firefox <= 68: Fallback for browsers that don't support `break-spaces`.
 158         white-space: pre-wrap;
 159         white-space: break-spaces;
 160
 161         // Allow editfont to be set on container while only
 162         // affecting wikitext content.
 163         // These classes match mw-editfont-*
 164         .diff-editfont-monospace & {
 165                 font-family: monospace, monospace;
 166         }
 167
 168         .diff-editfont-sans-serif & {
 169                 font-family: sans-serif;
 170         }
 171
 172         .diff-editfont-serif & {
 173                 font-family: serif;
 174         }
 175 }
 176
 177 .mw-diff-inline-header {
 178         font-weight: bold;
 179         margin: 1em 0;
 180 }
 181
 182 .diff-context {
 183         background: @background-color-neutral-subtle;
 184         color: @color-base;
 185         border-color: @border-color-muted;
 186 }
 187
 188 .diff-addedline {
 189         border-color: @background-color-content-added;
 190 }
 191
 192 .diff-deletedline {
 193         border-color: @background-color-content-removed;
 194 }
 195
 196 .diffchange {
 197         font-weight: bold;
 198         text-decoration: none;
 199
 200         .diff-addedline &,
 201         .diff-deletedline & {
 202                 border-radius: 0.33em;
 203                 padding: 0.25em 0;
 204         }
 205
 206         .diff-addedline & {
 207                 background: @background-color-content-added;
 208         }
 209
 210         .diff-deletedline & {
 211                 background: @background-color-content-removed;
 212         }
 213 }
 214
 215 /* Correct user & content directionality when viewing a diff */
 216 .diff-currentversion-title,
 217 .diff {
 218         direction: ltr;
 219         unicode-bidi: embed;
 220 }
 221
 222 .diff-contentalign-right td {
 223         /* @noflip */
 224         direction: rtl;
 225         unicode-bidi: embed;
 226 }
 227
 228 .diff-contentalign-left td {
 229         /* @noflip */
 230         direction: ltr;
 231         unicode-bidi: embed;
 232 }
 233
 234 .diff-multi,
 235 .diff-otitle,
 236 .diff-ntitle,
 237 .diff-lineno {
 238         direction: ltr !important; /* stylelint-disable-line declaration-no-important */
 239         unicode-bidi: embed;
 240 }
 241
 242 .mw-diff-slot-header {
 243         text-align: center;
 244 }
 245
 246 .mw-diff-slot-error {
 247         text-align: center;
 248         color: @color-error;
 249 }
 250
 251 /*!
 252  * Wikidiff2 rendering for moved paragraphs
 253  */
 254
 255 .mw-diff-movedpara-left,
 256 .mw-diff-movedpara-right {
 257         &,
 258         &:visited,
 259         &:active {
 260                 display: block;
 261                 color: transparent;
 262                 .user-select( none );
 263         }
 264
 265         &:hover {
 266                 text-decoration: none;
 267                 color: transparent;
 268         }
 269
 270         &::after {
 271                 display: block;
 272                 color: @color-base;
 273                 margin-top: -1.25em;
 274         }
 275 }
 276
 277 .mw-diff-movedpara-left::after,
 278 .rtl .mw-diff-movedpara-right::after {
 279         content: '↪';
 280 }
 281
 282 .mw-diff-movedpara-right::after,
 283 .rtl .mw-diff-movedpara-left::after {
 284         content: '↩';
 285 }
 286
 287 #mw-inlinediff-header {
 288         #mw-diff-otitle1,
 289         #mw-diff-otitle2,
 290         #mw-diff-otitle3,
 291         #mw-diff-otitle5 {
 292                 display: none;
 293         }
 294 }
 295
 296 /* Lock selection to a single side */
 297 .diff[ data-selected-side='deleted' ] .diff-side-added,
 298 .diff[ data-selected-side='added' ] .diff-side-deleted {
 299         .user-select( none );
 300         cursor: text;
 301 }
 302
 303 /*!
 304  * Wikidiff2 rendering for new lines and deleted lines
 305  */
 306 .mw-diff-inline-added.mw-diff-empty-line,
 307 .mw-diff-inline-deleted.mw-diff-empty-line,
 308 .mw-inline-diff-newline {
 309         &::after {
 310                 font-family: @font-family-monospace;
 311                 font-size: 87.5%;
 312                 padding: 0 3px;
 313                 display: inline-block;
 314                 color: @color-subtle;
 315         }
 316 }
 317
 318 .mw-diff-inline-added.mw-diff-empty-line,
 319 .mw-inline-diff-newline {
 320         &::after {
 321                 content: '@{msg-diff-newline}';
 322                 background: @background-color-content-added;
 323         }
 324 }
 325
 326 .mw-diff-inline-deleted.mw-diff-empty-line {
 327         &::after {
 328                 content: '@{msg-diff-line-deleted}';
 329                 background: @background-color-content-removed;
 330         }
 331 }
 332
 333 .mw-diffPage-inlineToggle-container .oo-ui-fieldLayout-body {
 334         align-items: center;
 335         white-space: nowrap;
 336 }
 337
 338 .mw-diff-empty-line {
 339         ins,
 340         del {
 341                 display: none;
 342         }
 343 }
 344
 345 // Hidden by default, but can be used to adapt layout to mobile devices.
 346 // This content may be useful on desktop skins too, however initially this
 347 // is hidden by default as communities have not yet been consulted about this.
 348 .mw-diff-usermetadata,
 349 .mw-diff-revision-history-links {
 350         display: none;
 351 }
 352
 353 // Hide the diff legend at lower resolutions.
 354 @media only screen and ( max-width: @max-width-breakpoint-tablet ) {
 355         .mw-diff-inline-legend {
 356                 display: none;
 357         }
 358 }