home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-includes / css / media-views-rtl.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2017-10-03  |  46.9 KB  |  2,634 lines
  1. /**
  2.  * Base Styles
  3.  */
  4. .media-modal * {
  5.     box-sizing: content-box;
  6. }
  7.  
  8. .media-modal input,
  9. .media-modal select,
  10. .media-modal textarea {
  11.     box-sizing: border-box;
  12. }
  13.  
  14. .media-modal,
  15. .media-frame {
  16.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  17.     font-size: 12px;
  18.     -webkit-overflow-scrolling: touch;
  19. }
  20.  
  21. .media-modal legend,
  22. .media-modal label {
  23.     font-size: 13px;
  24. }
  25.  
  26. .media-frame input,
  27. .media-frame textarea {
  28.     padding: 6px 8px;
  29. }
  30.  
  31. .media-frame select,
  32. .wp-admin .media-frame select {
  33.     line-height: 28px;
  34.     margin-top: 3px;
  35. }
  36.  
  37. .media-frame a {
  38.     border-bottom: none;
  39.     color: #0073aa;
  40. }
  41.  
  42. .media-frame a:hover,
  43. .media-frame a:active {
  44.     color: #00a0d2;
  45. }
  46.  
  47. .media-frame a:focus {
  48.     box-shadow:
  49.         0 0 0 1px #5b9dd9,
  50.         0 0 2px 1px rgba(30, 140, 190, .8);
  51.     outline: none;
  52.     color: #124964;
  53. }
  54.  
  55. .media-frame a.button {
  56.     color: #32373c;
  57. }
  58.  
  59. .media-frame a.button:hover {
  60.     color: #23282d;
  61. }
  62.  
  63. .media-frame a.button-primary,
  64. .media-frame a.button-primary:hover {
  65.     color: #fff;
  66. }
  67.  
  68. .media-frame input[type="text"],
  69. .media-frame input[type="password"],
  70. .media-frame input[type="number"],
  71. .media-frame input[type="search"],
  72. .media-frame input[type="email"],
  73. .media-frame input[type="url"],
  74. .media-frame textarea,
  75. .media-frame select {
  76.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  77.     font-size: 12px;
  78.     border-width: 1px;
  79.     border-style: solid;
  80.     border-color: #ddd;
  81. }
  82.  
  83. .media-frame input[type="text"]:focus,
  84. .media-frame input[type="password"]:focus,
  85. .media-frame input[type="number"]:focus,
  86. .media-frame input[type="search"]:focus,
  87. .media-frame input[type="email"]:focus,
  88. .media-frame input[type="url"]:focus,
  89. .media-frame textarea:focus,
  90. .media-frame select:focus {
  91.     border-color: #5b9dd9;
  92. }
  93.  
  94. .media-frame select {
  95.     height: 24px;
  96.     padding: 2px;
  97. }
  98.  
  99. .media-frame input:disabled,
  100. .media-frame textarea:disabled,
  101. .media-frame input[readonly],
  102. .media-frame textarea[readonly] {
  103.     background-color: #eee;
  104. }
  105.  
  106. .media-frame input[type="search"] {
  107.     -webkit-appearance: textfield;
  108. }
  109.  
  110. .media-frame ::-webkit-input-placeholder {
  111.     color: #72777c;
  112. }
  113.  
  114. .media-frame ::-moz-placeholder {
  115.     color: #72777c;
  116.     opacity: 1;
  117. }
  118.  
  119. .media-frame :-ms-input-placeholder {
  120.     color: #72777c;
  121. }
  122.  
  123. .media-frame .hidden {
  124.     display: none;
  125. }
  126.  
  127. /*!
  128.  * jQuery UI Draggable/Sortable 1.11.4
  129.  * http://jqueryui.com
  130.  *
  131.  * Copyright jQuery Foundation and other contributors
  132.  * Released under the MIT license.
  133.  * http://jquery.org/license
  134.  */
  135. .ui-draggable-handle,
  136. .ui-sortable-handle {
  137.     touch-action: none;
  138. }
  139.  
  140. /**
  141.  * Modal
  142.  */
  143. .media-modal {
  144.     position: fixed;
  145.     top: 30px;
  146.     right: 30px;
  147.     left: 30px;
  148.     bottom: 30px;
  149.     z-index: 160000;
  150. }
  151.  
  152. .wp-customizer .media-modal {
  153.     z-index: 560000;
  154. }
  155.  
  156. .media-modal-backdrop {
  157.     position: fixed;
  158.     top: 0;
  159.     right: 0;
  160.     left: 0;
  161.     bottom: 0;
  162.     min-height: 360px;
  163.     background: #000;
  164.     opacity: 0.7;
  165.     z-index: 159900;
  166. }
  167.  
  168. .wp-customizer .media-modal-backdrop {
  169.     z-index: 559900;
  170. }
  171.  
  172. .media-modal-close {
  173.     position: absolute;
  174.     top: 0;
  175.     left: 0;
  176.     width: 50px;
  177.     height: 50px;
  178.     margin: 0;
  179.     padding: 0;
  180.     border: 1px solid transparent;
  181.     background: none;
  182.     color: #666;
  183.     z-index: 1000;
  184.     cursor: pointer;
  185.     outline: none;
  186.     transition: color .1s ease-in-out, background .1s ease-in-out;
  187. }
  188.  
  189. .media-modal-close:hover,
  190. .media-modal-close:active {
  191.     color: #00a0d2;
  192. }
  193.  
  194. .media-modal-close:focus {
  195.     color: #00a0d2;
  196.     border-color: #5b9dd9;
  197.     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  198. }
  199.  
  200. .media-modal-close span.media-modal-icon {
  201.     background-image: none;
  202. }
  203.  
  204. .media-modal-close .media-modal-icon:before {
  205.     content: "\f158";
  206.     font: normal 20px/1 dashicons;
  207.     speak: none;
  208.     vertical-align: middle;
  209.     -webkit-font-smoothing: antialiased;
  210.     -moz-osx-font-smoothing: grayscale;
  211. }
  212.  
  213. .media-modal-content {
  214.     position: absolute;
  215.     top: 0;
  216.     right: 0;
  217.     left: 0;
  218.     bottom: 0;
  219.     overflow: auto;
  220.     min-height: 300px;
  221.     box-shadow: 0 5px 15px rgba(0,0,0,0.7);
  222.     background: #fcfcfc;
  223.     -webkit-font-smoothing: subpixel-antialiased;
  224. }
  225.  
  226. .media-modal-content .media-frame select.attachment-filters {
  227.     margin-top: 11px;
  228.     margin-left: 2%;
  229.     width: 42%;
  230.     width: calc(48% - 12px);
  231. }
  232.  
  233. .media-modal-content .media-toolbar-primary .media-button {
  234.     float: left;
  235. }
  236.  
  237. .media-modal-content .attachments-browser .search {
  238.     width: 100%;
  239. }
  240.  
  241. /* higher specificity */
  242. .wp-core-ui .media-modal-icon {
  243.     background-image: url(../images/uploader-icons.png);
  244.     background-repeat: no-repeat;
  245. }
  246.  
  247. /**
  248.  * Toolbar
  249.  */
  250. .media-toolbar {
  251.     position: absolute;
  252.     top: 0;
  253.     right: 0;
  254.     left: 0;
  255.     z-index: 100;
  256.     height: 60px;
  257.     padding: 0 16px;
  258.     border: 0 solid #ddd;
  259.     overflow: hidden;
  260. }
  261.  
  262. .media-frame-toolbar .media-toolbar {
  263.     top: initial;
  264.     bottom: -45px;
  265.     height: auto;
  266.     overflow: initial;
  267.     border-top: 1px solid #ddd;
  268. }
  269.  
  270. @media screen and (max-width: 782px) {
  271.     .media-frame-toolbar .media-toolbar {
  272.         bottom: -48px;
  273.     }
  274. }
  275.  
  276. .media-toolbar-primary {
  277.     float: left;
  278.     height: 100%;
  279. }
  280.  
  281. .media-toolbar-secondary {
  282.     float: right;
  283.     height: 100%;
  284. }
  285.  
  286. .media-toolbar-primary > .media-button,
  287. .media-toolbar-primary > .media-button-group {
  288.     margin-right: 10px;
  289.     float: right;
  290.     margin-top: 15px;
  291. }
  292.  
  293. .media-toolbar-secondary > .media-button,
  294. .media-toolbar-secondary > .media-button-group {
  295.     margin-left: 10px;
  296.     margin-top: 15px;
  297. }
  298.  
  299. /**
  300.  * Sidebar
  301.  */
  302. .media-sidebar {
  303.     position: absolute;
  304.     top: 0;
  305.     left: 0;
  306.     bottom: 0;
  307.     width: 267px;
  308.     padding: 0 16px 24px;
  309.     z-index: 75;
  310.     background: #f3f3f3;
  311.     border-right: 1px solid #ddd;
  312.     overflow: auto;
  313.     -webkit-overflow-scrolling: touch;
  314. }
  315.  
  316. .hide-toolbar .media-sidebar {
  317.     bottom: 0;
  318. }
  319.  
  320. .media-sidebar .sidebar-title {
  321.     font-size: 20px;
  322.     margin: 0;
  323.     padding: 12px 10px 10px;
  324.     line-height: 28px;
  325. }
  326.  
  327. .media-sidebar .sidebar-content {
  328.     padding: 0 10px;
  329.     margin-bottom: 130px;
  330. }
  331.  
  332. .media-sidebar .search {
  333.     display: block;
  334.     width: 100%;
  335. }
  336.  
  337. .media-sidebar h3, /* Back-compat for pre-4.4 */
  338. .image-details h3, /* Back-compat for pre-4.4 */
  339. .media-sidebar h2,
  340. .image-details h2 {
  341.     position: relative;
  342.     font-weight: 600;
  343.     text-transform: uppercase;
  344.     font-size: 12px;
  345.     color: #666;
  346.     margin: 24px 0 8px;
  347. }
  348.  
  349. .media-sidebar .setting,
  350. .attachment-details .setting {
  351.     display: block;
  352.     float: right;
  353.     width: 100%;
  354.     margin: 1px 0;
  355. }
  356.  
  357. .media-sidebar .setting label,
  358. .attachment-details .setting label {
  359.     display: block;
  360. }
  361.  
  362. .media-sidebar .setting .link-to-custom,
  363. .attachment-details .setting .link-to-custom {
  364.     margin: 3px 2px 0;
  365. }
  366.  
  367. .media-sidebar .setting span,
  368. .attachment-details .setting span {
  369.     min-width: 30%;
  370.     margin-left: 4%;
  371.     font-size: 12px;
  372.     text-align: left;
  373.     word-wrap: break-word;
  374. }
  375.  
  376. .media-sidebar .setting .name {
  377.     max-width: 80px;
  378. }
  379.  
  380. .media-sidebar .setting select,
  381. .attachment-details .setting select {
  382.     max-width: 65%;
  383. }
  384.  
  385. .media-sidebar .setting input[type="checkbox"],
  386. .media-sidebar .field input[type="checkbox"],
  387. .media-sidebar .setting input[type="radio"],
  388. .media-sidebar .field input[type="radio"],
  389. .attachment-details .setting input[type="checkbox"],
  390. .attachment-details .field input[type="checkbox"],
  391. .attachment-details .setting input[type="radio"],
  392. .attachment-details .field input[type="radio"] {
  393.     float: none;
  394.     margin: 8px 3px 0;
  395.     padding: 0;
  396. }
  397.  
  398. .media-sidebar .setting span,
  399. .attachment-details .setting span,
  400. .compat-item label span {
  401.     float: right;
  402.     min-height: 22px;
  403.     padding-top: 8px;
  404.     line-height: 16px;
  405.     font-weight: 400;
  406.     color: #666;
  407. }
  408.  
  409. .compat-item label span {
  410.     text-align: left;
  411. }
  412.  
  413. .media-sidebar .setting input[type="text"],
  414. .media-sidebar .setting input[type="password"],
  415. .media-sidebar .setting input[type="email"],
  416. .media-sidebar .setting input[type="number"],
  417. .media-sidebar .setting input[type="search"],
  418. .media-sidebar .setting input[type="tel"],
  419. .media-sidebar .setting input[type="url"],
  420. .media-sidebar .setting textarea,
  421. .media-sidebar .setting .value,
  422. .attachment-details .setting input[type="text"],
  423. .attachment-details .setting input[type="password"],
  424. .attachment-details .setting input[type="email"],
  425. .attachment-details .setting input[type="number"],
  426. .attachment-details .setting input[type="search"],
  427. .attachment-details .setting input[type="tel"],
  428. .attachment-details .setting input[type="url"],
  429. .attachment-details .setting textarea,
  430. .attachment-details .setting .value {
  431.     box-sizing: border-box;
  432.     margin: 1px;
  433.     width: 65%;
  434.     float: left;
  435. }
  436.  
  437. .media-sidebar .setting .value,
  438. .attachment-details .setting .value {
  439.     margin: 0 1px;
  440.     text-align: right;
  441. }
  442.  
  443. .media-sidebar .setting textarea,
  444. .attachment-details .setting textarea,
  445. .compat-item .field textarea {
  446.     height: 62px;
  447.     resize: vertical;
  448. }
  449.  
  450. .media-sidebar select,
  451. .attachment-details select {
  452.     margin-top: 3px;
  453. }
  454.  
  455. .compat-item {
  456.     float: right;
  457.     width: 100%;
  458.     overflow: hidden;
  459. }
  460.  
  461. .compat-item table {
  462.     width: 100%;
  463.     table-layout: fixed;
  464.     border-spacing: 0;
  465.     border: 0;
  466. }
  467.  
  468. .compat-item tr {
  469.     padding: 2px 0;
  470.     display: block;
  471.     overflow: hidden;
  472. }
  473.  
  474. .compat-item .label,
  475. .compat-item .field {
  476.     display: block;
  477.     margin: 0;
  478.     padding: 0;
  479. }
  480.  
  481. .compat-item .label {
  482.     min-width: 30%;
  483.     margin-left: 4%;
  484.     float: right;
  485.     text-align: left;
  486. }
  487.  
  488. .compat-item .label span {
  489.     display: block;
  490.     width: 100%;
  491. }
  492.  
  493. .compat-item .field {
  494.     float: left;
  495.     width: 65%;
  496.     margin: 1px;
  497. }
  498.  
  499. .compat-item .field input[type="text"],
  500. .compat-item .field input[type="password"],
  501. .compat-item .field input[type="email"],
  502. .compat-item .field input[type="number"],
  503. .compat-item .field input[type="search"],
  504. .compat-item .field input[type="tel"],
  505. .compat-item .field input[type="url"],
  506. .compat-item .field textarea {
  507.     width: 100%;
  508.     margin: 0;
  509.     box-sizing: border-box;
  510. }
  511.  
  512. .sidebar-for-errors .attachment-details,
  513. .sidebar-for-errors .compat-item,
  514. .sidebar-for-errors .media-sidebar .media-progress-bar,
  515. .sidebar-for-errors .upload-details {
  516.     display: none !important;
  517. }
  518.  
  519. /**
  520.  * Menu
  521.  */
  522. .media-menu {
  523.     position: absolute;
  524.     top: 0;
  525.     right: 0;
  526.     left: 0;
  527.     bottom: 0;
  528.     margin: 0;
  529.     padding: 10px 0;
  530.     background: #f3f3f3;
  531.     border-left-width: 1px;
  532.     border-left-style: solid;
  533.     border-left-color: #ccc;
  534.     -webkit-user-select: none;
  535.     -moz-user-select: none;
  536.     -ms-user-select: none;
  537.     user-select: none;
  538. }
  539.  
  540. .media-menu > a {
  541.     display: block;
  542.     position: relative;
  543.     padding: 8px 20px;
  544.     margin: 0;
  545.     line-height: 18px;
  546.     font-size: 14px;
  547.     color: #0073aa;
  548.     text-decoration: none;
  549. }
  550.  
  551. .media-menu > a:hover {
  552.     color: #0073aa;
  553.     background: rgba( 0, 0, 0, 0.04 );
  554. }
  555.  
  556. .media-menu > a:active {
  557.     outline: none;
  558. }
  559.  
  560. .media-menu .active,
  561. .media-menu .active:hover {
  562.     color: #23282d;
  563.     font-weight: 600;
  564. }
  565.  
  566. .media-menu .separator {
  567.     height: 0;
  568.     margin: 12px 20px;
  569.     padding: 0;
  570.     border-top: 1px solid #ddd;
  571. }
  572.  
  573. /**
  574.  * Menu
  575.  */
  576. .media-router {
  577.     position: relative;
  578.     padding: 0 6px;
  579.     margin: 0;
  580.     clear: both;
  581.     -webkit-user-select: none;
  582.     -moz-user-select: none;
  583.     -ms-user-select: none;
  584.     user-select: none;
  585. }
  586.  
  587. .media-router a {
  588.     transition: none;
  589. }
  590.  
  591. .media-router > a {
  592.     position: relative;
  593.     float: right;
  594.     padding: 8px 10px 9px;
  595.     margin: 0;
  596.     height: 18px;
  597.     line-height: 18px;
  598.     font-size: 14px;
  599.     text-decoration: none;
  600. }
  601.  
  602. .media-router > a:last-child {
  603.     border-left: 0;
  604. }
  605.  
  606. .media-router > a:active {
  607.     outline: none;
  608. }
  609.  
  610. .media-router .active,
  611. .media-router .active:hover {
  612.     color: #32373c;
  613. }
  614.  
  615. .media-router .active,
  616. .media-router > a.active:last-child {
  617.     margin: -1px -1px 0;
  618.     background: #fff;
  619.     border: 1px solid #ddd;
  620.     border-bottom: none;
  621. }
  622.  
  623. .media-router .active:after {
  624.     display: none;
  625. }
  626.  
  627. /**
  628.  * Frame
  629.  */
  630. .media-frame {
  631.     overflow: hidden;
  632.     position: absolute;
  633.     top: 0;
  634.     right: 0;
  635.     left: 0;
  636.     bottom: 0;
  637. }
  638.  
  639. .media-frame-menu {
  640.     position: absolute;
  641.     top: 0;
  642.     right: 0;
  643.     bottom: 0;
  644.     width: 200px;
  645.     z-index: 150;
  646. }
  647.  
  648. .media-frame-title {
  649.     position: absolute;
  650.     top: 0;
  651.     right: 200px;
  652.     left: 0;
  653.     height: 50px;
  654.     z-index: 200;
  655. }
  656.  
  657. .media-frame-router {
  658.     position: absolute;
  659.     top: 50px;
  660.     right: 200px;
  661.     left: 0;
  662.     height: 36px;
  663.     z-index: 200;
  664. }
  665.  
  666. .media-frame-content {
  667.     position: absolute;
  668.     top: 84px;
  669.     right: 200px;
  670.     left: 0;
  671.     bottom: 61px;
  672.     height: auto;
  673.     width: auto;
  674.     margin: 0;
  675.     overflow: auto;
  676.     background: #fff;
  677.     border-top: 1px solid #ddd;
  678. }
  679.  
  680. .media-frame-toolbar {
  681.     position: absolute;
  682.     right: 200px;
  683.     left: 0;
  684.     bottom: 0;
  685.     height: 60px;
  686.     z-index: 100;
  687.     bottom: 60px;
  688.     height: auto;
  689. }
  690.  
  691. .media-frame.hide-menu .media-frame-title,
  692. .media-frame.hide-menu .media-frame-router,
  693. .media-frame.hide-menu .media-frame-toolbar,
  694. .media-frame.hide-menu .media-frame-content {
  695.     right: 0;
  696. }
  697.  
  698. .media-frame.hide-toolbar .media-frame-content {
  699.     bottom: 0;
  700. }
  701.  
  702. .media-frame.hide-router .media-frame-content {
  703.     top: 50px;
  704. }
  705.  
  706. .media-frame.hide-menu .media-frame-menu,
  707. .media-frame.hide-router .media-frame-router,
  708. .media-frame.hide-toolbar .media-frame-toolbar {
  709.     display: none;
  710. }
  711.  
  712. .media-frame.hide-router .media-frame-title {
  713.     border-bottom: 1px solid #ddd;
  714.     box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
  715. }
  716.  
  717. .media-frame-title .dashicons {
  718.     display: none;
  719. }
  720.  
  721. .media-frame-title h1 {
  722.     padding: 0 16px;
  723.     font-size: 22px;
  724.     line-height: 50px;
  725.     margin: 0;
  726. }
  727.  
  728. .media-frame-title .suggested-dimensions {
  729.     font-size: 14px;
  730.     float: left;
  731.     margin-left: 20px;
  732. }
  733.  
  734. .media-frame-content .crop-content {
  735.     height: 100%;
  736. }
  737.  
  738. .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
  739.     margin-left: 300px;
  740. }
  741.  
  742. .media-frame-content .crop-content .crop-image {
  743.     display: block;
  744.     margin: auto;
  745.     max-width: 100%;
  746.     max-height: 100%;
  747. }
  748.  
  749. .media-frame-content .crop-content .upload-errors
  750. {
  751.     position: absolute;
  752.     width: 300px;
  753.     top: 50%;
  754.     right: 50%;
  755.     margin-right: -150px;
  756.     margin-left: -150px;
  757.     z-index: 600000;
  758. }
  759.  
  760. /**
  761.  * Iframes
  762.  */
  763. .media-frame .media-iframe {
  764.     overflow: hidden;
  765. }
  766.  
  767. .media-frame .media-iframe,
  768. .media-frame .media-iframe iframe {
  769.     height: 100%;
  770.     width: 100%;
  771.     border: 0;
  772. }
  773.  
  774. /**
  775.  * Attachment Browser Filters
  776.  */
  777. .media-frame select.attachment-filters {
  778.     margin-top: 11px;
  779.     margin-left: 2%;
  780.     max-width: 42%;
  781.     max-width: calc(48% - 12px);
  782. }
  783.  
  784. .media-frame select.attachment-filters:last-of-type {
  785.     margin-left: 0;
  786. }
  787.  
  788. /**
  789.  * Search
  790.  */
  791. .media-frame .search {
  792.     margin-top: 11px;
  793.     padding: 4px;
  794.     font-size: 13px;
  795.     color: #444;
  796.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  797.     -webkit-appearance: none;
  798. }
  799.  
  800. .media-toolbar-primary .search {
  801.     max-width: 100%;
  802. }
  803.  
  804. /**
  805.  * Attachments
  806.  */
  807. .wp-core-ui .attachments {
  808.     margin: 0;
  809.     -webkit-overflow-scrolling: touch;
  810. }
  811.  
  812. /**
  813.  * Attachment
  814.  */
  815. .wp-core-ui .attachment {
  816.     position: relative;
  817.     float: right;
  818.     padding: 8px;
  819.     margin: 0;
  820.     color: #444;
  821.     cursor: pointer;
  822.     list-style: none;
  823.     text-align: center;
  824.     -webkit-user-select: none;
  825.     -moz-user-select: none;
  826.     -ms-user-select: none;
  827.     user-select: none;
  828.     width: 25%;
  829.     box-sizing: border-box;
  830. }
  831.  
  832. .wp-core-ui .attachment:focus,
  833. .wp-core-ui .selected.attachment:focus,
  834. .wp-core-ui .attachment.details:focus {
  835.     box-shadow:
  836.         inset 0 0 2px 3px #fff,
  837.         inset 0 0 0 7px #5b9dd9;
  838.     outline: none;
  839. }
  840.  
  841. .wp-core-ui .selected.attachment {
  842.     box-shadow:
  843.         inset 0 0 0 5px #fff,
  844.         inset 0 0 0 7px #ccc;
  845. }
  846.  
  847. .wp-core-ui .attachment.details {
  848.     box-shadow:
  849.         inset 0 0 0 3px #fff,
  850.         inset 0 0 0 7px #0073aa;
  851. }
  852.  
  853. .wp-core-ui .attachment-preview {
  854.     position: relative;
  855.     box-shadow:
  856.         inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
  857.         inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
  858.     background: #eee;
  859.     cursor: pointer;
  860. }
  861.  
  862. .wp-core-ui .attachment-preview:before {
  863.     content: "";
  864.     display: block;
  865.     padding-top: 100%;
  866. }
  867.  
  868. .wp-core-ui .attachment .icon {
  869.     margin: 0 auto;
  870.     overflow: hidden;
  871. }
  872.  
  873. .wp-core-ui .attachment .thumbnail {
  874.     overflow: hidden;
  875.     position: absolute;
  876.     top: 0;
  877.     left: 0;
  878.     bottom: 0;
  879.     right: 0;
  880.     opacity: 1;
  881.     transition: opacity .1s;
  882. }
  883.  
  884. .wp-core-ui .attachment .portrait img {
  885.     max-width: 100%;
  886. }
  887.  
  888. .wp-core-ui .attachment .landscape img {
  889.     max-height: 100%;
  890. }
  891.  
  892. .wp-core-ui .attachment .thumbnail:after {
  893.     content: "";
  894.     display: block;
  895.     position: absolute;
  896.     top: 0;
  897.     right: 0;
  898.     left: 0;
  899.     bottom: 0;
  900.     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
  901.     overflow: hidden;
  902. }
  903.  
  904. .wp-core-ui .attachment .thumbnail img {
  905.     top: 0;
  906.     right: 0;
  907. }
  908.  
  909. .wp-core-ui .attachment .thumbnail .centered {
  910.     position: absolute;
  911.     top: 0;
  912.     right: 0;
  913.     width: 100%;
  914.     height: 100%;
  915.     -webkit-transform: translate( -50%, 50% ); /* Fails with spaces?? Weird! */
  916.     transform: translate( -50%, 50% );
  917. }
  918.  
  919. .wp-core-ui .attachment .thumbnail .centered img {
  920.     -webkit-transform: translate( 50%, -50% );
  921.     transform: translate( 50%, -50% );
  922. }
  923.  
  924. .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
  925.     -webkit-transform: translate( 50%, -70% );
  926.     transform: translate( 50%, -70% );
  927. }
  928.  
  929. .ie8 .wp-core-ui .attachment img.icon {
  930.     top: 20%;
  931.     position: relative;
  932. }
  933.  
  934. .wp-core-ui .attachment .filename {
  935.     position: absolute;
  936.     right: 0;
  937.     left: 0;
  938.     bottom: 0;
  939.     overflow: hidden;
  940.     max-height: 100%;
  941.     word-wrap: break-word;
  942.     text-align: center;
  943.     font-weight: 600;
  944.     background: rgba( 255, 255, 255, 0.8 );
  945.     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
  946. }
  947.  
  948. .wp-core-ui .attachment .filename div {
  949.     padding: 5px 10px;
  950. }
  951.  
  952. .wp-core-ui .attachment .thumbnail img {
  953.     position: absolute;
  954. }
  955.  
  956. .wp-core-ui .attachment-close {
  957.     display: block;
  958.     position: absolute;
  959.     top: 5px;
  960.     left: 5px;
  961.     height: 22px;
  962.     width: 22px;
  963.     padding: 0;
  964.     background-color: #fff;
  965.     background-position: -96px 4px;
  966.     border-radius: 3px;
  967.     box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
  968.     transition: none;
  969. }
  970.  
  971. .wp-core-ui .attachment-close:hover,
  972. .wp-core-ui .attachment-close:focus {
  973.     background-position: -36px 4px;
  974. }
  975.  
  976. .wp-core-ui .attachment .check {
  977.     display: none;
  978.     height: 24px;
  979.     width: 24px;
  980.     padding: 0;
  981.     border: 0;
  982.     position: absolute;
  983.     z-index: 10;
  984.     top: 0;
  985.     left: 0;
  986.     outline: none;
  987.     background: #eee;
  988.     cursor: pointer;
  989.     box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
  990. }
  991.  
  992. .wp-core-ui .attachment .check .media-modal-icon {
  993.     display: block;
  994.     background-position: -1px 0;
  995.     height: 15px;
  996.     width: 15px;
  997.     margin: 5px;
  998. }
  999.  
  1000. .wp-core-ui .attachment .check:hover .media-modal-icon {
  1001.     background-position: -40px 0;
  1002. }
  1003.  
  1004. .wp-core-ui .attachment.selected .check {
  1005.     display: block;
  1006. }
  1007.  
  1008. .wp-core-ui .attachment.details .check,
  1009. .wp-core-ui .attachment.selected .check:focus,
  1010. .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
  1011.     background-color: #0073aa;
  1012.     box-shadow:
  1013.         0 0 0 1px #fff,
  1014.         0 0 0 2px #0073aa;
  1015. }
  1016.  
  1017. .wp-core-ui .attachment.details .check .media-modal-icon,
  1018. .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
  1019.     background-position: -21px 0;
  1020. }
  1021.  
  1022. .wp-core-ui .attachment.details .check:hover .media-modal-icon,
  1023. .wp-core-ui .attachment.selected .check:focus .media-modal-icon,
  1024. .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
  1025.     background-position: -60px 0;
  1026. }
  1027.  
  1028. .wp-core-ui .media-frame .attachment .describe {
  1029.     position: relative;
  1030.     display: block;
  1031.     width: 100%;
  1032.     margin: 0;
  1033.     padding: 8px;
  1034.     font-size: 12px;
  1035.     border-radius: 0;
  1036. }
  1037.  
  1038. /**
  1039.  * Attachments Browser
  1040.  */
  1041. .media-frame .attachments-browser {
  1042.     position: relative;
  1043.     width: 100%;
  1044.     height: 100%;
  1045.     overflow: hidden;
  1046. }
  1047.  
  1048. .attachments-browser .media-toolbar {
  1049.     left: 300px;
  1050.     height: 50px;
  1051. }
  1052.  
  1053. .attachments-browser.hide-sidebar .media-toolbar {
  1054.     left: 0;
  1055. }
  1056.  
  1057. .attachments-browser .media-toolbar-primary > .media-button,
  1058. .attachments-browser .media-toolbar-primary > .media-button-group,
  1059. .attachments-browser .media-toolbar-secondary > .media-button,
  1060. .attachments-browser .media-toolbar-secondary > .media-button-group {
  1061.     margin: 11px 0;
  1062. }
  1063.  
  1064. .attachments-browser .attachments {
  1065.     padding: 2px 8px 8px;
  1066. }
  1067.  
  1068. .attachments-browser .attachments,
  1069. .attachments-browser .uploader-inline {
  1070.     position: absolute;
  1071.     top: 50px;
  1072.     right: 0;
  1073.     left: 300px;
  1074.     bottom: 0;
  1075.     overflow: auto;
  1076.     outline: none;
  1077. }
  1078.  
  1079. .attachments-browser .uploader-inline.hidden {
  1080.     display: none;
  1081. }
  1082.  
  1083. .attachments-browser .media-toolbar-primary {
  1084.     max-width: 33%;
  1085. }
  1086.  
  1087. .attachments-browser .media-toolbar-secondary {
  1088.     max-width: 66%;
  1089. }
  1090.  
  1091. .uploader-inline .close {
  1092.     background-color: transparent;
  1093.     border: 0;
  1094.     cursor: pointer;
  1095.     height: 48px;
  1096.     outline: none;
  1097.     padding: 0;
  1098.     position: absolute;
  1099.     left: 2px;
  1100.     text-align: center;
  1101.     top: 2px;
  1102.     width: 48px;
  1103.     z-index: 1;
  1104. }
  1105.  
  1106. .uploader-inline .close:before {
  1107.     font: normal 30px/1 dashicons !important;
  1108.     color: #555d66;
  1109.     display: inline-block;
  1110.     content: "\f335";
  1111.     font-weight: 300;
  1112.     margin-top: 1px;
  1113. }
  1114.  
  1115. .uploader-inline .close:focus {
  1116.     outline: 1px solid  #5b9dd9;
  1117.     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  1118. }
  1119.  
  1120. .attachments-browser.hide-sidebar .attachments,
  1121. .attachments-browser.hide-sidebar .uploader-inline {
  1122.     left: 0;
  1123.     margin-left: 0;
  1124. }
  1125.  
  1126. .attachments-browser .instructions {
  1127.     display: inline-block;
  1128.     margin-top: 16px;
  1129.     line-height: 18px;
  1130.     font-size: 13px;
  1131.     color: #666;
  1132.     margin-left: 0.5em;
  1133. }
  1134.  
  1135. .attachments-browser .no-media {
  1136.     padding: 2em 2em 0 0;
  1137. }
  1138.  
  1139. /**
  1140.  * Progress Bar
  1141.  */
  1142. .media-progress-bar {
  1143.     position: relative;
  1144.     height: 10px;
  1145.     width: 70%;
  1146.     margin: 10px auto;
  1147.     border-radius: 10px;
  1148.     background: #ddd;
  1149.     background: rgba( 0, 0, 0, 0.1 );
  1150. }
  1151.  
  1152. .media-progress-bar div {
  1153.     height: 10px;
  1154.     min-width: 20px;
  1155.     width: 0;
  1156.     background: #0073aa;
  1157.     border-radius: 10px;
  1158.     transition: width 300ms;
  1159. }
  1160.  
  1161. .media-uploader-status .media-progress-bar {
  1162.     display: none;
  1163.     width: 100%;
  1164. }
  1165.  
  1166. .uploading.media-uploader-status .media-progress-bar {
  1167.     display: block;
  1168. }
  1169.  
  1170. .attachment-preview .media-progress-bar {
  1171.     position: absolute;
  1172.     top: 50%;
  1173.     right: 15%;
  1174.     width: 70%;
  1175.     margin: -5px 0 0 0;
  1176. }
  1177.  
  1178. .media-uploader-status {
  1179.     position: relative;
  1180.     margin: 0 auto;
  1181.     padding-bottom: 10px;
  1182.     max-width: 400px;
  1183. }
  1184.  
  1185. .uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
  1186. .uploader-inline .media-uploader-status h2 {
  1187.     display: none;
  1188. }
  1189.  
  1190. .media-uploader-status .upload-details {
  1191.     display: none;
  1192.     font-size: 12px;
  1193.     color: #666;
  1194. }
  1195.  
  1196. .uploading.media-uploader-status .upload-details {
  1197.     display: block;
  1198. }
  1199.  
  1200. .media-uploader-status .upload-detail-separator {
  1201.     padding: 0 4px;
  1202. }
  1203.  
  1204. .media-uploader-status .upload-count {
  1205.     color: #444;
  1206. }
  1207.  
  1208. .media-uploader-status .upload-dismiss-errors,
  1209. .media-uploader-status .upload-errors {
  1210.     display: none;
  1211. }
  1212.  
  1213. .errors.media-uploader-status .upload-dismiss-errors,
  1214. .errors.media-uploader-status .upload-errors {
  1215.     display: block;
  1216. }
  1217.  
  1218. .media-uploader-status .upload-dismiss-errors {
  1219.     text-decoration: none;
  1220. }
  1221.  
  1222. .media-sidebar .media-uploader-status .upload-dismiss-errors {
  1223.     position: absolute;
  1224.     top: -10px;
  1225.     left: -10px;
  1226.     padding: 10px;
  1227.     transition: none;
  1228. }
  1229.  
  1230. .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
  1231.     content: "\f153";
  1232.     display: block;
  1233.     font: normal 16px/1 dashicons;
  1234.     color: #72777c;
  1235. }
  1236.  
  1237. .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before,
  1238. .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before {
  1239.     color: #c00;
  1240. }
  1241.  
  1242. .upload-errors .upload-error {
  1243.     padding: 12px;
  1244.     margin-bottom: 12px;
  1245.     background: #fff;
  1246.     border-right: 4px solid #dc3232;
  1247.     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  1248. }
  1249.  
  1250. .uploader-inline .upload-errors .upload-error {
  1251.     background-color: #fbeaea;
  1252.     box-shadow: none;
  1253. }
  1254.  
  1255. .upload-errors .upload-error-filename {
  1256.     font-weight: 600;
  1257. }
  1258.  
  1259. .upload-errors .upload-error-message {
  1260.     display: block;
  1261.     padding-top: 8px;
  1262.     word-wrap: break-word;
  1263. }
  1264.  
  1265. .uploader-window {
  1266.     position: fixed;
  1267.     top: 0;
  1268.     right: 0;
  1269.     left: 0;
  1270.     bottom: 0;
  1271.     background: rgba( 0, 86, 132, 0.9 );
  1272.     z-index: 250000;
  1273.     display: none;
  1274.     text-align: center;
  1275.     opacity: 0;
  1276.     transition: opacity 250ms;
  1277. }
  1278.  
  1279. .uploader-window-content {
  1280.     position: absolute;
  1281.     top: 10px;
  1282.     right: 10px;
  1283.     left: 10px;
  1284.     bottom: 10px;
  1285.     border: 1px dashed #fff;
  1286. }
  1287.  
  1288. .uploader-window h3, /* Back-compat for pre-4.4 */
  1289. .uploader-window h1 {
  1290.     margin: -0.5em 0 0;
  1291.     position: absolute;
  1292.     top: 50%;
  1293.     right: 0;
  1294.     left: 0;
  1295.     -webkit-transform: translateY( -50% );
  1296.     transform: translateY( -50% );
  1297.     font-size: 40px;
  1298.     color: #fff;
  1299.     padding: 0;
  1300. }
  1301.  
  1302. .uploader-window .media-progress-bar {
  1303.     margin-top: 20px;
  1304.     max-width: 300px;
  1305.     background: transparent;
  1306.     border-color: #fff;
  1307.     display: none;
  1308. }
  1309.  
  1310. .uploader-window .media-progress-bar div {
  1311.     background: #fff;
  1312. }
  1313.  
  1314. .uploading .uploader-window .media-progress-bar {
  1315.     display: block;
  1316. }
  1317.  
  1318. .media-frame .uploader-inline {
  1319.     margin-bottom: 20px;
  1320.     padding: 0;
  1321.     text-align: center;
  1322. }
  1323.  
  1324. .uploader-inline-content {
  1325.     position: absolute;
  1326.     top: 30%;
  1327.     right: 0;
  1328.     left: 0;
  1329. }
  1330.  
  1331. .uploader-inline-content .upload-ui {
  1332.     margin: 2em 0;
  1333. }
  1334.  
  1335. .uploader-inline-content .post-upload-ui {
  1336.     margin-bottom: 2em;
  1337. }
  1338.  
  1339. .uploader-inline .has-upload-message .upload-ui {
  1340.     margin: 0 0 4em;
  1341. }
  1342.  
  1343. .uploader-inline h3, /* Back-compat for pre-4.4 */
  1344. .uploader-inline h2 {
  1345.     font-size: 20px;
  1346.     line-height: 28px;
  1347.     font-weight: 400;
  1348.     margin: 0;
  1349. }
  1350.  
  1351. .uploader-inline .has-upload-message .upload-instructions {
  1352.     font-size: 14px;
  1353.     color: #444;
  1354.     font-weight: 400;
  1355. }
  1356.  
  1357. .uploader-inline .drop-instructions {
  1358.     display: none;
  1359. }
  1360.  
  1361. .supports-drag-drop .uploader-inline .drop-instructions {
  1362.     display: block;
  1363. }
  1364.  
  1365. .uploader-inline p {
  1366.     font-size: 12px;
  1367.     margin: 0.5em 0;
  1368. }
  1369.  
  1370. .uploader-inline .media-progress-bar {
  1371.     display: none;
  1372. }
  1373.  
  1374. .uploading.uploader-inline .media-progress-bar {
  1375.     display: block;
  1376. }
  1377.  
  1378. .uploader-inline .browser {
  1379.     display: inline-block !important;
  1380. }
  1381.  
  1382. /**
  1383.  * Selection
  1384.  */
  1385. .media-selection {
  1386.     position: absolute;
  1387.     top: 0;
  1388.     right: 0;
  1389.     left: 350px;
  1390.     height: 60px;
  1391.     padding: 0 16px 0 0;
  1392.     overflow: hidden;
  1393.     white-space: nowrap;
  1394. }
  1395.  
  1396. .media-selection .selection-info {
  1397.     display: inline-block;
  1398.     font-size: 12px;
  1399.     height: 60px;
  1400.     margin-left: 10px;
  1401.     vertical-align: top;
  1402. }
  1403.  
  1404. .media-selection.empty,
  1405. .media-selection.editing {
  1406.     display: none;
  1407. }
  1408.  
  1409. .media-selection.one .edit-selection {
  1410.     display: none;
  1411. }
  1412.  
  1413. .media-selection .count {
  1414.     display: block;
  1415.     padding-top: 12px;
  1416.     font-size: 14px;
  1417.     line-height: 20px;
  1418.     font-weight: 600;
  1419. }
  1420.  
  1421. .media-selection .button-link {
  1422.     float: right;
  1423.     padding: 1px 8px;
  1424.     margin: 1px -8px 1px 8px;
  1425.     line-height: 16px;
  1426.     border-left: 1px solid #ddd;
  1427.     color: #0073aa;
  1428.     text-decoration: none;
  1429. }
  1430.  
  1431. .media-selection .button-link:hover,
  1432. .media-selection .button-link:focus {
  1433.     color: #00a0d2;
  1434. }
  1435.  
  1436. .media-selection .button-link:last-child {
  1437.     border-left: 0;
  1438.     margin-left: 0;
  1439. }
  1440.  
  1441. .selection-info .clear-selection {
  1442.     color: #bc0b0b;
  1443. }
  1444.  
  1445. .selection-info .clear-selection:hover,
  1446. .selection-info .clear-selection:focus {
  1447.     color: #dc3232;
  1448. }
  1449.  
  1450. .media-selection .selection-view {
  1451.     display: inline-block;
  1452.     vertical-align: top;
  1453. }
  1454.  
  1455. .media-selection .attachments {
  1456.     display: inline-block;
  1457.     height: 48px;
  1458.     margin: 6px;
  1459.     padding: 0;
  1460.     overflow: hidden;
  1461.     vertical-align: top;
  1462. }
  1463.  
  1464. .media-selection .attachment {
  1465.     width: 40px;
  1466.     padding: 0;
  1467.     margin: 4px;
  1468. }
  1469.  
  1470. .media-selection .attachment .thumbnail {
  1471.     top: 0;
  1472.     left: 0;
  1473.     bottom: 0;
  1474.     right: 0;
  1475. }
  1476.  
  1477. .media-selection .attachment .icon {
  1478.     width: 50%;
  1479. }
  1480.  
  1481. .media-selection .attachment-preview {
  1482.     box-shadow: none;
  1483.     background: none;
  1484. }
  1485.  
  1486. .wp-core-ui .media-selection .attachment:focus,
  1487. .wp-core-ui .media-selection .selected.attachment:focus,
  1488. .wp-core-ui .media-selection .attachment.details:focus {
  1489.     box-shadow:
  1490.         0 0 0 1px #fff,
  1491.         0 0 2px 3px #5b9dd9;
  1492. }
  1493.  
  1494. .wp-core-ui .media-selection .selected.attachment {
  1495.     box-shadow: none;
  1496. }
  1497.  
  1498. .wp-core-ui .media-selection .attachment.details {
  1499.     box-shadow:
  1500.         0 0 0 1px #fff,
  1501.         0 0 0 3px #0073aa;
  1502. }
  1503.  
  1504. .media-selection:after {
  1505.     content: "";
  1506.     display: block;
  1507.     position: absolute;
  1508.     top: 0;
  1509.     left: 0;
  1510.     bottom: 0;
  1511.     width: 25px;
  1512.     background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
  1513. }
  1514.  
  1515. .media-selection .attachment .filename {
  1516.     display: none;
  1517. }
  1518.  
  1519. /**
  1520.  * Spinner
  1521.  */
  1522. .media-frame .spinner {
  1523.     background: url(../images/spinner.gif) no-repeat;
  1524.     background-size: 20px 20px;
  1525.     float: left;
  1526.     display: inline-block;
  1527.     visibility: hidden;
  1528.     opacity: 0.7;
  1529.     filter: alpha(opacity=70);
  1530.     width: 20px;
  1531.     height: 20px;
  1532.     margin: 0;
  1533.     vertical-align: middle;
  1534. }
  1535.  
  1536. .media-frame .spinner.is-active {
  1537.     visibility: visible;
  1538. }
  1539.  
  1540. .media-toolbar .spinner {
  1541.     margin-top: 14px;
  1542. }
  1543.  
  1544. /**
  1545.  * Attachment Details
  1546.  */
  1547. .attachment-details {
  1548.     position: relative;
  1549.     overflow: auto;
  1550. }
  1551.  
  1552. .attachment-details .settings-save-status {
  1553.     float: left;
  1554.     text-transform: none;
  1555.     z-index: 10;
  1556. }
  1557.  
  1558. .attachment-details .settings-save-status .spinner {
  1559.     margin-right: 5px;
  1560. }
  1561.  
  1562. .attachment-details .settings-save-status .saved {
  1563.     float: left;
  1564.     display: none;
  1565. }
  1566.  
  1567. .attachment-details.save-waiting .settings-save-status .spinner {
  1568.     visibility: visible;
  1569. }
  1570.  
  1571. .attachment-details.save-complete .settings-save-status .saved {
  1572.     display: block;
  1573. }
  1574.  
  1575. .attachment-info {
  1576.     overflow: hidden;
  1577.     min-height: 60px;
  1578.     margin-bottom: 16px;
  1579.     line-height: 18px;
  1580.     color: #666;
  1581.     border-bottom: 1px solid #ddd;
  1582.     padding-bottom: 11px;
  1583. }
  1584.  
  1585. .attachment-info .filename {
  1586.     font-weight: 600;
  1587.     color: #444;
  1588.     word-wrap: break-word;
  1589. }
  1590.  
  1591. .attachment-info .thumbnail {
  1592.     position: relative;
  1593.     float: right;
  1594.     max-width: 120px;
  1595.     max-height: 120px;
  1596.     margin-top: 5px;
  1597.     margin-left: 10px;
  1598.     margin-bottom: 5px;
  1599. }
  1600.  
  1601. .uploading .attachment-info .thumbnail {
  1602.     width: 120px;
  1603.     height: 80px;
  1604.     box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
  1605. }
  1606.  
  1607. .uploading .attachment-info .media-progress-bar {
  1608.     margin-top: 35px;
  1609. }
  1610.  
  1611. .attachment-info .thumbnail-image:after {
  1612.     content: "";
  1613.     display: block;
  1614.     position: absolute;
  1615.     top: 0;
  1616.     right: 0;
  1617.     left: 0;
  1618.     bottom: 0;
  1619.     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
  1620.     overflow: hidden;
  1621. }
  1622.  
  1623. .attachment-info .thumbnail img {
  1624.     display: block;
  1625.     max-width: 120px;
  1626.     max-height: 120px;
  1627.     margin: 0 auto;
  1628. }
  1629.  
  1630. .attachment-info .details {
  1631.     float: right;
  1632.     font-size: 12px;
  1633.     max-width: 100%;
  1634. }
  1635.  
  1636. .attachment-info .edit-attachment,
  1637. .attachment-info .delete-attachment,
  1638. .attachment-info .trash-attachment,
  1639. .attachment-info .untrash-attachment {
  1640.     display: block;
  1641.     text-decoration: none;
  1642.     white-space: nowrap;
  1643. }
  1644.  
  1645. .attachment-details.needs-refresh .attachment-info .edit-attachment {
  1646.     display: none;
  1647. }
  1648.  
  1649. .attachment-info .edit-attachment {
  1650.     display: block;
  1651. }
  1652.  
  1653. .media-modal .delete-attachment,
  1654. .media-modal .trash-attachment,
  1655. .media-modal .untrash-attachment {
  1656.     display: inline;
  1657.     padding: 0;
  1658.     color: #bc0b0b;
  1659. }
  1660.  
  1661. .media-modal .delete-attachment:hover,
  1662. .media-modal .delete-attachment:focus,
  1663. .media-modal .trash-attachment:hover,
  1664. .media-modal .trash-attachment:focus,
  1665. .media-modal .untrash-attachment:hover,
  1666. .media-modal .untrash-attachment:focus {
  1667.     color: #dc3232;
  1668. }
  1669.  
  1670. /**
  1671.  * Attachment Display Settings
  1672.  */
  1673. .attachment-display-settings {
  1674.     width: 100%;
  1675.     float: right;
  1676.     overflow: hidden;
  1677. }
  1678.  
  1679. .attachment-display-settings h4 {
  1680.     margin: 1.4em 0 0.4em;
  1681. }
  1682.  
  1683. .collection-settings {
  1684.     overflow: hidden;
  1685. }
  1686.  
  1687. .collection-settings .setting input[type="checkbox"] {
  1688.     float: right;
  1689.     margin-left: 8px;
  1690. }
  1691.  
  1692. .collection-settings .setting span {
  1693.     min-width: inherit;
  1694. }
  1695.  
  1696. /**
  1697.  * Image Editor
  1698.  */
  1699. .media-modal .imgedit-wrap {
  1700.     position: static;
  1701. }
  1702.  
  1703. .media-modal .imgedit-wrap .imgedit-panel-content {
  1704.     padding: 16px;
  1705.     position: absolute;
  1706.     top: 0;
  1707.     left: 282px;
  1708.     bottom: 0;
  1709.     right: 0;
  1710.     overflow: auto;
  1711. }
  1712.  
  1713. .media-modal .imgedit-wrap .imgedit-settings {
  1714.     background: #f3f3f3;
  1715.     border-right: 1px solid #ddd;
  1716.     padding: 20px 16px 16px;
  1717.     position: absolute;
  1718.     top: 0;
  1719.     left: 0;
  1720.     bottom: 0;
  1721.     width: 250px;
  1722.     overflow: auto;
  1723. }
  1724.  
  1725. .media-modal .imgedit-group {
  1726.     background: none;
  1727.     border: none;
  1728.     border-bottom: 1px solid #ddd;
  1729.     box-shadow: none;
  1730.     margin: 0;
  1731.     margin-bottom: 16px;
  1732.     padding: 0;
  1733.     padding-bottom: 16px;
  1734.     position: relative; /* RTL fix, #WP29352 */
  1735. }
  1736.  
  1737. .media-modal .imgedit-group:last-of-type {
  1738.     border: none;
  1739.     margin: 0;
  1740.     padding: 0;
  1741. }
  1742.  
  1743. .media-modal .imgedit-group-top {
  1744.     margin: 0;
  1745. }
  1746.  
  1747. .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
  1748. .media-modal .imgedit-group-top h2,
  1749. .media-modal .imgedit-group-top h2 .button-link {
  1750.     display: inline-block;
  1751.     text-transform: uppercase;
  1752.     font-size: 12px;
  1753.     color: #666;
  1754.     margin: 0;
  1755.     margin-top: 3px;
  1756. }
  1757.  
  1758. .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
  1759. .media-modal .imgedit-group-top h2 a,
  1760. .media-modal .imgedit-group-top h2 .button-link {
  1761.     text-decoration: none;
  1762.     color: #666;
  1763. }
  1764.  
  1765. /* higher specificity than media.css */
  1766. .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
  1767. .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
  1768. .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
  1769.     border: 1px solid transparent;
  1770.     margin: 0;
  1771.     padding: 0;
  1772.     background: transparent;
  1773.     color: #0074a2;
  1774.     font-size: 20px;
  1775.     line-height: 1;
  1776.     cursor: pointer;
  1777.     box-sizing: content-box;
  1778.     box-shadow: none;
  1779. }
  1780.  
  1781. .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
  1782.     color: #0074a2;
  1783.     border-color: #5b9dd9;
  1784.     outline: none;
  1785.     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  1786. }
  1787.  
  1788. .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
  1789.     margin-top: -3px;
  1790. }
  1791.  
  1792. .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
  1793.     margin-top: -2px;
  1794. }
  1795.  
  1796. .media-modal .imgedit-help-toggled span.dashicons:before {
  1797.     content: "\f142";
  1798. }
  1799.  
  1800. .media-modal .imgedit-thumbnail-preview {
  1801.     margin: 10px 0 0 8px;
  1802. }
  1803.  
  1804. .imgedit-thumbnail-preview-caption {
  1805.     display: block;
  1806. }
  1807.  
  1808. .media-modal .imgedit-wrap div.updated {
  1809.     margin: 0;
  1810.     margin-bottom: 16px;
  1811. }
  1812.  
  1813.  
  1814. /**
  1815.  * Embed from URL and Image Details
  1816.  */
  1817. .embed-url {
  1818.     display: block;
  1819.     position: relative;
  1820.     padding: 16px;
  1821.     margin: 0;
  1822.     z-index: 250;
  1823.     background: #fff;
  1824.     font-size: 18px;
  1825. }
  1826.  
  1827. .media-frame .embed-url input {
  1828.     font-size: 18px;
  1829.     padding: 12px 14px;
  1830.     width: 100%;
  1831.     min-width: 200px;
  1832.     box-shadow: inset -2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
  1833. }
  1834.  
  1835. .media-frame .embed-url .spinner {
  1836.     position: absolute;
  1837.     top: 32px;
  1838.     left: 26px;
  1839. }
  1840.  
  1841. .media-frame .embed-loading .embed-url .spinner {
  1842.     visibility: visible;
  1843. }
  1844.  
  1845. .embed-link-settings,
  1846. .embed-media-settings {
  1847.     position: absolute;
  1848.     top: 70px;
  1849.     right: 0;
  1850.     left: 0;
  1851.     bottom: 0;
  1852.     padding: 16px 16px 32px;
  1853.     overflow: auto;
  1854. }
  1855.  
  1856. .media-embed .embed-link-settings {
  1857.     /* avoid Firefox to give focus to the embed preview container parent */
  1858.     overflow: visible;
  1859. }
  1860.  
  1861. .embed-preview img,
  1862. .embed-preview iframe,
  1863. .embed-preview embed,
  1864. .mejs-container video {
  1865.     max-width: 100%;
  1866.     vertical-align: middle;
  1867. }
  1868.  
  1869. .embed-preview a {
  1870.     display: inline-block;
  1871. }
  1872.  
  1873. .embed-preview img {
  1874.     display: block;
  1875.     height: auto;
  1876. }
  1877.  
  1878. .mejs-container:focus {
  1879.     outline: 1px solid #5b9dd9;
  1880.     box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
  1881. }
  1882.  
  1883. .image-details .media-modal {
  1884.     right: 140px;
  1885.     left: 140px;
  1886. }
  1887.  
  1888. .image-details .media-frame-title,
  1889. .image-details .media-frame-content,
  1890. .image-details .media-frame-router {
  1891.     right: 0;
  1892. }
  1893.  
  1894. .image-details .embed-media-settings {
  1895.     top: 0;
  1896.     overflow: visible;
  1897.     padding: 0;
  1898. }
  1899.  
  1900. .image-details .embed-media-settings,
  1901. .image-details .embed-media-settings div {
  1902.     box-sizing: border-box;
  1903. }
  1904.  
  1905. .image-details .column-settings {
  1906.     background: #f3f3f3;
  1907.     border-left: 1px solid #ddd;
  1908.     min-height: 100%;
  1909.     width: 55%;
  1910.     position: absolute;
  1911.     top: 0;
  1912.     right: 0;
  1913. }
  1914.  
  1915. .image-details .column-settings h3, /* Back-compat for pre-4.4 */
  1916. .image-details .column-settings h2 {
  1917.     margin: 20px;
  1918.     padding-top: 20px;
  1919.     border-top: 1px solid #ddd;
  1920.     color: #23282d;
  1921. }
  1922.  
  1923. .image-details .column-image {
  1924.     width: 45%;
  1925.     position: absolute;
  1926.     right: 55%;
  1927.     top: 0;
  1928. }
  1929.  
  1930. .image-details .image {
  1931.     margin: 20px;
  1932. }
  1933.  
  1934. .image-details .image img {
  1935.     max-width: 100%;
  1936.     max-height: 500px;
  1937. }
  1938.  
  1939. .image-details .advanced-toggle {
  1940.     padding: 0;
  1941.     color: #666;
  1942.     text-transform: uppercase;
  1943.     text-decoration: none;
  1944. }
  1945.  
  1946. .image-details .advanced-toggle:hover,
  1947. .image-details .advanced-toggle:active {
  1948.     color: #666;
  1949. }
  1950.  
  1951. .image-details .advanced-toggle:after {
  1952.     font: normal 20px/1 dashicons;
  1953.     speak: none;
  1954.     vertical-align: top;
  1955.     -webkit-font-smoothing: antialiased;
  1956.     -moz-osx-font-smoothing: grayscale;
  1957.     content: "\f140";
  1958.     display: inline-block;
  1959.     margin-top: -2px;
  1960. }
  1961.  
  1962. .image-details .advanced-visible .advanced-toggle:after {
  1963.     content: "\f142";
  1964. }
  1965.  
  1966. .image-details .embed-media-settings .size {
  1967.     margin-bottom: 4px;
  1968. }
  1969.  
  1970. .image-details .custom-size span {
  1971.     display: block;
  1972. }
  1973.  
  1974. .image-details .custom-size label {
  1975.     display: block;
  1976.     float: right;
  1977. }
  1978.  
  1979. .image-details .custom-size span small {
  1980.     color: #555d66; /* #f3f3f3 background */
  1981.     font-size: inherit;
  1982. }
  1983.  
  1984. .image-details .custom-size input {
  1985.     width: 5em;
  1986. }
  1987.  
  1988. .image-details .custom-size .sep {
  1989.     float: right;
  1990.     margin: 26px 6px 0 6px;
  1991. }
  1992.  
  1993. .image-details .custom-size:after {
  1994.     content: "";
  1995.     display: table;
  1996.     clear: both;
  1997. }
  1998.  
  1999. .media-embed .thumbnail {
  2000.     max-width: 100%;
  2001.     max-height: 200px;
  2002.     position: relative;
  2003.     float: right;
  2004. }
  2005.  
  2006. .media-embed .thumbnail img {
  2007.     max-height: 200px;
  2008.     display: block;
  2009. }
  2010.  
  2011. .media-embed .thumbnail:after {
  2012.     content: "";
  2013.     display: block;
  2014.     position: absolute;
  2015.     top: 0;
  2016.     right: 0;
  2017.     left: 0;
  2018.     bottom: 0;
  2019.     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
  2020.     overflow: hidden;
  2021. }
  2022.  
  2023. .media-embed .setting {
  2024.     width: 100%;
  2025.     margin: 10px 0;
  2026.     float: right;
  2027.     display: block;
  2028.     clear: both;
  2029. }
  2030.  
  2031. .image-details .embed-media-settings .setting {
  2032.     float: none;
  2033.     width: auto;
  2034. }
  2035.  
  2036. .image-details .actions {
  2037.     margin: 10px 0;
  2038. }
  2039.  
  2040. .image-details .hidden {
  2041.     display: none;
  2042. }
  2043.  
  2044. .media-embed .setting input[type="text"],
  2045. .media-embed .setting textarea {
  2046.     display: block;
  2047.     width: 100%;
  2048.     max-width: 400px;
  2049.     margin: 1px 0;
  2050. }
  2051.  
  2052. .image-details .embed-media-settings .setting input[type="text"],
  2053. .image-details .embed-media-settings .setting textarea {
  2054.     max-width: inherit;
  2055.     width: 70%;
  2056. }
  2057.  
  2058. .image-details .embed-media-settings .setting input.link-to-custom,
  2059. .image-details .embed-media-settings .link-target,
  2060. .image-details .embed-media-settings .custom-size {
  2061.     margin-right: 27%;
  2062.     width: 70%;
  2063. }
  2064.  
  2065. .image-details .embed-media-settings .link-target {
  2066.     margin-top: 24px;
  2067. }
  2068.  
  2069. .media-embed .setting input.hidden,
  2070. .media-embed .setting textarea.hidden {
  2071.     display: none;
  2072. }
  2073.  
  2074. .media-embed .setting span {
  2075.     display: block;
  2076.     width: 200px;
  2077.     font-size: 13px;
  2078.     line-height: 24px;
  2079.     color: #666;
  2080. }
  2081.  
  2082. .image-details .embed-media-settings .setting span {
  2083.     float: right;
  2084.     width: 25%;
  2085.     text-align: left;
  2086.     margin: 8px 1% 0 1%;
  2087.     line-height: 1.1;
  2088. }
  2089.  
  2090. .media-embed .setting .button-group {
  2091.     margin: 2px 0;
  2092. }
  2093.  
  2094. .media-embed-sidebar {
  2095.     position: absolute;
  2096.     top: 0;
  2097.     right: 440px;
  2098. }
  2099.  
  2100. .advanced-section,
  2101. .link-settings {
  2102.     margin-top: 10px;
  2103. }
  2104.  
  2105. /* Drag & drop on the editor upload */
  2106. .wp-editor-wrap .uploader-editor {
  2107.     background: rgba( 150, 150, 150, 0.9 );
  2108.     position: absolute;
  2109.     top: 0;
  2110.     right: 0;
  2111.     width: 100%;
  2112.     height: 100%;
  2113.     z-index: 99998; /* under the toolbar */
  2114.     display: none;
  2115.     text-align: center;
  2116. }
  2117.  
  2118. .wp-editor-wrap .uploader-editor-content {
  2119.     border: 1px dashed #fff;
  2120.     position: absolute;
  2121.     top: 10px;
  2122.     right: 10px;
  2123.     left: 10px;
  2124.     bottom: 10px;
  2125. }
  2126.  
  2127. .wp-editor-wrap .uploader-editor .uploader-editor-title {
  2128.     position: absolute;
  2129.     top: 50%;
  2130.     right: 0;
  2131.     left: 0;
  2132.     -webkit-transform: translateY( -50% );
  2133.     transform: translateY( -50% );
  2134.     font-size: 3em;
  2135.     line-height: 1.3;
  2136.     font-weight: 600;
  2137.     color: #fff;
  2138.     padding: 0;
  2139.     margin: 0;
  2140.     display: none;
  2141. }
  2142.  
  2143. .wp-editor-wrap .uploader-editor.droppable {
  2144.     background: rgba( 0, 86, 132, 0.9 );
  2145. }
  2146.  
  2147. .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
  2148.     display: block;
  2149. }
  2150.  
  2151. /**
  2152.  * IE7 Fixes
  2153.  */
  2154. .ie7 .media-frame .attachments-browser {
  2155.     position: static;
  2156. }
  2157.  
  2158. .ie7 .media-frame .embed-url input {
  2159.     margin-top: 4px;
  2160.     width: 90%;
  2161. }
  2162.  
  2163. .ie7 .compat-item {
  2164.     width: 99%;
  2165. }
  2166.  
  2167. .ie7 .attachment-display-settings {
  2168.     width: auto;
  2169. }
  2170.  
  2171. .ie7 .attachment-preview,
  2172. .ie7 .attachment-preview .thumbnail {
  2173.     width: 120px;
  2174.     height: 120px;
  2175. }
  2176.  
  2177. .ie7 .media-frame .attachment .describe {
  2178.     width: 102px;
  2179. }
  2180.  
  2181. .ie7 .media-sidebar .setting select {
  2182.     max-width: 55%;
  2183. }
  2184.  
  2185. .ie7 .media-sidebar .setting input[type="text"],
  2186. .ie7 .media-sidebar .setting input[type="password"],
  2187. .ie7 .media-sidebar .setting input[type="email"],
  2188. .ie7 .media-sidebar .setting input[type="number"],
  2189. .ie7 .media-sidebar .setting input[type="search"],
  2190. .ie7 .media-sidebar .setting input[type="tel"],
  2191. .ie7 .media-sidebar .setting input[type="url"],
  2192. .ie7 .media-sidebar .setting textarea {
  2193.     width: 55%;
  2194. }
  2195.  
  2196. .ie7 .media-sidebar .setting .link-to-custom {
  2197.     float: right;
  2198. }
  2199.  
  2200. /**
  2201.  * Localization
  2202.  */
  2203. .rtl .media-modal,
  2204. .rtl .media-frame,
  2205. .rtl .media-frame .search,
  2206. .rtl .media-frame input[type="text"],
  2207. .rtl .media-frame input[type="password"],
  2208. .rtl .media-frame input[type="number"],
  2209. .rtl .media-frame input[type="search"],
  2210. .rtl .media-frame input[type="email"],
  2211. .rtl .media-frame input[type="url"],
  2212. .rtl .media-frame input[type="tel"],
  2213. .rtl .media-frame textarea,
  2214. .rtl .media-frame select {
  2215.     font-family: Tahoma, sans-serif;
  2216. }
  2217.  
  2218. :lang(he-il) .rtl .media-modal,
  2219. :lang(he-il) .rtl .media-frame,
  2220. :lang(he-il) .rtl .media-frame .search,
  2221. :lang(he-il) .rtl .media-frame input[type="text"],
  2222. :lang(he-il) .rtl .media-frame input[type="password"],
  2223. :lang(he-il) .rtl .media-frame input[type="number"],
  2224. :lang(he-il) .rtl .media-frame input[type="search"],
  2225. :lang(he-il) .rtl .media-frame input[type="email"],
  2226. :lang(he-il) .rtl .media-frame input[type="url"],
  2227. :lang(he-il) .rtl .media-frame textarea,
  2228. :lang(he-il) .rtl .media-frame select {
  2229.     font-family: Arial, sans-serif;
  2230. }
  2231.  
  2232. /**
  2233.  * Responsive layout
  2234.  */
  2235. @media only screen and (max-width: 900px) {
  2236.  
  2237.     /* Drop-down menu */
  2238.     .media-frame:not(.hide-menu) .media-frame-title,
  2239.     .media-frame:not(.hide-menu) .media-frame-router,
  2240.     .media-frame:not(.hide-menu) .media-frame-content,
  2241.     .media-frame:not(.hide-menu) .media-frame-toolbar {
  2242.         right: 0;
  2243.     }
  2244.  
  2245.     .media-frame:not(.hide-menu) .media-frame-menu {
  2246.         position: static;
  2247.         width: 0;
  2248.     }
  2249.  
  2250.     .media-frame:not(.hide-menu) .media-menu {
  2251.         width: auto;
  2252.         max-width: 80%;
  2253.         overflow: auto;
  2254.         z-index: 2000;
  2255.         top: 50px;
  2256.         right: -300px;
  2257.         left: auto;
  2258.         bottom: auto;
  2259.         padding: 5px 0;
  2260.         border: 1px solid #ccc;
  2261.     }
  2262.  
  2263.     .media-frame:not(.hide-menu) .media-menu.visible {
  2264.         right: 0;
  2265.     }
  2266.  
  2267.     .media-frame:not(.hide-menu) .media-menu > a {
  2268.         padding: 12px 16px;
  2269.         font-size: 16px;
  2270.     }
  2271.  
  2272.     .media-frame:not(.hide-menu) .media-menu > a.active {
  2273.         display: none;
  2274.     }
  2275.  
  2276.     .media-frame:not(.hide-menu) .media-menu .separator {
  2277.         margin: 5px 10px;
  2278.     }
  2279.  
  2280.     .media-frame:not(.hide-menu) .media-frame-title {
  2281.         right: 0;
  2282.     }
  2283.  
  2284.     .media-frame:not(.hide-menu) .media-frame-title .dashicons {
  2285.         display: inline-block;
  2286.         line-height: 50px;
  2287.     }
  2288.  
  2289.     .media-frame:not(.hide-menu) .media-frame-title h1 {
  2290.         color: #0073aa;
  2291.         line-height: 3;
  2292.         font-size: 18px;
  2293.         float: right;
  2294.         cursor: pointer;
  2295.     }
  2296.     /* End drop-down menu */
  2297.  
  2298.     .media-sidebar {
  2299.         width: 230px;
  2300.     }
  2301.  
  2302.     .attachments-browser .attachments,
  2303.     .attachments-browser .uploader-inline,
  2304.     .attachments-browser .media-toolbar {
  2305.         left: 262px;
  2306.     }
  2307.  
  2308.     .media-sidebar .setting,
  2309.     .attachment-details .setting {
  2310.         margin: 6px 0px;
  2311.     }
  2312.  
  2313.     .media-sidebar .setting input,
  2314.     .media-sidebar .setting textarea,
  2315.     .media-sidebar .setting span,
  2316.     .attachment-details .setting input,
  2317.     .attachment-details .setting textarea,
  2318.     .attachment-details .setting span,
  2319.     .compat-item label span {
  2320.         float: none;
  2321.     }
  2322.  
  2323.     .media-sidebar .setting span,
  2324.     .attachment-details .setting span,
  2325.     .compat-item label span {
  2326.         text-align: inherit;
  2327.         min-height: 16px;
  2328.         margin: 0;
  2329.         padding: 8px 2px 0;
  2330.     }
  2331.  
  2332.     .media-sidebar .setting .value,
  2333.     .attachment-details .setting .value {
  2334.         float: none;
  2335.         width: auto;
  2336.     }
  2337.  
  2338.     .media-sidebar .setting input[type="text"],
  2339.     .media-sidebar .setting input[type="password"],
  2340.     .media-sidebar .setting input[type="email"],
  2341.     .media-sidebar .setting input[type="number"],
  2342.     .media-sidebar .setting input[type="search"],
  2343.     .media-sidebar .setting input[type="tel"],
  2344.     .media-sidebar .setting input[type="url"],
  2345.     .media-sidebar .setting textarea,
  2346.     .media-sidebar .setting select,
  2347.     .attachment-details .setting input[type="text"],
  2348.     .attachment-details .setting input[type="password"],
  2349.     .attachment-details .setting input[type="email"],
  2350.     .attachment-details .setting input[type="number"],
  2351.     .attachment-details .setting input[type="search"],
  2352.     .attachment-details .setting input[type="tel"],
  2353.     .attachment-details .setting input[type="url"],
  2354.     .attachment-details .setting textarea,
  2355.     .attachment-details .setting select {
  2356.         float: none;
  2357.         width: 98%;
  2358.         max-width: none;
  2359.         height: auto;
  2360.     }
  2361.  
  2362.     .media-sidebar .setting select.columns,
  2363.     .attachment-details .setting select.columns {
  2364.         width: auto;
  2365.     }
  2366.  
  2367.     .media-frame input,
  2368.     .media-frame textarea,
  2369.     .media-frame .search {
  2370.         padding: 3px 6px;
  2371.     }
  2372.  
  2373.     .image-details .column-image {
  2374.         width: 30%;
  2375.         right: 70%;
  2376.     }
  2377.  
  2378.     .image-details .column-settings {
  2379.         width: 70%;
  2380.     }
  2381.  
  2382.     .image-details .media-modal {
  2383.         right: 30px;
  2384.         left: 30px;
  2385.     }
  2386.  
  2387.     .image-details .embed-media-settings .setting {
  2388.         margin: 20px;
  2389.     }
  2390.  
  2391.     .image-details .embed-media-settings .setting span {
  2392.         float: none;
  2393.         text-align: right;
  2394.         width: 100%;
  2395.         margin-bottom: 4px;
  2396.     }
  2397.  
  2398.     .image-details .embed-media-settings .setting input.link-to-custom,
  2399.     .image-details .embed-media-settings .setting input[type="text"],
  2400.     .image-details .embed-media-settings .setting textarea {
  2401.         width: 100%;
  2402.         margin-right: 0;
  2403.     }
  2404.  
  2405.     .image-details .embed-media-settings .custom-size {
  2406.         margin-right: 20px;
  2407.     }
  2408.  
  2409.     .collection-settings .setting input[type="checkbox"] {
  2410.         margin-top: 0;
  2411.     }
  2412.  
  2413.     .media-selection {
  2414.         min-width: 120px;
  2415.     }
  2416.  
  2417.     .media-selection:after {
  2418.         background: none;
  2419.     }
  2420.  
  2421.     .media-selection .attachments {
  2422.         display: none;
  2423.     }
  2424.  
  2425.     .media-modal .attachments-browser .media-toolbar .search {
  2426.         max-width: 100%;
  2427.         height: auto;
  2428.         float: left;
  2429.     }
  2430.  
  2431.     .media-modal .attachments-browser .media-toolbar .attachment-filters {
  2432.         height: auto;
  2433.     }
  2434.  
  2435.     .media-modal .attachments-browser .media-toolbar .spinner {
  2436.         margin: 14px 2px 0;
  2437.     }
  2438.  
  2439.     /* Text inputs need to be 16px, or they force zooming on iOS */
  2440.     .media-frame input[type="text"],
  2441.     .media-frame input[type="password"],
  2442.     .media-frame input[type="number"],
  2443.     .media-frame input[type="search"],
  2444.     .media-frame input[type="email"],
  2445.     .media-frame input[type="url"],
  2446.     .media-frame textarea,
  2447.     .media-frame select {
  2448.         font-size: 16px;
  2449.     }
  2450. }
  2451.  
  2452. /* Responsive on portrait and landscape */
  2453. @media only screen and (max-width: 640px), screen and (max-height: 400px) {
  2454.     /* Full-bleed modal */
  2455.     .media-modal,
  2456.     .image-details .media-modal {
  2457.         position: fixed;
  2458.         top: 0;
  2459.         right: 0;
  2460.         left: 0;
  2461.         bottom: 0;
  2462.     }
  2463.  
  2464.     .media-modal-backdrop {
  2465.         position: fixed;
  2466.     }
  2467.  
  2468.     .media-sidebar {
  2469.         z-index: 1900;
  2470.         max-width: 70%;
  2471.         bottom: 120%;
  2472.         box-sizing: border-box;
  2473.         padding-bottom: 0;
  2474.     }
  2475.  
  2476.     .media-sidebar.visible {
  2477.         bottom: 0;
  2478.     }
  2479.  
  2480.     .attachments-browser .attachments,
  2481.     .attachments-browser .uploader-inline,
  2482.     .attachments-browser .media-toolbar {
  2483.         left: 0;
  2484.     }
  2485.  
  2486.     .image-details .media-frame-title {
  2487.         display: block;
  2488.         top: 0;
  2489.         font-size: 14px;
  2490.     }
  2491.  
  2492.     .image-details .column-image,
  2493.     .image-details .column-settings {
  2494.         width: 100%;
  2495.         position: relative;
  2496.         right: 0;
  2497.     }
  2498.  
  2499.     .image-details .column-settings {
  2500.         padding: 4px 0;
  2501.     }
  2502.  
  2503.     /* Media tabs on the top */
  2504.     .media-frame-content .media-toolbar .instructions {
  2505.         display: none;
  2506.     }
  2507. }
  2508.  
  2509. /* Landscape specific header override */
  2510. @media screen and (max-height: 400px) {
  2511.     .media-menu {
  2512.         padding: 0;
  2513.     }
  2514.  
  2515.     .media-frame-router {
  2516.         top: 44px;
  2517.     }
  2518.  
  2519.     .media-frame-content {
  2520.         top: 78px;
  2521.     }
  2522.  
  2523.     .attachments-browser .attachments {
  2524.         top: 40px;
  2525.     }
  2526.  
  2527.     /* Prevent unnecessary scrolling on title input */
  2528.     .embed-link-settings {
  2529.         overflow: visible;
  2530.     }
  2531. }
  2532.  
  2533. @media only screen and (max-width: 480px) {
  2534.     .media-modal-close {
  2535.         top: -5px;
  2536.     }
  2537.  
  2538.     .media-modal .media-frame-title {
  2539.         height: 40px;
  2540.     }
  2541.  
  2542.     .wp-core-ui.wp-customizer .media-button {
  2543.         margin-top: 13px;
  2544.     }
  2545.  
  2546.     .media-modal .media-frame-title h1,
  2547.     .media-frame:not(.hide-menu) .media-frame-title h1 {
  2548.         font-size: 18px;
  2549.         line-height: 40px;
  2550.     }
  2551.  
  2552.     .media-frame:not(.hide-menu) .media-frame-title .dashicons {
  2553.         line-height: 40px;
  2554.     }
  2555.  
  2556.     .media-frame-router,
  2557.     .media-frame:not(.hide-menu) .media-menu {
  2558.         top: 40px;
  2559.     }
  2560.  
  2561.     .media-frame-content {
  2562.         top: 74px;
  2563.     }
  2564.  
  2565.     .media-frame.hide-router .media-frame-content {
  2566.         top: 40px;
  2567.     }
  2568. }
  2569.  
  2570. /**
  2571.  * HiDPI Displays
  2572.  */
  2573. @media print,
  2574.   (-webkit-min-device-pixel-ratio: 1.25),
  2575.   (min-resolution: 120dpi) {
  2576.  
  2577.     .wp-core-ui .media-modal-icon {
  2578.         background-image: url(../images/uploader-icons-2x.png);
  2579.         background-size: 134px 15px;
  2580.     }
  2581.  
  2582.     .media-frame .spinner {
  2583.         background-image: url(../images/spinner-2x.gif);
  2584.     }
  2585. }
  2586.  
  2587. .media-frame-content[data-columns="1"] .attachment {
  2588.     width: 100%;
  2589. }
  2590.  
  2591. .media-frame-content[data-columns="2"] .attachment {
  2592.     width: 50%;
  2593. }
  2594.  
  2595. .media-frame-content[data-columns="3"] .attachment {
  2596.     width: 33.33%;
  2597. }
  2598.  
  2599. .media-frame-content[data-columns="4"] .attachment {
  2600.     width: 25%;
  2601. }
  2602.  
  2603. .media-frame-content[data-columns="5"] .attachment {
  2604.     width: 20%;
  2605. }
  2606.  
  2607. .media-frame-content[data-columns="6"] .attachment {
  2608.     width: 16.66%;
  2609. }
  2610.  
  2611. .media-frame-content[data-columns="7"] .attachment {
  2612.     width: 14.28%;
  2613. }
  2614.  
  2615. .media-frame-content[data-columns="8"] .attachment {
  2616.     width: 12.5%;
  2617. }
  2618.  
  2619. .media-frame-content[data-columns="9"] .attachment {
  2620.     width: 11.11%;
  2621. }
  2622.  
  2623. .media-frame-content[data-columns="10"] .attachment {
  2624.     width: 10%;
  2625. }
  2626.  
  2627. .media-frame-content[data-columns="11"] .attachment {
  2628.     width: 9.09%;
  2629. }
  2630.  
  2631. .media-frame-content[data-columns="12"] .attachment {
  2632.     width: 8.33%;
  2633. }
  2634.