home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-admin / css / customize-controls-rtl.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2017-11-08  |  69.2 KB  |  3,033 lines
  1. body {
  2.     overflow: hidden;
  3.     -webkit-text-size-adjust: 100%;
  4. }
  5.  
  6. .customize-controls-close,
  7. .widget-control-actions a {
  8.     text-decoration: none;
  9. }
  10.  
  11. #customize-controls h3 {
  12.     font-size: 14px;
  13. }
  14.  
  15. #customize-controls img {
  16.     max-width: 100%;
  17. }
  18.  
  19. #customize-controls .submit {
  20.     text-align: center;
  21. }
  22.  
  23. #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
  24.     background-color: rgba( 0, 0, 0, 0.7 );
  25.     padding: 25px;
  26. }
  27.  
  28. #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
  29.     margin-right: auto;
  30.     margin-left: auto;
  31.     max-width: 366px;
  32.     min-height: 64px;
  33.     width: auto;
  34.     padding: 25px 109px 25px 25px;
  35.     position: relative;
  36.     background: #fff;
  37.     box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
  38.     line-height: 1.5;
  39.     overflow-y: auto;
  40.     text-align: right;
  41.     top: calc( 50% - 100px );
  42. }
  43.  
  44. #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing {
  45.     margin-top: 0;
  46. }
  47. #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
  48.     margin-bottom: 0;
  49. }
  50.  
  51. .customize-changeset-locked-avatar {
  52.     width: 64px;
  53.     position: absolute;
  54.     right: 25px;
  55.     top: 25px;
  56. }
  57.  
  58. .wp-core-ui.wp-customizer .customize-changeset-locked-message a.button {
  59.     margin-left: 10px;
  60.     margin-top: 0;
  61. }
  62.  
  63. #customize-controls .description {
  64.     color: #555d66;
  65. }
  66.  
  67. #customize-save-button-wrapper {
  68.     float: left;
  69.     margin-top: 9px;
  70. }
  71.  
  72. body:not(.ready) #customize-save-button-wrapper .save {
  73.     visibility: hidden;
  74. }
  75. #customize-save-button-wrapper .save {
  76.     float: right;
  77.     border-radius: 3px;
  78.     box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
  79.     margin-top: 0;
  80. }
  81.  
  82. #customize-save-button-wrapper .save:focus, #publish-settings:focus {
  83.     box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; /* This is default box shadow for focus */
  84. }
  85.  
  86. #customize-save-button-wrapper .save.has-next-sibling {
  87.     border-radius: 0 3px 3px 0;
  88. }
  89.  
  90. #customize-sidebar-outer-content {
  91.     position: absolute;
  92.     top: 0;
  93.     bottom: 0;
  94.     right: 0;
  95.     visibility: hidden;
  96.     overflow-x: hidden;
  97.     overflow-y: auto;
  98.     width: 100%;
  99.     margin: 0;
  100.     z-index: -1;
  101.     background: #eee;
  102.     transition: right .18s;
  103.     border-left: 1px solid #ddd;
  104.     border-right: 1px solid #ddd;
  105.     height: 100%;
  106. }
  107.  
  108. #customize-theme-controls .control-section-outer {
  109.     display: none !important;
  110. }
  111.  
  112. #customize-outer-theme-controls .accordion-section-content {
  113.     padding: 12px;
  114. }
  115.  
  116. #customize-outer-theme-controls .accordion-section-content.open {
  117.     display: block;
  118. }
  119.  
  120. .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
  121.     visibility: visible;
  122.     right: 100%;
  123.     transition: right .18s;
  124. }
  125.  
  126. .customize-outer-pane-parent {
  127.     margin: 0;
  128. }
  129.  
  130. .outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
  131.     right: 300px;
  132.     opacity: 0.4;
  133. }
  134.  
  135. .outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
  136. .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
  137. .adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
  138. .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
  139. .adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
  140. .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
  141.     right: 64%;
  142. }
  143.  
  144. #customize-outer-theme-controls li.notice {
  145.     padding-top: 8px;
  146.     padding-bottom: 8px;
  147.     margin-right: 0;
  148.     margin-bottom: 10px;
  149. }
  150.  
  151. #publish-settings {
  152.     text-indent: 0;
  153.     border-radius: 3px 0 0 3px;
  154.     padding-right: 0;
  155.     padding-left: 0;
  156.     box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
  157.     font-size: 14px;
  158.     width: 30px;
  159.     float: right;
  160.     -webkit-transform: none;
  161.     transform: none;
  162.     margin-top: 0;
  163. }
  164.  
  165. body:not(.ready) #publish-settings,
  166. body.trashing #customize-save-button-wrapper .save,
  167. body.trashing #publish-settings {
  168.     display: none;
  169. }
  170.  
  171. #customize-header-actions .spinner {
  172.     margin-top: 13px;
  173.     margin-left: 4px;
  174. }
  175.  
  176. .saving #customize-header-actions .spinner,
  177. .trashing #customize-header-actions .spinner {
  178.     visibility: visible;
  179. }
  180.  
  181. #customize-header-actions {
  182.     border-bottom: 1px solid #ddd;
  183. }
  184.  
  185. #customize-controls .wp-full-overlay-sidebar-content {
  186.     overflow-y: auto;
  187.     overflow-x: hidden;
  188. }
  189.  
  190. .outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
  191.     background: #eee;
  192. }
  193.  
  194. #customize-controls .customize-info {
  195.     border: none;
  196.     border-bottom: 1px solid #ddd;
  197.     margin-bottom: 15px;
  198. }
  199.  
  200. #customize-control-changeset_status .customize-inside-control-row,
  201. #customize-control-changeset_preview_link input {
  202.     background-color: #ffffff;
  203.     border-bottom: 1px solid #ddd;
  204.     box-sizing: content-box;
  205.     width: 100%;
  206.     margin-right: -12px;
  207.     padding-right: 12px;
  208.     padding-left: 12px;
  209. }
  210.  
  211. #customize-control-trash_changeset {
  212.     margin-top: 20px;
  213. }
  214. #customize-control-trash_changeset .button-link {
  215.     position: relative;
  216.     padding-right: 24px;
  217.     display: inline-block;
  218. }
  219. #customize-control-trash_changeset .button-link:before {
  220.     content: "\f182";
  221.     font: normal 22px dashicons;
  222.     text-decoration: none;
  223.     position: absolute;
  224.     right: 0;
  225.     top: -2px;
  226. }
  227.  
  228. #customize-controls .date-input:invalid {
  229.     border-color: #dc3232;
  230. }
  231.  
  232. #customize-control-changeset_status .customize-inside-control-row {
  233.     padding-top: 10px;
  234.     padding-bottom: 10px;
  235.     font-weight: 500;
  236. }
  237.  
  238. #customize-control-changeset_status .customize-inside-control-row:first-of-type {
  239.     border-top: 1px solid #ddd;
  240. }
  241.  
  242. #customize-control-changeset_status .customize-control-title {
  243.     margin-bottom: 6px;
  244. }
  245.  
  246. #customize-control-changeset_status input {
  247.     margin-right: 0;
  248. }
  249.  
  250. #customize-control-changeset_preview_link {
  251.     position: relative;
  252.     display: block;
  253. }
  254.  
  255. .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
  256.     margin: 0;
  257.     position: absolute;
  258.     bottom: 9px;
  259.     left: 0;
  260. }
  261.  
  262. .preview-link-wrapper {
  263.     position: relative;
  264. }
  265.  
  266. .customize-copy-preview-link:before,
  267. .customize-copy-preview-link:after {
  268.     content: "";
  269.     height: 28px;
  270.     position: absolute;
  271.     background: #ffffff;
  272.     top: -1px;
  273. }
  274.  
  275. .customize-copy-preview-link:before {
  276.     right: -10px;
  277.     width: 9px;
  278.     opacity: 0.75;
  279. }
  280.  
  281. .customize-copy-preview-link:after {
  282.     right: -5px;
  283.     width: 4px;
  284.     opacity: 0.8;
  285. }
  286.  
  287. #customize-control-changeset_preview_link input {
  288.     line-height: 2.5;
  289.     border-top: 1px solid #ddd;
  290.     border-right: none;
  291.     border-left: none;
  292.     text-indent: -999px;
  293.     color: #fff;
  294. }
  295.  
  296. #customize-control-changeset_preview_link label {
  297.     position: relative;
  298.     display: block;
  299. }
  300.  
  301. #customize-control-changeset_preview_link a {
  302.     display: inline-block;
  303.     position: absolute;
  304.     white-space: nowrap;
  305.     overflow: hidden;
  306.     width: 90%;
  307.     bottom: 14px;
  308.     font-size: 14px;
  309.     text-decoration: none;
  310. }
  311.  
  312. #customize-control-changeset_preview_link a.disabled,
  313. #customize-control-changeset_preview_link a.disabled:active,
  314. #customize-control-changeset_preview_link a.disabled:focus,
  315. #customize-control-changeset_preview_link a.disabled:visited {
  316.     color: black;
  317.     opacity: 0.4;
  318.     cursor: default;
  319.     outline: none;
  320.     box-shadow: none;
  321. }
  322.  
  323. #sub-accordion-section-publish_settings .customize-section-description-container {
  324.     display: none;
  325. }
  326.  
  327. #customize-controls .customize-info.section-meta {
  328.     margin-bottom: 15px;
  329. }
  330.  
  331. .customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
  332.     margin-top: 10px;
  333. }
  334.  
  335. .customize-control.customize-control-date_time .date-time-fields .date-input.day {
  336.     margin-left: 0;
  337. }
  338.  
  339. .date-time-fields .date-input.month {
  340.     width: auto;
  341.     margin: 0;
  342. }
  343.  
  344. .date-time-fields .date-input.day,
  345. .date-time-fields .date-input.hour,
  346. .date-time-fields .date-input.minute {
  347.     width: 46px;
  348. }
  349.  
  350. .date-time-fields .date-input.year {
  351.     width: 60px;
  352. }
  353.  
  354. .date-time-fields .date-input.meridian {
  355.     width: auto;
  356.     margin: 0;
  357. }
  358.  
  359. .date-time-fields .time-row {
  360.     margin-top: 12px;
  361. }
  362.  
  363. .date-time-fields .date-timezone {
  364.     line-height: 2.2;
  365.     text-decoration: none;
  366. }
  367.  
  368. #customize-control-changeset_preview_link {
  369.     margin-top: 6px;
  370. }
  371.  
  372. #customize-control-changeset_status {
  373.     margin-bottom: 0;
  374.     padding-bottom: 0;
  375. }
  376.  
  377. #customize-control-changeset_scheduled_date {
  378.     box-sizing: content-box;
  379.     width: 100%;
  380.     margin-right: -12px;
  381.     padding: 12px;
  382.     background: #ffffff;
  383.     border-bottom: 1px solid #ddd;
  384.     margin-bottom: 0;
  385. }
  386.  
  387. #customize-control-changeset_scheduled_date .customize-control-description {
  388.     font-style: normal;
  389. }
  390.  
  391. #customize-controls .customize-info.is-in-view,
  392. #customize-controls .customize-section-title.is-in-view {
  393.     position: absolute;
  394.     z-index: 9;
  395.     width: 100%;
  396.     box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  397. }
  398.  
  399. #customize-controls .customize-section-title.is-in-view {
  400.     margin-top: 0;
  401. }
  402.  
  403. #customize-controls .customize-info.is-in-view + .accordion-section {
  404.     margin-top: 15px;
  405. }
  406.  
  407. #customize-controls .customize-info.is-sticky,
  408. #customize-controls .customize-section-title.is-sticky {
  409.     position: fixed;
  410.     top: 46px;
  411. }
  412.  
  413. #customize-controls .customize-info .accordion-section-title {
  414.     background: #fff;
  415.     color: #555d66;
  416.     border-right: none;
  417.     border-left: none;
  418.     border-bottom: none;
  419.     cursor: default;
  420. }
  421.  
  422. #customize-controls .customize-info.open .accordion-section-title:after,
  423. #customize-controls .customize-info .accordion-section-title:hover:after,
  424. #customize-controls .customize-info .accordion-section-title:focus:after {
  425.     color: #32373c;
  426. }
  427.  
  428. #customize-controls .customize-info .accordion-section-title:after {
  429.     display: none;
  430. }
  431.  
  432. #customize-controls .customize-info .preview-notice {
  433.     font-size: 13px;
  434.     line-height: 24px;
  435. }
  436.  
  437. #customize-controls .customize-pane-child .customize-section-title h3,
  438. #customize-controls .customize-pane-child h3.customize-section-title,
  439. #customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
  440. #customize-outer-theme-controls .customize-pane-child h3.customize-section-title,
  441. #customize-controls .customize-info .panel-title {
  442.     font-size: 20px;
  443.     font-weight: 200;
  444.     line-height: 26px;
  445.     display: block;
  446.     overflow: hidden;
  447.     white-space: nowrap;
  448.     text-overflow: ellipsis;
  449. }
  450.  
  451. #customize-controls .customize-section-title span.customize-action {
  452.     overflow: hidden;
  453.     white-space: nowrap;
  454.     text-overflow: ellipsis;
  455. }
  456.  
  457. #customize-controls .customize-info .customize-help-toggle {
  458.     position: absolute;
  459.     top: 4px;
  460.     left: 1px;
  461.     padding: 20px 10px 10px 20px;
  462.     width: 20px;
  463.     height: 20px;
  464.     cursor: pointer;
  465.     box-shadow: none;
  466.     -webkit-appearance: none;
  467.     background: transparent;
  468.     color: #555d66;
  469.     border: none;
  470. }
  471.  
  472. #customize-controls .customize-info .customize-help-toggle:before {
  473.     position: absolute;
  474.     top: 5px;
  475.     right: 6px;
  476. }
  477.  
  478. #customize-controls .customize-info.open .customize-help-toggle,
  479. #customize-controls .customize-info .customize-help-toggle:focus,
  480. #customize-controls .customize-info .customize-help-toggle:hover {
  481.     color: #0073aa;
  482. }
  483.  
  484. #customize-controls .customize-info .customize-panel-description,
  485. #customize-controls .customize-info .customize-section-description,
  486. #customize-outer-theme-controls .customize-info .customize-section-description,
  487. #customize-controls .no-widget-areas-rendered-notice {
  488.     color: #555d66;
  489.     display: none;
  490.     background: #fff;
  491.     padding: 12px 15px;
  492.     border-top: 1px solid #ddd;
  493. }
  494.  
  495. #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
  496.     border-top: none;
  497. }
  498. .no-widget-areas-rendered-notice {
  499.     font-style: italic;
  500. }
  501. .no-widget-areas-rendered-notice p:first-child {
  502.     margin-top: 0;
  503. }
  504. .no-widget-areas-rendered-notice p:last-child {
  505.     margin-bottom: 0;
  506. }
  507.  
  508. #customize-controls .customize-info .customize-section-description {
  509.     margin-bottom: 15px;
  510. }
  511.  
  512. #customize-controls .customize-info .customize-panel-description p:first-child,
  513. #customize-controls .customize-info .customize-section-description p:first-child {
  514.     margin-top: 0;
  515. }
  516.  
  517. #customize-controls .customize-info .customize-panel-description p:last-child,
  518. #customize-controls .customize-info .customize-section-description p:last-child {
  519.     margin-bottom: 0;
  520. }
  521.  
  522. #customize-controls .current-panel .control-section > h3.accordion-section-title {
  523.     padding-left: 30px;
  524. }
  525.  
  526. #customize-theme-controls .control-section,
  527. #customize-outer-theme-controls .control-section {
  528.     border: none;
  529. }
  530.  
  531. #customize-theme-controls .accordion-section-title,
  532. #customize-outer-theme-controls .accordion-section-title {
  533.     color: #555d66;
  534.     background-color: #fff;
  535.     border-bottom: 1px solid #ddd;
  536.     border-right: 4px solid #fff;
  537.     transition: .15s color ease-in-out,
  538.                 .15s background-color ease-in-out,
  539.                 .15s border-color ease-in-out;
  540. }
  541.  
  542. #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
  543.     color: #555;
  544.     background-color: #fff;
  545.     border-right: 4px solid #fff;
  546. }
  547.  
  548. #customize-theme-controls .accordion-section-title:after,
  549. #customize-outer-theme-controls .accordion-section-title:after {
  550.     content: "\f341";
  551.     color: #a0a5aa;
  552. }
  553.  
  554. #customize-theme-controls .accordion-section-content,
  555. #customize-outer-theme-controls .accordion-section-content {
  556.     color: #555d66;
  557.     background: transparent;
  558. }
  559.  
  560. #customize-controls .control-section:hover > .accordion-section-title,
  561. #customize-controls .control-section .accordion-section-title:hover,
  562. #customize-controls .control-section.open .accordion-section-title,
  563. #customize-controls .control-section .accordion-section-title:focus {
  564.     color: #0073aa;
  565.     background: #f3f3f5;
  566.     border-right-color: #0073aa;
  567. }
  568.  
  569. #accordion-section-themes + .control-section {
  570.     border-top: 1px solid #ddd;
  571. }
  572.  
  573. .js .control-section:hover .accordion-section-title,
  574. .js .control-section .accordion-section-title:hover,
  575. .js .control-section.open .accordion-section-title,
  576. .js .control-section .accordion-section-title:focus {
  577.     background: #f3f3f5;
  578. }
  579.  
  580. #customize-theme-controls .control-section:hover > .accordion-section-title:after,
  581. #customize-theme-controls .control-section .accordion-section-title:hover:after,
  582. #customize-theme-controls .control-section.open .accordion-section-title:after,
  583. #customize-theme-controls .control-section .accordion-section-title:focus:after,
  584. #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
  585. #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
  586. #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
  587. #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
  588.     color: #0073aa;
  589. }
  590.  
  591. #customize-theme-controls .control-section.open {
  592.     border-bottom: 1px solid #eee;
  593. }
  594.  
  595. #customize-theme-controls .control-section.open .accordion-section-title,
  596. #customize-outer-theme-controls .control-section.open .accordion-section-title {
  597.     border-bottom-color: #eee !important;
  598. }
  599.  
  600. #customize-theme-controls .control-section:last-of-type.open,
  601. #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
  602.     border-bottom-color: #ddd;
  603. }
  604.  
  605. #customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
  606. #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
  607. #customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
  608.     border-top: 1px solid #ddd;
  609. }
  610.  
  611. #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
  612.     border-top: none;
  613. }
  614.  
  615. #customize-theme-controls > ul {
  616.     margin: 0;
  617. }
  618.  
  619. #customize-theme-controls .accordion-section-content {
  620.     position: absolute;
  621.     top: 0;
  622.     right: 100%;
  623.     width: 100%;
  624.     margin: 0;
  625.     padding: 12px;
  626.     box-sizing: border-box;
  627. }
  628.  
  629. #customize-info,
  630. #customize-theme-controls .customize-pane-parent,
  631. #customize-theme-controls .customize-pane-child {
  632.     overflow: visible;
  633.     width: 100%;
  634.     margin: 0;
  635.     padding: 0;
  636.     box-sizing: border-box;
  637.     transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
  638.     transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
  639.     transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
  640. }
  641.  
  642. #customize-theme-controls .customize-pane-child.skip-transition {
  643.     transition: none;
  644. }
  645.  
  646. #customize-info,
  647. #customize-theme-controls .customize-pane-parent {
  648.     position: relative;
  649.     visibility: visible;
  650.     height: auto;
  651.     max-height: none;
  652.     overflow: auto;
  653.     -webkit-transform: none;
  654.     transform: none;
  655. }
  656.  
  657. #customize-theme-controls .customize-pane-child {
  658.     position: absolute;
  659.     top: 0;
  660.     right: 0;
  661.     visibility: hidden;
  662.     height: 0;
  663.     max-height: none;
  664.     overflow: hidden;
  665.     -webkit-transform: translateX(-100%);
  666.     transform: translateX(-100%);
  667. }
  668.  
  669. #customize-theme-controls .customize-pane-child.open,
  670. #customize-theme-controls .customize-pane-child.current-panel {
  671.     -webkit-transform: none;
  672.     transform: none;
  673. }
  674.  
  675. .section-open #customize-theme-controls .customize-pane-parent,
  676. .in-sub-panel #customize-theme-controls .customize-pane-parent,
  677. .section-open #customize-info,
  678. .in-sub-panel #customize-info,
  679. .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
  680.     visibility: hidden;
  681.     height: 0;
  682.     overflow: hidden;
  683.     -webkit-transform: translateX(100%);
  684.     transform: translateX(100%);
  685. }
  686.  
  687. .section-open #customize-theme-controls .customize-pane-parent.busy,
  688. .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
  689. .section-open #customize-info.busy,
  690. .in-sub-panel #customize-info.busy,
  691. .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
  692. #customize-theme-controls .customize-pane-child.open,
  693. #customize-theme-controls .customize-pane-child.current-panel,
  694. #customize-theme-controls .customize-pane-child.busy {
  695.     visibility: visible;
  696.     height: auto;
  697.     overflow: auto;
  698. }
  699.  
  700. #customize-theme-controls .customize-pane-child.accordion-section-content,
  701. #customize-theme-controls .customize-pane-child.accordion-sub-container {
  702.     display: block;
  703.     overflow-x: hidden;
  704. }
  705.  
  706. #customize-theme-controls .customize-pane-child.accordion-section-content {
  707.     padding: 12px;
  708. }
  709.  
  710. #customize-theme-controls .customize-pane-child.menu li {
  711.     position: static;
  712. }
  713.  
  714. .customize-section-description-container,
  715. .control-section-nav_menu .customize-section-description-container,
  716. .control-section-new_menu .customize-section-description-container {
  717.     margin-bottom: 15px;
  718. }
  719.  
  720. .control-section-nav_menu .customize-control,
  721. .control-section-new_menu .customize-control {
  722.     /* Override default `margin-bottom` for `.customize-control` */
  723.     margin-bottom: 0;
  724. }
  725.  
  726. .customize-section-title {
  727.     margin: -12px -12px 0 -12px;
  728.     border-bottom: 1px solid #ddd;
  729.     background: #fff;
  730. }
  731.  
  732. div.customize-section-description {
  733.     margin-top: 22px;
  734. }
  735.  
  736. .customize-info div.customize-section-description {
  737.     margin-top: 0;
  738. }
  739.  
  740. div.customize-section-description p:first-child {
  741.     margin-top: 0;
  742. }
  743.  
  744. div.customize-section-description p:last-child {
  745.     margin-bottom: 0;
  746. }
  747.  
  748. #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
  749.     border-bottom: 1px solid #ddd;
  750.     padding: 12px 12px 12px 12px;
  751. }
  752.  
  753. .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
  754.     padding: 12px 12px 13px 12px;
  755. }
  756.  
  757. .customize-section-title h3,
  758. h3.customize-section-title {
  759.     padding: 10px 14px 12px 10px;
  760.     margin: 0;
  761.     line-height: 21px;
  762.     color: #555d66;
  763. }
  764.  
  765. .accordion-sub-container.control-panel-content {
  766.     display: none;
  767.     position: absolute;
  768.     top: 0;
  769.     width: 100%;
  770. }
  771.  
  772. .accordion-sub-container.control-panel-content.busy {
  773.     display: block;
  774. }
  775.  
  776. .current-panel .accordion-sub-container.control-panel-content {
  777.     width: 100%;
  778. }
  779.  
  780. .customize-controls-close {
  781.     display: block;
  782.     position: absolute;
  783.     top: 0;
  784.     right: 0;
  785.     width: 45px;
  786.     height: 41px;
  787.     padding: 0 0 0 2px;
  788.     background: #eee;
  789.     border: none;
  790.     border-top: 4px solid #eee;
  791.     border-left: 1px solid #ddd;
  792.     color: #444;
  793.     text-align: right;
  794.     cursor: pointer;
  795.     transition: color .15s ease-in-out,
  796.                 border-color .15s ease-in-out,
  797.                 background .15s ease-in-out;
  798.     box-sizing: content-box;
  799. }
  800.  
  801. .customize-panel-back,
  802. .customize-section-back {
  803.     display: block;
  804.     float: right;
  805.     width: 48px;
  806.     height: 71px;
  807.     padding: 0 0 0 24px;
  808.     margin: 0;
  809.     background: #fff;
  810.     border: none;
  811.     border-left: 1px solid #ddd;
  812.     border-right: 4px solid #fff;
  813.     box-shadow: none;
  814.     cursor: pointer;
  815.     transition: color .15s ease-in-out,
  816.                 border-color .15s ease-in-out,
  817.                 background .15s ease-in-out;
  818. }
  819.  
  820. .customize-section-back {
  821.     height: 74px;
  822. }
  823.  
  824. .ios .customize-panel-back {
  825.     display: none;
  826. }
  827.  
  828. .ios .expanded.in-sub-panel .customize-panel-back {
  829.     display: block;
  830. }
  831.  
  832. #customize-controls .panel-meta.customize-info .accordion-section-title {
  833.     margin-right: 48px;
  834.     border-right: none;
  835. }
  836.  
  837. #customize-controls .panel-meta.customize-info .accordion-section-title:hover,
  838. #customize-controls .cannot-expand:hover .accordion-section-title {
  839.     background: #fff;
  840.     color: #555d66;
  841.     border-right-color: #fff;
  842. }
  843.  
  844. .customize-controls-close:focus,
  845. .customize-controls-close:hover,
  846. .customize-controls-preview-toggle:focus,
  847. .customize-controls-preview-toggle:hover {
  848.     background: #fff;
  849.     color: #0073aa;
  850.     border-top-color: #0073aa;
  851.     outline: none;
  852.     box-shadow: none;
  853. }
  854.  
  855.  
  856. .customize-panel-back:hover,
  857. .customize-panel-back:focus,
  858. .customize-section-back:hover,
  859. .customize-section-back:focus {
  860.     color: #0073aa;
  861.     background: #f3f3f5;
  862.     border-right-color: #0073aa;
  863.     outline: none;
  864.     box-shadow: none;
  865. }
  866.  
  867. .customize-controls-close:before {
  868.     font: normal 22px/45px dashicons;
  869.     content: "\f335";
  870.     position: relative;
  871.     top: -3px;
  872.     right: 13px;
  873. }
  874.  
  875. .customize-panel-back:before,
  876. .customize-section-back:before {
  877.     font: normal 20px/72px dashicons;
  878.     content: "\f345";
  879.     position: relative;
  880.     right: 9px;
  881. }
  882.  
  883. .wp-full-overlay-sidebar .wp-full-overlay-header {
  884.     background-color: #eee;
  885.     transition: padding ease-in-out .18s;
  886. }
  887.  
  888. .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
  889.     padding-right: 62px;
  890. }
  891.  
  892. p.customize-section-description {
  893.     font-style: normal;
  894.     margin-top: 22px;
  895.     margin-bottom: 0;
  896. }
  897.  
  898. .customize-section-description ul {
  899.     margin-right: 1em;
  900. }
  901.  
  902. .customize-section-description ul > li {
  903.     list-style: disc;
  904. }
  905.  
  906. .section-description-buttons {
  907.     text-align: left;
  908. }
  909.  
  910. .section-description-buttons button.button-link {
  911.     color: #0073aa;
  912.     text-decoration: underline;
  913. }
  914.  
  915. .customize-control {
  916.     width: 100%;
  917.     float: right;
  918.     clear: both;
  919.     margin-bottom: 12px;
  920. }
  921.  
  922. .customize-control select,
  923. .customize-control input[type="radio"],
  924. .customize-control input[type="checkbox"] {
  925.     line-height: 28px;
  926. }
  927.  
  928. .customize-control input[type="text"],
  929. .customize-control input[type="password"],
  930. .customize-control input[type="email"],
  931. .customize-control input[type="number"],
  932. .customize-control input[type="search"],
  933. .customize-control input[type="tel"],
  934. .customize-control input[type="url"] {
  935.     width: 100%;
  936.     line-height: 18px;
  937.     margin: 0;
  938. }
  939.  
  940. .customize-control-hidden {
  941.     margin: 0;
  942. }
  943.  
  944. .customize-control-textarea textarea {
  945.     width: 100%;
  946.     resize: vertical;
  947. }
  948.  
  949. .customize-control select {
  950.     width: 100%;
  951.     height: 28px;
  952.     line-height: 28px;
  953. }
  954.  
  955. .customize-control select[multiple] {
  956.     height: auto;
  957. }
  958.  
  959. .customize-control-title {
  960.     display: block;
  961.     font-size: 14px;
  962.     line-height: 24px;
  963.     font-weight: 600;
  964.     margin-bottom: 4px;
  965. }
  966.  
  967. .customize-control-description {
  968.     display: block;
  969.     font-style: italic;
  970.     line-height: 18px;
  971.     margin-top: 0;
  972.     margin-bottom: 5px;
  973. }
  974.  
  975. .customize-section-description a.external-link:after {
  976.     font: 16px/11px dashicons;
  977.     content: "\f310";
  978.     top: 3px;
  979.     position: relative;
  980.     padding-right: 3px;
  981.     display: inline-block;
  982.     text-decoration: none;
  983. }
  984.  
  985. .customize-control-color .color-picker,
  986. .customize-control-upload div {
  987.     line-height: 28px;
  988. }
  989.  
  990. .customize-control .customize-inside-control-row {
  991.     line-height: 20px;
  992.     display: block;
  993.     margin-right: 24px;
  994.     padding-top: 6px;
  995.     padding-bottom: 6px;
  996. }
  997.  
  998. .customize-control-radio input,
  999. .customize-control-checkbox input,
  1000. .customize-control-nav_menu_auto_add input {
  1001.     margin-left: 4px;
  1002.     margin-right: -24px;
  1003. }
  1004.  
  1005. .customize-control-radio {
  1006.     padding: 5px 0 10px;
  1007. }
  1008.  
  1009. .customize-control-radio .customize-control-title {
  1010.     margin-bottom: 0;
  1011.     line-height: 22px;
  1012. }
  1013.  
  1014. .customize-control-radio .customize-control-title + .customize-control-description {
  1015.     margin-top: 7px;
  1016. }
  1017.  
  1018. .customize-control-radio label,
  1019. .customize-control-checkbox label {
  1020.     vertical-align: top;
  1021. }
  1022.  
  1023. .customize-control .attachment-thumb.type-icon {
  1024.     float: right;
  1025.     margin: 10px;
  1026.     width: auto;
  1027. }
  1028.  
  1029. .customize-control .attachment-title {
  1030.     font-weight: 600;
  1031.     margin: 0;
  1032.     padding: 5px 10px;
  1033. }
  1034.  
  1035. .customize-control .attachment-meta {
  1036.     white-space: nowrap;
  1037.     overflow: hidden;
  1038.     text-overflow: ellipsis;
  1039.     margin: 0;
  1040.     padding: 0 10px;
  1041. }
  1042.  
  1043. .customize-control .attachment-meta-title {
  1044.     padding-top: 7px;
  1045. }
  1046.  
  1047. /* Remove descender space. */
  1048. .customize-control .thumbnail-image,
  1049. .customize-control-header .current,
  1050. .customize-control .wp-media-wrapper.wp-video {
  1051.     line-height: 0;
  1052. }
  1053.  
  1054. /* Remove descender space. */
  1055. .customize-control-site_icon .favicon-preview .browser-preview {
  1056.     vertical-align: top;
  1057. }
  1058.  
  1059. .customize-control .thumbnail-image img {
  1060.     cursor: pointer;
  1061. }
  1062.  
  1063. #customize-controls .thumbnail-audio .thumbnail {
  1064.     max-width: 64px;
  1065.     max-height: 64px;
  1066.     margin: 10px;
  1067.     float: right;
  1068. }
  1069.  
  1070. #available-menu-items .accordion-section-content .new-content-item,
  1071. .customize-control-dropdown-pages .new-content-item {
  1072.     width: calc(100% - 30px);
  1073.     padding: 8px 15px;
  1074.     position: absolute;
  1075.     bottom: 0;
  1076.     z-index: 10;
  1077.     background: #eee;
  1078.     display: -webkit-box;
  1079.     display: flex;
  1080. }
  1081.  
  1082. .customize-control-dropdown-pages .new-content-item {
  1083.     width: 100%;
  1084.     padding: 5px 1px 5px 0;
  1085.     position: relative;
  1086. }
  1087.  
  1088. #available-menu-items .new-content-item .create-item-input,
  1089. .customize-control-dropdown-pages .new-content-item .create-item-input {
  1090.     -webkit-box-flex: 10;
  1091.     flex-grow: 10;
  1092. }
  1093.  
  1094. #available-menu-items .new-content-item .add-content,
  1095. .customize-control-dropdown-pages .new-content-item .add-content {
  1096.     margin: 2px 6px 2px 0;
  1097.     -webkit-box-flex: 10;
  1098.     flex-grow: 1;
  1099. }
  1100.  
  1101. .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
  1102.     border: 1px solid #dc3232;
  1103. }
  1104.  
  1105. .customize-control-dropdown-pages .add-new-toggle {
  1106.     margin-right: 1px;
  1107.     font-weight: 600;
  1108.     line-height: 28px;
  1109. }
  1110.  
  1111. #customize-preview iframe {
  1112.     width: 100%;
  1113.     height: 100%;
  1114.     position: absolute;
  1115. }
  1116. #customize-preview iframe + iframe {
  1117.     visibility: hidden;
  1118. }
  1119.  
  1120. .wp-full-overlay-sidebar {
  1121.     background: #eee;
  1122.     border-left: 1px solid #ddd;
  1123. }
  1124.  
  1125.  
  1126. /**
  1127.  * Notifications
  1128.  */
  1129.  
  1130. #customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
  1131.     margin: 4px 0 8px 0;
  1132.     padding: 0;
  1133.     cursor: default;
  1134. }
  1135.  
  1136. #customize-controls .customize-control-widget_form.has-error .widget .widget-top,
  1137. .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
  1138.     box-shadow: inset 0 0 0 2px #dc3232;
  1139.     transition: .15s box-shadow linear;
  1140. }
  1141.  
  1142. #customize-controls .customize-control-notifications-container li.notice {
  1143.     list-style: none;
  1144.     margin: 0 0 6px 0;
  1145.     padding: 9px 14px;
  1146.     overflow: hidden;
  1147. }
  1148. #customize-controls .customize-control-notifications-container .notice.is-dismissible {
  1149.     padding-left: 38px;
  1150. }
  1151.  
  1152. .customize-control-notifications-container li.notice:last-child {
  1153.     margin-bottom: 0;
  1154. }
  1155.  
  1156. #customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
  1157.     margin-top: 0;
  1158. }
  1159.  
  1160. #customize-controls .customize-control-widget_form .customize-control-notifications-container {
  1161.     margin-top: 8px;
  1162. }
  1163.  
  1164. .customize-control-text.has-error input {
  1165.     outline: 2px solid #dc3232;
  1166. }
  1167.  
  1168. #customize-controls #customize-notifications-area {
  1169.     position: absolute;
  1170.     top: 46px;
  1171.     width: 100%;
  1172.     border-bottom: 1px solid #ddd;
  1173.     display: block;
  1174.     padding: 0;
  1175.     margin: 0;
  1176. }
  1177.  
  1178. .wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
  1179.     display: none !important;
  1180. }
  1181.  
  1182. #customize-controls #customize-notifications-area:not(.has-overlay-notifications),
  1183. #customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications),
  1184. #customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) {
  1185.     max-height: 210px;
  1186.     overflow-x: hidden;
  1187.     overflow-y: auto;
  1188. }
  1189.  
  1190. #customize-controls #customize-notifications-area > ul,
  1191. #customize-controls #customize-notifications-area .notice,
  1192. #customize-controls .panel-meta > .customize-control-notifications-container,
  1193. #customize-controls .panel-meta > .customize-control-notifications-container .notice,
  1194. #customize-controls .customize-section-title > .customize-control-notifications-container,
  1195. #customize-controls .customize-section-title > .customize-control-notifications-container .notice {
  1196.     margin: 0;
  1197. }
  1198. #customize-controls .panel-meta > .customize-control-notifications-container,
  1199. #customize-controls .customize-section-title > .customize-control-notifications-container {
  1200.     border-top: 1px solid #ddd;
  1201. }
  1202. #customize-controls #customize-notifications-area .notice,
  1203. #customize-controls .panel-meta > .customize-control-notifications-container .notice,
  1204. #customize-controls .customize-section-title > .customize-control-notifications-container .notice {
  1205.     padding: 9px 14px;
  1206. }
  1207. #customize-controls #customize-notifications-area .notice.is-dismissible,
  1208. #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
  1209. #customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible {
  1210.     padding-left: 38px;
  1211. }
  1212. #customize-controls #customize-notifications-area .notice + .notice,
  1213. #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
  1214. #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
  1215.     margin-top: 1px;
  1216. }
  1217.  
  1218. @-webkit-keyframes customize-fade-in {
  1219.     0%   { opacity: 0; }
  1220.     100% { opacity: 1; }
  1221. }
  1222.  
  1223. @keyframes customize-fade-in {
  1224.     0%   { opacity: 0; }
  1225.     100% { opacity: 1; }
  1226. }
  1227.  
  1228. #customize-controls .notice.notification-overlay,
  1229. #customize-controls #customize-notifications-area .notice.notification-overlay {
  1230.     margin: 0;
  1231.     border-right: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
  1232. }
  1233.  
  1234. #customize-controls .customize-control-notifications-container.has-overlay-notifications {
  1235.     -webkit-animation: customize-fade-in 0.5s;
  1236.     animation: customize-fade-in 0.5s;
  1237.     z-index: 30;
  1238. }
  1239.  
  1240. /* Note: Styles for this are also defined in themes.css */
  1241. #customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
  1242.     clear: both;
  1243.     color: #191e23;
  1244.     font-size: 18px;
  1245.     font-style: normal;
  1246.     margin: 0;
  1247.     padding: 2em 0;
  1248.     text-align: center;
  1249.     width: 100%;
  1250.     display: block;
  1251.     top: 50%;
  1252.     position: relative;
  1253. }
  1254.  
  1255. /* Style for custom settings */
  1256.  
  1257. /**
  1258.  * Static front page
  1259.  */
  1260.  
  1261. #customize-control-show_on_front.has-error {
  1262.     margin-bottom: 0;
  1263. }
  1264. #customize-control-show_on_front.has-error .customize-control-notifications-container {
  1265.     margin-top: 12px;
  1266. }
  1267.  
  1268. /**
  1269.  * Dropdowns
  1270.  */
  1271.  
  1272. .accordion-section .dropdown {
  1273.     float: right;
  1274.     display: block;
  1275.     position: relative;
  1276.     cursor: pointer;
  1277. }
  1278.  
  1279. .accordion-section .dropdown-content {
  1280.     overflow: hidden;
  1281.     float: right;
  1282.     min-width: 30px;
  1283.     height: 16px;
  1284.     line-height: 16px;
  1285.     margin-left: 16px;
  1286.     padding: 4px 5px;
  1287.     border: 2px solid #eee;
  1288.     -webkit-user-select: none;
  1289.     -moz-user-select: none;
  1290.     -ms-user-select: none;
  1291.     user-select: none;
  1292. }
  1293.  
  1294. /* @todo maybe no more used? */
  1295. .customize-control .dropdown-arrow {
  1296.     position: absolute;
  1297.     top: 0;
  1298.     bottom: 0;
  1299.     left: 0;
  1300.     width: 20px;
  1301.     background: #eee;
  1302. }
  1303.  
  1304. .customize-control .dropdown-arrow:after {
  1305.     content: "\f140";
  1306.     font: normal 20px/1 dashicons;
  1307.     speak: none;
  1308.     display: block;
  1309.     padding: 0;
  1310.     text-indent: 0;
  1311.     text-align: center;
  1312.     position: relative;
  1313.     -webkit-font-smoothing: antialiased;
  1314.     -moz-osx-font-smoothing: grayscale;
  1315.     text-decoration: none !important;
  1316.     color: #32373c;
  1317. }
  1318.  
  1319. .customize-control .dropdown-status {
  1320.     color: #32373c;
  1321.     background: #eee;
  1322.     display: none;
  1323.     max-width: 112px;
  1324. }
  1325.  
  1326. .customize-control-color .dropdown {
  1327.     margin-left: 5px;
  1328.     margin-bottom: 5px;
  1329. }
  1330.  
  1331. .customize-control-color .dropdown .dropdown-content {
  1332.     background-color: #555d66;
  1333.     border: 1px solid rgba(0, 0, 0, 0.15);
  1334. }
  1335.  
  1336. .customize-control-color .dropdown:hover .dropdown-content {
  1337.     border-color: rgba(0, 0, 0, 0.25);
  1338. }
  1339.  
  1340. /**
  1341.  * iOS can't scroll iframes,
  1342.  * instead it expands the iframe size to match the size of the content
  1343.  */
  1344.  
  1345. .ios .wp-full-overlay {
  1346.     position: relative;
  1347. }
  1348.  
  1349. .ios #customize-controls .wp-full-overlay-sidebar-content {
  1350.     -webkit-overflow-scrolling: touch;
  1351. }
  1352.  
  1353. /* Media controls */
  1354.  
  1355. .customize-control .actions .button {
  1356.     margin-top: 12px;
  1357. }
  1358.  
  1359. .customize-control-header .actions,
  1360. .customize-control-header .uploaded {
  1361.     margin-bottom: 18px;
  1362. }
  1363.  
  1364. .customize-control-header .uploaded button:not(.random),
  1365. .customize-control-header .default button:not(.random) {
  1366.     width: 100%;
  1367.     padding: 0;
  1368.     margin: 0;
  1369.     background: none;
  1370.     border: none;
  1371.     color: inherit;
  1372.     cursor: pointer;
  1373. }
  1374.  
  1375. .customize-control-header button img {
  1376.     display: block;
  1377. }
  1378.  
  1379. .customize-control .attachment-media-view .remove-button,
  1380. .customize-control .attachment-media-view .default-button,
  1381. .customize-control .attachment-media-view .upload-button,
  1382. .customize-control-header button.new,
  1383. .customize-control-header button.remove {
  1384.     width: auto;
  1385.     height: auto;
  1386.     white-space: normal;
  1387. }
  1388.  
  1389. .customize-control .attachment-media-view .thumbnail,
  1390. .customize-control-header .current .container {
  1391.     overflow: hidden;
  1392. }
  1393.  
  1394. .customize-control .attachment-media-view .placeholder,
  1395. .customize-control-header .placeholder {
  1396.     width: 100%;
  1397.     position: relative;
  1398.     text-align: center;
  1399.     cursor: default;
  1400.     border: 1px dashed #b4b9be;
  1401.     box-sizing: border-box;
  1402.     padding: 9px 0;
  1403.     line-height: 20px;
  1404. }
  1405.  
  1406. .customize-control-header .inner {
  1407.     display: none;
  1408.     position: absolute;
  1409.     width: 100%;
  1410.     color: #555d66;
  1411.     white-space: nowrap;
  1412.     text-overflow: ellipsis;
  1413.     overflow: hidden;
  1414. }
  1415.  
  1416. .customize-control-header .inner,
  1417. .customize-control-header .inner .dashicons {
  1418.     line-height: 20px;
  1419.     top: 8px;
  1420. }
  1421.  
  1422. .customize-control-header .list .inner,
  1423. .customize-control-header .list .inner .dashicons {
  1424.     top: 9px;
  1425. }
  1426.  
  1427. .customize-control-header .header-view {
  1428.     position: relative;
  1429.     width: 100%;
  1430.     margin-bottom: 12px;
  1431. }
  1432.  
  1433. .customize-control-header .header-view:last-child {
  1434.     margin-bottom: 0px;
  1435. }
  1436.  
  1437. /* Convoluted, but 'outline' support isn't good enough yet */
  1438. .customize-control-header .header-view:after {
  1439.     border: 0;
  1440. }
  1441.  
  1442. .customize-control-header .header-view.selected .choice:focus {
  1443.     outline: none;
  1444. }
  1445.  
  1446. .customize-control-header .header-view.selected:after {
  1447.     content: '';
  1448.     position: absolute;
  1449.     height: auto;
  1450.     top: 0;
  1451.     right: 0;
  1452.     bottom: 0;
  1453.     left: 0;
  1454.     border: 4px solid #00a0d2;
  1455.     border-radius: 2px;
  1456. }
  1457.  
  1458. .customize-control-header .header-view.button.selected {
  1459.     border: 0;
  1460. }
  1461.  
  1462. /* Header control: overlay "close" button */
  1463.  
  1464. .customize-control-header .uploaded .header-view .close {
  1465.     font-size: 20px;
  1466.     color: #fff;
  1467.     background: #555d66;
  1468.     background: rgba(0, 0, 0, 0.5);
  1469.     position: absolute;
  1470.     top: 10px;
  1471.     right: -999px;
  1472.     z-index: 1;
  1473.     width: 26px;
  1474.     height: 26px;
  1475.     cursor: pointer;
  1476. }
  1477.  
  1478. .customize-control-header .header-view:hover .close,
  1479. .customize-control-header .header-view .close:focus {
  1480.     right: auto;
  1481.     left: 10px;
  1482. }
  1483.  
  1484. .customize-control-header .header-view .close:focus {
  1485.     outline: 1px solid #5b9dd9;
  1486. }
  1487.  
  1488. /* Header control: randomiz(s)er */
  1489.  
  1490. .customize-control-header .random.placeholder {
  1491.     cursor: pointer;
  1492.     border-radius: 2px;
  1493.     height: 40px;
  1494. }
  1495.  
  1496. .customize-control-header button.random {
  1497.     width: 100%;
  1498.     height: auto;
  1499.     min-height: 40px;
  1500.     white-space: normal;
  1501. }
  1502.  
  1503. .customize-control-header button.random .dice {
  1504.     margin-top: 4px;
  1505. }
  1506.  
  1507. .customize-control-header .placeholder:hover .dice,
  1508. .customize-control-header .header-view:hover > button.random .dice {
  1509.     -webkit-animation: dice-color-change 3s infinite;
  1510.     animation: dice-color-change 3s infinite;
  1511. }
  1512.  
  1513. .button-see-me {
  1514.     -webkit-animation: bounce .7s 1;
  1515.     animation: bounce .7s 1;
  1516.     -webkit-transform-origin: center bottom;
  1517.     transform-origin: center bottom;
  1518. }
  1519.  
  1520. @-webkit-keyframes bounce {
  1521.     from, 20%, 53%, 80%, to {
  1522.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  1523.         -webkit-transform: translate3d(0,0,0);
  1524.     }
  1525.  
  1526.     40%, 43% {
  1527.         -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  1528.         -webkit-transform: translate3d(0, -12px, 0);
  1529.     }
  1530.  
  1531.     70% {
  1532.         -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  1533.         -webkit-transform: translate3d(0, -6px, 0);
  1534.     }
  1535.  
  1536.     90% {
  1537.         -webkit-transform: translate3d(0,-1px,0);
  1538.     }
  1539. }
  1540.  
  1541. @keyframes bounce {
  1542.     from, 20%, 53%, 80%, to {
  1543.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  1544.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  1545.         -webkit-transform: translate3d(0,0,0);
  1546.         transform: translate3d(0,0,0);
  1547.     }
  1548.  
  1549.     40%, 43% {
  1550.         -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  1551.         animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  1552.         -webkit-transform: translate3d(0, -12px, 0);
  1553.         transform: translate3d(0, -12px, 0);
  1554.     }
  1555.  
  1556.     70% {
  1557.         -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  1558.         animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  1559.         -webkit-transform: translate3d(0, -6px, 0);
  1560.         transform: translate3d(0, -6px, 0);
  1561.     }
  1562.  
  1563.     90% {
  1564.         -webkit-transform: translate3d(0,-1px,0);
  1565.         transform: translate3d(0,-1px,0);
  1566.     }
  1567. }
  1568.  
  1569. .customize-control-header .choice {
  1570.     position: relative;
  1571.     display: block;
  1572.     margin-bottom: 9px;
  1573. }
  1574.  
  1575. .customize-control-header .choice:focus {
  1576.     outline: none;
  1577.     box-shadow:
  1578.         0 0 0 1px #5b9dd9,
  1579.         0 0 3px 1px rgba(30, 140, 190, .8);
  1580. }
  1581.  
  1582. .customize-control-header .uploaded div:last-child > .choice {
  1583.     margin-bottom: 0;
  1584. }
  1585.  
  1586. .customize-control .attachment-media-view .thumbnail-image img,
  1587. .customize-control-header img {
  1588.     max-width: 100%;
  1589. }
  1590.  
  1591. .customize-control .attachment-media-view .remove-button,
  1592. .customize-control .attachment-media-view .default-button,
  1593. .customize-control-header .remove {
  1594.     margin-left: 8px;
  1595. }
  1596.  
  1597. /* Background position control */
  1598. .customize-control-background_position .background-position-control .button-group {
  1599.     display: block;
  1600. }
  1601.  
  1602. /**
  1603.  * Code Editor Control and Custom CSS Section
  1604.  *
  1605.  * Modifications to the Section Container to make the textarea full-width and
  1606.  * full-height, if the control is the only control in the section.
  1607.  */
  1608.  
  1609. .customize-control-code_editor textarea {
  1610.     width: 100%;
  1611.     font-family: Consolas, Monaco, monospace;
  1612.     font-size: 12px;
  1613.     padding: 6px 8px;
  1614.     -moz-tab-size: 2;
  1615.     -o-tab-size: 2;
  1616.     tab-size: 2;
  1617. }
  1618. .customize-control-code_editor textarea,
  1619. .customize-control-code_editor .CodeMirror {
  1620.     height: 14em;
  1621. }
  1622.  
  1623. #customize-controls .customize-section-description-container.section-meta.customize-info {
  1624.     border-bottom: none;
  1625. }
  1626.  
  1627. #sub-accordion-section-custom_css .customize-control-notifications-container {
  1628.     margin-bottom: 15px;
  1629. }
  1630.  
  1631. #customize-control-custom_css textarea {
  1632.     display: block;
  1633.     height: 500px;
  1634. }
  1635.  
  1636. .customize-section-description-container + #customize-control-custom_css .customize-control-title {
  1637.     margin-right: 12px;
  1638. }
  1639.  
  1640. .customize-section-description-container + #customize-control-custom_css:last-child textarea {
  1641.     border-left: 0;
  1642.     border-right: 0;
  1643.     height: calc( 100vh - 185px );
  1644.     resize: none;
  1645. }
  1646.  
  1647. .customize-section-description-container + #customize-control-custom_css:last-child {
  1648.     margin-right: -12px;
  1649.     width: 299px;
  1650.     width: calc( 100% + 24px );
  1651.     margin-bottom: -12px;
  1652. }
  1653.  
  1654. .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
  1655.     height: calc( 100vh - 185px );
  1656. }
  1657.  
  1658. .CodeMirror-lint-tooltip,
  1659. .CodeMirror-hints {
  1660.     z-index: 500000 !important;
  1661. }
  1662.  
  1663. .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
  1664.     margin-right: 12px;
  1665.     margin-left: 12px;
  1666. }
  1667.  
  1668. .theme-browser .theme.active .theme-actions,
  1669. .wp-customizer .theme-browser .theme .theme-actions {
  1670.     padding: 10px 15px;
  1671.     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  1672. }
  1673.  
  1674. @media screen and ( max-width: 640px ) {
  1675.     .customize-section-description-container + #customize-control-custom_css:last-child {
  1676.         margin-left: 0;
  1677.     }
  1678.  
  1679.     .customize-section-description-container + #customize-control-custom_css:last-child textarea {
  1680.         height: calc( 100vh - 140px );
  1681.     }
  1682. }
  1683.  
  1684. /**
  1685.  * Themes
  1686.  */
  1687.  
  1688. #customize-theme-controls .control-panel-themes {
  1689.     border-bottom: none;
  1690. }
  1691.  
  1692. #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
  1693. #customize-theme-controls .control-panel-themes > .accordion-section-title {
  1694.     cursor: default;
  1695.     background: #fff;
  1696.     color: #555d66;
  1697.     border-top: 1px solid #ddd;
  1698.     border-bottom: 1px solid #ddd;
  1699.     border-right: none;
  1700.     border-left: none;
  1701.     margin: 0 0 15px 0;
  1702.     padding-left: 100px; /* Space for the button */
  1703. }
  1704.  
  1705. #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
  1706. #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
  1707.     border-top: 0;
  1708. }
  1709.  
  1710. #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
  1711. #customize-theme-controls .control-section-themes > .accordion-section-title {
  1712.     margin: 0 0 15px;
  1713. }
  1714.  
  1715. #customize-controls .customize-themes-panel .accordion-section-title:hover,
  1716. #customize-controls .customize-themes-panel .accordion-section-title {
  1717.     margin: 15px -8px;
  1718. }
  1719.  
  1720. #customize-controls .control-section-themes .accordion-section-title,
  1721. #customize-controls .customize-themes-panel .accordion-section-title {
  1722.     padding-left: 100px; /* Space for the button */
  1723. }
  1724.  
  1725. .control-panel-themes .accordion-section-title span.customize-action,
  1726. #customize-controls .customize-section-title span.customize-action,
  1727. #customize-controls .control-section-themes .accordion-section-title span.customize-action,
  1728. #customize-controls .customize-section-title span.customize-action {
  1729.     font-size: 13px;
  1730.     display: block;
  1731.     font-weight: 400;
  1732. }
  1733.  
  1734. #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
  1735.     position: absolute;
  1736.     left: 10px;
  1737.     top: 50%;
  1738.     margin-top: -14px;
  1739.     font-weight: 400;
  1740. }
  1741.  
  1742. #customize-theme-controls .control-panel-themes > .accordion-section-title:after {
  1743.     display: none;
  1744. }
  1745.  
  1746. .control-panel-themes .customize-themes-full-container {
  1747.     position: fixed;
  1748.     top: 0;
  1749.     right: 0;
  1750.     transition: .18s right ease-in-out;
  1751.     margin: 0 300px 0 0;
  1752.     padding: 71px 0 25px;
  1753.     overflow-y: scroll;
  1754.     width: calc(100% - 300px);
  1755.     height: calc(100% - 96px);
  1756.     background: #eee;
  1757.     z-index: 20;
  1758. }
  1759.  
  1760. @media screen and (min-width: 1670px) {
  1761.     .control-panel-themes .customize-themes-full-container {
  1762.         width: 82%;
  1763.         left: 0;
  1764.         right: initial;
  1765.     }
  1766. }
  1767.  
  1768. .modal-open .control-panel-themes .customize-themes-full-container {
  1769.     overflow-y: visible;
  1770. }
  1771.  
  1772. /* Animations for opening the themes panel */
  1773. #customize-save-button-wrapper,
  1774. #customize-header-actions .spinner,
  1775. #customize-header-actions .customize-controls-preview-toggle {
  1776.     transition: .18s margin ease-in-out;
  1777. }
  1778.  
  1779. #customize-footer-actions,
  1780. #customize-footer-actions .collapse-sidebar {
  1781.     bottom: 0;
  1782.     transition: .18s bottom ease-in-out;
  1783. }
  1784.  
  1785. .in-themes-panel:not(.animating) #customize-header-actions .spinner,
  1786. .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
  1787. .in-themes-panel:not(.animating) #customize-preview,
  1788. .in-themes-panel:not(.animating) #customize-footer-actions {
  1789.     visibility: hidden;
  1790. }
  1791.  
  1792. .wp-full-overlay.in-themes-panel {
  1793.     background: #eee; /* Prevents a black flash when fading in the panel */
  1794. }
  1795.  
  1796. .in-themes-panel #customize-save-button-wrapper,
  1797. .in-themes-panel #customize-header-actions .spinner,
  1798. .in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
  1799.     margin-top: -46px; /* Height of header actions bar */
  1800. }
  1801.  
  1802. .in-themes-panel #customize-footer-actions,
  1803. .in-themes-panel #customize-footer-actions .collapse-sidebar {
  1804.     bottom: -45px;
  1805. }
  1806.  
  1807. /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
  1808. .in-themes-panel.animating .control-panel-themes .filter-themes-count {
  1809.     display: none;
  1810. }
  1811.  
  1812. .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
  1813.     bottom: 0;
  1814. }
  1815.  
  1816. .themes-filter-bar .feature-filter-toggle {
  1817.     float: left;
  1818.     margin: 3px 25px 3px 0;
  1819. }
  1820.  
  1821. .themes-filter-bar .feature-filter-toggle:before {
  1822.     content: "\f111";
  1823.     margin: 0 0 0 5px;
  1824.     font: normal 16px/1 dashicons;
  1825.     vertical-align: text-bottom;
  1826.     -webkit-font-smoothing: antialiased;
  1827.     -moz-osx-font-smoothing: grayscale;
  1828. }
  1829.  
  1830. .themes-filter-bar .feature-filter-toggle.open {
  1831.     background: #eee;
  1832.     border-color: #999;
  1833.     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
  1834.     -webkit-transform: translateY(1px);
  1835.     transform: translateY(1px);
  1836. }
  1837.  
  1838. .themes-filter-bar .feature-filter-toggle .filter-count-filters {
  1839.     display: none;
  1840. }
  1841.  
  1842. .filter-drawer {
  1843.     box-sizing: border-box;
  1844.     width: 100%;
  1845.     position: absolute;
  1846.     top: 46px;
  1847.     right: 0;
  1848.     padding: 25px 25px 25px 0;
  1849.     border-top: 0;
  1850.     margin: 0;
  1851.     background: #eee;
  1852.     border-bottom: 1px solid #ddd;
  1853. }
  1854.  
  1855. .filter-drawer .filter-group {
  1856.     margin: 0 0 0 25px;
  1857.     width: calc( (100% - 75px) / 3);
  1858.     min-width: 200px;
  1859.     max-width: 320px;
  1860. }
  1861.  
  1862. /* Adds a delay before fading in to avoid it "jumping" */
  1863. @-webkit-keyframes themes-fade-in {
  1864.     0% {
  1865.         opacity: 0;
  1866.     }
  1867.     50% {
  1868.         opacity: 0;
  1869.     }
  1870.     100% {
  1871.         opacity: 1;
  1872.     }
  1873. }
  1874. @keyframes themes-fade-in {
  1875.     0% {
  1876.         opacity: 0;
  1877.     }
  1878.     50% {
  1879.         opacity: 0;
  1880.     }
  1881.     100% {
  1882.         opacity: 1;
  1883.     }
  1884. }
  1885.  
  1886. .control-panel-themes .customize-themes-full-container.animate {
  1887.     -webkit-animation: .6s themes-fade-in 1;
  1888.     animation: .6s themes-fade-in 1;
  1889. }
  1890.  
  1891. .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
  1892.     -webkit-animation: .6s themes-fade-in 1;
  1893.     animation: .6s themes-fade-in 1;
  1894. }
  1895.  
  1896. .control-panel-themes .filter-themes-count {
  1897.     position: relative;
  1898.     float: left;
  1899.     line-height: 34px;
  1900. }
  1901.  
  1902. .control-panel-themes .filter-themes-count .themes-displayed {
  1903.     font-weight: 600;
  1904.     color: #555d66;
  1905. }
  1906.  
  1907. .customize-themes-notifications {
  1908.     margin: 0;
  1909. }
  1910.  
  1911. .control-panel-themes .customize-themes-notifications .notice {
  1912.     margin: 0 0 25px 0;
  1913. }
  1914.  
  1915. .customize-themes-full-container .customize-themes-section {
  1916.     display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
  1917.     overflow: hidden;
  1918. }
  1919.  
  1920. .customize-themes-full-container .customize-themes-section.current-section {
  1921.     display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
  1922. }
  1923.  
  1924. .control-section .customize-section-text-before {
  1925.     padding: 0 15px 8px 0;
  1926.     margin: 15px 0 0 0;
  1927.     line-height: 16px;
  1928.     border-bottom: 1px solid #ddd;
  1929.     color: #555d66;
  1930. }
  1931.  
  1932. .control-panel-themes .customize-themes-section-title {
  1933.     width: 100%;
  1934.     background: #fff;
  1935.     box-shadow: none;
  1936.     outline: none;
  1937.     border-top: none;
  1938.     border-bottom: 1px solid #ddd;
  1939.     border-right: 4px solid #fff;
  1940.     border-left: none;
  1941.     cursor: pointer;
  1942.     padding: 10px 15px;
  1943.     position: relative;
  1944.     text-align: right;
  1945.     font-size: 14px;
  1946.     font-weight: 600;
  1947.     color: #555d66;
  1948.     text-shadow: none;
  1949. }
  1950.  
  1951. .control-panel-themes #accordion-section-installed_themes {
  1952.     border-top: 1px solid #ddd;
  1953. }
  1954.  
  1955. .control-panel-themes .theme-section {
  1956.     margin: 0;
  1957.     position: relative;
  1958. }
  1959.  
  1960. .control-panel-themes .customize-themes-section-title:focus,
  1961. .control-panel-themes .customize-themes-section-title:hover {
  1962.     border-right-color: #0073aa;
  1963.     color: #0073aa;
  1964.     background: #f5f5f5;
  1965. }
  1966.  
  1967. .customize-themes-section-title:not(.selected):after {
  1968.     content: "";
  1969.     display: block;
  1970.     position: absolute;
  1971.     top: 9px;
  1972.     left: 15px;
  1973.     width: 18px;
  1974.     height: 18px;
  1975.     border-radius: 100%;
  1976.     border: 1px solid #ccc;
  1977.     background: #fff;
  1978. }
  1979.  
  1980. .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
  1981.     content: "\f147";
  1982.     font: 16px/1 dashicons;
  1983.     box-sizing: border-box;
  1984.     width: 20px;
  1985.     height: 20px;
  1986.     padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
  1987.     border-radius: 100%;
  1988.     position: absolute;
  1989.     top: 9px;
  1990.     left: 15px;
  1991.     background: #0073aa;
  1992.     color: #fff;
  1993. }
  1994.  
  1995. .control-panel-themes .customize-themes-section-title.selected {
  1996.     color: #0073aa;
  1997. }
  1998.  
  1999. #customize-theme-controls .themes.accordion-section-content {
  2000.     position: relative;
  2001.     right: 0;
  2002.     padding: 0;
  2003.     width: 100%;
  2004. }
  2005.  
  2006. .loading .customize-themes-section .spinner {
  2007.     display: block;
  2008.     visibility: visible;
  2009.     position: relative;
  2010.     clear: both;
  2011.     width: 20px;
  2012.     height: 20px;
  2013.     right: calc(50% - 10px);
  2014.     float: none;
  2015.     margin-top: 50px;
  2016. }
  2017.  
  2018. .customize-themes-section .no-themes,
  2019. .customize-themes-section .no-themes-local {
  2020.     display: none;
  2021. }
  2022.  
  2023. .themes-section-installed_themes .theme .notice-success:not(.updated-message) {
  2024.     display: none; /* Hide "installed" notice on installed themes tab. */
  2025. }
  2026.  
  2027. .customize-control-theme .theme {
  2028.     width: 100%;
  2029.     margin: 0;
  2030.     border: 1px solid #ddd;
  2031.     background: #fff;
  2032. }
  2033.  
  2034. .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
  2035.     background: #fff;
  2036.     border: none;
  2037. }
  2038.  
  2039. .customize-control.customize-control-theme { /* override most properties on .customize-control */
  2040.     box-sizing: border-box;
  2041.     width: 25%;
  2042.     max-width: 600px; /* Max. screenshot size / 2 */
  2043.     margin: 0 0 25px 25px;
  2044.     padding: 0;
  2045.     clear: none;
  2046. }
  2047.  
  2048. /* 5 columns above 2100px */
  2049. @media screen and (min-width: 2101px) {
  2050.     .customize-control.customize-control-theme {
  2051.         width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
  2052.     }
  2053. }
  2054.  
  2055. /* 4 columns up to 2100px */
  2056. @media screen and (min-width: 1601px) and (max-width: 2100px) {
  2057.     .customize-control.customize-control-theme {
  2058.         width: calc( ( 100% - 100px ) / 4 - 1px );
  2059.     }
  2060. }
  2061.  
  2062. /* 3 columns up to 1600px */
  2063. @media screen and (min-width: 1201px) and (max-width: 1600px) {
  2064.     .customize-control.customize-control-theme {
  2065.         width: calc( ( 100% - 75px ) / 3 - 1px );
  2066.     }
  2067. }
  2068.  
  2069. /* 2 columns up to 1200px */
  2070. @media screen and (min-width: 851px) and (max-width: 1200px) {
  2071.     .customize-control.customize-control-theme {
  2072.         width: calc( ( 100% - 50px ) / 2 - 1px );
  2073.  
  2074.     }
  2075. }
  2076.  
  2077. /* 1 column up to 850 px */
  2078. @media screen and (max-width: 850px) {
  2079.     .customize-control.customize-control-theme {
  2080.         width: 100%;
  2081.     }
  2082. }
  2083.  
  2084. .wp-customizer .theme-browser .themes {
  2085.     padding: 0 25px 25px 0;
  2086.     transition: .18s margin-top linear;
  2087. }
  2088.  
  2089. .wp-customizer .theme-browser .theme .theme-actions {
  2090.     opacity: 1;
  2091. }
  2092.  
  2093. #customize-controls h3.theme-name {
  2094.     font-size: 15px;
  2095. }
  2096.  
  2097. #customize-controls .theme-overlay .theme-name {
  2098.     font-size: 32px;
  2099. }
  2100.  
  2101. .customize-preview-header.themes-filter-bar {
  2102.     position: fixed;
  2103.     top: 0;
  2104.     right: 300px;
  2105.     width: calc(100% - 300px);
  2106.     height: 46px;
  2107.     background: #eee;
  2108.     z-index: 10;
  2109.     padding: 6px 25px;
  2110.     box-sizing: border-box;
  2111.     border-bottom: 1px solid #ddd;
  2112. }
  2113.  
  2114. @media screen and (min-width: 1670px) {
  2115.     .customize-preview-header.themes-filter-bar {
  2116.         width: 82%;
  2117.         left: 0;
  2118.         right: initial;
  2119.     }
  2120. }
  2121.  
  2122. .themes-filter-bar .themes-filter-container {
  2123.     margin: 0;
  2124.     padding: 0;
  2125. }
  2126.  
  2127. .themes-filter-bar .wp-filter-search {
  2128.     line-height: 25px;
  2129.     padding: 6px 30px 6px 10px;
  2130.     max-width: 100%;
  2131.     width: 40%;
  2132.     min-width: 300px;
  2133.     position: absolute;
  2134.     top: 6px;
  2135.     right: 25px;
  2136.     height: 32px;
  2137.     margin: 1px 0;
  2138. }
  2139.  
  2140. /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
  2141.    current length of .org feature filters assuming translations do not wrap lines. */
  2142. @media screen and (max-height:540px), screen and (max-width:1018px) {
  2143.     .customize-preview-header.themes-filter-bar {
  2144.         position: relative;
  2145.         right: 0;
  2146.         width: 100%;
  2147.         margin: 0 0 25px 0;
  2148.     }
  2149.     .filter-drawer {
  2150.         top: 46px;
  2151.     }
  2152.     .wp-customizer .theme-browser .themes {
  2153.         padding: 0 25px 25px 0;
  2154.         overflow: hidden;
  2155.     }
  2156.  
  2157.     .control-panel-themes .customize-themes-full-container {
  2158.         margin-top: 0;
  2159.         padding: 0;
  2160.         height: 100%;
  2161.         width: calc(100% - 300px);
  2162.     }
  2163. }
  2164.  
  2165. @media screen and (max-width:1018px) {
  2166.     .filter-drawer .filter-group {
  2167.         width: calc( (100% - 50px) / 2);
  2168.     }
  2169. }
  2170.  
  2171. @media screen and (max-width:900px) {
  2172.     .customize-preview-header.themes-filter-bar {
  2173.         height: 86px;
  2174.         padding-top: 46px;
  2175.     }
  2176.  
  2177.     .themes-filter-bar .wp-filter-search {
  2178.         width: calc(100% - 50px);
  2179.         margin: 0;
  2180.         min-width: 200px;
  2181.     }
  2182.  
  2183.     .filter-drawer {
  2184.         top: 86px;
  2185.     }
  2186.  
  2187.     .control-panel-themes .filter-themes-count {
  2188.         float: right;
  2189.     }
  2190. }
  2191.  
  2192. @media screen and (max-width:792px) {
  2193.     .filter-drawer .filter-group {
  2194.         width: calc( 100% - 25px);
  2195.     }
  2196. }
  2197.  
  2198. .control-panel-themes .customize-themes-mobile-back {
  2199.     display: none;
  2200. }
  2201.  
  2202. /* Mobile - toggle between themes and filters */
  2203. @media screen and (max-width:600px) {
  2204.  
  2205.     .filter-drawer {
  2206.         top: 132px;
  2207.     }
  2208.  
  2209.     .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
  2210.         display: block;
  2211.         float: left;
  2212.     }
  2213.  
  2214.     .control-panel-themes .customize-themes-full-container {
  2215.         width: 100%;
  2216.         margin: 0;
  2217.         padding-top: 46px;
  2218.         height: calc(100% - 46px);
  2219.         z-index: 1;
  2220.         display: none;
  2221.     }
  2222.  
  2223.     .showing-themes .control-panel-themes .customize-themes-full-container {
  2224.         display: block;
  2225.     }
  2226.  
  2227.     .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
  2228.         display: block;
  2229.         position: fixed;
  2230.         top: 0;
  2231.         right: 0;
  2232.         background: #eee;
  2233.         color: #444;
  2234.         border-radius: 0;
  2235.         box-shadow: none;
  2236.         border: none;
  2237.         height: 46px;
  2238.         width: 100%;
  2239.         z-index: 10;
  2240.         text-align: right;
  2241.         text-shadow: none;
  2242.         border-bottom: 1px solid #ddd;
  2243.         border-right: 4px solid transparent;
  2244.         margin: 0;
  2245.         padding: 0;
  2246.         font-size: 0;
  2247.         overflow: hidden;
  2248.     }
  2249.  
  2250.     .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
  2251.         right: 0;
  2252.         top: 0;
  2253.         height: 46px;
  2254.         width: 26px;
  2255.         display: block;
  2256.         line-height: 46px;
  2257.         padding: 0 8px 0 8px;
  2258.         border-left: 1px solid #ddd;
  2259.     }
  2260.  
  2261.     .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
  2262.     .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
  2263.         color: #0073aa;
  2264.         background: #f3f3f5;
  2265.         border-right-color: #0073aa;
  2266.         outline: none;
  2267.         box-shadow: none;
  2268.     }
  2269.  
  2270.     .showing-themes #customize-header-actions {
  2271.         display: none;
  2272.     }
  2273.  
  2274.     #customize-controls {
  2275.         width: 100%;
  2276.     }
  2277. }
  2278.  
  2279. /* Details View */
  2280. .wp-customizer .theme-overlay {
  2281.     display: none;
  2282. }
  2283.  
  2284. .wp-customizer.modal-open .theme-overlay {
  2285.     position: fixed;
  2286.     right: 0;
  2287.     top: 0;
  2288.     left: 0;
  2289.     bottom: 0;
  2290.     z-index: 109;
  2291. }
  2292.  
  2293. /* Avoid a z-index war by resetting elements that should be under the overlay.
  2294.    This is likely required because of the way that sections and panels are positioned. */
  2295. .wp-customizer.modal-open #customize-header-actions,
  2296. .wp-customizer.modal-open .control-panel-themes .filter-themes-count,
  2297. .wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
  2298.     z-index: -1;
  2299. }
  2300.  
  2301. .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
  2302.     overflow: visible;
  2303. }
  2304.  
  2305. .wp-customizer .theme-overlay .theme-backdrop {
  2306.     background: rgba( 238, 238, 238, 0.75 );
  2307.     position: fixed;
  2308.     z-index: 110;
  2309. }
  2310.  
  2311. .wp-customizer .theme-overlay .star-rating {
  2312.     float: right;
  2313.     margin-left: 8px;
  2314. }
  2315.  
  2316. .wp-customizer .theme-rating .num-ratings {
  2317.     line-height: 20px;
  2318. }
  2319.  
  2320. .wp-customizer .theme-overlay .theme-wrap {
  2321.     right: 90px;
  2322.     left: 90px;
  2323.     top: 45px;
  2324.     bottom: 45px;
  2325.     z-index: 120;
  2326. }
  2327.  
  2328. .wp-customizer .theme-overlay .theme-actions {
  2329.     text-align: left; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
  2330.     padding: 10px 25px;
  2331.     background: #eee;
  2332.     border-top: 1px solid #ddd;
  2333. }
  2334.  
  2335. .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
  2336.     margin-right: 8px;
  2337. }
  2338.  
  2339. .control-panel-themes .theme-actions .delete-theme {
  2340.     right: 15px; /* these override themes.css on mobile */
  2341.     left: auto;
  2342.     bottom: auto;
  2343.     position: absolute;
  2344. }
  2345.  
  2346. .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
  2347.     overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
  2348. }
  2349.  
  2350. .wp-customizer .theme-header {
  2351.     background: #eee;
  2352. }
  2353.  
  2354. .wp-customizer .theme-overlay .theme-header button,
  2355. .wp-customizer .theme-overlay .theme-header .close:before {
  2356.     color: #444;
  2357. }
  2358.  
  2359. .wp-customizer .theme-overlay .theme-header .close:focus,
  2360. .wp-customizer .theme-overlay .theme-header .close:hover,
  2361. .wp-customizer .theme-overlay .theme-header .right:focus,
  2362. .wp-customizer .theme-overlay .theme-header .right:hover,
  2363. .wp-customizer .theme-overlay .theme-header .left:focus,
  2364. .wp-customizer .theme-overlay .theme-header .left:hover {
  2365.     background: #fff;
  2366.     border-bottom: 4px solid #0073aa;
  2367.     color: #0073aa;
  2368. }
  2369.  
  2370. .wp-customizer .theme-overlay .theme-header .close:focus:before,
  2371. .wp-customizer .theme-overlay .theme-header .close:hover:before {
  2372.     color: #0073aa;
  2373. }
  2374.  
  2375. .wp-customizer .theme-overlay .theme-header button.disabled,
  2376. .wp-customizer .theme-overlay .theme-header button.disabled:hover,
  2377. .wp-customizer .theme-overlay .theme-header button.disabled:focus {
  2378.     border-bottom: none;
  2379.     background: transparent;
  2380.     color: #ccc;
  2381. }
  2382.  
  2383. /* Small Screens */
  2384. @media (max-width:850px), (max-height:472px) {
  2385.     .wp-customizer .theme-overlay .theme-wrap {
  2386.         right: 0;
  2387.         left: 0;
  2388.         top: 0;
  2389.         bottom: 0;
  2390.     }
  2391.  
  2392.     .wp-customizer .theme-browser .themes {
  2393.         padding-left: 25px;
  2394.     }
  2395. }
  2396.  
  2397. /* Handle cheaters. */
  2398. body.cheatin {
  2399.     font-size: medium;
  2400.     height: auto;
  2401.     background: #fff;
  2402.     margin: 50px auto 2em;
  2403.     padding: 1em 2em;
  2404.     max-width: 700px;
  2405.     min-width: 0;
  2406.     box-shadow: 0 1px 3px rgba(0,0,0,0.13);
  2407. }
  2408.  
  2409. body.cheatin h1 {
  2410.     border-bottom: 1px solid #ddd;
  2411.     clear: both;
  2412.     color: #555d66;
  2413.     font-size: 24px;
  2414.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2415.     margin: 30px 0 0 0;
  2416.     padding: 0;
  2417.     padding-bottom: 7px;
  2418. }
  2419.  
  2420. body.cheatin p {
  2421.     font-size: 14px;
  2422.     line-height: 1.5;
  2423.     margin: 25px 0 20px;
  2424. }
  2425.  
  2426. /**
  2427.  * Widgets and Menus common styles
  2428.  */
  2429.  
  2430. /* higher specificity than .wp-core-ui .button */
  2431. #customize-theme-controls .add-new-widget,
  2432. #customize-theme-controls .add-new-menu-item {
  2433.     cursor: pointer;
  2434.     float: left;
  2435.     margin: 0;
  2436.     margin-right: 10px;
  2437.     transition: all 0.2s;
  2438.     -webkit-user-select: none;
  2439.     -moz-user-select: none;
  2440.     -ms-user-select: none;
  2441.     user-select: none;
  2442.     outline: none;
  2443. }
  2444.  
  2445. .reordering .add-new-widget,
  2446. .reordering .add-new-menu-item {
  2447.     opacity: 0.2;
  2448.     pointer-events: none;
  2449.     cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
  2450. }
  2451.  
  2452. .add-new-widget:before,
  2453. .add-new-menu-item:before,
  2454. #available-menu-items .new-content-item .add-content:before {
  2455.     content: "\f132";
  2456.     display: inline-block;
  2457.     position: relative;
  2458.     right: -2px;
  2459.     top: 0;
  2460.     font: normal 20px/1 dashicons;
  2461.     vertical-align: middle;
  2462.     transition: all 0.2s;
  2463.     -webkit-font-smoothing: antialiased;
  2464.     -moz-osx-font-smoothing: grayscale;
  2465. }
  2466.  
  2467. /* Reordering */
  2468. .reorder-toggle {
  2469.     float: left;
  2470.     padding: 5px 8px;
  2471.     text-decoration: none;
  2472.     cursor: pointer;
  2473.     outline: none;
  2474. }
  2475.  
  2476. .reorder,
  2477. .reordering .reorder-done {
  2478.     display: block;
  2479.     padding: 5px 8px;
  2480. }
  2481.  
  2482. .reorder-done,
  2483. .reordering .reorder {
  2484.     display: none;
  2485. }
  2486.  
  2487. .widget-reorder-nav span,
  2488. .menu-item-reorder-nav button {
  2489.     position: relative;
  2490.     overflow: hidden;
  2491.     float: right;
  2492.     display: block;
  2493.     width: 33px; /* was 42px for mobile */
  2494.     height: 43px;
  2495.     color: #82878c;
  2496.     text-indent: -9999px;
  2497.     cursor: pointer;
  2498.     outline: none;
  2499. }
  2500.  
  2501. .menu-item-reorder-nav button {
  2502.     width: 30px;
  2503.     height: 40px;
  2504.     background: transparent;
  2505.     border: none;
  2506.     box-shadow: none;
  2507. }
  2508.  
  2509. .widget-reorder-nav span:before,
  2510. .menu-item-reorder-nav button:before {
  2511.     display: inline-block;
  2512.     position: absolute;
  2513.     top: 0;
  2514.     left: 0;
  2515.     width: 100%;
  2516.     height: 100%;
  2517.     font: normal 20px/43px dashicons;
  2518.     text-align: center;
  2519.     text-indent: 0;
  2520.     -webkit-font-smoothing: antialiased;
  2521.     -moz-osx-font-smoothing: grayscale;
  2522. }
  2523.  
  2524. .widget-reorder-nav span:hover,
  2525. .widget-reorder-nav span:focus,
  2526. .menu-item-reorder-nav button:hover,
  2527. .menu-item-reorder-nav button:focus {
  2528.     color: #191e23;
  2529.     background: #eee;
  2530. }
  2531.  
  2532. .move-widget-down:before,
  2533. .menus-move-down:before {
  2534.     content: "\f347";
  2535. }
  2536.  
  2537. .move-widget-up:before,
  2538. .menus-move-up:before {
  2539.     content: "\f343";
  2540. }
  2541.  
  2542. #customize-theme-controls .first-widget .move-widget-up,
  2543. #customize-theme-controls .last-widget .move-widget-down,
  2544. .move-up-disabled .menus-move-up,
  2545. .move-down-disabled .menus-move-down,
  2546. .move-right-disabled .menus-move-right,
  2547. .move-left-disabled .menus-move-left {
  2548.     color: #d5d5d5;
  2549.     background-color: #fff;
  2550.     cursor: default;
  2551.     pointer-events: none;
  2552. }
  2553.  
  2554. /**
  2555.  * New widget and Add-menu-items modes and panels
  2556.  */
  2557.  
  2558. .wp-full-overlay-main {
  2559.     left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
  2560.     width: 100%;
  2561. }
  2562.  
  2563. body.adding-widget .add-new-widget,
  2564. body.adding-widget .add-new-widget:hover,
  2565. .adding-menu-items .add-new-menu-item,
  2566. .adding-menu-items .add-new-menu-item:hover,
  2567. .add-menu-toggle.open,
  2568. .add-menu-toggle.open:hover {
  2569.     background: #eee;
  2570.     border-color: #929793;
  2571.     color: #32373c;
  2572.     box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
  2573. }
  2574.  
  2575. body.adding-widget .add-new-widget:before,
  2576. .adding-menu-items .add-new-menu-item:before,
  2577. #accordion-section-add_menu .add-new-menu-item.open:before {
  2578.     -webkit-transform: rotate(-45deg);
  2579.     transform: rotate(-45deg);
  2580. }
  2581.  
  2582. #available-widgets,
  2583. #available-menu-items {
  2584.     position: absolute;
  2585.     top: 0;
  2586.     bottom: 0;
  2587.     right: -301px;
  2588.     visibility: hidden;
  2589.     overflow-x: hidden;
  2590.     overflow-y: auto;
  2591.     width: 300px;
  2592.     margin: 0;
  2593.     z-index: 4;
  2594.     background: #eee;
  2595.     transition: right .18s;
  2596.     border-left: 1px solid #ddd;
  2597. }
  2598.  
  2599. #available-widgets .customize-section-title,
  2600. #available-menu-items .customize-section-title {
  2601.     display: none;
  2602. }
  2603.  
  2604. #available-widgets-list {
  2605.     top: 60px;
  2606.     position: absolute;
  2607.     overflow: auto;
  2608.     bottom: 0;
  2609.     width: 100%;
  2610.     border-top: 1px solid #ddd;
  2611. }
  2612.  
  2613. .no-widgets-found #available-widgets-list {
  2614.     border-top: none;
  2615. }
  2616.  
  2617. #available-widgets-filter {
  2618.     position: fixed;
  2619.     top: 0;
  2620.     z-index: 1;
  2621.     width: 300px;
  2622.     background: #eee;
  2623. }
  2624.  
  2625. /* search field container */
  2626. #available-widgets-filter,
  2627. #available-menu-items-search .accordion-section-title {
  2628.     padding: 13px 15px;
  2629.     box-sizing: border-box;
  2630. }
  2631.  
  2632. #available-widgets-filter input,
  2633. #available-menu-items-search input {
  2634.     width: 100%;
  2635.     height: 32px;
  2636.     margin: 1px 0;
  2637.     padding: 6px 30px;
  2638. }
  2639.  
  2640. #available-widgets-filter input::-ms-clear,
  2641. #available-menu-items-search input::-ms-clear {
  2642.     display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
  2643. }
  2644.  
  2645. #available-menu-items-search .search-icon,
  2646. #available-widgets-filter .search-icon {
  2647.     display: block;
  2648.     position: absolute;
  2649.     top: 15px; /* 13 container padding +1 input margin +1 input border */
  2650.     right: 16px;
  2651.     width: 30px;
  2652.     height: 30px;
  2653.     line-height: 28px;
  2654.     text-align: center;
  2655.     color: #72777c;
  2656. }
  2657.  
  2658. #available-widgets-filter .clear-results,
  2659. #available-menu-items-search .clear-results {
  2660.     position: absolute;
  2661.     top: 15px; /* 13 container padding +1 input margin +1 input border */
  2662.     left: 16px;
  2663.     width: 30px;
  2664.     height: 30px;
  2665.     padding: 0;
  2666.     border: 0;
  2667.     cursor: pointer;
  2668.     background: none;
  2669.     color: #a00;
  2670.     text-decoration: none;
  2671.     outline: 0;
  2672. }
  2673.  
  2674. #available-widgets-filter .clear-results,
  2675. #available-menu-items-search .clear-results,
  2676. #available-menu-items-search.loading .clear-results.is-visible {
  2677.     display: none;
  2678. }
  2679.  
  2680. #available-widgets-filter .clear-results.is-visible,
  2681. #available-menu-items-search .clear-results.is-visible {
  2682.     display: block;
  2683. }
  2684.  
  2685. #available-widgets-filter .clear-results:before,
  2686. #available-menu-items-search .clear-results:before {
  2687.     content: "\f335";
  2688.     font: normal 20px/1 dashicons;
  2689.     vertical-align: middle;
  2690.     -webkit-font-smoothing: antialiased;
  2691.     -moz-osx-font-smoothing: grayscale;
  2692. }
  2693.  
  2694. #available-widgets-filter .clear-results:hover,
  2695. #available-widgets-filter .clear-results:focus,
  2696. #available-menu-items-search .clear-results:hover,
  2697. #available-menu-items-search .clear-results:focus {
  2698.     color: #dc3232;
  2699. }
  2700.  
  2701. #available-widgets-filter .clear-results:focus,
  2702. #available-menu-items-search .clear-results:focus {
  2703.     box-shadow:
  2704.         0 0 0 1px #5b9dd9,
  2705.         0 0 2px 1px rgba(30, 140, 190, .8);
  2706. }
  2707.  
  2708. #available-menu-items-search .search-icon:after,
  2709. #available-widgets-filter .search-icon:after,
  2710. .themes-filter-bar .search-icon:after {
  2711.     content: "\f179";
  2712.     font: normal 20px/1 dashicons;
  2713.     vertical-align: middle;
  2714.     -webkit-font-smoothing: antialiased;
  2715.     -moz-osx-font-smoothing: grayscale;
  2716. }
  2717.  
  2718. .themes-filter-bar .search-icon {
  2719.     position: absolute;
  2720.     top: 7px;
  2721.     right: 26px;
  2722.     z-index: 1;
  2723.     color: #72777c;
  2724.     height: 30px;
  2725.     width: 30px;
  2726.     line-height: 2;
  2727.     text-align: center;
  2728. }
  2729.  
  2730. .no-widgets-found-message {
  2731.     display: none;
  2732.     margin: 0;
  2733.     padding: 0 15px;
  2734.     line-height: inherit;
  2735. }
  2736.  
  2737. .no-widgets-found .no-widgets-found-message {
  2738.     display: block;
  2739. }
  2740.  
  2741. #available-widgets .widget-top,
  2742. #available-widgets .widget-top:hover,
  2743. #available-menu-items .item-top,
  2744. #available-menu-items .item-top:hover {
  2745.     border: none;
  2746.     background: transparent;
  2747.     box-shadow: none;
  2748. }
  2749.  
  2750. #available-widgets .widget-tpl,
  2751. #available-menu-items .item-tpl {
  2752.     position: relative;
  2753.     padding: 15px 60px 15px 15px;
  2754.     background: #fff;
  2755.     border-bottom: 1px solid #ddd;
  2756.     border-right: 4px solid #fff;
  2757.     transition: .15s color ease-in-out,
  2758.                 .15s background-color ease-in-out,
  2759.                 .15s border-color ease-in-out;
  2760.     cursor: pointer;
  2761.     display: none;
  2762. }
  2763.  
  2764. #available-widgets .widget,
  2765. #available-menu-items .item {
  2766.     position: static;
  2767. }
  2768.  
  2769.  
  2770. /* Responsive */
  2771. .customize-controls-preview-toggle {
  2772.     display: none;
  2773. }
  2774.  
  2775. @media only screen and (max-width: 782px) {
  2776.     .wp-customizer .theme:not(.active):hover .theme-actions,
  2777.     .wp-customizer .theme:not(.active):focus .theme-actions {
  2778.         display: block;
  2779.     }
  2780.  
  2781.     .wp-customizer .theme-browser .theme.active .theme-name span {
  2782.         display: inline;
  2783.     }
  2784.  
  2785.     .customize-control-header button.random .dice {
  2786.         margin-top: 0;
  2787.     }
  2788.  
  2789.     .customize-control-radio .customize-inside-control-row,
  2790.     .customize-control-checkbox .customize-inside-control-row,
  2791.     .customize-control-nav_menu_auto_add .customize-inside-control-row {
  2792.         margin-right: 32px;
  2793.     }
  2794.  
  2795.     .customize-control-radio input,
  2796.     .customize-control-checkbox input,
  2797.     .customize-control-nav_menu_auto_add input {
  2798.         margin-right: -32px;
  2799.     }
  2800.  
  2801.     .customize-control input[type="radio"] + label + br,
  2802.     .customize-control input[type="checkbox"] + label + br {
  2803.         line-height: 32px; /* For widgets checkboxes */
  2804.     }
  2805.  
  2806.     .customize-control .date-time-fields select {
  2807.         height: 39px;
  2808.     }
  2809.  
  2810.     .date-time-fields .date-input.month {
  2811.         width: 79px;
  2812.     }
  2813.  
  2814.     .date-time-fields .date-input.day,
  2815.     .date-time-fields .date-input.hour,
  2816.     .date-time-fields .date-input.minute {
  2817.         width: 55px;
  2818.     }
  2819.  
  2820.     .date-time-fields .date-input.year {
  2821.         width: 80px;
  2822.     }
  2823.  
  2824.     .date-time-fields .date-timezone {
  2825.         line-height: 3.2;
  2826.     }
  2827.  
  2828.     #customize-control-changeset_preview_link a {
  2829.         bottom: 16px;
  2830.     }
  2831.  
  2832.     .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
  2833.         bottom: 10px;
  2834.     }
  2835.  
  2836.     .media-widget-control .media-widget-buttons .button.edit-media,
  2837.     .media-widget-control .media-widget-buttons .button.change-media,
  2838.     .media-widget-control .media-widget-buttons .button.select-media {
  2839.         margin-top: 12px;
  2840.     }
  2841.  
  2842.     .wp-core-ui .themes-filter-bar .feature-filter-toggle {
  2843.         margin: 3px 25px 3px 0;
  2844.     }
  2845. }
  2846.  
  2847. @media screen and ( max-width: 1200px ) {
  2848.     .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
  2849.     .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
  2850.     .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
  2851.         right: 67%;
  2852.     }
  2853. }
  2854.  
  2855. @media screen and ( max-width: 640px ) {
  2856.  
  2857.     /* when the sidebar is collapsed and switching to responsive view,
  2858.        bring it back see ticket #35220 */
  2859.     .wp-full-overlay.collapsed #customize-controls {
  2860.         margin-right: 0;
  2861.     }
  2862.  
  2863.     .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
  2864.         bottom: 0;
  2865.     }
  2866.  
  2867.     .customize-controls-preview-toggle {
  2868.         display: block;
  2869.         position: absolute;
  2870.         top: 0;
  2871.         right: 48px;
  2872.         line-height: 45px;
  2873.         font-size: 14px;
  2874.         padding: 0 12px;
  2875.         margin: 0;
  2876.         height: 45px;
  2877.         background: #eee;
  2878.         border: 0;
  2879.         border-left: 1px solid #ddd;
  2880.         color: #555d66;
  2881.         cursor: pointer;
  2882.         transition: color .1s ease-in-out, background .1s ease-in-out;
  2883.     }
  2884.  
  2885.     #customize-footer-actions,
  2886.     /*#customize-preview,*/
  2887.     .customize-controls-preview-toggle .controls,
  2888.     .preview-only .wp-full-overlay-sidebar-content,
  2889.     .preview-only .customize-controls-preview-toggle .preview {
  2890.         display: none;
  2891.     }
  2892.  
  2893.     .preview-only #customize-save-button-wrapper {
  2894.         margin-top: -46px;
  2895.     }
  2896.  
  2897.     .customize-controls-preview-toggle .preview:before,
  2898.     .customize-controls-preview-toggle .controls:before {
  2899.         font: normal 20px/1 dashicons;
  2900.         content: "\f177";
  2901.         position: relative;
  2902.         top: 4px;
  2903.         margin-left: 6px;
  2904.     }
  2905.  
  2906.     .customize-controls-preview-toggle .controls:before {
  2907.         content: "\f540";
  2908.     }
  2909.  
  2910.     .preview-only #customize-controls {
  2911.         height: 45px;
  2912.     }
  2913.  
  2914.     .preview-only #customize-preview,
  2915.     .preview-only .customize-controls-preview-toggle .controls {
  2916.         display: block;
  2917.     }
  2918.  
  2919.     .wp-core-ui.wp-customizer .button {
  2920.         padding: 6px 14px;
  2921.         line-height: normal;
  2922.         font-size: 14px;
  2923.         vertical-align: middle;
  2924.         height: auto;
  2925.     }
  2926.  
  2927.     #publish-settings {
  2928.         height: 31px;
  2929.     }
  2930.  
  2931.     #customize-control-changeset_status .customize-inside-control-row {
  2932.         padding-top: 15px;
  2933.     }
  2934.  
  2935.     body.adding-widget div#available-widgets,
  2936.     body.adding-menu-items div#available-menu-items,
  2937.     body.outer-section-open div#customize-sidebar-outer-content {
  2938.         width: 100%;
  2939.     }
  2940.  
  2941.     #available-widgets .customize-section-title,
  2942.     #available-menu-items .customize-section-title {
  2943.         display: block;
  2944.         margin: 0;
  2945.     }
  2946.  
  2947.     #available-widgets .customize-section-back,
  2948.     #available-menu-items .customize-section-back {
  2949.         height: 69px;
  2950.     }
  2951.  
  2952.     #available-widgets .customize-section-title h3,
  2953.     #available-menu-items .customize-section-title h3 {
  2954.         font-size: 20px;
  2955.         font-weight: 200;
  2956.         padding: 9px 14px 12px 10px;
  2957.         margin: 0;
  2958.         line-height: 24px;
  2959.         color: #555d66;
  2960.         display: block;
  2961.         overflow: hidden;
  2962.         white-space: nowrap;
  2963.         text-overflow: ellipsis;
  2964.     }
  2965.  
  2966.     #available-widgets .customize-section-title .customize-action,
  2967.     #available-menu-items .customize-section-title .customize-action {
  2968.         font-size: 13px;
  2969.         display: block;
  2970.         font-weight: 400;
  2971.         overflow: hidden;
  2972.         white-space: nowrap;
  2973.         text-overflow: ellipsis;
  2974.     }
  2975.  
  2976.     #available-widgets-filter {
  2977.         position: relative;
  2978.         width: 100%;
  2979.         height: auto;
  2980.     }
  2981.  
  2982.     #available-widgets-list {
  2983.         top: 130px;
  2984.     }
  2985.  
  2986.     #available-menu-items-search .clear-results,
  2987.     #available-menu-items-search .search-icon {
  2988.         top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
  2989.     }
  2990.  
  2991.     .reorder,
  2992.     .reordering .reorder-done {
  2993.         padding: 8px;
  2994.     }
  2995.  
  2996.     .wp-core-ui .themes-filter-bar .feature-filter-toggle {
  2997.         margin: 0;
  2998.     }
  2999.  
  3000.     .theme-browser .theme.active .theme-actions,
  3001.     .wp-customizer .theme-browser .theme .theme-actions {
  3002.         padding: 9px 15px;
  3003.         box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  3004.     }
  3005. }
  3006.  
  3007. @media screen and ( max-width: 600px ) {
  3008.     .theme-browser .theme.active .theme-actions,
  3009.     .wp-customizer .theme-browser .theme .theme-actions {
  3010.         padding: 8px 15px;
  3011.         box-shadow: none;
  3012.     }
  3013.  
  3014.     .wp-full-overlay.expanded {
  3015.         margin-right: 0;
  3016.     }
  3017.  
  3018.     body.adding-widget div#available-widgets,
  3019.     body.adding-menu-items div#available-menu-items,
  3020.     body.outer-section-open div#customize-sidebar-outer-content {
  3021.         top: 46px;
  3022.         z-index: 10;
  3023.     }
  3024.  
  3025.     body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
  3026.         right: -100%;
  3027.     }
  3028.  
  3029.     body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
  3030.         right: 0;
  3031.     }
  3032. }
  3033.