You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2968 lines
56 KiB

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