media-library.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
Same filename and directory in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  2. 9 core/themes/seven/css/theme/media-library.css
  3. 9 core/themes/seven/css/classy/layout/media-library.css
  4. 9 core/themes/claro/css/theme/media-library.css
  5. 9 core/themes/bartik/css/classy/layout/media-library.css
  6. 9 core/themes/classy/css/layout/media-library.css
  7. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  8. 8.9.x core/themes/seven/css/theme/media-library.css
  9. 8.9.x core/themes/seven/css/classy/layout/media-library.css
  10. 8.9.x core/themes/claro/css/theme/media-library.css
  11. 8.9.x core/themes/bartik/css/classy/layout/media-library.css
  12. 8.9.x core/themes/classy/css/layout/media-library.css
  13. 10 core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  14. 10 core/themes/claro/css/theme/media-library.css

media-library.pcss.css

Styling for Media Library.

File

core/themes/claro/css/theme/media-library.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file media-library.pcss.css
  9. * Styling for Media Library.
  10. */
  11. /**
  12. * Negative margins compensate for modal dialog padding and compensate for
  13. * positioning that would otherwise hide the active tab indicator on the left.
  14. */
  15. .media-library-wrapper {
  16. display: flex;
  17. margin: -1rem -1.5rem -1rem -1rem; /* LTR */
  18. }
  19. [dir="rtl"] .media-library-wrapper {
  20. margin-right: -1em;
  21. margin-left: -1.5em;
  22. }
  23. .media-library-wrapper .messages-list,
  24. .media-library-wrapper .messages {
  25. margin-top: 0;
  26. margin-bottom: var(--space-l);
  27. }
  28. .media-library-menu {
  29. position: relative;
  30. display: block;
  31. width: var(--vertical-tabs-menu-width);
  32. margin: 0;
  33. padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
  34. list-style: none;
  35. color: var(--color-text);
  36. }
  37. [dir="rtl"] .media-library-menu {
  38. margin: 0;
  39. }
  40. .media-library-menu__item {
  41. overflow: hidden;
  42. margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
  43. padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
  44. }
  45. [dir="rtl"] .media-library-menu__item {
  46. margin-right: var(--vertical-tabs-menu-item--left-margin);
  47. margin-left: var(--vertical-tabs-menu-item--right-margin);
  48. }
  49. .media-library-menu__item::before {
  50. z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
  51. display: block;
  52. width: 100%;
  53. margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
  54. content: "";
  55. border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  56. }
  57. .media-library-menu__link {
  58. position: relative;
  59. display: block;
  60. margin-top: calc(var(--vertical-tabs-border-size) * -1);
  61. padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
  62. -webkit-text-decoration: none;
  63. text-decoration: none;
  64. color: var(--color-text);
  65. border: var(--vertical-tabs-border-size) solid transparent;
  66. border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
  67. border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
  68. }
  69. [dir="rtl"] .media-library-menu__link {
  70. padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
  71. padding-left: var(--space-s);
  72. border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
  73. border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
  74. }
  75. /* Menu link states. */
  76. .media-library-menu__link:focus {
  77. z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
  78. -webkit-text-decoration: none;
  79. text-decoration: none;
  80. box-shadow: none;
  81. }
  82. .media-library-menu__link:hover {
  83. -webkit-text-decoration: none;
  84. text-decoration: none;
  85. color: var(--color-absolutezero);
  86. /* These borders are necessary to replace the dividing lines while in the hover state. */
  87. border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  88. border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
  89. background: var(--color-bgblue-hover);
  90. }
  91. /* This pseudo element provides the background for the hover state. */
  92. .media-library-menu__link::before {
  93. position: absolute;
  94. z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
  95. top: calc(var(--vertical-tabs-border-size) * -1);
  96. right: 0; /* LTR */
  97. bottom: calc(var(--vertical-tabs-border-size) * -1);
  98. left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
  99. content: "";
  100. pointer-events: none;
  101. background-clip: padding-box;
  102. }
  103. [dir="rtl"] .media-library-menu__link::before {
  104. right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
  105. left: 0;
  106. }
  107. .media-library-menu__link:focus::after {
  108. position: absolute;
  109. top: 0;
  110. right: 0;
  111. bottom: 0;
  112. left: 0;
  113. margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
  114. content: "";
  115. pointer-events: none;
  116. border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
  117. border-radius: var(--vertical-tabs-border-radius);
  118. }
  119. .media-library-menu__link.active {
  120. z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
  121. color: var(--color-absolutezero);
  122. border-color: var(--vertical-tabs-border-color) transparent;
  123. background-color: var(--color-white);
  124. box-shadow: var(--vertical-tabs-shadow);
  125. }
  126. .media-library-menu__link.active:hover {
  127. color: var(--color-absolutezero-hover);
  128. background-color: var(--color-bgblue-hover);
  129. }
  130. .media-library-menu__link.active::before {
  131. z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
  132. border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
  133. border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
  134. }
  135. [dir="rtl"] .media-library-menu__link.active::before {
  136. border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
  137. border-left: 0;
  138. border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
  139. }
  140. .media-library-menu__link.active:hover::before {
  141. background: none;
  142. }
  143. .media-library-content {
  144. width: 100%;
  145. padding: 1em;
  146. outline: none;
  147. }
  148. .media-library-menu + .media-library-content {
  149. z-index: var(--vertical-tabs-menu--z-index);
  150. border-left: var(--vertical-tabs-border); /* LTR */
  151. box-shadow: var(--vertical-tabs-shadow);
  152. }
  153. [dir="rtl"] .media-library-menu + .media-library-content {
  154. border-right: var(--vertical-tabs-border);
  155. border-left: 0;
  156. }
  157. /* Generic media add form styles. */
  158. .media-library-add-form--without-input .form-item {
  159. margin-right: 1rem;
  160. }
  161. /**
  162. * Remove outline from added media list.
  163. *
  164. * The added media list receives focus after adding new media, but since it is
  165. * not an interactive element, it does not need an outline.
  166. */
  167. .media-library-add-form__added-media {
  168. margin: 0;
  169. padding: 0;
  170. outline: none;
  171. }
  172. /**
  173. * This Media Library form is an exception to the extrasmall button pattern.
  174. * Additional padding is needed to accommodate the remove button icon. The
  175. * margin is adjusted for alignment within the media library dialog.
  176. */
  177. .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
  178. margin: var(--space-xs) 0; /* LTR */
  179. /* Left padding is double the background size of the button icon. */
  180. padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
  181. }
  182. /* This is needed to override the default extrasmall button left margin. */
  183. [dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
  184. margin-left: 0;
  185. }
  186. .media-library-add-form__input-wrapper {
  187. padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
  188. border: var(--details-border-size) solid var(--details-border-color);
  189. border-radius: var(--base-border-radius);
  190. background-color: var(--color-white);
  191. box-shadow: var(--details-box-shadow);
  192. }
  193. /* Style the media add upload form. */
  194. .media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
  195. margin-bottom: 0;
  196. }
  197. .media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
  198. .media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
  199. display: block;
  200. }
  201. /* Adjust the focus border on this element so it is not too close to buttons. */
  202. .media-library-add-form__added-media:focus {
  203. box-shadow:
  204. 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white),
  205. 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
  206. }
  207. .media-library-add-form .file-upload-help {
  208. margin: 0.5rem 0 0;
  209. }
  210. /* Style the media add oEmbed form. */
  211. .media-library-add-form--oembed .media-library-add-form__input-wrapper {
  212. display: flex;
  213. align-items: center;
  214. }
  215. @media screen and (max-width: 37.5em) {
  216. .media-library-add-form--oembed .media-library-add-form__input-wrapper {
  217. display: block;
  218. }
  219. }
  220. .media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {
  221. margin-bottom: 0;
  222. }
  223. .media-library-add-form-oembed-url {
  224. width: 100%;
  225. }
  226. /* Media add form selection styles. */
  227. .media-library-add-form__selected-media {
  228. margin-top: 1em;
  229. }
  230. /* Change to padding to account for the negative margin for flex grid. */
  231. .media-library-add-form__selected-media .details-wrapper {
  232. padding: 0 0.625rem 1em 0.625rem;
  233. }
  234. .media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
  235. height: 6.25rem;
  236. }
  237. /* Generic media library view styles. */
  238. .media-library-select-all {
  239. flex-basis: 100%;
  240. width: 100%;
  241. margin: 0.625rem 0.5rem;
  242. }
  243. .media-library-select-all input {
  244. margin-right: 0.625rem;
  245. }
  246. [dir="rtl"] .media-library-select-all input {
  247. margin-left: 0.625rem;
  248. }
  249. .media-library-views-form,
  250. .media-library-selection,
  251. .media-library-add-form__selected-media .details-wrapper,
  252. .media-library-view .form--inline {
  253. display: flex;
  254. flex-wrap: wrap;
  255. }
  256. .media-library-views-form > .form-actions,
  257. .media-library-views-form > .field-actions {
  258. flex-basis: 100%;
  259. }
  260. .media-library-views-form__header {
  261. flex-basis: 100%;
  262. }
  263. .media-library-views-form__header .form-item {
  264. margin-right: 0.5rem; /* @TODO RTL? */
  265. }
  266. .media-library-views-form__rows {
  267. display: flex;
  268. flex-wrap: wrap;
  269. flex-basis: 100%;
  270. margin: 0 -0.5rem;
  271. }
  272. /**
  273. * Override the table display of the visually hidden labels.
  274. *
  275. * The width, height and overflow properties in the styles for the
  276. * .visually-hidden class do not work correctly if the element has a table
  277. * display.
  278. */
  279. .media-library-item label {
  280. display: inline-block;
  281. }
  282. /* Media library widget view styles. */
  283. .media-library-wrapper .media-library-view {
  284. position: relative;
  285. display: flex;
  286. flex-wrap: wrap;
  287. justify-content: space-between;
  288. }
  289. .media-library-wrapper .view-header {
  290. align-self: flex-end;
  291. margin: 1em 0;
  292. text-align: right; /* LTR */
  293. }
  294. [dir="rtl"] .media-library-wrapper .view-header {
  295. text-align: left;
  296. }
  297. .media-library-wrapper .media-library-view .view-filters,
  298. .media-library-wrapper .media-library-view .view-content {
  299. flex: 0 0 100%;
  300. }
  301. .media-library-wrapper .views-display-link {
  302. margin: 0;
  303. padding-left: 1.375rem; /* LTR */
  304. color: #333;
  305. font-size: 0.9375rem;
  306. line-height: 1rem;
  307. }
  308. [dir="rtl"] .media-library-wrapper .views-display-link {
  309. padding-right: 1.375rem;
  310. padding-left: 0;
  311. }
  312. .media-library-wrapper .views-display-link.is-active {
  313. font-weight: bold;
  314. }
  315. .media-library-wrapper .views-display-link-widget {
  316. margin-right: 0.9375rem;
  317. background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9zm-8 0h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3A1.5 1.5 0 0 1 2.5 9zm8-8h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3A1.5 1.5 0 0 1 10.5 1zm-8 0h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3A1.5 1.5 0 0 1 2.5 1z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
  318. }
  319. [dir="rtl"] .media-library-wrapper .views-display-link-widget {
  320. background-position: right 0;
  321. }
  322. .media-library-wrapper .views-display-link-widget_table {
  323. background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M7 15a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 9.5a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 4a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zM2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
  324. }
  325. [dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
  326. background-position: right 0;
  327. }
  328. /**
  329. * Style the media library grid items.
  330. */
  331. .media-library-item,
  332. .media-library-item__preview-wrapper {
  333. position: relative;
  334. }
  335. /**
  336. * Ajax throbbers inside a media library item.
  337. */
  338. .media-library-item .ajax-progress.ajax-progress.ajax-progress {
  339. position: absolute;
  340. z-index: calc(var(--vertical-tabs-menu--z-index) + 1);
  341. top: 50%;
  342. left: 50%;
  343. box-sizing: border-box;
  344. width: 3rem; /* 56px */
  345. height: 3rem;
  346. margin: -1.5rem;
  347. border: var(--input-border-size) solid var(--jui-dropdown-border-color);
  348. border-radius: 3.5rem;
  349. background: var(--color-white);
  350. box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
  351. }
  352. .media-library-item .ajax-progress__throbber {
  353. position: absolute;
  354. top: 50%;
  355. left: 50%;
  356. width: 1.75rem;
  357. height: 1.75rem;
  358. margin: -0.875rem;
  359. border: 3px solid var(--color-absolutezero);
  360. border-right: 3px dotted transparent;
  361. }
  362. .media-library-item .ajax-progress__message {
  363. display: none;
  364. }
  365. .media-library-item--grid {
  366. justify-content: center;
  367. box-sizing: border-box;
  368. width: 50%;
  369. padding: 0.5rem;
  370. vertical-align: top;
  371. outline: none;
  372. background: #fff;
  373. }
  374. .media-library-item--grid::before {
  375. position: absolute;
  376. top: 0.4375rem;
  377. left: 0.4375rem;
  378. width: calc(100% - 1rem);
  379. height: calc(100% - 1rem);
  380. content: "";
  381. transition:
  382. border-color 0.2s,
  383. color 0.2s,
  384. background 0.2s;
  385. pointer-events: none;
  386. border: 1px solid #dbdbdb;
  387. border-radius: 2px;
  388. box-shadow: var(--details-box-shadow);
  389. }
  390. /**
  391. * The media library grid item focus border is moved to a child element to
  392. * improve padding.
  393. */
  394. .media-library-item--grid:focus {
  395. outline: none;
  396. box-shadow: none;
  397. }
  398. .media-library-item--grid:focus .media-library-item__preview-wrapper {
  399. outline: var(--focus-outline);
  400. box-shadow: var(--focus-box-shadow);
  401. }
  402. /* Media library widget weight field styles. */
  403. .media-library-item--grid .form-item {
  404. margin: 0.75em;
  405. }
  406. /* The selected items in the add form should be shown a bit smaller. */
  407. .media-library-add-form__selected-media .media-library-item--small {
  408. width: 33.3%;
  409. }
  410. .media-library-widget-modal .ui-dialog-buttonpane {
  411. display: flex;
  412. align-items: center;
  413. }
  414. .media-library-widget-modal .ui-dialog-buttonpane .form-actions,
  415. .media-library-widget-modal .ui-dialog-buttonpane .field-actions {
  416. flex: 1;
  417. }
  418. /**
  419. * By default, the dialog is too narrow to be usable.
  420. * @see Drupal.ckeditor5.openDialog()
  421. */
  422. .ui-dialog--narrow.media-library-widget-modal {
  423. max-width: 75%;
  424. }
  425. @media screen and (min-width: 45em) {
  426. .media-library-item--grid {
  427. width: 33.3%;
  428. }
  429. /* Change the width for the modal and widget since there is less space. */
  430. .media-library-widget-modal .media-library-item--grid,
  431. .media-library-selection .media-library-item--grid {
  432. width: 50%;
  433. }
  434. /* The selected items in the add form should be shown a bit smaller. */
  435. .media-library-add-form__selected-media .media-library-item--small {
  436. width: 25%;
  437. }
  438. }
  439. @media screen and (min-width: 60em) {
  440. .media-library-item--grid {
  441. width: 25%;
  442. }
  443. /* Change the width for the modal and widget since there is less space. */
  444. .media-library-widget-modal .media-library-item--grid,
  445. .media-library-selection .media-library-item--grid {
  446. width: 33.3%;
  447. }
  448. /* The selected items in the add form should be shown a bit smaller. */
  449. .media-library-add-form__selected-media .media-library-item--small {
  450. width: 16.6%;
  451. }
  452. }
  453. @media screen and (min-width: 77em) {
  454. .media-library-item--grid {
  455. width: 16.6%;
  456. }
  457. /* Change the width for the modal and widget since there is less space. */
  458. .media-library-widget-modal .media-library-item--grid,
  459. .media-library-selection .media-library-item--grid {
  460. width: 25%;
  461. }
  462. /* The selected items in the add form should be shown a bit smaller. */
  463. .media-library-add-form__selected-media .media-library-item--small {
  464. width: 16.6%;
  465. }
  466. }
  467. .media-library-item--grid .field--name-thumbnail {
  468. overflow: hidden;
  469. text-align: center;
  470. background-color: #ebebeb;
  471. }
  472. .media-library-item--grid .field--name-thumbnail img {
  473. height: 11.25rem;
  474. object-fit: contain;
  475. object-position: center center;
  476. }
  477. .media-library-item--grid.is-hover::before,
  478. .media-library-item--grid.checked::before,
  479. .media-library-item--grid.is-focus::before {
  480. top: 0.3125rem;
  481. left: 0.3125rem;
  482. border-width: 3px;
  483. border-radius: 0.1875rem;
  484. }
  485. .media-library-item--grid.is-hover::before,
  486. .media-library-item--grid.checked.is-hover::before {
  487. border-color: var(--color-absolutezero-hover);
  488. }
  489. .media-library-item--grid.is-focus::before {
  490. border-color: var(--color-focus);
  491. }
  492. .media-library-item--grid.checked::before {
  493. border-color: var(--button--focus-border-color);
  494. }
  495. .media-library-item--grid .form-boolean--type-checkbox:checked {
  496. border-color: var(--button--focus-border-color);
  497. background-color: var(--button--focus-border-color);
  498. }
  499. .media-library-item__click-to-select-checkbox {
  500. position: absolute;
  501. z-index: 1;
  502. top: 1rem;
  503. left: 1rem; /* LTR */
  504. display: block;
  505. }
  506. [dir="rtl"] .media-library-item__click-to-select-checkbox {
  507. right: 1rem;
  508. left: auto;
  509. }
  510. .media-library-item__click-to-select-checkbox input {
  511. width: 1.25rem;
  512. height: 1.25rem;
  513. }
  514. .media-library-item__click-to-select-checkbox .form-item {
  515. margin: 0;
  516. }
  517. .media-library-item__click-to-select-trigger {
  518. overflow: hidden;
  519. height: 100%;
  520. cursor: pointer;
  521. }
  522. /* Media library item table styles. */
  523. .media-library-item--table img {
  524. max-width: 6.25rem;
  525. height: auto;
  526. }
  527. /* Media library entity view display styles. */
  528. .media-library-item__preview {
  529. padding-bottom: 2.125rem;
  530. }
  531. .field--widget-media-library-widget .media-library-item__preview {
  532. cursor: move;
  533. }
  534. .field--widget-media-library-widget .media-library-item__preview img {
  535. border-top-left-radius: 2px;
  536. border-top-right-radius: 2px;
  537. }
  538. .field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
  539. cursor: inherit;
  540. }
  541. .media-library-item__status {
  542. position: absolute;
  543. top: 2.5rem;
  544. left: 0.3125rem; /* LTR */
  545. padding: 0.3125rem 0.625rem;
  546. pointer-events: none;
  547. color: #e4e4e4;
  548. background: #666;
  549. font-size: 0.75rem;
  550. font-style: italic;
  551. }
  552. [dir="rtl"] .media-library-item__status {
  553. right: 0.3125rem;
  554. left: auto;
  555. }
  556. .media-library-item__attributes {
  557. position: absolute;
  558. bottom: 0;
  559. display: block;
  560. overflow: hidden;
  561. max-width: calc(100% - 0.625rem);
  562. max-height: calc(100% - 3.125rem);
  563. padding: 0.3125rem;
  564. background: white;
  565. }
  566. .media-library-item__name {
  567. display: block;
  568. overflow: hidden;
  569. margin: calc(var(--space-xs) / 2) var(--space-xs);
  570. white-space: nowrap;
  571. text-overflow: ellipsis;
  572. font-size: 0.875rem;
  573. }
  574. .media-library-item__attributes:hover .media-library-item__name,
  575. .media-library-item--grid.is-focus .media-library-item__name,
  576. .media-library-item--grid.checked .media-library-item__name {
  577. white-space: normal;
  578. }
  579. .media-library-item__type {
  580. color: #696969;
  581. font-size: 0.75rem;
  582. }
  583. .media-library-item--disabled {
  584. pointer-events: none;
  585. opacity: 0.5;
  586. }
  587. /* Media library widget styles. */
  588. .media-library-widget {
  589. position: relative;
  590. }
  591. .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
  592. position: absolute;
  593. top: var(--space-s);
  594. right: var(--space-m); /* LTR */
  595. -webkit-text-decoration: none;
  596. text-decoration: none;
  597. }
  598. [dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
  599. right: auto;
  600. left: var(--space-m);
  601. }
  602. /* Add negative margin for flex grid. */
  603. .media-library-selection {
  604. margin: 1em -0.5rem;
  605. }
  606. /**
  607. * Media library widget edit and delete button styles.
  608. *
  609. * We have to override the .button styles since buttons make heavy use of
  610. * background and border property changes.
  611. */
  612. .media-library-item__edit,
  613. .media-library-item__edit:hover,
  614. .media-library-item__edit:focus,
  615. .media-library-item__remove,
  616. .media-library-item__remove:hover,
  617. .media-library-item__remove:focus,
  618. .media-library-item__remove.button,
  619. .media-library-item__remove.button:first-child,
  620. .media-library-item__remove.button:disabled,
  621. .media-library-item__remove.button:disabled:active,
  622. .media-library-item__remove.button:hover,
  623. .media-library-item__remove.button:focus {
  624. position: absolute;
  625. z-index: 1;
  626. top: 0.625rem;
  627. overflow: hidden;
  628. width: 1.5rem;
  629. height: 1.5rem;
  630. margin: 0.3125rem;
  631. padding: 0;
  632. transition: 0.2s border-color;
  633. color: transparent;
  634. background-size: 0.75rem;
  635. text-shadow: none;
  636. font-size: 0;
  637. }
  638. .media-library-item__edit {
  639. right: 2.5rem; /* LTR */
  640. }
  641. [dir="rtl"] .media-library-item__edit {
  642. right: auto;
  643. left: 2.5rem;
  644. }
  645. .media-library-item__remove {
  646. right: 0.625rem; /* LTR */
  647. }
  648. [dir="rtl"] .media-library-item__remove {
  649. right: auto;
  650. left: 0.625rem;
  651. }
  652. .media-library-item__edit {
  653. /* !important to override button class border. */
  654. border: 1px solid var(--color-gray-200) !important;
  655. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
  656. background-repeat: no-repeat;
  657. background-position: center;
  658. background-size: 0.75rem;
  659. }
  660. .media-library-item__edit:active {
  661. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
  662. }
  663. .media-library-item__remove,
  664. .media-library-item__remove.button,
  665. .media-library-item__remove.button:first-child,
  666. .media-library-item__remove.button:disabled,
  667. .media-library-item__remove.button:disabled:active,
  668. .media-library-item__remove.button:hover,
  669. .media-library-item__remove.button:focus {
  670. /* !important to override button class border. */
  671. border: 1px solid var(--color-gray-200) !important;
  672. background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
  673. background-repeat: no-repeat;
  674. background-position: center;
  675. background-size: 0.75rem;
  676. }
  677. .media-library-item__remove:active,
  678. .media-library-item__remove.button:active,
  679. .media-library-item__remove.button:disabled:active {
  680. /* !important to override button class border. */
  681. border-color: var(--color-absolutezero) !important;
  682. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
  683. }
  684. /* Style the added media item container. */
  685. .media-library-add-form__media {
  686. position: relative;
  687. display: flex;
  688. border-bottom: 1px solid #c0c0c0;
  689. }
  690. /* Do not show the bottom border and padding for the last item. */
  691. .media-library-add-form__media:last-child {
  692. padding-bottom: 0;
  693. border-bottom: 0;
  694. }
  695. .media-library-add-form__preview {
  696. display: flex;
  697. align-items: center;
  698. justify-content: center;
  699. width: 13.75rem;
  700. margin-right: 1.25rem; /* LTR */
  701. background: var(--color-gray-050-o-40);
  702. }
  703. [dir="rtl"] .media-library-add-form__preview {
  704. margin-right: 0;
  705. margin-left: 1.25rem;
  706. }
  707. .media-library-add-form__fields {
  708. flex-grow: 1;
  709. }
  710. .media-library-add-form__remove-button {
  711. position: absolute;
  712. right: 0; /* LTR */
  713. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
  714. background-repeat: no-repeat;
  715. background-position: var(--space-xs) center;
  716. background-size: var(--space-s);
  717. }
  718. [dir="rtl"] .media-library-add-form__remove-button {
  719. right: auto;
  720. left: 0;
  721. }
  722. .media-library-add-form__remove-button.button:disabled {
  723. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%238e929c' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
  724. }
  725. .views-live-preview .media-library-view div.views-row + div.views-row {
  726. margin-top: 0;
  727. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.