You are here

Home » API reference » Drupal 10

media-library.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/starterkit_theme/css/layout/media-library.css
  2. 10 core/themes/classy/css/layout/media-library.css
  3. 10 core/themes/claro/css/theme/media-library.css
  4. 10 core/themes/seven/css/theme/media-library.css
  5. 10 core/themes/seven/css/classy/layout/media-library.css
  6. 10 core/themes/bartik/css/classy/layout/media-library.css
  7. 10 core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
Same filename and directory in other branches
  1. 8 core/themes/claro/css/theme/media-library.css
  2. 9 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. /**

  9.  * @file media-library.pcss.css

  10. 

  11.  * Styling for Media Library.

  12.  */

  13. 

  14. /**

  15.  * Negative margins compensate for modal dialog padding and compensate for

  16.  * positioning that would otherwise hide the active tab indicator on the left.

  17.  */

  18. 

  19. .media-library-wrapper {

  20.   display: flex;

  21.   margin: -1rem -1.5rem -1rem -1rem; /* LTR */

  22. }

  23. 

  24. [dir="rtl"] .media-library-wrapper {

  25.   margin-right: -1em;

  26.   margin-left: -1.5em;

  27. }

  28. 

  29. .media-library-wrapper .messages-list,

  30. .media-library-wrapper .messages {

  31.   margin-top: 0;

  32.   margin-bottom: var(--space-l);

  33. }

  34. 

  35. .media-library-menu {

  36.   position: relative;

  37.   display: block;

  38.   width: var(--vertical-tabs-menu-width);

  39.   margin: 0;

  40.   padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);

  41.   list-style: none;

  42.   color: var(--color-text);

  43. }

  44. 

  45. [dir="rtl"] .media-library-menu {

  46.   margin: 0;

  47. }

  48. 

  49. .media-library-menu__item {

  50.   overflow: hidden;

  51.   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 */

  52.   padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;

  53. }

  54. 

  55. [dir="rtl"] .media-library-menu__item {

  56.   margin-right: var(--vertical-tabs-menu-item--left-margin);

  57.   margin-left: var(--vertical-tabs-menu-item--right-margin);

  58. }

  59. 

  60. .media-library-menu__item::before {

  61.   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. */

  62.   display: block;

  63.   width: 100%;

  64.   margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);

  65.   content: "";

  66.   border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);

  67. }

  68. 

  69. .media-library-menu__link {

  70.   position: relative;

  71.   display: block;

  72.   margin-top: calc(var(--vertical-tabs-border-size) * -1);

  73.   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */

  74.   text-decoration: none;

  75.   word-wrap: break-word;

  76.   -webkit-hyphens: auto;

  77.   hyphens: auto;

  78.   color: var(--color-text);

  79.   border: var(--vertical-tabs-border-size) solid transparent;

  80.   border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */

  81.   border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */

  82. }

  83. 

  84. [dir="rtl"] .media-library-menu__link {

  85.   padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));

  86.   padding-left: var(--space-s);

  87.   border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;

  88.   border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;

  89. }

  90. 

  91. @media screen and (-ms-high-contrast: active) {

  92.   .media-library-menu__link {

  93.     border-color: transparent;

  94.   }

  95. }

  96. 

  97. /* Menu link states. */

  98. 

  99. .media-library-menu__link:focus {

  100.   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. */

  101.   text-decoration: none;

  102.   box-shadow: none;

  103. }

  104. 

  105. .media-library-menu__link:hover {

  106.   text-decoration: none;

  107.   color: var(--color-absolutezero);

  108.   /* These borders are necessary to replace the dividing lines while in the hover state. */

  109.   border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);

  110.   border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);

  111.   background: var(--color-bgblue-hover);

  112. }

  113. 

  114. /* This pseudo element provides the background for the hover state. */

  115. 

  116. .media-library-menu__link::before {

  117.   position: absolute;

  118.   z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */

  119.   top: calc(var(--vertical-tabs-border-size) * -1);

  120.   right: 0; /* LTR */

  121.   bottom: calc(var(--vertical-tabs-border-size) * -1);

  122.   left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */

  123.   content: "";

  124.   pointer-events: none;

  125.   background-clip: padding-box;

  126. }

  127. 

  128. [dir="rtl"] .media-library-menu__link::before {

  129.   right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);

  130.   left: 0;

  131. }

  132. 

  133. .media-library-menu__link:focus::after {

  134.   position: absolute;

  135.   top: 0;

  136.   right: 0;

  137.   bottom: 0;

  138.   left: 0;

  139.   margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);

  140.   content: "";

  141.   pointer-events: none;

  142.   border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);

  143.   border-radius: var(--vertical-tabs-border-radius);

  144. }

  145. 

  146. .media-library-menu__link.active {

  147.   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. */

  148.   color: var(--color-absolutezero);

  149.   border-color: var(--vertical-tabs-border-color) transparent;

  150.   background-color: var(--color-white);

  151.   box-shadow: var(--vertical-tabs-shadow);

  152. }

  153. 

  154. .media-library-menu__link.active:hover {

  155.   color: var(--color-absolutezero-hover);

  156.   background-color: var(--color-bgblue-hover);

  157. }

  158. 

  159. .media-library-menu__link.active::before {

  160.   z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */

  161.   border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */

  162.   border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */

  163. }

  164. 

  165. [dir=rtl] .media-library-menu__link.active::before {

  166.   border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);

  167.   border-left: 0;

  168.   border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;

  169. }

  170. 

  171. .media-library-menu__link.active:hover::before {

  172.   background: none;

  173. }

  174. 

  175. .media-library-content {

  176.   width: 100%;

  177.   padding: 1em;

  178.   outline: none;

  179. }

  180. 

  181. .media-library-menu + .media-library-content {

  182.   z-index: var(--vertical-tabs-menu--z-index);

  183.   border-left: var(--vertical-tabs-border); /* LTR */

  184.   box-shadow: var(--vertical-tabs-shadow);

  185. }

  186. 

  187. [dir="rtl"] .media-library-menu + .media-library-content {

  188.   border-right: var(--vertical-tabs-border);

  189.   border-left: 0;

  190. }

  191. 

  192. /* Generic media add form styles. */

  193. 

  194. .media-library-add-form--without-input .form-item {

  195.   margin-right: 1rem;

  196. }

  197. 

  198. /**

  199.  * Remove outline from added media list.

  200.  *

  201.  * The added media list receives focus after adding new media, but since it is

  202.  * not an interactive element, it does not need an outline.

  203.  */

  204. 

  205. .media-library-add-form__added-media {

  206.   margin: 0;

  207.   padding: 0;

  208.   outline: none;

  209. }

  210. 

  211. /**

  212.  * This Media Library form is an exception to the extrasmall button pattern.

  213.  * Additional padding is needed to accommodate the remove button icon. The

  214.  * margin is adjusted for alignment within the media library dialog.

  215.  */

  216. 

  217. .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {

  218.   margin: var(--space-xs) 0; /* LTR */

  219.   /* Left padding is double the background size of the button icon. */

  220.   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);

  221. }

  222. 

  223. /* This is needed to override the default extrasmall button left margin. */

  224. 

  225. [dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {

  226.   margin-left: 0;

  227. }

  228. 

  229. .media-library-add-form__input-wrapper {

  230.   padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);

  231.   border: var(--details-border-size) solid var(--details-border-color);

  232.   border-radius: var(--base-border-radius);

  233.   background-color: var(--color-white);

  234.   box-shadow: var(--details-box-shadow);

  235. }

  236. 

  237. /* Style the media add upload form. */

  238. 

  239. .media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {

  240.   margin-bottom: 0;

  241. }

  242. 

  243. .media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,

  244. .media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {

  245.   display: block;

  246. }

  247. 

  248. /* Adjust the focus border on this element so it is not too close to buttons. */

  249. 

  250. .media-library-add-form__added-media:focus {

  251.   box-shadow: 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);

  252. }

  253. 

  254. .media-library-add-form .file-upload-help {

  255.   margin: 0.5rem 0 0;

  256. }

  257. 

  258. /* Align remove buttons with Save button and compensate for IE scrollbar and focus padding. */

  259. 

  260. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  261.   .ui-dialog > .ui-dialog-content {

  262.     padding-right: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));

  263.   }

  264.   [dir="rtl"] .ui-dialog > .ui-dialog-content {

  265.     padding-left: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));

  266.   }

  267. }

  268. 

  269. /* Style the media add oEmbed form. */

  270. 

  271. .media-library-add-form--oembed .media-library-add-form__input-wrapper {

  272.   display: flex;

  273.   align-items: center;

  274. }

  275. 

  276. @media screen and (max-width: 37.5em) {

  277.   .media-library-add-form--oembed .media-library-add-form__input-wrapper {

  278.     display: block;

  279.   }

  280. }

  281. 

  282. .media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {

  283.   margin-bottom: 0;

  284. }

  285. 

  286. .media-library-add-form-oembed-url {

  287.   width: 100%;

  288. }

  289. 

  290. /* Media add form selection styles. */

  291. 

  292. .media-library-add-form__selected-media {

  293.   margin-top: 1em;

  294. }

  295. 

  296. /* Change to padding to account for the negative margin for flex grid. */

  297. 

  298. .media-library-add-form__selected-media .details-wrapper {

  299.   padding: 0 0.625rem 1em 0.625rem;

  300. }

  301. 

  302. .media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {

  303.   height: 6.25rem;

  304. }

  305. 

  306. /* Generic media library view styles. */

  307. 

  308. .media-library-select-all {

  309.   flex-basis: 100%;

  310.   width: 100%;

  311.   margin: 0.625rem 0.5rem;

  312. }

  313. 

  314. .media-library-select-all input {

  315.   margin-right: 0.625rem;

  316. }

  317. 

  318. [dir="rtl"] .media-library-select-all input {

  319.   margin-left: 0.625rem;

  320. }

  321. 

  322. .media-library-views-form,

  323. .media-library-selection,

  324. .media-library-add-form__selected-media .details-wrapper,

  325. .media-library-view .form--inline {

  326.   display: flex;

  327.   flex-wrap: wrap;

  328. }

  329. 

  330. .media-library-views-form > .form-actions {

  331.   flex-basis: 100%;

  332. }

  333. 

  334. .media-library-views-form__header {

  335.   flex-basis: 100%;

  336. }

  337. 

  338. .media-library-views-form__header .form-item {

  339.   margin-right: 0.5rem; /* @TODO RTL? */

  340. }

  341. 

  342. .media-library-views-form__rows {

  343.   display: flex;

  344.   flex-wrap: wrap;

  345.   flex-basis: 100%;

  346.   margin: 0 -0.5rem;

  347. }

  348. 

  349. /**

  350.  * Override the table display of the visually hidden labels.

  351.  *

  352.  * The width, height and overflow properties in the styles for the

  353.  * .visually-hidden class do not work correctly if the element has a table

  354.  * display.

  355.  */

  356. 

  357. .media-library-item label {

  358.   display: inline-block;

  359. }

  360. 

  361. /* Media library widget view styles. */

  362. 

  363. .media-library-wrapper .media-library-view {

  364.   position: relative;

  365.   display: flex;

  366.   flex-wrap: wrap;

  367.   justify-content: space-between;

  368. }

  369. 

  370. .media-library-wrapper .view-header {

  371.   align-self: flex-end;

  372.   margin: 1em 0;

  373.   text-align: right; /* LTR */

  374. }

  375. 

  376. [dir="rtl"] .media-library-wrapper .view-header {

  377.   text-align: left;

  378. }

  379. 

  380. .media-library-wrapper .media-library-view .view-filters,

  381. .media-library-wrapper .media-library-view .view-content {

  382.   flex: 0 0 100%;

  383. }

  384. 

  385. .media-library-wrapper .views-display-link {

  386.   margin: 0;

  387.   padding-left: 1.375rem; /* LTR */

  388.   color: #333;

  389.   font-size: 0.9375rem;

  390.   line-height: 1rem;

  391. }

  392. 

  393. [dir="rtl"] .media-library-wrapper .views-display-link {

  394.   padding-right: 1.375rem;

  395.   padding-left: 0;

  396. }

  397. 

  398. .media-library-wrapper .views-display-link.is-active {

  399.   font-weight: bold;

  400. }

  401. 

  402. .media-library-wrapper .views-display-link-widget {

  403.   margin-right: 0.9375rem;

  404.   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 */

  405. }

  406. 

  407. [dir="rtl"] .media-library-wrapper .views-display-link-widget {

  408.   background-position: right 0;

  409. }

  410. 

  411. .media-library-wrapper .views-display-link-widget_table {

  412.   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 */

  413. }

  414. 

  415. [dir="rtl"] .media-library-wrapper .views-display-link-widget_table {

  416.   background-position: right 0;

  417. }

  418. 

  419. /**

  420.  * Style the media library grid items.

  421.  */

  422. 

  423. .media-library-item {

  424.   position: relative;

  425. }

  426. 

  427. /**

  428.  * Ajax throbbers inside a media library item.

  429.  */

  430. 

  431. .media-library-item .ajax-progress.ajax-progress.ajax-progress {

  432.   position: absolute;

  433.   z-index: calc(var(--vertical-tabs-menu--z-index) + 1);

  434.   top: 50%;

  435.   left: 50%;

  436.   box-sizing: border-box;

  437.   width: 3rem; /* 56px */

  438.   height: 3rem;

  439.   margin: -1.5rem;

  440.   border: var(--input-border-size) solid var(--jui-dropdown-border-color);

  441.   border-radius: 3.5rem;

  442.   background: var(--color-white);

  443.   box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);

  444. }

  445. 

  446. .media-library-item .ajax-progress__throbber {

  447.   position: absolute;

  448.   top: 50%;

  449.   left: 50%;

  450.   width: 1.75rem;

  451.   height: 1.75rem;

  452.   margin: -0.875rem;

  453.   border: 3px solid var(--color-absolutezero);

  454.   border-right: 3px dotted transparent;

  455. }

  456. 

  457. .media-library-item .ajax-progress__message {

  458.   display: none;

  459. }

  460. 

  461. .media-library-item--grid {

  462.   justify-content: center;

  463.   box-sizing: border-box;

  464.   width: 50%;

  465.   padding: 0.5rem;

  466.   vertical-align: top;

  467.   outline: none;

  468.   background: #fff;

  469. }

  470. 

  471. .media-library-item--grid:before {

  472.   position: absolute;

  473.   top: 0.4375rem;

  474.   left: 0.4375rem;

  475.   width: calc(100% - 1rem);

  476.   height: calc(100% - 1rem);

  477.   content: "";

  478.   transition: border-color 0.2s, color 0.2s, background 0.2s;

  479.   pointer-events: none;

  480.   border: 1px solid #dbdbdb;

  481.   border-radius: 2px;

  482.   box-shadow: var(--details-box-shadow);

  483. }

  484. 

  485. /**

  486. * The media library grid item focus border is moved to a child element to

  487. * improve padding.

  488. */

  489. 

  490. .media-library-item--grid:focus {

  491.   outline: none;

  492.   box-shadow: none;

  493. }

  494. 

  495. .media-library-item--grid:focus .media-library-item__preview-wrapper {

  496.   outline: var(--focus-outline);

  497.   box-shadow: var(--focus-box-shadow);

  498. }

  499. 

  500. /* Media library widget weight field styles. */

  501. 

  502. .media-library-item--grid .form-item {

  503.   margin: 0.75em;

  504. }

  505. 

  506. /* The selected items in the add form should be shown a bit smaller. */

  507. 

  508. .media-library-add-form__selected-media .media-library-item--small {

  509.   width: 33.3%;

  510. }

  511. 

  512. .media-library-widget-modal .ui-dialog-buttonpane {

  513.   display: flex;

  514.   align-items: center;

  515. }

  516. 

  517. .media-library-widget-modal .ui-dialog-buttonpane .form-actions {

  518.   flex: 1;

  519. }

  520. 

  521. /**

  522.  * By default, the dialog is too narrow to be usable.

  523.  * @see Drupal.ckeditor.openDialog()

  524.  */

  525. 

  526. .ui-dialog--narrow.media-library-widget-modal {

  527.   max-width: 75%;

  528. }

  529. 

  530. @media screen and (min-width: 45em) {

  531.   .media-library-item--grid {

  532.     width: 33.3%;

  533.   }

  534. 

  535.   /* Change the width for the modal and widget since there is less space. */

  536.   .media-library-widget-modal .media-library-item--grid,

  537.   .media-library-selection .media-library-item--grid {

  538.     width: 50%;

  539.   }

  540. 

  541.   /* The selected items in the add form should be shown a bit smaller. */

  542.   .media-library-add-form__selected-media .media-library-item--small {

  543.     width: 25%;

  544.   }

  545. }

  546. 

  547. @media screen and (min-width: 60em) {

  548.   .media-library-item--grid {

  549.     width: 25%;

  550.   }

  551. 

  552.   /* Change the width for the modal and widget since there is less space. */

  553.   .media-library-widget-modal .media-library-item--grid,

  554.   .media-library-selection .media-library-item--grid {

  555.     width: 33.3%;

  556.   }

  557. 

  558.   /* The selected items in the add form should be shown a bit smaller. */

  559.   .media-library-add-form__selected-media .media-library-item--small {

  560.     width: 16.6%;

  561.   }

  562. }

  563. 

  564. @media screen and (min-width: 77em) {

  565.   .media-library-item--grid {

  566.     width: 16.6%;

  567.   }

  568. 

  569.   /* Change the width for the modal and widget since there is less space. */

  570.   .media-library-widget-modal .media-library-item--grid,

  571.   .media-library-selection .media-library-item--grid {

  572.     width: 25%;

  573.   }

  574. 

  575.   /* The selected items in the add form should be shown a bit smaller. */

  576.   .media-library-add-form__selected-media .media-library-item--small {

  577.     width: 16.6%;

  578.   }

  579. }

  580. 

  581. .media-library-item--grid .field--name-thumbnail {

  582.   overflow: hidden;

  583.   text-align: center;

  584.   background-color: #ebebeb;

  585. }

  586. 

  587. .media-library-item--grid .field--name-thumbnail img {

  588.   height: 11.25rem;

  589.   object-fit: contain;

  590.   object-position: center center;

  591. }

  592. 

  593. .media-library-item--grid.is-hover:before,

  594. .media-library-item--grid.checked:before,

  595. .media-library-item--grid.is-focus:before {

  596.   top: 0.3125rem;

  597.   left: 0.3125rem;

  598.   border-width: 3px;

  599.   border-radius: 0.1875rem;

  600. }

  601. 

  602. .media-library-item--grid.is-hover:before,

  603. .media-library-item--grid.checked.is-hover:before {

  604.   border-color: var(--color-absolutezero-hover);

  605. }

  606. 

  607. .media-library-item--grid.is-focus:before {

  608.   border-color: var(--color-focus);

  609. }

  610. 

  611. .media-library-item--grid.checked:before {

  612.   border-color: var(--button--focus-border-color);

  613. }

  614. 

  615. .media-library-item--grid .form-boolean--type-checkbox:checked {

  616.   border-color: var(--button--focus-border-color);

  617.   background-color: var(--button--focus-border-color);

  618. }

  619. 

  620. .media-library-item__click-to-select-checkbox {

  621.   position: absolute;

  622.   z-index: 1;

  623.   top: 1rem;

  624.   left: 1rem; /* LTR */

  625.   display: block;

  626. }

  627. 

  628. [dir="rtl"] .media-library-item__click-to-select-checkbox {

  629.   right: 1rem;

  630.   left: auto;

  631. }

  632. 

  633. .media-library-item__click-to-select-checkbox input {

  634.   width: 1.25rem;

  635.   height: 1.25rem;

  636. }

  637. 

  638. .media-library-item__click-to-select-checkbox .form-item {

  639.   margin: 0;

  640. }

  641. 

  642. .media-library-item__click-to-select-trigger {

  643.   overflow: hidden;

  644.   height: 100%;

  645.   cursor: pointer;

  646. }

  647. 

  648. /* Media library item table styles. */

  649. 

  650. .media-library-item--table img {

  651.   max-width: 6.25rem;

  652.   height: auto;

  653. }

  654. 

  655. /* Media library entity view display styles. */

  656. 

  657. .media-library-item__preview {

  658.   padding-bottom: 2.125rem;

  659. }

  660. 

  661. .field--widget-media-library-widget .media-library-item__preview {

  662.   cursor: move;

  663. }

  664. 

  665. .field--widget-media-library-widget .media-library-item__preview img {

  666.   border-top-left-radius: 2px;

  667.   border-top-right-radius: 2px;

  668. }

  669. 

  670. .field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {

  671.   cursor: inherit;

  672. }

  673. 

  674. .media-library-item__status {

  675.   position: absolute;

  676.   top: 2.5rem;

  677.   left: 0.3125rem; /* LTR */

  678.   padding: 0.3125rem 0.625rem;

  679.   pointer-events: none;

  680.   color: #e4e4e4;

  681.   background: #666;

  682.   font-size: 0.75rem;

  683.   font-style: italic;

  684. }

  685. 

  686. [dir="rtl"] .media-library-item__status {

  687.   right: 0.3125rem;

  688.   left: auto;

  689. }

  690. 

  691. .media-library-item__attributes {

  692.   position: absolute;

  693.   bottom: 0;

  694.   display: block;

  695.   overflow: hidden;

  696.   max-width: calc(100% - 0.625rem);

  697.   max-height: calc(100% - 3.125rem);

  698.   padding: 0.3125rem;

  699.   background: white;

  700. }

  701. 

  702. .media-library-item__name {

  703.   display: block;

  704.   overflow: hidden;

  705.   margin: calc(var(--space-xs) / 2) var(--space-xs);

  706.   white-space: nowrap;

  707.   text-overflow: ellipsis;

  708.   font-size: 0.875rem;

  709. }

  710. 

  711. .media-library-item__attributes:hover .media-library-item__name,

  712. .media-library-item--grid.is-focus .media-library-item__name,

  713. .media-library-item--grid.checked .media-library-item__name {

  714.   white-space: normal;

  715. }

  716. 

  717. .media-library-item__type {

  718.   color: #696969;

  719.   font-size: 0.75rem;

  720. }

  721. 

  722. .media-library-item--disabled {

  723.   pointer-events: none;

  724.   opacity: 0.5;

  725. }

  726. 

  727. /* Media library widget styles. */

  728. 

  729. .media-library-widget {

  730.   position: relative;

  731. }

  732. 

  733. .media-library-widget__toggle-weight.media-library-widget__toggle-weight {

  734.   position: absolute;

  735.   top: var(--space-s);

  736.   right: var(--space-m); /* LTR */

  737.   text-decoration: none;

  738. }

  739. 

  740. [dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {

  741.   right: auto;

  742.   left: var(--space-m);

  743. }

  744. 

  745. /* Add negative margin for flex grid. */

  746. 

  747. .media-library-selection {

  748.   margin: 1em -0.5rem;

  749. }

  750. 

  751. /**

  752.  * Media library widget edit and delete button styles.

  753.  *

  754.  * We have to override the .button styles since buttons make heavy use of

  755.  * background and border property changes.

  756.  */

  757. 

  758. .media-library-item__edit,

  759. .media-library-item__edit:hover,

  760. .media-library-item__edit:focus,

  761. .media-library-item__remove,

  762. .media-library-item__remove:hover,

  763. .media-library-item__remove:focus,

  764. .media-library-item__remove.button,

  765. .media-library-item__remove.button:first-child,

  766. .media-library-item__remove.button:disabled,

  767. .media-library-item__remove.button:disabled:active,

  768. .media-library-item__remove.button:hover,

  769. .media-library-item__remove.button:focus {

  770.   position: absolute;

  771.   z-index: 1;

  772.   top: 0.625rem;

  773.   overflow: hidden;

  774.   width: 1.5rem;

  775.   height: 1.5rem;

  776.   margin: 0.3125rem;

  777.   padding: 0;

  778.   transition: 0.2s border-color;

  779.   color: transparent;

  780.   background-size: 0.75rem;

  781.   text-shadow: none;

  782.   font-size: 0;

  783. }

  784. 

  785. .media-library-item__edit {

  786.   right: 2.5rem; /* LTR */

  787. }

  788. 

  789. [dir="rtl"] .media-library-item__edit {

  790.   right: auto;

  791.   left: 2.5rem;

  792. }

  793. 

  794. .media-library-item__remove {

  795.   right: 0.625rem; /* LTR */

  796. }

  797. 

  798. [dir="rtl"] .media-library-item__remove {

  799.   right: auto;

  800.   left: 0.625rem;

  801. }

  802. 

  803. .media-library-item__edit {

  804.   /* !important to override button class border. */

  805.   border: 1px solid var(--color-gray-200) !important;

  806.   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");

  807.   background-repeat: no-repeat;

  808.   background-position: center;

  809.   background-size: 0.75rem;

  810. }

  811. 

  812. .media-library-item__edit:active {

  813.   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");

  814. }

  815. 

  816. .media-library-item__remove,

  817. .media-library-item__remove.button,

  818. .media-library-item__remove.button:first-child,

  819. .media-library-item__remove.button:disabled,

  820. .media-library-item__remove.button:disabled:active,

  821. .media-library-item__remove.button:hover,

  822. .media-library-item__remove.button:focus {

  823.   /* !important to override button class border. */

  824.   border: 1px solid var(--color-gray-200) !important;

  825.   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");

  826.   background-repeat: no-repeat;

  827.   background-position: center;

  828.   background-size: 0.75rem;

  829. }

  830. 

  831. .media-library-item__remove:active,

  832. .media-library-item__remove.button:active,

  833. .media-library-item__remove.button:disabled:active {

  834.   /* !important to override button class border. */

  835.   border-color: var(--color-absolutezero) !important;

  836.   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");

  837. }

  838. 

  839. /* Style the added media item container. */

  840. 

  841. .media-library-add-form__media {

  842.   position: relative;

  843.   display: flex;

  844.   border-bottom: 1px solid #c0c0c0;

  845. }

  846. 

  847. /* Do not show the bottom border and padding for the last item. */

  848. 

  849. .media-library-add-form__media:last-child {

  850.   padding-bottom: 0;

  851.   border-bottom: 0;

  852. }

  853. 

  854. .media-library-add-form__preview {

  855.   display: flex;

  856.   align-items: center;

  857.   justify-content: center;

  858.   width: 13.75rem;

  859.   margin-right: 1.25rem; /* LTR */

  860.   background: var(--color-gray-050-o-40);

  861. }

  862. 

  863. [dir="rtl"] .media-library-add-form__preview {

  864.   margin-right: 0;

  865.   margin-left: 1.25rem;

  866. }

  867. 

  868. .media-library-add-form__fields {

  869.   flex-grow: 1;

  870. }

  871. 

  872. .media-library-add-form__remove-button {

  873.   position: absolute;

  874.   right: 0; /* LTR */

  875.   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");

  876.   background-repeat: no-repeat;

  877.   background-position: var(--space-xs) center;

  878.   background-size: var(--space-s);

  879. }

  880. 

  881. [dir="rtl"] .media-library-add-form__remove-button {

  882.   right: auto;

  883.   left: 0;

  884. }

  885. 

  886. .media-library-add-form__remove-button.button:disabled {

  887.   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");

  888. }

  889. 

  890. /* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */

  891. 

  892. .views-live-preview .media-library-view div.views-row + div.views-row {

  893.   margin-top: 0;

  894. }