customize-preview-rtl.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /*! This file is auto-generated */
  2. .customize-partial-refreshing {
  3. opacity: 0.25;
  4. transition: opacity 0.25s;
  5. cursor: progress;
  6. }
  7. /* Override highlight when refreshing */
  8. .customize-partial-refreshing.widget-customizer-highlighted-widget {
  9. box-shadow: none;
  10. }
  11. /* Make shortcut buttons essentially invisible */
  12. .widget .customize-partial-edit-shortcut,
  13. .customize-partial-edit-shortcut {
  14. position: absolute;
  15. float: right;
  16. width: 1px; /* required to have a size to be focusable in Safari */
  17. height: 1px;
  18. padding: 0;
  19. margin: -1px -1px 0 0;
  20. border: 0;
  21. background: transparent;
  22. color: transparent;
  23. box-shadow: none;
  24. outline: none;
  25. z-index: 5;
  26. }
  27. /**
  28. * Styles for the actual shortcut
  29. *
  30. * Note that some properties are overly verbose to prevent theme interference.
  31. */
  32. .widget .customize-partial-edit-shortcut button,
  33. .customize-partial-edit-shortcut button {
  34. position: absolute;
  35. right: -30px;
  36. top: 2px;
  37. color: #fff;
  38. width: 30px;
  39. height: 30px;
  40. min-width: 30px;
  41. min-height: 30px;
  42. line-height: 1 !important;
  43. font-size: 18px;
  44. z-index: 5;
  45. background: #3582c4 !important;
  46. border-radius: 50%;
  47. border: 2px solid #fff;
  48. box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15);
  49. text-align: center;
  50. cursor: pointer;
  51. box-sizing: border-box;
  52. padding: 3px;
  53. animation-fill-mode: both;
  54. animation-duration: .4s;
  55. opacity: 0;
  56. pointer-events: none;
  57. text-shadow:
  58. 0 -1px 1px #135e96,
  59. -1px 0 1px #135e96,
  60. 0 1px 1px #135e96,
  61. 1px 0 1px #135e96;
  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: #4f94d4 !important; /* matches primary buttons */
  76. }
  77. .customize-partial-edit-shortcut button:focus {
  78. box-shadow: 0 0 0 2px #4f94d4;
  79. }
  80. body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
  81. animation-name: customize-partial-edit-shortcut-bounce-appear;
  82. pointer-events: auto;
  83. }
  84. body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
  85. animation-name: customize-partial-edit-shortcut-bounce-disappear;
  86. pointer-events: none;
  87. }
  88. .page-sidebar-collapsed .customize-partial-edit-shortcut button,
  89. .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
  90. visibility: hidden;
  91. }
  92. @keyframes customize-partial-edit-shortcut-bounce-appear {
  93. from, 20%, 40%, 60%, 80%, to {
  94. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  95. }
  96. 0% {
  97. opacity: 0;
  98. transform: scale3d(.3, .3, .3);
  99. }
  100. 20% {
  101. transform: scale3d(1.1, 1.1, 1.1);
  102. }
  103. 40% {
  104. transform: scale3d(.9, .9, .9);
  105. }
  106. 60% {
  107. opacity: 1;
  108. transform: scale3d(1.03, 1.03, 1.03);
  109. }
  110. 80% {
  111. transform: scale3d(.97, .97, .97);
  112. }
  113. to {
  114. opacity: 1;
  115. transform: scale3d(1, 1, 1);
  116. }
  117. }
  118. @keyframes customize-partial-edit-shortcut-bounce-disappear {
  119. from, 20%, 40%, 60%, 80%, to {
  120. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  121. }
  122. 0% {
  123. opacity: 1;
  124. transform: scale3d(1, 1, 1);
  125. }
  126. 20% {
  127. transform: scale3d(.97, .97, .97);
  128. }
  129. 40% {
  130. opacity: 1;
  131. transform: scale3d(1.03, 1.03, 1.03);
  132. }
  133. 60% {
  134. transform: scale3d(.9, .9, .9);
  135. }
  136. 80% {
  137. transform: scale3d(1.1, 1.1, 1.1);
  138. }
  139. to {
  140. opacity: 0;
  141. transform: scale3d(.3, .3, .3);
  142. }
  143. }
  144. @media screen and (max-width: 800px) {
  145. .widget .customize-partial-edit-shortcut button,
  146. .customize-partial-edit-shortcut button {
  147. right: -32px;
  148. }
  149. }
  150. @media screen and (max-width: 320px) {
  151. .widget .customize-partial-edit-shortcut button,
  152. .customize-partial-edit-shortcut button {
  153. right: -30px;
  154. }
  155. }