wp-includes/css/customize-preview.css

   1 .customize-partial-refreshing {
   2         opacity: 0.25;
   3         -webkit-transition: opacity 0.25s;
   4         transition: opacity 0.25s;
   5         cursor: progress;
   6 }
   7
   8 /* Override highlight when refreshing */
   9 .customize-partial-refreshing.widget-customizer-highlighted-widget {
  10         -webkit-box-shadow: none;
  11         box-shadow: none;
  12 }
  13
  14 /* Make shortcut buttons essentially invisible */
  15 .widget .customize-partial-edit-shortcut,
  16 .customize-partial-edit-shortcut {
  17         position: absolute;
  18         float: left;
  19         width: 1px; /* required to have a size to be focusable in Safari */
  20         height: 1px;
  21         padding: 0;
  22         margin: -1px 0 0 -1px;
  23         border: 0;
  24         background: transparent;
  25         color: transparent;
  26         -webkit-box-shadow: none;
  27         box-shadow: none;
  28         outline: none;
  29         z-index: 5;
  30 }
  31
  32 /**
  33  * Styles for the actual shortcut
  34  *
  35  * Note that some properties are overly verbose to prevent theme interference.
  36  */
  37 .widget .customize-partial-edit-shortcut button,
  38 .customize-partial-edit-shortcut button {
  39         position: absolute;
  40         left: -30px;
  41         top: 2px;
  42         color: #fff;
  43         width: 30px;
  44         height: 30px;
  45         min-width: 30px;
  46         min-height: 30px;
  47         line-height: 1em !important;
  48         font-size: 18px;
  49         z-index: 5;
  50         background: #0085ba !important;
  51         -webkit-border-radius: 50%;
  52         border-radius: 50%;
  53         border: 2px solid #fff;
  54         -webkit-box-shadow: 0 2px 1px rgba(46,68,83,0.15);
  55         box-shadow: 0 2px 1px rgba(46,68,83,0.15);
  56         text-align: center;
  57         cursor: pointer;
  58         -webkit-box-sizing: border-box;
  59         -moz-box-sizing: border-box;
  60         box-sizing: border-box;
  61         padding: 3px;
  62         -webkit-animation-fill-mode: both;
  63         animation-fill-mode: both;
  64         -webkit-animation-duration: .4s;
  65         animation-duration: .4s;
  66         opacity: 0;
  67         pointer-events: none;
  68         text-shadow: 0 -1px 1px #006799,
  69                      1px 0 1px #006799,
  70                      0 1px 1px #006799,
  71                      -1px 0 1px #006799;
  72 }
  73 .wp-custom-header .customize-partial-edit-shortcut button {
  74         left: 2px
  75 }
  76
  77 .customize-partial-edit-shortcut button svg {
  78         fill: #fff;
  79         min-width: 20px;
  80         min-height: 20px;
  81         width: 20px;
  82         height: 20px;
  83         margin: auto;
  84 }
  85
  86 .customize-partial-edit-shortcut button:hover {
  87         background: #008ec2 !important; /* matches primary buttons */
  88 }
  89
  90 .customize-partial-edit-shortcut button:focus {
  91         -webkit-box-shadow: 0 0 0 2px #008ec2;
  92         box-shadow: 0 0 0 2px #008ec2;
  93 }
  94
  95 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
  96         -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear;
  97         animation-name: customize-partial-edit-shortcut-bounce-appear;
  98         pointer-events: auto;
  99 }
 100 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
 101         -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear;
 102         animation-name: customize-partial-edit-shortcut-bounce-disappear;
 103         pointer-events: none;
 104 }
 105
 106 .page-sidebar-collapsed .customize-partial-edit-shortcut button,
 107 .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
 108         visibility: hidden;
 109 }
 110
 111 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
 112         from, 20%, 40%, 60%, 80%, to {
 113                 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 114                 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 115         }
 116         0% {
 117                 opacity: 0;
 118                 -webkit-transform: scale3d(.3, .3, .3);
 119                 transform: scale3d(.3, .3, .3);
 120         }
 121         20% {
 122                 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 123                 transform: scale3d(1.1, 1.1, 1.1);
 124         }
 125         40% {
 126                 -webkit-transform: scale3d(.9, .9, .9);
 127                 transform: scale3d(.9, .9, .9);
 128         }
 129         60% {
 130                 opacity: 1;
 131                 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 132                 transform: scale3d(1.03, 1.03, 1.03);
 133         }
 134         80% {
 135                 -webkit-transform: scale3d(.97, .97, .97);
 136                 transform: scale3d(.97, .97, .97);
 137         }
 138         to {
 139                 opacity: 1;
 140                 -webkit-transform: scale3d(1, 1, 1);
 141                 transform: scale3d(1, 1, 1);
 142         }
 143 }
 144
 145 @keyframes customize-partial-edit-shortcut-bounce-appear {
 146         from, 20%, 40%, 60%, 80%, to {
 147                 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 148                 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 149         }
 150         0% {
 151                 opacity: 0;
 152                 -webkit-transform: scale3d(.3, .3, .3);
 153                 transform: scale3d(.3, .3, .3);
 154         }
 155         20% {
 156                 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 157                 transform: scale3d(1.1, 1.1, 1.1);
 158         }
 159         40% {
 160                 -webkit-transform: scale3d(.9, .9, .9);
 161                 transform: scale3d(.9, .9, .9);
 162         }
 163         60% {
 164                 opacity: 1;
 165                 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 166                 transform: scale3d(1.03, 1.03, 1.03);
 167         }
 168         80% {
 169                 -webkit-transform: scale3d(.97, .97, .97);
 170                 transform: scale3d(.97, .97, .97);
 171         }
 172         to {
 173                 opacity: 1;
 174                 -webkit-transform: scale3d(1, 1, 1);
 175                 transform: scale3d(1, 1, 1);
 176         }
 177 }
 178
 179 @-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear {
 180         from, 20%, 40%, 60%, 80%, to {
 181                 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 182                 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 183         }
 184         0% {
 185                 opacity: 1;
 186                 -webkit-transform: scale3d(1, 1, 1);
 187                 transform: scale3d(1, 1, 1);
 188         }
 189         20% {
 190                 -webkit-transform: scale3d(.97, .97, .97);
 191                 transform: scale3d(.97, .97, .97);
 192         }
 193         40% {
 194                 opacity: 1;
 195                 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 196                 transform: scale3d(1.03, 1.03, 1.03);
 197         }
 198         60% {
 199                 -webkit-transform: scale3d(.9, .9, .9);
 200                 transform: scale3d(.9, .9, .9);
 201         }
 202         80% {
 203                 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 204                 transform: scale3d(1.1, 1.1, 1.1);
 205         }
 206         to {
 207                 opacity: 0;
 208                 -webkit-transform: scale3d(.3, .3, .3);
 209                 transform: scale3d(.3, .3, .3);
 210         }
 211 }
 212
 213 @keyframes customize-partial-edit-shortcut-bounce-disappear {
 214         from, 20%, 40%, 60%, 80%, to {
 215                 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 216                 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 217         }
 218         0% {
 219                 opacity: 1;
 220                 -webkit-transform: scale3d(1, 1, 1);
 221                 transform: scale3d(1, 1, 1);
 222         }
 223         20% {
 224                 -webkit-transform: scale3d(.97, .97, .97);
 225                 transform: scale3d(.97, .97, .97);
 226         }
 227         40% {
 228                 opacity: 1;
 229                 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 230                 transform: scale3d(1.03, 1.03, 1.03);
 231         }
 232         60% {
 233                 -webkit-transform: scale3d(.9, .9, .9);
 234                 transform: scale3d(.9, .9, .9);
 235         }
 236         80% {
 237                 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 238                 transform: scale3d(1.1, 1.1, 1.1);
 239         }
 240         to {
 241                 opacity: 0;
 242                 -webkit-transform: scale3d(.3, .3, .3);
 243                 transform: scale3d(.3, .3, .3);
 244         }
 245 }
 246
 247 @media screen and (max-width:800px) {
 248         .widget .customize-partial-edit-shortcut button,
 249         .customize-partial-edit-shortcut button {
 250                 left: -32px;
 251         }
 252 }
 253
 254 @media screen and (max-width:320px) {
 255         body.customize-partial-edit-shortcuts-shown .site-title {
 256                 padding-left: 10px;
 257         }
 258
 259         body.customize-partial-edit-shortcuts-shown .widget-area .widget {
 260                 padding-left: 10px;
 261         }
 262
 263         .widget .customize-partial-edit-shortcut button,
 264         .customize-partial-edit-shortcut button {
 265                 left: -30px;
 266         }
 267 }