You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

166 lines
3.5 KiB

1 year ago
  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: left;
  15. width: 1px; /* required to have a size to be focusable in Safari */
  16. height: 1px;
  17. padding: 0;
  18. margin: -1px 0 0 -1px;
  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. left: -30px;
  35. top: 2px;
  36. color: #fff;
  37. width: 30px;
  38. height: 30px;
  39. min-width: 30px;
  40. min-height: 30px;
  41. line-height: 1 !important;
  42. font-size: 18px;
  43. z-index: 5;
  44. background: #3582c4 !important;
  45. border-radius: 50%;
  46. border: 2px solid #fff;
  47. box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15);
  48. text-align: center;
  49. cursor: pointer;
  50. box-sizing: border-box;
  51. padding: 3px;
  52. animation-fill-mode: both;
  53. animation-duration: .4s;
  54. opacity: 0;
  55. pointer-events: none;
  56. text-shadow:
  57. 0 -1px 1px #135e96,
  58. 1px 0 1px #135e96,
  59. 0 1px 1px #135e96,
  60. -1px 0 1px #135e96;
  61. }
  62. .wp-custom-header .customize-partial-edit-shortcut button {
  63. left: 2px
  64. }
  65. .customize-partial-edit-shortcut button svg {
  66. fill: #fff;
  67. min-width: 20px;
  68. min-height: 20px;
  69. width: 20px;
  70. height: 20px;
  71. margin: auto;
  72. }
  73. .customize-partial-edit-shortcut button:hover {
  74. background: #4f94d4 !important; /* matches primary buttons */
  75. }
  76. .customize-partial-edit-shortcut button:focus {
  77. box-shadow: 0 0 0 2px #4f94d4;
  78. }
  79. body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
  80. animation-name: customize-partial-edit-shortcut-bounce-appear;
  81. pointer-events: auto;
  82. }
  83. body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
  84. animation-name: customize-partial-edit-shortcut-bounce-disappear;
  85. pointer-events: none;
  86. }
  87. .page-sidebar-collapsed .customize-partial-edit-shortcut button,
  88. .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
  89. visibility: hidden;
  90. }
  91. @keyframes customize-partial-edit-shortcut-bounce-appear {
  92. from, 20%, 40%, 60%, 80%, to {
  93. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  94. }
  95. 0% {
  96. opacity: 0;
  97. transform: scale3d(.3, .3, .3);
  98. }
  99. 20% {
  100. transform: scale3d(1.1, 1.1, 1.1);
  101. }
  102. 40% {
  103. transform: scale3d(.9, .9, .9);
  104. }
  105. 60% {
  106. opacity: 1;
  107. transform: scale3d(1.03, 1.03, 1.03);
  108. }
  109. 80% {
  110. transform: scale3d(.97, .97, .97);
  111. }
  112. to {
  113. opacity: 1;
  114. transform: scale3d(1, 1, 1);
  115. }
  116. }
  117. @keyframes customize-partial-edit-shortcut-bounce-disappear {
  118. from, 20%, 40%, 60%, 80%, to {
  119. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  120. }
  121. 0% {
  122. opacity: 1;
  123. transform: scale3d(1, 1, 1);
  124. }
  125. 20% {
  126. transform: scale3d(.97, .97, .97);
  127. }
  128. 40% {
  129. opacity: 1;
  130. transform: scale3d(1.03, 1.03, 1.03);
  131. }
  132. 60% {
  133. transform: scale3d(.9, .9, .9);
  134. }
  135. 80% {
  136. transform: scale3d(1.1, 1.1, 1.1);
  137. }
  138. to {
  139. opacity: 0;
  140. transform: scale3d(.3, .3, .3);
  141. }
  142. }
  143. @media screen and (max-width: 800px) {
  144. .widget .customize-partial-edit-shortcut button,
  145. .customize-partial-edit-shortcut button {
  146. left: -32px;
  147. }
  148. }
  149. @media screen and (max-width: 320px) {
  150. .widget .customize-partial-edit-shortcut button,
  151. .customize-partial-edit-shortcut button {
  152. left: -30px;
  153. }
  154. }