home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / css / media.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2017-10-04  |  22.9 KB  |  1,271 lines
  1. /*------------------------------------------------------------------------------
  2.   14.0 - Media Screen
  3. ------------------------------------------------------------------------------*/
  4.  
  5. .media-item .describe {
  6.     border-collapse: collapse;
  7.     width: 100%;
  8.     border-top: 1px solid #ddd;
  9.     clear: both;
  10.     cursor: default;
  11. }
  12.  
  13. .media-item.media-blank .describe {
  14.     border: 0;
  15. }
  16.  
  17. .media-item .describe th {
  18.     vertical-align: top;
  19.     text-align: left;
  20.     padding: 5px 10px 10px;
  21.     width: 140px;
  22. }
  23.  
  24. .media-item .describe .align th {
  25.     padding-top: 0;
  26. }
  27.  
  28. .media-item .media-item-info tr {
  29.     background-color: transparent;
  30. }
  31.  
  32. .media-item .describe td {
  33.     padding: 0 8px 8px 0;
  34.     vertical-align: top;
  35. }
  36.  
  37. .media-item thead.media-item-info td {
  38.     padding: 4px 10px 0;
  39. }
  40.  
  41. .media-item .media-item-info .A1B1 {
  42.     padding: 0 0 0 10px;
  43. }
  44.  
  45. .media-item td.savesend {
  46.     padding-bottom: 15px;
  47. }
  48.  
  49. .media-item .thumbnail {
  50.     max-height: 128px;
  51.     max-width: 128px;
  52. }
  53.  
  54. #wpbody-content #async-upload-wrap a {
  55.     display: none;
  56. }
  57.  
  58. .media-upload-form {
  59.     margin-top: 20px;
  60. }
  61.  
  62. .media-upload-form td label {
  63.     margin-right: 6px;
  64.     margin-left: 2px;
  65. }
  66.  
  67. .media-upload-form .align .field label {
  68.     display: inline;
  69.     padding: 0 0 0 23px;
  70.     margin: 0 1em 0 3px;
  71.     font-weight: 600;
  72. }
  73.  
  74. .media-upload-form tr.image-size label {
  75.     margin: 0 0 0 5px;
  76.     font-weight: 600;
  77. }
  78.  
  79. .media-upload-form th.label label {
  80.     font-weight: 600;
  81.     margin: 0.5em;
  82.     font-size: 13px;
  83. }
  84.  
  85. .media-upload-form th.label label span {
  86.     padding: 0 5px;
  87. }
  88.  
  89. .media-item .describe input[type="text"],
  90. .media-item .describe textarea {
  91.     width: 460px;
  92. }
  93.  
  94. .media-item .describe p.help {
  95.     margin: 0;
  96.     padding: 0 0 0 5px;
  97. }
  98.  
  99. .media-item .edit-attachment,
  100. .describe-toggle-on,
  101. .describe-toggle-off {
  102.     display: block;
  103.     line-height: 36px;
  104.     float: right;
  105.     margin-right: 10px;
  106. }
  107.  
  108. .media-item .describe-toggle-off,
  109. .media-item.open .describe-toggle-on {
  110.     display: none;
  111. }
  112.  
  113. .media-item.open .describe-toggle-off {
  114.     display: block;
  115. }
  116.  
  117. .media-upload-form .media-item {
  118.     min-height: 36px;
  119.     margin-bottom: 1px;
  120.     position: relative;
  121.     width: 100%;
  122.     background: #fff;
  123. }
  124.  
  125. .media-upload-form .media-item,
  126. .media-upload-form .media-item .error {
  127.     box-shadow: 0 1px 0 #ddd;
  128. }
  129.  
  130. #media-items:empty {
  131.     border: 0 none;
  132. }
  133.  
  134. .media-item .filename {
  135.     line-height: 36px;
  136.     overflow: hidden;
  137.     margin-left: 6px;
  138. }
  139.  
  140. .media-item .pinkynail {
  141.     float: left;
  142.     margin: 2px 10px 0 3px;
  143.     max-width: 40px;
  144.     max-height: 32px;
  145. }
  146.  
  147. .media-item .startopen,
  148. .media-item .startclosed {
  149.     display: none;
  150. }
  151.  
  152. .media-item .original {
  153.     position: relative;
  154.     height: 34px;
  155. }
  156.  
  157. .media-item .progress {
  158.     float: right;
  159.     height: 22px;
  160.     margin: 7px 6px;
  161.     width: 200px;
  162.     line-height: 2em;
  163.     padding: 0;
  164.     overflow: hidden;
  165.     border-radius: 22px;
  166.     background: #ddd;
  167.     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  168. }
  169.  
  170. .media-item .bar {
  171.     z-index: 9;
  172.     width: 0;
  173.     height: 100%;
  174.     margin-top: -22px;
  175.     border-radius: 22px;
  176.     background-color: #0073aa;
  177.     box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
  178. }
  179.  
  180. .media-item .progress .percent {
  181.     z-index: 10;
  182.     position: relative;
  183.     width: 200px;
  184.     padding: 0;
  185.     color: #fff;
  186.     text-align: center;
  187.     line-height: 22px;
  188.     font-weight: 400;
  189.     text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  190. }
  191.  
  192. .upload-php .fixed .column-parent {
  193.     width: 15%;
  194. }
  195.  
  196. .js .html-uploader #plupload-upload-ui {
  197.     display: none;
  198. }
  199.  
  200. .js .html-uploader #html-upload-ui {
  201.     display: block;
  202. }
  203.  
  204. .media-upload-form .media-item.error,
  205. .media-upload-form .media-item .error {
  206.     width: auto;
  207.     margin: 0 0 1px 0;
  208. }
  209.  
  210. .media-upload-form .media-item .error {
  211.     padding: 10px 0 10px 14px;
  212. }
  213.  
  214. .media-item .error-div a.dismiss {
  215.     display: block;
  216.     float: right;
  217.     margin: 0 10px 0 15px;
  218. }
  219.  
  220. /*------------------------------------------------------------------------------
  221.   14.1 - Media Library
  222. ------------------------------------------------------------------------------*/
  223.  
  224. .find-box {
  225.     background-color: #fff;
  226.     box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
  227.     width: 600px;
  228.     overflow: hidden;
  229.     margin-left: -300px;
  230.     position: fixed;
  231.     top: 30px;
  232.     bottom: 30px;
  233.     left: 50%;
  234.     z-index: 100105;
  235. }
  236.  
  237. .find-box-head {
  238.     background: #fcfcfc;
  239.     border-bottom: 1px solid #ddd;
  240.     height: 36px;
  241.     font-size: 18px;
  242.     font-weight: 600;
  243.     line-height: 36px;
  244.     padding: 0 36px 0 16px;
  245.     position: absolute;
  246.     top: 0;
  247.     left: 0;
  248.     right: 0;
  249. }
  250.  
  251. .find-box-inside {
  252.     overflow: auto;
  253.     padding: 16px;
  254.     background-color: #fff;
  255.     position: absolute;
  256.     top: 37px;
  257.     bottom: 45px;
  258.     overflow-y: scroll;
  259.     width: 100%;
  260.     box-sizing: border-box;
  261. }
  262.  
  263. .find-box-search {
  264.     padding-bottom: 16px;
  265. }
  266.  
  267. .find-box-search .spinner {
  268.     float: none;
  269.     left: 105px;
  270.     position: absolute;
  271. }
  272.  
  273. .find-box-search,
  274. #find-posts-response {
  275.     position: relative; /* RTL fix, #WP28010 */
  276. }
  277.  
  278. #find-posts-input,
  279. #find-posts-search {
  280.     float: left;
  281. }
  282.  
  283. #find-posts-input {
  284.     width: 140px;
  285.     height: 28px;
  286.     margin: 0 4px 0 0;
  287. }
  288.  
  289. .widefat .found-radio {
  290.     padding-right: 0;
  291.     width: 16px;
  292. }
  293.  
  294. #find-posts-close {
  295.     width: 36px;
  296.     height: 36px;
  297.     border: none;
  298.     padding: 0;
  299.     position: absolute;
  300.     top: 0;
  301.     right: 0;
  302.     cursor: pointer;
  303.     text-align: center;
  304.     background: none;
  305.     color: #666;
  306. }
  307.  
  308. #find-posts-close:hover,
  309. #find-posts-close:focus {
  310.     color: #00a0d2;
  311. }
  312.  
  313. #find-posts-close:focus {
  314.     outline: none;
  315.     box-shadow:
  316.         0 0 0 1px #5b9dd9,
  317.         0 0 2px 1px rgba(30, 140, 190, .8);
  318. }
  319.  
  320. #find-posts-close:before {
  321.     font: normal 20px/36px dashicons;
  322.     vertical-align: top;
  323.     speak: none;
  324.     -webkit-font-smoothing: antialiased;
  325.     -moz-osx-font-smoothing: grayscale;
  326.     content: "\f158";
  327. }
  328.  
  329. .find-box-buttons {
  330.     padding: 8px 16px;
  331.     background: #fcfcfc;
  332.     border-top: 1px solid #ddd;
  333.     position: absolute;
  334.     bottom: 0;
  335.     left: 0;
  336.     right: 0;
  337. }
  338.  
  339. @media screen and ( max-width: 782px ) {
  340.     .find-box-inside {
  341.         bottom: 57px;
  342.     }
  343. }
  344.  
  345. @media screen and ( max-width: 660px ) {
  346.  
  347.     .find-box {
  348.         top: 0;
  349.         bottom: 0;
  350.         left: 0;
  351.         right: 0;
  352.         margin: 0;
  353.         width: 100%;
  354.     }
  355.  
  356. }
  357.  
  358. .ui-find-overlay {
  359.     position: fixed;
  360.     top: 0;
  361.     left: 0;
  362.     right: 0;
  363.     bottom: 0;
  364.     background: #000;
  365.     opacity: 0.7;
  366.     filter: alpha(opacity=70);
  367.     z-index: 100100;
  368. }
  369.  
  370. ul#dismissed-updates {
  371.     display: none;
  372. }
  373.  
  374. form.upgrade {
  375.     margin-top: 8px;
  376. }
  377.  
  378. form.upgrade .hint {
  379.     font-style: italic;
  380.     font-size: 85%;
  381.     margin: -0.5em 0 2em 0;
  382. }
  383.  
  384. #poststuff .inside .the-tagcloud {
  385.     margin: 5px 0 10px;
  386.     padding: 8px;
  387.     border: 1px solid #ddd;
  388.     line-height: 1.8em;
  389.     word-spacing: 3px;
  390. }
  391.  
  392. .drag-drop #drag-drop-area {
  393.     border: 4px dashed #b4b9be;
  394.     height: 200px;
  395. }
  396.  
  397. .drag-drop .drag-drop-inside {
  398.     margin: 70px auto 0;
  399.     width: 250px;
  400. }
  401.  
  402. .drag-drop-inside p {
  403.     color: #a0a5aa;
  404.     font-size: 14px;
  405.     margin: 5px 0;
  406.     display: none;
  407. }
  408.  
  409. .drag-drop .drag-drop-inside p {
  410.     text-align: center;
  411. }
  412.  
  413. .drag-drop-inside p.drag-drop-info {
  414.     font-size: 20px;
  415. }
  416.  
  417. .drag-drop .drag-drop-inside p,
  418. .drag-drop-inside p.drag-drop-buttons {
  419.     display: block;
  420. }
  421.  
  422. /*
  423. #drag-drop-area:-moz-drag-over {
  424.     border-color: #83b4d8;
  425. }
  426. border color while dragging a file over the uploader drop area */
  427. .drag-drop.drag-over #drag-drop-area {
  428.     border-color: #83b4d8;
  429. }
  430.  
  431. #plupload-upload-ui {
  432.     position: relative;
  433. }
  434.  
  435. /**
  436.  * Media Library grid view
  437.  */
  438.  
  439. .media-frame.mode-grid,
  440. .media-frame.mode-grid .media-frame-content,
  441. .media-frame.mode-grid .attachments-browser .attachments,
  442. .media-frame.mode-grid .uploader-inline-content {
  443.     position: static;
  444. }
  445.  
  446. /* Regions we don't use at all */
  447. .media-frame.mode-grid .media-frame-title,
  448. .media-frame.mode-grid .media-frame-router,
  449. .media-frame.mode-grid .media-frame-menu {
  450.     display: none;
  451. }
  452.  
  453. .media-frame.mode-grid .media-frame-content {
  454.     background-color: transparent;
  455.     border: none;
  456. }
  457.  
  458. .upload-php .mode-grid .media-sidebar {
  459.     position: relative;
  460.     width: auto;
  461.     margin-top: 12px;
  462.     padding: 0 16px;
  463.     border-left: 4px solid #dd3d36;
  464.      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  465.     background-color: #fff;
  466. }
  467.  
  468. .upload-php .mode-grid .hide-sidebar .media-sidebar {
  469.     display: none;
  470. }
  471.  
  472. .upload-php .mode-grid .media-sidebar .media-uploader-status {
  473.     border-bottom: none;
  474.     padding-bottom: 0;
  475.     max-width: 100%;
  476. }
  477.  
  478. .upload-php .mode-grid .media-sidebar .upload-error {
  479.     margin: 12px 0;
  480.     padding: 4px 0 0;
  481.     border: none;
  482.     box-shadow: none;
  483.     background: none;
  484. }
  485.  
  486. .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
  487.     top: -10px;
  488.     right: -14px;
  489.     padding: 10px;
  490. }
  491.  
  492. .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
  493.     content: "\f153";
  494.     display: block;
  495.     font: normal 16px/1 dashicons;
  496.     color: #72777c;
  497. }
  498.  
  499. .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
  500. .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
  501.     color: #c00;
  502. }
  503.  
  504. .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
  505. .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
  506.     display: none;
  507. }
  508.  
  509. .media-frame.mode-grid .uploader-inline {
  510.     position: relative;
  511.     top: auto;
  512.     right: auto;
  513.     left: auto;
  514.     bottom: auto;
  515.     padding-top: 0;
  516.     margin-top: 20px;
  517.     border: 4px dashed #b4b9be;
  518. }
  519.  
  520. .media-frame.mode-select .attachments-browser.fixed .attachments {
  521.     position: relative;
  522.     top: 94px; /* prevent jumping up when the toolbar becomes fixed */
  523.     padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
  524. }
  525.  
  526. .media-frame.mode-grid .attachment:focus,
  527. .media-frame.mode-grid .selected.attachment:focus,
  528. .media-frame.mode-grid .attachment.details:focus {
  529.     box-shadow:
  530.         inset 0 0 2px 3px #f1f1f1,
  531.         inset 0 0 0 7px #5b9dd9;
  532.     outline: none;
  533. }
  534.  
  535. .media-frame.mode-grid .selected.attachment {
  536.     box-shadow:
  537.         inset 0 0 0 5px #f1f1f1,
  538.         inset 0 0 0 7px #ccc;
  539. }
  540.  
  541. .media-frame.mode-grid .attachment.details {
  542.     box-shadow:
  543.         inset 0 0 0 3px #f1f1f1,
  544.         inset 0 0 0 7px #1e8cbe;
  545. }
  546.  
  547. .media-frame.mode-grid.mode-select .attachment .thumbnail {
  548.     opacity: 0.65;
  549. }
  550.  
  551. .media-frame.mode-select .attachment.selected .thumbnail {
  552.     opacity: 1;
  553. }
  554.  
  555. .media-frame.mode-grid .media-toolbar {
  556.     margin-bottom: 15px;
  557.     height: auto;
  558. }
  559.  
  560. .media-frame.mode-grid .media-toolbar select {
  561.     margin: 0 10px 0 0;
  562.     font-size: 14px;
  563. }
  564.  
  565. .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
  566.     margin: 0 8px 0 0;
  567.     vertical-align: middle;
  568. }
  569.  
  570. .media-frame.mode-grid .attachments-browser .bulk-select {
  571.     display: inline-block;
  572.     margin: 0 10px 0 0;
  573. }
  574.  
  575. .media-frame.mode-grid .search {
  576.     margin-top: 0;
  577. }
  578.  
  579. .media-frame.mode-grid .spinner {
  580.     margin-top: 16px;
  581. }
  582.  
  583. .attachments-browser .media-toolbar-secondary > .media-button {
  584.     margin-right: 10px;
  585. }
  586.  
  587. .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
  588.     position: fixed;
  589.     top: 32px;
  590.     left: auto;
  591.     right: 20px;
  592.     margin-top: 0;
  593. }
  594.  
  595. .media-frame.mode-grid .attachments-browser {
  596.     padding: 0;
  597. }
  598.  
  599. .media-frame.mode-grid .attachments-browser .attachments {
  600.     padding: 2px;
  601. }
  602.  
  603. .media-frame.mode-grid .attachments-browser .no-media {
  604.     color: #666; /* same as no plugins and no themes */
  605.     font-size: 18px;
  606.     font-style: normal;
  607.     margin: 0;
  608.     padding: 100px 0 0;
  609.     text-align: center;
  610. }
  611.  
  612. /**
  613.  * Attachment details modal
  614.  */
  615.  
  616. .edit-attachment-frame {
  617.     display: block;
  618.     height: 100%;
  619.     width: 100%;
  620. }
  621.  
  622. .edit-attachment-frame .edit-media-header {
  623.     overflow: hidden;
  624. }
  625.  
  626. .upload-php .media-modal-close .media-modal-icon:before {
  627.     content: "\f335";
  628.     font-size: 22px;
  629. }
  630.  
  631. .upload-php .media-modal-close,
  632. .edit-attachment-frame .edit-media-header .left,
  633. .edit-attachment-frame .edit-media-header .right {
  634.     cursor: pointer;
  635.     color: #72777c;
  636.     background-color: transparent;
  637.     height: 50px;
  638.     width: 50px;
  639.     padding: 0;
  640.     position: absolute;
  641.     text-align: center;
  642.     border: 0;
  643.     border-left: 1px solid #ddd;
  644.     transition: color .1s ease-in-out, background .1s ease-in-out;
  645. }
  646.  
  647. .upload-php .media-modal-close {
  648.     top: 0;
  649.     right: 0;
  650. }
  651.  
  652. .edit-attachment-frame .edit-media-header .left {
  653.     right: 102px;
  654. }
  655.  
  656. .edit-attachment-frame .edit-media-header .right {
  657.     right: 51px;
  658. }
  659.  
  660. .edit-attachment-frame .media-frame-title {
  661.     left: 0;
  662.     right: 150px; /* leave space for prev/next/close */
  663. }
  664.  
  665. .edit-attachment-frame .edit-media-header .right:before,
  666. .edit-attachment-frame .edit-media-header .left:before {
  667.     font: normal 20px/50px dashicons !important;
  668.     display: inline;
  669.     font-weight: 300;
  670. }
  671.  
  672. .upload-php .media-modal-close:hover,
  673. .upload-php .media-modal-close:focus,
  674. .edit-attachment-frame .edit-media-header .left:hover,
  675. .edit-attachment-frame .edit-media-header .right:hover,
  676. .edit-attachment-frame .edit-media-header .left:focus,
  677. .edit-attachment-frame .edit-media-header .right:focus {
  678.     background: #ddd;
  679.     border-color: #ccc;
  680.     color: #000;
  681.     outline: none;
  682.     box-shadow: none;
  683. }
  684.  
  685. .upload-php .media-modal-close:focus .media-modal-icon:before,
  686. .upload-php .media-modal-close:hover .media-modal-icon:before {
  687.     color: #000;
  688. }
  689.  
  690. .edit-attachment-frame .edit-media-header .left:before,
  691. .rtl .edit-attachment-frame .edit-media-header .right:before {
  692.     content: "\f341";
  693. }
  694.  
  695. .edit-attachment-frame .edit-media-header .right:before,
  696. .rtl .edit-attachment-frame .edit-media-header .left:before {
  697.     content: "\f345";
  698. }
  699.  
  700. .edit-attachment-frame .edit-media-header .left.disabled,
  701. .edit-attachment-frame .edit-media-header .right.disabled,
  702. .edit-attachment-frame .edit-media-header .left.disabled:hover,
  703. .edit-attachment-frame .edit-media-header .right.disabled:hover {
  704.     color: #ccc;
  705.     background: inherit;
  706.     cursor: default;
  707.     pointer-events: none;
  708. }
  709.  
  710. .edit-attachment-frame .media-frame-content,
  711. .edit-attachment-frame .media-frame-router {
  712.     left: 0;
  713. }
  714.  
  715. .edit-attachment-frame .media-frame-content {
  716.     border-bottom: none;
  717.     bottom: 0;
  718.     top: 50px;
  719. }
  720.  
  721. .edit-attachment-frame .attachment-details {
  722.     position: absolute;
  723.     overflow: auto;
  724.     top: 0;
  725.     bottom: 0;
  726.     right: 0;
  727.     left: 0;
  728.     box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
  729. }
  730.  
  731. .edit-attachment-frame .attachment-media-view {
  732.     float: left;
  733.     width: 65%;
  734.     height: 100%;
  735. }
  736.  
  737. .edit-attachment-frame .attachment-media-view .thumbnail {
  738.     box-sizing: border-box;
  739.     padding: 16px;
  740.     height: 100%;
  741. }
  742.  
  743. .edit-attachment-frame .attachment-media-view .details-image {
  744.     display: block;
  745.     margin: 0 auto 16px;
  746.     max-width: 100%;
  747.     max-height: 90%;
  748.     max-height: calc( 100% - 42px ); /* leave space for actions underneath */
  749.     background-image: linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4);
  750.     background-position: 0 0, 10px 10px;
  751.     background-size: 20px 20px;
  752. }
  753.  
  754. .edit-attachment-frame .attachment-media-view .attachment-actions {
  755.     text-align: center;
  756. }
  757.  
  758. .edit-attachment-frame .wp-media-wrapper {
  759.     margin-bottom: 12px;
  760. }
  761.  
  762. .edit-attachment-frame input,
  763. .edit-attachment-frame textarea {
  764.     padding: 6px 8px;
  765.     line-height: 16px;
  766. }
  767.  
  768. .edit-attachment-frame .attachment-info {
  769.     overflow: auto;
  770.     box-sizing: border-box;
  771.     margin-bottom: 0;
  772.     padding: 12px 16px 0;
  773.     width: 35%;
  774.     height: 100%;
  775.     box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
  776.     border-bottom: 0;
  777.     border-left: 1px solid #ddd;
  778.     background: #f3f3f3;
  779. }
  780.  
  781. .edit-attachment-frame .attachment-info .details,
  782. .edit-attachment-frame .attachment-info .settings {
  783.     position: relative; /* RTL fix, #WP29352 */
  784.     overflow: hidden;
  785.     float: none;
  786.     margin-bottom: 15px;
  787.     padding-bottom: 15px;
  788.     border-bottom: 1px solid #ddd;
  789. }
  790.  
  791. .edit-attachment-frame .attachment-info .filename {
  792.     font-weight: 400;
  793.     color: #666;
  794. }
  795.  
  796. .edit-attachment-frame .attachment-info .thumbnail {
  797.     margin-bottom: 12px;
  798. }
  799.  
  800. .attachment-info .actions {
  801.     margin-bottom: 16px;
  802. }
  803.  
  804. .attachment-info .actions a {
  805.     display: inline;
  806.     text-decoration: none;
  807. }
  808.  
  809.  
  810. /*------------------------------------------------------------------------------
  811.   14.2 - Image Editor
  812. ------------------------------------------------------------------------------*/
  813.  
  814. .wp_attachment_details label[for="content"] {
  815.     font-size: 13px;
  816.     line-height: 1.5;
  817.     margin: 1em 0;
  818. }
  819.  
  820. .wp_attachment_details #attachment_caption {
  821.     height: 4em;
  822. }
  823.  
  824. .describe .image-editor {
  825.     vertical-align: top;
  826. }
  827.  
  828. .imgedit-wrap {
  829.     position: relative;
  830.     padding-top: 10px;
  831. }
  832.  
  833. .imgedit-settings p,
  834. .imgedit-settings fieldset {
  835.     margin: 8px 0;
  836. }
  837.  
  838. .imgedit-settings legend {
  839.     margin-bottom: 5px;
  840. }
  841.  
  842. .describe .imgedit-wrap .imgedit-settings {
  843.     padding: 0 5px;
  844. }
  845.  
  846. .wp_attachment_holder div.updated {
  847.     margin-top: 0;
  848. }
  849.  
  850. .wp_attachment_holder .imgedit-wrap > div {
  851.     height: auto;
  852. }
  853.  
  854. .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
  855.     padding: 3px 16px 0 0;
  856.     float: left;
  857. }
  858.  
  859. .wp_attachment_holder .imgedit-wrap .imgedit-settings {
  860.     float: right;
  861.     width: 250px;
  862. }
  863.  
  864. .imgedit-settings input {
  865.     margin-top: 0;
  866.     vertical-align: middle;
  867. }
  868.  
  869. .imgedit-wait {
  870.     position: absolute;
  871.     top: 0;
  872.     bottom: 0;
  873.     width: 100%;
  874.     background: #fff;
  875.     opacity: 0.7;
  876.     filter: alpha(opacity=70);
  877.     display: none;
  878. }
  879.  
  880. .imgedit-wait:before {
  881.     content: "";
  882.     display: block;
  883.     width: 20px;
  884.     height: 20px;
  885.     position: absolute;
  886.     left: 50%;
  887.     top: 50%;
  888.     margin: -10px 0 0 -10px;
  889.     background: transparent url(../images/spinner.gif) no-repeat center;
  890.     background-size: 20px 20px;
  891.     -webkit-transform: translateZ(0);
  892.     transform: translateZ(0);
  893. }
  894.  
  895. .no-float {
  896.     float: none;
  897. }
  898.  
  899. .media-disabled,
  900. .imgedit-settings .disabled {
  901.     /* WCAG 1.4.3 Text or images of text that are part of an inactive user
  902.        interface component ... have no contrast requirement. */
  903.     color: #a0a5aa;
  904. }
  905.  
  906. .A1B1 {
  907.     overflow: hidden;
  908. }
  909.  
  910. .wp_attachment_image .button,
  911. .A1B1 .button {
  912.     float: left;
  913. }
  914.  
  915. .no-js .wp_attachment_image .button {
  916.     display: none;
  917. }
  918.  
  919. .wp_attachment_image .spinner,
  920. .A1B1 .spinner {
  921.     float: left;
  922. }
  923.  
  924. .imgedit-menu {
  925.     min-width: 300px;
  926.     margin: 0 0 12px;
  927. }
  928.  
  929. .imgedit-menu .note-no-rotate {
  930.     clear: both;
  931.     margin: 0;
  932.     padding: 1em 0 0;
  933. }
  934.  
  935. .image-editor .imgedit-menu .button {
  936.     float: left;
  937.     width: 32px;
  938.     height: 32px;
  939.     margin: 0 8px 0 0;
  940.     padding: 0;
  941.     background: #f1f1f1;
  942.     -webkit-font-smoothing: antialiased;
  943.     -moz-osx-font-smoothing: grayscale;
  944.     line-height: 16px;
  945.     color: #72777c;
  946. }
  947.  
  948. .imgedit-menu .button:before {
  949.     font: normal 20px/1 dashicons;
  950.     speak: none;
  951.     vertical-align: middle;
  952. }
  953.  
  954. .imgedit-menu .button.disabled {
  955.     border-color: #ccc;
  956.     background-color: #ddd;
  957.     color: #72777c;
  958.     filter: alpha(opacity=50);
  959.     opacity: 0.5;
  960.     cursor: default;
  961. }
  962.  
  963. .imgedit-crop:before {
  964.     content: "\f165";
  965. }
  966.  
  967. .imgedit-rleft:before {
  968.     content: "\f166";
  969. }
  970.  
  971. .imgedit-rright:before {
  972.     content: "\f167";
  973. }
  974.  
  975. .imgedit-flipv:before {
  976.     content: "\f168";
  977. }
  978.  
  979. .imgedit-fliph:before {
  980.     content: "\f169";
  981. }
  982.  
  983. .imgedit-undo:before {
  984.     content: "\f171";
  985. }
  986.  
  987. .imgedit-redo:before {
  988.     content: "\f172";
  989. }
  990.  
  991. .imgedit-crop-wrap {
  992.     position: relative;
  993. }
  994.  
  995. .imgedit-crop-wrap img {
  996.     background-image: linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4);
  997.     background-position: 0 0, 10px 10px;
  998.     background-size: 20px 20px;
  999. }
  1000.  
  1001. .imgedit-crop {
  1002.     margin: 0 8px 0 0;
  1003. }
  1004.  
  1005. .imgedit-rleft {
  1006.     margin: 0 3px;
  1007. }
  1008.  
  1009. .imgedit-rright {
  1010.     margin: 0 8px 0 3px;
  1011. }
  1012.  
  1013. .imgedit-flipv {
  1014.     margin: 0 3px;
  1015. }
  1016.  
  1017. .imgedit-fliph {
  1018.     margin: 0 8px 0 3px;
  1019. }
  1020.  
  1021. .imgedit-undo {
  1022.     margin: 0 3px;
  1023. }
  1024.  
  1025. .imgedit-redo {
  1026.     margin: 0 8px 0 3px;
  1027. }
  1028.  
  1029. .imgedit-thumbnail-preview {
  1030.     margin: 10px 8px 0 0;
  1031. }
  1032.  
  1033. .imgedit-thumbnail-preview-caption {
  1034.     display: block;
  1035. }
  1036.  
  1037. #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
  1038. #poststuff .imgedit-group-top h2 {
  1039.     display: inline-block;
  1040.     margin: 0;
  1041.     padding: 0;
  1042.     font-size: 14px;
  1043.     line-height: 1.4;
  1044. }
  1045.  
  1046. #poststuff .imgedit-group-top .button-link {
  1047.     text-decoration: none;
  1048.     color: #23282d;
  1049. }
  1050.  
  1051. .imgedit-applyto .imgedit-label {
  1052.     display: block;
  1053.     padding: .5em 0 0;
  1054. }
  1055.  
  1056. .imgedit-help {
  1057.     display: none;
  1058.     font-style: italic;
  1059. }
  1060.  
  1061. /* higher specificity than buttons */
  1062. .image-editor .imgedit-settings .imgedit-help-toggle,
  1063. .image-editor .imgedit-settings .imgedit-help-toggle:hover,
  1064. .image-editor .imgedit-settings .imgedit-help-toggle:active {
  1065.     border: 1px solid transparent;
  1066.     margin: -1px 0 0 -1px;
  1067.     padding: 0;
  1068.     background: transparent;
  1069.     color: #0074a2;
  1070.     font-size: 20px;
  1071.     line-height: 1;
  1072.     cursor: pointer;
  1073.     box-sizing: content-box;
  1074.     box-shadow: none;
  1075. }
  1076.  
  1077. .image-editor .imgedit-settings .imgedit-help-toggle:focus {
  1078.     color: #0074a2;
  1079.     border-color: #5b9dd9;
  1080.     outline: none;
  1081.     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
  1082. }
  1083.  
  1084. .form-table td.imgedit-response {
  1085.     padding: 0;
  1086. }
  1087.  
  1088. .imgedit-submit {
  1089.     margin: 8px 0 0;
  1090. }
  1091.  
  1092. .imgedit-submit-btn {
  1093.     margin-left: 20px;
  1094. }
  1095.  
  1096. .imgedit-wrap .nowrap {
  1097.     white-space: nowrap;
  1098.     font-size: 12px;
  1099.     line-height: inherit;
  1100. }
  1101.  
  1102. span.imgedit-scale-warn {
  1103.     color: #dc3232;
  1104.     font-size: 20px;
  1105.     font-style: normal;
  1106.     visibility: hidden;
  1107.     vertical-align: middle;
  1108. }
  1109.  
  1110. .imgedit-save-target {
  1111.     margin: 8px 0;
  1112. }
  1113.  
  1114. .imgedit-group {
  1115.     margin-bottom: 8px;
  1116.     padding: 10px;
  1117. }
  1118.  
  1119. .imgedit-settings .imgedit-scale input[type="text"],
  1120. .imgedit-settings .imgedit-crop-ratio input[type="text"],
  1121. .imgedit-settings .imgedit-crop-sel input[type="text"] {
  1122.     width: 50px;
  1123.     font-size: 14px;
  1124.     padding: 5px 8px;
  1125. }
  1126.  
  1127. .imgedit-separator {
  1128.     display: inline-block;
  1129.     width: 7px;
  1130.     text-align: center;
  1131.     vertical-align: middle;
  1132.     font-size: 13px;
  1133.     color: #444;
  1134. }
  1135.  
  1136. .imgedit-settings .imgedit-scale .button {
  1137.     margin-bottom: 0;
  1138. }
  1139.  
  1140. audio, video {
  1141.     display: inline-block;
  1142.     max-width: 100%;
  1143. }
  1144.  
  1145. .mejs-container {
  1146.     width: 100%;
  1147.     max-width: 100%;
  1148. }
  1149.  
  1150. /* =Media Queries
  1151. -------------------------------------------------------------- */
  1152.  
  1153. /**
  1154.  * HiDPI Displays
  1155.  */
  1156. @media print,
  1157.   (-webkit-min-device-pixel-ratio: 1.25),
  1158.   (min-resolution: 120dpi) {
  1159.     .imgedit-wait:before {
  1160.         background-image: url(../images/spinner-2x.gif);
  1161.     }
  1162. }
  1163.  
  1164. @media screen and ( max-width: 782px ) {
  1165.     .wp_attachment_details label[for="content"] {
  1166.         font-size: 14px;
  1167.         line-height: 1.5em;
  1168.     }
  1169.  
  1170.     .media-upload-form .media-item.error,
  1171.     .media-upload-form .media-item .error {
  1172.         font-size: 13px;
  1173.         line-height: 1.5;
  1174.     }
  1175.  
  1176.     .media-upload-form .media-item.error {
  1177.         padding: 1px 10px;
  1178.     }
  1179.  
  1180.     .media-upload-form .media-item .error {
  1181.         padding: 10px 0 10px 12px;
  1182.     }
  1183.  
  1184.     .imgedit-settings .imgedit-scale input[type="text"],
  1185.     .imgedit-settings .imgedit-crop-ratio input[type="text"],
  1186.     .imgedit-settings .imgedit-crop-sel input[type="text"] {
  1187.         width: 60px;
  1188.         font-size: 16px;
  1189.         padding: 6px 10px;
  1190.     }
  1191.  
  1192.     .imgedit-applyto .imgedit-label {
  1193.         vertical-align: middle;
  1194.     }
  1195. }
  1196.  
  1197. /**
  1198.  * Media queries for media grid.
  1199.  */
  1200.  
  1201. @media only screen and (max-width: 1120px) {
  1202.     /* override for media-views.css */
  1203.     #wp-media-grid .wp-filter .attachment-filters {
  1204.         max-width: 100%;
  1205.     }
  1206. }
  1207.  
  1208. @media only screen and ( max-width: 782px ) {
  1209.     .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
  1210.         top: 46px;
  1211.         right: 10px;
  1212.     }
  1213. }
  1214.  
  1215. @media only screen and (max-width: 600px) {
  1216.     .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
  1217.         top: 0;
  1218.     }
  1219. }
  1220.  
  1221. @media only screen and (max-width: 480px) {
  1222.     .edit-attachment-frame .media-frame-title {
  1223.         right: 110px;
  1224.     }
  1225.  
  1226.     .upload-php .media-modal-close,
  1227.     .edit-attachment-frame .edit-media-header .left,
  1228.     .edit-attachment-frame .edit-media-header .right {
  1229.         width: 40px;
  1230.         height: 40px;
  1231.     }
  1232.  
  1233.     .upload-php .media-modal-close .media-modal-icon {
  1234.         margin: 9px 10px;
  1235.     }
  1236.  
  1237.     .edit-attachment-frame .edit-media-header .right:before,
  1238.     .edit-attachment-frame .edit-media-header .left:before {
  1239.         line-height: 40px !important;
  1240.     }
  1241.  
  1242.     .edit-attachment-frame .edit-media-header .left {
  1243.         right: 82px;
  1244.     }
  1245.  
  1246.     .edit-attachment-frame .edit-media-header .right {
  1247.         right: 41px;
  1248.     }
  1249.  
  1250.     .edit-attachment-frame .media-frame-content {
  1251.         top: 40px;
  1252.     }
  1253.  
  1254.     .edit-attachment-frame .attachment-media-view {
  1255.         float: none;
  1256.         height: auto;
  1257.         width: 100%;
  1258.     }
  1259.  
  1260.     .edit-attachment-frame .attachment-info {
  1261.         height: auto;
  1262.         width: 100%;
  1263.     }
  1264. }
  1265.  
  1266. @media only screen and (max-width: 640px), screen and (max-height: 400px) {
  1267.     .upload-php .mode-grid .media-sidebar{
  1268.         max-width: 100%;
  1269.     }
  1270. }
  1271.