/wp-admin/css/media-rtl.css

https://bitbucket.org/devbctph/futura_wp · CSS · 1270 lines · 1022 code · 215 blank · 33 comment · 0 complexity · 166984f6b0e07f10e505addb8197d0fc MD5 · raw file

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