Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 
 

1298 рядки
24 KiB

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