[Summary view] [Print] [Text view]

   1  /* OS dark theme preference */
   2  @media only screen {
   3  
   4      .is-dark-theme.is-dark-theme {
   5          --global--color-background: var(--global--color-dark-gray);
   6          --global--color-primary: var(--global--color-light-gray);
   7          --global--color-secondary: var(--global--color-light-gray);
   8          --button--color-text: var(--global--color-background);
   9          --button--color-text-hover: var(--global--color-secondary);
  10          --button--color-text-active: var(--global--color-secondary);
  11          --button--color-background: var(--global--color-secondary);
  12          --button--color-background-active: var(--global--color-background);
  13          --global--color-border: #9ea1a7;
  14  
  15          /* Block: Table */
  16          --table--stripes-border-color: rgba(240, 240, 240, 0.15);
  17          --table--stripes-background-color: rgba(240, 240, 240, 0.15);
  18      }
  19  
  20      .is-dark-theme img {
  21          filter: brightness(0.85) contrast(1.1);
  22      }
  23  
  24      .respect-color-scheme-preference.is-dark-theme body {
  25          background-color: var(--global--color-background);
  26      }
  27  
  28      #dark-mode-toggler {
  29          cursor: pointer;
  30          display: flex;
  31          align-items: center;
  32          justify-content: center;
  33          font-size: var(--global--font-size-xs);
  34          padding: 0.5em;
  35          min-height: 44px;
  36          min-width: max-content;
  37          border: 2px solid currentColor;
  38          box-shadow: none;
  39          background: var(--button--color-text);
  40          color: var(--button--color-background);
  41          z-index: 9998;
  42      }
  43  
  44      .no-js #dark-mode-toggler {
  45          display: none;
  46      }
  47  
  48      #dark-mode-toggler.fixed-bottom {
  49          position: fixed;
  50          bottom: 5px;
  51          right: 5px;
  52      }
  53  
  54      #dark-mode-toggler.fixed-bottom.hide:not(:focus) {
  55          bottom: -80px;
  56      }
  57  
  58      #dark-mode-toggler.relative {
  59          position: absolute;
  60          height: 44px;
  61          top: calc(2.4 * var(--global--spacing-vertical) - 44px);
  62          right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
  63      }
  64  
  65      .admin-bar #dark-mode-toggler.relative {
  66          top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
  67      }
  68  }
  69  @media only screen and (max-width: 782px) {
  70  
  71      .admin-bar #dark-mode-toggler.relative {
  72          top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
  73      }
  74  }
  75  @media only screen and (max-width: 481px) {
  76  
  77      .admin-bar #dark-mode-toggler.relative {
  78          top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
  79      }
  80  }
  81  @media only screen and (max-width: 481px) {
  82  
  83      body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav {
  84          top: 88px;
  85      }
  86  }
  87  @media only screen {
  88  
  89      .primary-navigation-open #dark-mode-toggler {
  90          display: none;
  91      }
  92  
  93      #dark-mode-toggler:hover,
  94      #dark-mode-toggler:focus {
  95          color: var(--button--color-background-active);
  96          border: 2px solid var(--button--color-text-active);
  97          background-color: var(--button--color-text-active);
  98      }
  99  
 100      .is-IE #dark-mode-toggler {
 101          display: none;
 102      }
 103  }
 104  @media only screen and (prefers-reduced-motion: no-preference) {
 105  
 106      #dark-mode-toggler.fixed-bottom {
 107          transition: bottom 0.5s;
 108      }
 109  }