.customize-partial-refreshing { opacity: 0.25; -webkit-transition: opacity 0.25s; 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: right; width: 1px; /* required to have a size to be focusable in Safari */ height: 1px; padding: 0; margin: -1px -1px 0 0; border: 0; background: transparent; color: transparent; -webkit-box-shadow: none; box-shadow: none; outline: none; z-index: 5; } .widget .customize-partial-edit-shortcut button:active, .customize-partial-edit-shortcut button:active { padding: 0; border: 0; } /* Styles for the actual shortcut */ .widget .customize-partial-edit-shortcut button, .customize-partial-edit-shortcut button { position: absolute; right: -36px; color: #fff; width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 18px; z-index: 5; background-color: #0085ba; background: #0085ba; -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; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; padding: 0; -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; } .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, .customize-partial-edit-shortcut button:focus { background: #008ec2; /* matches primary buttons */ border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */ } 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; } .customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button { right: 0; } @-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) { .customize-partial-edit-shortcut button { right: -18px; /* Assume there will be less of a margin available on smaller screens */ } }