[Summary view] [Print] [Text view]

   1  .customize-partial-refreshing {
   2      opacity: 0.25;
   3      transition: opacity 0.25s;
   4      cursor: progress;
   5  }
   6  
   7  /* Override highlight when refreshing */
   8  .customize-partial-refreshing.widget-customizer-highlighted-widget {
   9      box-shadow: none;
  10  }
  11  
  12  /* Make shortcut buttons essentially invisible */
  13  .widget .customize-partial-edit-shortcut,
  14  .customize-partial-edit-shortcut {
  15      position: absolute;
  16      float: left;
  17      width: 1px; /* required to have a size to be focusable in Safari */
  18      height: 1px;
  19      padding: 0;
  20      margin: -1px 0 0 -1px;
  21      border: 0;
  22      background: transparent;
  23      color: transparent;
  24      box-shadow: none;
  25      outline: none;
  26      z-index: 5;
  27  }
  28  
  29  /**
  30   * Styles for the actual shortcut
  31   *
  32   * Note that some properties are overly verbose to prevent theme interference.
  33   */
  34  .widget .customize-partial-edit-shortcut button,
  35  .customize-partial-edit-shortcut button {
  36      position: absolute;
  37      left: -30px;
  38      top: 2px;
  39      color: #fff;
  40      width: 30px;
  41      height: 30px;
  42      min-width: 30px;
  43      min-height: 30px;
  44      line-height: 1 !important;
  45      font-size: 18px;
  46      z-index: 5;
  47      background: var(--wp-admin-theme-color, #3858e9);
  48      border-radius: 50%;
  49      border: 2px solid #fff;
  50      box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15);
  51      text-align: center;
  52      cursor: pointer;
  53      box-sizing: border-box;
  54      padding: 3px;
  55      animation-fill-mode: both;
  56      animation-duration: 0.4s;
  57      opacity: 0;
  58      pointer-events: none;
  59      text-shadow:
  60          0 -1px 1px #135e96,
  61          1px 0 1px #135e96,
  62          0 1px 1px #135e96,
  63          -1px 0 1px #135e96;
  64  }
  65  
  66  .wp-custom-header .customize-partial-edit-shortcut button {
  67      left: 2px;
  68  }
  69  
  70  .customize-partial-edit-shortcut button svg {
  71      fill: #fff;
  72      min-width: 20px;
  73      min-height: 20px;
  74      width: 20px;
  75      height: 20px;
  76      margin: auto;
  77  }
  78  
  79  .customize-partial-edit-shortcut button:hover {
  80      background: var(--wp-admin-theme-color-darker-10, #2145e6) !important; /* matches primary buttons */
  81  }
  82  
  83  .customize-partial-edit-shortcut button:focus {
  84      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
  85  }
  86  
  87  body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
  88      animation-name: customize-partial-edit-shortcut-bounce-appear;
  89      pointer-events: auto;
  90  }
  91  
  92  body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
  93      animation-name: customize-partial-edit-shortcut-bounce-disappear;
  94      pointer-events: none;
  95  }
  96  
  97  .page-sidebar-collapsed .customize-partial-edit-shortcut button,
  98  .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
  99      visibility: hidden;
 100  }
 101  
 102  /* stylelint-disable keyframe-block-no-duplicate-selectors -- These keyframes intentionally have duplicate selectors for better readability. */
 103  @keyframes customize-partial-edit-shortcut-bounce-appear {
 104      from,
 105      20%,
 106      40%,
 107      60%,
 108      80%,
 109      to {
 110          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 111      }
 112  
 113      0% {
 114          opacity: 0;
 115          transform: scale3d(0.3, 0.3, 0.3);
 116      }
 117  
 118      20% {
 119          transform: scale3d(1.1, 1.1, 1.1);
 120      }
 121  
 122      40% {
 123          transform: scale3d(0.9, 0.9, 0.9);
 124      }
 125  
 126      60% {
 127          opacity: 1;
 128          transform: scale3d(1.03, 1.03, 1.03);
 129      }
 130  
 131      80% {
 132          transform: scale3d(0.97, 0.97, 0.97);
 133      }
 134  
 135      to {
 136          opacity: 1;
 137          transform: scale3d(1, 1, 1);
 138      }
 139  }
 140  
 141  @keyframes customize-partial-edit-shortcut-bounce-disappear {
 142      from,
 143      20%,
 144      40%,
 145      60%,
 146      80%,
 147      to {
 148          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 149      }
 150  
 151      0% {
 152          opacity: 1;
 153          transform: scale3d(1, 1, 1);
 154      }
 155  
 156      20% {
 157          transform: scale3d(0.97, 0.97, 0.97);
 158      }
 159  
 160      40% {
 161          opacity: 1;
 162          transform: scale3d(1.03, 1.03, 1.03);
 163      }
 164  
 165      60% {
 166          transform: scale3d(0.9, 0.9, 0.9);
 167      }
 168  
 169      80% {
 170          transform: scale3d(1.1, 1.1, 1.1);
 171      }
 172  
 173      to {
 174          opacity: 0;
 175          transform: scale3d(0.3, 0.3, 0.3);
 176      }
 177  }
 178  /* stylelint-enable */
 179  
 180  @media screen and (max-width: 800px) {
 181      .widget .customize-partial-edit-shortcut button,
 182      .customize-partial-edit-shortcut button {
 183          left: -32px;
 184      }
 185  }
 186  
 187  @media screen and (max-width: 320px) {
 188      .widget .customize-partial-edit-shortcut button,
 189      .customize-partial-edit-shortcut button {
 190          left: -30px;
 191      }
 192  }