[Summary view] [Print] [Text view]

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