customize-widgets-rtl.css 12 KB

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