| | .customize-partial-refreshing { |
| | opacity: 0.25; |
| | transition: opacity 0.25s; |
| | cursor: progress; |
| | } |
| |
|
| | |
| | .customize-partial-refreshing.widget-customizer-highlighted-widget { |
| | box-shadow: none; |
| | } |
| |
|
| | |
| | .widget .customize-partial-edit-shortcut, |
| | .customize-partial-edit-shortcut { |
| | position: absolute; |
| | float: left; |
| | width: 1px; |
| | height: 1px; |
| | padding: 0; |
| | margin: -1px 0 0 -1px; |
| | border: 0; |
| | background: transparent; |
| | color: transparent; |
| | box-shadow: none; |
| | outline: none; |
| | z-index: 5; |
| | } |
| |
|
| | |
| | |
| | |
| | |
| | |
| | .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: 1 !important; |
| | font-size: 18px; |
| | z-index: 5; |
| | background: #3582c4 !important; |
| | border-radius: 50%; |
| | border: 2px solid #fff; |
| | box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15); |
| | text-align: center; |
| | cursor: pointer; |
| | box-sizing: border-box; |
| | padding: 3px; |
| | animation-fill-mode: both; |
| | animation-duration: .4s; |
| | opacity: 0; |
| | pointer-events: none; |
| | text-shadow: |
| | 0 -1px 1px #135e96, |
| | 1px 0 1px #135e96, |
| | 0 1px 1px #135e96, |
| | -1px 0 1px #135e96; |
| | } |
| | .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: #4f94d4 !important; |
| | } |
| |
|
| | .customize-partial-edit-shortcut button:focus { |
| | box-shadow: 0 0 0 2px #4f94d4; |
| | } |
| |
|
| | body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button { |
| | animation-name: customize-partial-edit-shortcut-bounce-appear; |
| | pointer-events: auto; |
| | } |
| | body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button { |
| | 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; |
| | } |
| |
|
| | @keyframes customize-partial-edit-shortcut-bounce-appear { |
| | from, 20%, 40%, 60%, 80%, to { |
| | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
| | } |
| | 0% { |
| | opacity: 0; |
| | transform: scale3d(.3, .3, .3); |
| | } |
| | 20% { |
| | transform: scale3d(1.1, 1.1, 1.1); |
| | } |
| | 40% { |
| | transform: scale3d(.9, .9, .9); |
| | } |
| | 60% { |
| | opacity: 1; |
| | transform: scale3d(1.03, 1.03, 1.03); |
| | } |
| | 80% { |
| | transform: scale3d(.97, .97, .97); |
| | } |
| | to { |
| | opacity: 1; |
| | transform: scale3d(1, 1, 1); |
| | } |
| | } |
| |
|
| | @keyframes customize-partial-edit-shortcut-bounce-disappear { |
| | from, 20%, 40%, 60%, 80%, to { |
| | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
| | } |
| | 0% { |
| | opacity: 1; |
| | transform: scale3d(1, 1, 1); |
| | } |
| | 20% { |
| | transform: scale3d(.97, .97, .97); |
| | } |
| | 40% { |
| | opacity: 1; |
| | transform: scale3d(1.03, 1.03, 1.03); |
| | } |
| | 60% { |
| | transform: scale3d(.9, .9, .9); |
| | } |
| | 80% { |
| | transform: scale3d(1.1, 1.1, 1.1); |
| | } |
| | to { |
| | opacity: 0; |
| | 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; |
| | } |
| | } |
| |
|