[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: #3582c4 !important;
  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: .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  .wp-custom-header .customize-partial-edit-shortcut button {
  66      left: 2px
  67  }
  68  
  69  .customize-partial-edit-shortcut button svg {
  70      fill: #fff;
  71      min-width: 20px;
  72      min-height: 20px;
  73      width: 20px;
  74      height: 20px;
  75      margin: auto;
  76  }
  77  
  78  .customize-partial-edit-shortcut button:hover {
  79      background: #4f94d4 !important; /* matches primary buttons */
  80  }
  81  
  82  .customize-partial-edit-shortcut button:focus {
  83      box-shadow: 0 0 0 2px #4f94d4;
  84  }
  85  
  86  body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
  87      animation-name: customize-partial-edit-shortcut-bounce-appear;
  88      pointer-events: auto;
  89  }
  90  body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
  91      animation-name: customize-partial-edit-shortcut-bounce-disappear;
  92      pointer-events: none;
  93  }
  94  
  95  .page-sidebar-collapsed .customize-partial-edit-shortcut button,
  96  .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
  97      visibility: hidden;
  98  }
  99  
 100  @keyframes customize-partial-edit-shortcut-bounce-appear {
 101      from, 20%, 40%, 60%, 80%, to {
 102          animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 103      }
 104      0% {
 105          opacity: 0;
 106          transform: scale3d(.3, .3, .3);
 107      }
 108      20% {
 109          transform: scale3d(1.1, 1.1, 1.1);
 110      }
 111      40% {
 112          transform: scale3d(.9, .9, .9);
 113      }
 114      60% {
 115          opacity: 1;
 116          transform: scale3d(1.03, 1.03, 1.03);
 117      }
 118      80% {
 119          transform: scale3d(.97, .97, .97);
 120      }
 121      to {
 122          opacity: 1;
 123          transform: scale3d(1, 1, 1);
 124      }
 125  }
 126  
 127  @keyframes customize-partial-edit-shortcut-bounce-disappear {
 128      from, 20%, 40%, 60%, 80%, to {
 129          animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 130      }
 131      0% {
 132          opacity: 1;
 133          transform: scale3d(1, 1, 1);
 134      }
 135      20% {
 136          transform: scale3d(.97, .97, .97);
 137      }
 138      40% {
 139          opacity: 1;
 140          transform: scale3d(1.03, 1.03, 1.03);
 141      }
 142      60% {
 143          transform: scale3d(.9, .9, .9);
 144      }
 145      80% {
 146          transform: scale3d(1.1, 1.1, 1.1);
 147      }
 148      to {
 149          opacity: 0;
 150          transform: scale3d(.3, .3, .3);
 151      }
 152  }
 153  
 154  @media screen and (max-width: 800px) {
 155      .widget .customize-partial-edit-shortcut button,
 156      .customize-partial-edit-shortcut button {
 157          left: -32px;
 158      }
 159  }
 160  
 161  @media screen and (max-width: 320px) {
 162      .widget .customize-partial-edit-shortcut button,
 163      .customize-partial-edit-shortcut button {
 164          left: -30px;
 165      }
 166  }