transition: opacity 0.25s;
cursor: progress;
}
+
+/* Override highlight when refreshing */
+.customize-partial-refreshing.widget-customizer-highlighted-widget {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Make shortcut buttons essentially invisible */
+.widget .customize-partial-edit-shortcut,
+.customize-partial-edit-shortcut {
+ position: absolute;
+ float: left;
+ width: 1px; /* required to have a size to be focusable in Safari */
+ height: 1px;
+ padding: 0;
+ margin: -1px 0 0 -1px;
+ border: 0;
+ background: transparent;
+ color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+ z-index: 5;
+}
+
+/**
+ * Styles for the actual shortcut
+ *
+ * Note that some properties are overly verbose to prevent theme interference.
+ */
+.widget .customize-partial-edit-shortcut button,
+.customize-partial-edit-shortcut button {
+ position: absolute;
+ left: -30px;
+ top: 2px;
+ color: #fff;
+ width: 30px;
+ height: 30px;
+ min-width: 30px;
+ min-height: 30px;
+ line-height: 1em !important;
+ font-size: 18px;
+ z-index: 5;
+ background: #0085ba !important;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ border: 2px solid #fff;
+ -webkit-box-shadow: 0 2px 1px rgba(46,68,83,0.15);
+ box-shadow: 0 2px 1px rgba(46,68,83,0.15);
+ text-align: center;
+ cursor: pointer;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 3px;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: .4s;
+ animation-duration: .4s;
+ opacity: 0;
+ pointer-events: none;
+ text-shadow: 0 -1px 1px #006799,
+ 1px 0 1px #006799,
+ 0 1px 1px #006799,
+ -1px 0 1px #006799;
+}
+.wp-custom-header .customize-partial-edit-shortcut button {
+ left: 2px
+}
+
+.customize-partial-edit-shortcut button svg {
+ fill: #fff;
+ min-width: 20px;
+ min-height: 20px;
+ width: 20px;
+ height: 20px;
+ margin: auto;
+}
+
+.customize-partial-edit-shortcut button:hover {
+ background: #008ec2 !important; /* matches primary buttons */
+}
+
+.customize-partial-edit-shortcut button:focus {
+ -webkit-box-shadow: 0 0 0 2px #008ec2;
+ box-shadow: 0 0 0 2px #008ec2;
+}
+
+body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
+ -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear;
+ animation-name: customize-partial-edit-shortcut-bounce-appear;
+ pointer-events: auto;
+}
+body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
+ -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear;
+ animation-name: customize-partial-edit-shortcut-bounce-disappear;
+ pointer-events: none;
+}
+
+.page-sidebar-collapsed .customize-partial-edit-shortcut button,
+.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
+ visibility: hidden;
+}
+
+@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
+ from, 20%, 40%, 60%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+ 40% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+ 80% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ }
+ to {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes customize-partial-edit-shortcut-bounce-appear {
+ from, 20%, 40%, 60%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+ 40% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+ 80% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ }
+ to {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear {
+ from, 20%, 40%, 60%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+ 0% {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+ 20% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ }
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+ 60% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+ 80% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+}
+
+@keyframes customize-partial-edit-shortcut-bounce-disappear {
+ from, 20%, 40%, 60%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+ 0% {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+ 20% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ }
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+ 60% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+ 80% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+}
+
+@media screen and (max-width:800px) {
+ .widget .customize-partial-edit-shortcut button,
+ .customize-partial-edit-shortcut button {
+ left: -32px;
+ }
+}
+
+@media screen and (max-width:320px) {
+ .widget .customize-partial-edit-shortcut button,
+ .customize-partial-edit-shortcut button {
+ left: -30px;
+ }
+}