customizer-controls.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. .customize-control-title .dashicons-editor-help {
  2. position: relative;
  3. top: 0.1em;
  4. }
  5. #customize-header-actions .spinner {
  6. margin-left: 4px;
  7. }
  8. /* slider control */
  9. .customize-control-slider input[type=range] {
  10. -webkit-appearance: none;
  11. transition: background .3s;
  12. background-color: rgba(0,0,0,.1);
  13. height: 5px;
  14. width: calc(100% - 74px);
  15. padding: 0;
  16. }
  17. .customize-control-slider input[type=range]:focus {
  18. box-shadow: none;
  19. outline: none;
  20. }
  21. .customize-control-slider input[type=range]:hover {
  22. background-color: rgba(0,0,0,.25);
  23. }
  24. .customize-control-slider input[type=range]::-webkit-slider-thumb {
  25. -webkit-appearance: none;
  26. width: 15px;
  27. height: 15px;
  28. border-radius: 50%;
  29. -webkit-border-radius: 50%;
  30. background-color: #3498D9;
  31. }
  32. .customize-control-slider input[type=range]::-webkit-slider-thumb {
  33. -webkit-appearance: none;
  34. width: 15px;
  35. height: 15px;
  36. border: none;
  37. border-radius: 50%;
  38. background-color: #3498D9;
  39. }
  40. .customize-control-slider input[type=range]::-moz-range-thumb {
  41. width: 15px;
  42. height: 15px;
  43. border: none;
  44. border-radius: 50%;
  45. background-color: #3498D9;
  46. }
  47. .customize-control-slider input[type=range]::-ms-thumb {
  48. width: 15px;
  49. height: 15px;
  50. border-radius: 50%;
  51. border: 0;
  52. background-color: #3498D9;
  53. }
  54. .customize-control-slider input[type=range]::-moz-range-track {
  55. border: inherit;
  56. background: transparent;
  57. }
  58. .customize-control-slider input[type=range]::-ms-track {
  59. border: inherit;
  60. color: transparent;
  61. background: transparent;
  62. }
  63. .customize-control-slider input[type=range]::-ms-fill-lower,
  64. .customize-control-slider input[type=range]::-ms-fill-upper {
  65. background: transparent;
  66. }
  67. .customize-control-slider input[type=range]::-ms-tooltip {
  68. display: none;
  69. }
  70. .customize-control-slider .ast-range-value {
  71. display: inline-block;
  72. padding: 0 5px;
  73. position: relative;
  74. top: 1px;
  75. }
  76. .customize-control-slider input#ast-range-value-input {
  77. width: 42px;
  78. height: 23px;
  79. font-size: 13px;
  80. }
  81. .customize-control-slider .ast-slider-reset {
  82. color: rgba(0,0,0,.2);
  83. float: right;
  84. transition: color .5s ease-in;
  85. }
  86. .customize-control-slider .ast-slider-reset span {
  87. font-size: 16px;
  88. line-height: 22px;
  89. cursor: pointer;
  90. }
  91. .customize-control-slider .ast-slider-reset span:hover {
  92. color: red;
  93. }
  94. /**
  95. * Typography Control Style
  96. */
  97. .customize-pane-child > li[id="customize-control-astra-settings-headings-font-weight"],
  98. .customize-pane-child > li[id="customize-control-astra-settings-headings-text-transform"],
  99. .customize-pane-child > li[id="customize-control-astra-settings-body-font-weight"],
  100. .customize-pane-child > li[id="customize-control-astra-settings-body-text-transform"] {
  101. width: 50%;
  102. display: inline-block;
  103. box-sizing: border-box;
  104. clear: none;
  105. }
  106. .customize-pane-child > li[id="customize-control-astra-settings-headings-font-weight"],
  107. .customize-pane-child > li[id="customize-control-astra-settings-body-font-weight"],
  108. .customize-pane-child > li[id*="-font-weight"] {
  109. padding-right: 5px;
  110. }
  111. .customize-pane-child > li[id="customize-control-astra-settings-headings-text-transform"],
  112. .customize-pane-child > li[id="customize-control-astra-settings-body-text-transform"],
  113. .customize-pane-child > li[id*="-text-transform"] {
  114. padding-left: 5px;
  115. }
  116. .customize-pane-child > li[id="customize-control-astra-settings-headings-font-weight"],
  117. .customize-pane-child > li[id="customize-control-astra-settings-body-font-weight"],
  118. .customize-pane-child > li[id*="-font-weight"] {
  119. padding-left: 0;
  120. }
  121. .rtl .customize-pane-child > li[id="customize-control-astra-settings-headings-text-transform"],
  122. .rtl .customize-pane-child > li[id="customize-control-astra-settings-body-text-transform"],
  123. .rtl .customize-pane-child > li[id*="-text-transform"] {
  124. padding-right: 0;
  125. }
  126. /* WP Beta 5.3 compatibility CSS - Start */
  127. .customize-control select.ast-responsive-select {
  128. height: 30px;
  129. }
  130. .customize-control input[type="number"] {
  131. min-height: 30px;
  132. }
  133. .customize-control input[type="text"].select2-search__field {
  134. line-height: 1;
  135. border-radius: 0;
  136. }
  137. .customize-control input[type="number"].ast-spacing-input,
  138. .customize-control input.ast-border-input {
  139. min-height: 28px;
  140. border-radius: 0;
  141. }
  142. /* WP Beta 5.3 compatibility CSS - Start */
  143. .customize-pane-child > li[id$="-content-layout"] > label,
  144. .customize-pane-child > li[id$="-sidebar-layout"] > label {
  145. -js-display: flex;
  146. display: flex;
  147. }
  148. .customize-pane-child > li[id$="-content-layout"] > label .customize-control-title,
  149. .customize-pane-child > li[id$="-sidebar-layout"] > label .customize-control-title,
  150. .customize-pane-child > li[id$="-content-layout"] > label select,
  151. .customize-pane-child > li[id$="-sidebar-layout"] > label select {
  152. flex: 1;
  153. }
  154. .customize-pane-child > li[id$="-content-layout"] > label select,
  155. .customize-pane-child > li[id$="-sidebar-layout"] > label select {
  156. margin-left: 10px;
  157. }
  158. .customize-pane-child > li[id*="-font-weight"], .customize-pane-child > li[id*="-text-transform"] {
  159. width: 50%;
  160. display: inline-block;
  161. box-sizing: border-box;
  162. clear: none;
  163. }
  164. /**
  165. * Upgred To Astra Pro
  166. */
  167. .control-section-astra-pro h3 {
  168. margin: 0;
  169. padding: 1px 0;
  170. border: 0;
  171. position: relative;
  172. }
  173. .control-section-astra-pro h3 a {
  174. background: #FFF;
  175. display: block;
  176. padding: 11px 10px 12px 14px;
  177. text-decoration: none;
  178. }
  179. .control-section-astra-pro h3 a:after {
  180. content: "\f345";
  181. position: absolute;
  182. top: 11px;
  183. right: 10px;
  184. z-index: 1;
  185. float: right;
  186. border: none;
  187. background: none;
  188. font: normal 20px/1 dashicons;
  189. speak: none;
  190. display: block;
  191. padding: 0;
  192. text-indent: 0;
  193. text-align: center;
  194. -webkit-font-smoothing: antialiased;
  195. -moz-osx-font-smoothing: grayscale;
  196. }
  197. .rtl .control-section-astra-pro h3 a:after {
  198. content: "\f341";
  199. }
  200. .ast-hide{
  201. display: none !important;
  202. }
  203. /* Primary Sub Menu Item Border */
  204. #customize-control-astra-settings-primary-submenu-item-border .ast-border-wrapper{
  205. width: 100%;
  206. }
  207. .actions .button.upload-button {
  208. text-transform: capitalize;
  209. }
  210. .wp-picker-container .iris-square-handle {
  211. z-index: 8;
  212. }
  213. /* Site Identity */
  214. #customize-control-custom_logo .attachment-media-view .button-add-media,
  215. #customize-control-site_icon .attachment-media-view .placeholder,
  216. #customize-control-astra-settings-transparent-header-logo .attachment-media-view .button-add-media {
  217. text-transform: capitalize;
  218. }
  219. /* Color picker clear button size */
  220. .customize-control-ast-color .wp-picker-container .wp-picker-clear,
  221. .customize-control-ast-responsive-color .wp-picker-container .wp-picker-clear,
  222. .customize-control-ast-background .wp-picker-container .wp-picker-clear,
  223. .customize-control-ast-responsive-background .wp-picker-container .wp-picker-clear {
  224. margin-left: 4px;
  225. min-height: 30px;
  226. }
  227. .customize-control-ast-background .wp-picker-container {
  228. display: block;
  229. }