resources/src/mediawiki.interface.helpers.styles/skinStyles.less

   1 /* stylelint-disable selector-class-pattern */
   2 @import 'mediawiki.skin.variables.less';
   3 @import 'mediawiki.mixins.less';
   4
   5 /**
   6  * Helper classes used across special pages and actions
   7  *
   8  * This is the default for skin styles. It is possible that skin override this file.
   9  * This file is only used to provide styling for content elements to support translatable messages.
  10  */
  11
  12 /* Content dividers */
  13 /* @todo FIXME: Hard coded ". .". Is there a message for this? Should there be? */
  14 .mw-changeslist-separator:empty::before {
  15         content: '. .';
  16 }
  17
  18 /**
  19  * Rather than use an existing element, we have a specific element for designating
  20  * the separation of certain elements by a semicolon.
  21  * This is a variant of the rule mw-changeslist-separator rule above but uses a semicolon
  22  * rather than a the two dots. It's not clear why we use different things for separation, and
  23  * when adding this I was unable to see any information that led to its change. A designer in the
  24  * future of a developer who has the energy to invest may explore this more and see if these two
  25  * classes can be combined.
  26  *
  27  * There is lots of context on this rule in https://phabricator.wikimedia.org/T233649
  28  *
  29  * # History page
  30  *
  31  * The history page should never have a semicolon as there is never a mw-title element.
  32  * Previous attempts to add the semicolon used the timestamp and a before pseudo element
  33  * but this led to problems as the history page also uses this element and there is no
  34  * easy way to distinguish it from other elements and never any need to have a semicolon
  35  * on the history page.
  36  *
  37  * # Special:RecentChanges
  38  *
  39  * has always had a semicolon and motivation for moving this change here.
  40  *
  41  * # Special:Watchlist
  42  *
  43  * Note that before this change was introduced, the Special:Watchlist page
  44  * didn't have a semicolon after the title. This caused some confusion to
  45  * editors (https://phabricator.wikimedia.org/T237685) but this rule makes it
  46  * consistent with Special:RecentChanges. To disable the semicolon on the watchlist
  47  * would be additional CSS to reset the content of this pseudo element for that specific
  48  * page, but we should not accrue that technical debt without some strong arguments for
  49  * doing so - and they should be documented!
  50  * # Special:Contributions
  51  * Never use semicolon on this page. Always use “. .” as separators.
  52  */
  53 .mw-changeslist-separator--semicolon::before {
  54         content: '@{msg-semicolon-separator}';
  55 }
  56
  57 .mw-rollback-link {
  58         &::before {
  59                 content: '@{msg-brackets-start}';
  60         }
  61
  62         &::after {
  63                 content: '@{msg-brackets-end}';
  64         }
  65 }
  66
  67 .mw-diff-edit,
  68 .mw-diff-tool,
  69 .mw-diff-undo,
  70 .comment--without-parentheses,
  71 .mw-changeslist-links,
  72 .mw-diff-bytes,
  73 /* Needed by pages calling ChangeTags::formatSummaryRow (T212613) */
  74 .mw-tag-markers,
  75 .mw-uctop {
  76         &::before {
  77                 content: '@{msg-parentheses-start}';
  78         }
  79
  80         &::after {
  81                 content: '@{msg-parentheses-end}';
  82         }
  83 }
  84
  85 .mw-comment-none {
  86         .mixin-screen-reader-text();
  87 }
  88
  89 .mw-changeslist-links {
  90         display: inline-block;
  91
  92         > span:not( :first-child )::before {
  93                 content: '@{msg-pipe-separator}';
  94         }
  95
  96         // In pages like history, do not add additional brackets where not needed
  97         .mw-rollback-link::before,
  98         .mw-rollback-link::after {
  99                 content: '';
 100         }
 101 }
 102
 103 .mw-tag-marker {
 104         &::after {
 105                 content: '@{msg-comma-separator}';
 106         }
 107
 108         &:last-child::after {
 109                 content: '';
 110         }
 111 }