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