customize-preview-rtl.css 6.1 KB

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