resources/src/mediawiki.content.json.less

   1 /*!
   2  * CSS for styling HTML-formatted JSON Schema objects
   3  *
   4  * @file
   5  * @author Munaf Assaf <massaf@wikimedia.org>
   6  */
   7 /* stylelint-disable selector-class-pattern */
   8 @import 'mediawiki.skin.variables.less';
   9 @import 'mediawiki.mixins.less';
  10
  11 .mw-json {
  12         border-collapse: collapse;
  13         border-spacing: 0;
  14         font-style: normal;
  15
  16         th,
  17         td {
  18                 border: @border-base;
  19                 /* TODO: Re-evaluate whether we should keep this over-ride or switch to ems */
  20                 /* stylelint-disable-next-line declaration-property-unit-disallowed-list */
  21                 font-size: 16px;
  22                 padding: 0.5em 1em;
  23         }
  24
  25         tr {
  26                 background-color: @background-color-neutral;
  27                 margin-bottom: 0.5em;
  28         }
  29
  30         th {
  31                 background-color: @background-color-base;
  32                 font-weight: normal;
  33                 vertical-align: top;
  34
  35                 span {
  36                         .position-sticky();
  37                         top: 0.5em;
  38                 }
  39         }
  40 }
  41
  42 .mw-json-value,
  43 .mw-json-single-value {
  44         background-color: #dcfae3;
  45         font-family: monospace, monospace;
  46         white-space: pre-wrap;
  47
  48         html.skin-theme-clientpref-night & {
  49                 @media screen {
  50                         background-color: @background-color-transparent;
  51                 }
  52         }
  53
  54         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  55         @media screen and ( prefers-color-scheme: dark ) {
  56                 html.skin-theme-clientpref-os & {
  57                         background-color: @background-color-transparent;
  58                 }
  59         }
  60 }
  61
  62 .mw-json-single-value {
  63         background-color: @background-color-neutral;
  64 }
  65
  66 .mw-json-empty {
  67         background-color: @background-color-base;
  68         font-style: italic;
  69 }