[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(.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; // A11y requirement for minimum clickable area.
  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          .no-js & {
  44              display: none;
  45          }
  46  
  47          &.fixed-bottom {
  48              position: fixed;
  49              bottom: 5px; // The bottom property has transition (see below).
  50              right: 5px;
  51  
  52              &.hide:not(:focus) {
  53                  bottom: -80px;
  54              }
  55          }
  56  
  57          &.relative {
  58              position: absolute;
  59              height: 44px;
  60              top: calc(2.4 * var(--global--spacing-vertical) - 44px);
  61              right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
  62  
  63              .admin-bar & {
  64                  top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
  65  
  66                  @media only screen and (max-width: 782px) {
  67                      top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
  68                  }
  69  
  70                  @media only screen and (max-width: 481px) {
  71                      top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
  72                  }
  73              }
  74  
  75              ~ nav {
  76  
  77                  body:not(.primary-navigation-open) & {
  78                      @media only screen and (max-width: 481px) {
  79                          top: calc(44px + 44px);
  80                      }
  81                  }
  82              }
  83          }
  84  
  85          .primary-navigation-open & {
  86              display: none;
  87          }
  88  
  89          &:hover,
  90          &:focus {
  91              color: var(--button--color-background-active);
  92              border: 2px solid var(--button--color-text-active);
  93              background-color: var(--button--color-text-active);
  94          }
  95  
  96          .is-IE & {
  97              display: none;
  98          }
  99  
 100          &.fixed-bottom {
 101              @media (prefers-reduced-motion: no-preference) {
 102                  transition: bottom 0.5s;
 103              }
 104          }
 105      }
 106  }