customize-widgets.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. .wp-full-overlay-sidebar {
  2. overflow: visible;
  3. }
  4. /**
  5. * Hide all sidebar sections by default, only show them (via JS) once the
  6. * preview loads and we know whether the sidebars are used in the template.
  7. */
  8. .control-section.control-section-sidebar,
  9. .customize-control-sidebar_widgets label,
  10. .customize-control-sidebar_widgets .hide-if-js {
  11. /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */
  12. display: none;
  13. }
  14. .control-section.control-section-sidebar .accordion-section-content.ui-sortable {
  15. overflow: visible;
  16. }
  17. /* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */
  18. .customize-control-widget_form .widget-top {
  19. background: #fff;
  20. transition: opacity 0.5s;
  21. }
  22. .customize-control .widget-action {
  23. color: #787c82;
  24. }
  25. .customize-control .widget-top:hover .widget-action,
  26. .customize-control .widget-action:focus {
  27. color: #1d2327;
  28. }
  29. .customize-control-widget_form:not(.widget-rendered) .widget-top {
  30. opacity: 0.5;
  31. }
  32. .customize-control-widget_form .widget-control-save {
  33. display: none;
  34. }
  35. .customize-control-widget_form .spinner {
  36. visibility: hidden;
  37. margin-top: 0;
  38. }
  39. .customize-control-widget_form.previewer-loading .spinner {
  40. visibility: visible;
  41. }
  42. .customize-control-widget_form.widget-form-disabled .widget-content {
  43. opacity: 0.7;
  44. pointer-events: none;
  45. -webkit-user-select: none;
  46. user-select: none;
  47. }
  48. .customize-control-widget_form .widget {
  49. margin-bottom: 0;
  50. }
  51. .customize-control-widget_form.wide-widget-control .widget-inside {
  52. position: fixed;
  53. left: 299px;
  54. top: 25%;
  55. border: 1px solid #dcdcde;
  56. overflow: auto;
  57. }
  58. .customize-control-widget_form.wide-widget-control .widget-inside > .form {
  59. padding: 20px;
  60. }
  61. .customize-control-widget_form.wide-widget-control .widget-top {
  62. transition: background-color 0.4s;
  63. }
  64. .customize-control-widget_form.wide-widget-control.expanding .widget-top,
  65. .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top {
  66. background-color: #dcdcde;
  67. }
  68. .widget-inside {
  69. padding: 1px 10px 10px;
  70. border-top: none;
  71. line-height: 1.23076923;
  72. }
  73. .customize-control-widget_form.expanded .widget-action .toggle-indicator:before {
  74. content: "\f142";
  75. }
  76. .customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before {
  77. content: "\f139";
  78. }
  79. .customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before {
  80. content: "\f141";
  81. }
  82. .widget-title-action {
  83. cursor: pointer;
  84. }
  85. .widget-top,
  86. .customize-control-widget_form .widget .customize-control-title {
  87. cursor: move;
  88. }
  89. .control-section.accordion-section.highlighted > .accordion-section-title,
  90. .customize-control-widget_form.highlighted {
  91. outline: none;
  92. box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
  93. position: relative;
  94. z-index: 1;
  95. }
  96. #widget-customizer-control-templates {
  97. display: none;
  98. }
  99. /**
  100. * Widget reordering styles
  101. */
  102. #customize-theme-controls .widget-reorder-nav {
  103. display: none;
  104. float: right;
  105. background-color: #f6f7f7;
  106. }
  107. .move-widget:before {
  108. content: "\f504";
  109. }
  110. #customize-theme-controls .move-widget-area {
  111. display: none;
  112. background: #fff;
  113. border: 1px solid #c3c4c7;
  114. border-top: none;
  115. cursor: auto;
  116. }
  117. #customize-theme-controls .reordering .move-widget-area.active {
  118. display: block;
  119. }
  120. #customize-theme-controls .move-widget-area .description {
  121. margin: 0;
  122. padding: 15px 20px;
  123. font-weight: 400;
  124. }
  125. #customize-theme-controls .widget-area-select {
  126. margin: 0;
  127. padding: 0;
  128. list-style: none;
  129. }
  130. #customize-theme-controls .widget-area-select li {
  131. position: relative;
  132. margin: 0;
  133. padding: 13px 15px 15px 42px;
  134. color: #50575e;
  135. border-top: 1px solid #c3c4c7;
  136. cursor: pointer;
  137. -webkit-user-select: none;
  138. user-select: none;
  139. }
  140. #customize-theme-controls .widget-area-select li:before {
  141. display: none;
  142. content: "\f147";
  143. position: absolute;
  144. top: 12px;
  145. left: 10px;
  146. font: normal 20px/1 dashicons;
  147. -webkit-font-smoothing: antialiased;
  148. -moz-osx-font-smoothing: grayscale;
  149. }
  150. #customize-theme-controls .widget-area-select li:last-child {
  151. border-bottom: 1px solid #c3c4c7;
  152. }
  153. #customize-theme-controls .widget-area-select .selected {
  154. color: #fff;
  155. background: #2271b1;
  156. }
  157. #customize-theme-controls .widget-area-select .selected:before {
  158. display: block;
  159. }
  160. #customize-theme-controls .move-widget-actions {
  161. text-align: right;
  162. padding: 12px;
  163. }
  164. #customize-theme-controls .reordering .widget-title-action {
  165. display: none;
  166. }
  167. #customize-theme-controls .reordering .widget-reorder-nav {
  168. display: block;
  169. }
  170. /* Text Widget */
  171. .wp-customizer div.mce-inline-toolbar-grp,
  172. .wp-customizer div.mce-tooltip {
  173. z-index: 500100 !important;
  174. }
  175. .wp-customizer .ui-autocomplete.wplink-autocomplete {
  176. z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */
  177. }
  178. .wp-customizer #wp-link-backdrop {
  179. z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */
  180. }
  181. .wp-customizer #wp-link-wrap {
  182. z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */
  183. }
  184. /**
  185. * Styles for new widget addition panel
  186. */
  187. /* override widgets admin page rules in wp-admin/css/widgets.css */
  188. #widgets-left #available-widgets .widget {
  189. float: none !important;
  190. width: auto !important;
  191. }
  192. /* Keep rule that is no longer necessary on widgets.php. */
  193. #available-widgets .widget-action {
  194. display: none;
  195. }
  196. .ios #available-widgets {
  197. transition: left 0s;
  198. }
  199. #available-widgets .widget-tpl:hover,
  200. #available-widgets .widget-tpl.selected {
  201. background: #f6f7f7;
  202. border-bottom-color: #c3c4c7;
  203. color: #2271b1;
  204. border-left: 4px solid #2271b1;
  205. }
  206. #customize-controls .widget-title h3 {
  207. font-size: 1em;
  208. }
  209. #available-widgets .widget-title h3 {
  210. padding: 0 0 5px;
  211. font-size: 14px;
  212. }
  213. #available-widgets .widget .widget-description {
  214. padding: 0;
  215. color: #646970;
  216. }
  217. #customize-preview {
  218. transition: all 0.2s;
  219. }
  220. body.adding-widget #available-widgets {
  221. left: 0;
  222. visibility: visible;
  223. }
  224. body.adding-widget .wp-full-overlay-main {
  225. left: 300px;
  226. }
  227. body.adding-widget #customize-preview {
  228. opacity: 0.4;
  229. }
  230. /**
  231. * Widget Icon styling
  232. * No plurals in naming.
  233. * Ordered from lowest to highest specificity.
  234. */
  235. #available-widgets .widget-title {
  236. position: relative;
  237. }
  238. #available-widgets .widget-title:before {
  239. content: "\f132";
  240. position: absolute;
  241. top: -3px;
  242. right: 100%;
  243. margin-right: 20px;
  244. width: 20px;
  245. height: 20px;
  246. color: #2c3338;
  247. font: normal 20px/1 dashicons;
  248. text-align: center;
  249. box-sizing: border-box;
  250. -webkit-font-smoothing: antialiased;
  251. -moz-osx-font-smoothing: grayscale;
  252. }
  253. /* dashicons-smiley */
  254. #available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; }
  255. /* dashicons-star-filled */
  256. #available-widgets [class*="super"] .widget-title:before,
  257. #available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; }
  258. /* dashicons-wordpress */
  259. #available-widgets [class*="meta"] .widget-title:before { content: "\f120"; }
  260. /* dashicons-archive */
  261. #available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; }
  262. /* dashicons-category */
  263. #available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; }
  264. /* dashicons-admin-comments */
  265. #available-widgets [class*="comment"] .widget-title:before,
  266. #available-widgets [class*="testimonial"] .widget-title:before,
  267. #available-widgets [class*="chat"] .widget-title:before { content: "\f101"; }
  268. /* dashicons-admin-post */
  269. #available-widgets [class*="post"] .widget-title:before { content: "\f109"; }
  270. /* dashicons-admin-page */
  271. #available-widgets [class*="page"] .widget-title:before { content: "\f105"; }
  272. /* dashicons-text */
  273. #available-widgets [class*="text"] .widget-title:before { content: "\f478"; }
  274. /* dashicons-admin-links */
  275. #available-widgets [class*="link"] .widget-title:before { content: "\f103"; }
  276. /* dashicons-search */
  277. #available-widgets [class*="search"] .widget-title:before { content: "\f179"; }
  278. /* dashicons-menu */
  279. #available-widgets [class*="menu"] .widget-title:before,
  280. #available-widgets [class*="nav"] .widget-title:before { content: "\f333"; }
  281. /* dashicons-tagcloud */
  282. #available-widgets [class*="tag"] .widget-title:before { content: "\f479"; }
  283. /* dashicons-rss */
  284. #available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; }
  285. /* dashicons-calendar */
  286. #available-widgets [class*="event"] .widget-title:before,
  287. #available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;}
  288. /* dashicons-format-image */
  289. #available-widgets [class*="image"] .widget-title:before,
  290. #available-widgets [class*="photo"] .widget-title:before,
  291. #available-widgets [class*="slide"] .widget-title:before,
  292. #available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; }
  293. /* dashicons-format-gallery */
  294. #available-widgets [class*="album"] .widget-title:before,
  295. #available-widgets [class*="galler"] .widget-title:before { content: "\f161"; }
  296. /* dashicons-format-video */
  297. #available-widgets [class*="video"] .widget-title:before,
  298. #available-widgets [class*="tube"] .widget-title:before { content: "\f126"; }
  299. /* dashicons-format-audio */
  300. #available-widgets [class*="music"] .widget-title:before,
  301. #available-widgets [class*="radio"] .widget-title:before,
  302. #available-widgets [class*="audio"] .widget-title:before { content: "\f127"; }
  303. /* dashicons-admin-users */
  304. #available-widgets [class*="login"] .widget-title:before,
  305. #available-widgets [class*="user"] .widget-title:before,
  306. #available-widgets [class*="member"] .widget-title:before,
  307. #available-widgets [class*="avatar"] .widget-title:before,
  308. #available-widgets [class*="subscriber"] .widget-title:before,
  309. #available-widgets [class*="profile"] .widget-title:before,
  310. #available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; }
  311. /* dashicons-cart */
  312. #available-widgets [class*="commerce"] .widget-title:before,
  313. #available-widgets [class*="shop"] .widget-title:before,
  314. #available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; }
  315. /* dashicons-shield */
  316. #available-widgets [class*="secur"] .widget-title:before,
  317. #available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; }
  318. /* dashicons-chart-bar */
  319. #available-widgets [class*="analytic"] .widget-title:before,
  320. #available-widgets [class*="stat"] .widget-title:before,
  321. #available-widgets [class*="poll"] .widget-title:before { content: "\f185"; }
  322. /* dashicons-feedback */
  323. #available-widgets [class*="form"] .widget-title:before { content: "\f175"; }
  324. /* dashicons-email-alt */
  325. #available-widgets [class*="subscribe"] .widget-title:before,
  326. #available-widgets [class*="news"] .widget-title:before,
  327. #available-widgets [class*="contact"] .widget-title:before,
  328. #available-widgets [class*="mail"] .widget-title:before { content: "\f466"; }
  329. /* dashicons-share */
  330. #available-widgets [class*="share"] .widget-title:before,
  331. #available-widgets [class*="socia"] .widget-title:before { content: "\f237"; }
  332. /* dashicons-translation */
  333. #available-widgets [class*="lang"] .widget-title:before,
  334. #available-widgets [class*="translat"] .widget-title:before { content: "\f326"; }
  335. /* dashicons-location-alt */
  336. #available-widgets [class*="locat"] .widget-title:before,
  337. #available-widgets [class*="map"] .widget-title:before { content: "\f231"; }
  338. /* dashicons-download */
  339. #available-widgets [class*="download"] .widget-title:before { content: "\f316"; }
  340. /* dashicons-cloud */
  341. #available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;}
  342. /* dashicons-facebook */
  343. #available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; }
  344. /* dashicons-twitter */
  345. #available-widgets [class*="tweet"] .widget-title:before,
  346. #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
  347. @media screen and (max-height: 700px) and (min-width: 981px) {
  348. /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */
  349. .customize-control-widget_form {
  350. margin-bottom: 0;
  351. }
  352. .widget-top {
  353. box-shadow: none;
  354. margin-top: -1px;
  355. }
  356. .widget-top:hover {
  357. position: relative;
  358. z-index: 1;
  359. }
  360. .last-widget {
  361. margin-bottom: 15px;
  362. }
  363. .widget-title h3 {
  364. padding: 13px 15px;
  365. }
  366. .widget-top .widget-action {
  367. padding: 8px 10px;
  368. }
  369. .widget-reorder-nav span {
  370. height: 39px;
  371. }
  372. .widget-reorder-nav span:before {
  373. line-height: 39px;
  374. }
  375. /* Compact the move widget areas. */
  376. #customize-theme-controls .widget-area-select li {
  377. padding: 9px 15px 11px 42px;
  378. }
  379. #customize-theme-controls .widget-area-select li:before {
  380. top: 8px;
  381. }
  382. }