docs/uidesign/mediawiki.action.history.diff.html

   1 <!DOCTYPE html>
   2 <html lang="en" dir="ltr">
   3 <head>
   4         <link rel="stylesheet" href="../../resources/mediawiki.action/mediawiki.action.history.diff.css">
   5 </head>
   6 <body style="background-color: #C0C0C0;">
   7 <p>
   8 This show various styles for our diff action, the background being hardcoded to gray (<code>#C0C0C0</code>) The reference style sheet is:</p>
   9 <p>
  10 <code><a href="../../resources/mediawiki.action/mediawiki.action.history.diff.css">resources/mediawiki.action/mediawiki.action.history.diff.css</a></code>.
  11 </p>
  12 <p>
  13 This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.</p>
  14
  15 <p>
  16 First, show the diff mostly like it would be chown on a wiki</p>
  17 <table class="diff">
  18 <tr>
  19         <td class="diff-marker">-</td>
  20         <td class="diff-deletedline"><div>
  21                 Some content <span class="diffchange diffchange-inline">deleted / replaced</span>
  22         </div></td>
  23         <td class="diff-marker">+</td>
  24         <td class="diff-addedline"><div>
  25                 Some content <span class="diffchange diffchange-inline">added / replacement</span>
  26         </div></td>
  27 </tr>
  28 </table>
  29
  30
  31 <p>
  32 Below are some basic lines being applied one or two classes. Mainly for debugging purposes</p>
  33
  34 <table class="diff">
  35
  36         <tr><th>Diff</th></tr>
  37
  38         <tr><td class="diff-addedline"><code>diff-addedline</code>: added line</td></tr>
  39         <tr><td class="diff-deletedline"><code>diff-deletedline</code>: deleted line</td></tr>
  40         <tr><td class="diff-context"><code>diff-context</code>: context</td></tr>
  41
  42
  43         <tr><th>Same as above with a <code>&lt;span&gt;</code> child element having the <code>diffchange</code> class</th></tr>
  44
  45         <tr><td class="diffchange">Diffchange</td></tr>
  46         <tr><td class="diff-addedline">
  47                 <span class="diffchange">Added line + diffchange</span>
  48         </td></tr>
  49         <tr><td class="diff-deletedline">
  50                 <span class="diffchange">Deleted line + diffchange</span>
  51         </td></tr>
  52         <tr><td class="diff-context">
  53                 <span class="diffchange">Context + diffchange</span>
  54         </td></tr>
  55 </table>
  56
  57 </body>
  58 </html>