customize-preview.css (3629B)
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 }