You are here

Home » API reference » Drupal 10

media-library.pcss.css in Drupal 10

Same filename and directory in other branches
  1. 8 core/themes/claro/css/theme/media-library.pcss.css
  2. 9 core/themes/claro/css/theme/media-library.pcss.css

media-library.pcss.css

Styling for Media Library.

File

core/themes/claro/css/theme/media-library.pcss.css
View source 
  1. /**

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

  3. 

  4.  * Styling for Media Library.

  5.  */

  6. 

  7. /**

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

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

  10.  */

  11. .media-library-wrapper {

  12.   display: flex;

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

  14. }

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

  16.   margin-right: -1em;

  17.   margin-left: -1.5em;

  18. }

  19. 

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

  21. .media-library-wrapper .messages {

  22.   margin-top: 0;

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

  24. }

  25. 

  26. .media-library-menu {

  27.   position: relative;

  28.   display: block;

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

  30.   margin: 0;

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

  32.   list-style: none;

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

  34. }

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

  36.   margin: 0;

  37. }

  38. 

  39. .media-library-menu__item {

  40.   overflow: hidden;

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

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

  43. }

  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. 

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

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

  52.   display: block;

  53.   width: 100%;

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

  55.   content: "";

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

  57. }

  58. 

  59. .media-library-menu__link {

  60.   position: relative;

  61.   display: block;

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

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

  64.   text-decoration: none;

  65.   word-wrap: break-word;

  66.   hyphens: auto;

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

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

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

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

  71. }

  72. 

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

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

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

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

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

  78. }

  79. 

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

  81.   .media-library-menu__link {

  82.     border-color: transparent;

  83.   }

  84. }

  85. 

  86. /* Menu link states. */

  87. .media-library-menu__link:focus {

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

  89.   text-decoration: none;

  90.   box-shadow: none;

  91. }

  92. 

  93. .media-library-menu__link:hover {

  94.   text-decoration: none;

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

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

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

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

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

  100. }

  101. 

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

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

  104.   position: absolute;

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

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

  107.   right: 0; /* LTR */

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

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

  110.   content: "";

  111.   pointer-events: none;

  112.   background-clip: padding-box;

  113. }

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

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

  116.   left: 0;

  117. }

  118. 

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

  120.   position: absolute;

  121.   top: 0;

  122.   right: 0;

  123.   bottom: 0;

  124.   left: 0;

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

  126.   content: "";

  127.   pointer-events: none;

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

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

  130. }

  131. 

  132. .media-library-menu__link.active {

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

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

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

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

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

  138. }

  139. 

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

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

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

  143. }

  144. 

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

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

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

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

  149. }

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

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

  152.   border-left: 0;

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

  154. }

  155. 

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

  157.   background: none;

  158. }

  159. 

  160. .media-library-content {

  161.   width: 100%;

  162.   padding: 1em;

  163.   outline: none;

  164. }

  165. 

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

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

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

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

  170. }

  171. 

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

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

  174.   border-left: 0;

  175. }

  176. 

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

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

  179.   margin-right: 1rem;

  180. }

  181. 

  182. /**

  183.  * Remove outline from added media list.

  184.  *

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

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

  187.  */

  188. .media-library-add-form__added-media {

  189.   margin: 0;

  190.   padding: 0;

  191.   outline: none;

  192. }

  193. 

  194. /**

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

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

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

  198.  */

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

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

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

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

  203. }

  204. 

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

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

  207.   margin-left: 0;

  208. }

  209. 

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

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

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

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

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

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

  216. }

  217. 

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

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

  220.   margin-bottom: 0;

  221. }

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

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

  224.   display: block;

  225. }

  226. 

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

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

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

  230. }

  231. 

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

  233.   margin: 8px 0 0;

  234. }

  235. 

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

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

  238.   .ui-dialog > .ui-dialog-content {

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

  240.   }

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

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

  243.   }

  244. }

  245. 

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

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

  248.   display: flex;

  249.   align-items: center;

  250. }

  251. 

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

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

  254.     display: block;

  255.   }

  256. }

  257. 

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

  259.   margin-bottom: 0;

  260. }

  261. 

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

  263.   width: 100%;

  264. }

  265. 

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

  267. .media-library-add-form__selected-media {

  268.   margin-top: 1em;

  269. }

  270. 

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

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

  273.   padding: 0 10px 1em 10px;

  274. }

  275. 

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

  277.   height: 100px;

  278. }

  279. 

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

  281. .media-library-select-all {

  282.   flex-basis: 100%;

  283.   width: 100%;

  284.   margin: 10px 8px;

  285. }

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

  287.   margin-right: 10px;

  288. }

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

  290.   margin-left: 10px;

  291. }

  292. 

  293. .media-library-views-form,

  294. .media-library-selection,

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

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

  297.   display: flex;

  298.   flex-wrap: wrap;

  299. }

  300. 

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

  302.   flex-basis: 100%;

  303. }

  304. 

  305. .media-library-views-form__header {

  306.   flex-basis: 100%;

  307. }

  308. 

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

  310.   margin-right: 8px; /* @TODO RTL? */

  311. }

  312. 

  313. .media-library-views-form__rows {

  314.   display: flex;

  315.   flex-wrap: wrap;

  316.   flex-basis: 100%;

  317.   margin: 0 -8px;

  318. }

  319. 

  320. /**

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

  322.  *

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

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

  325.  * display.

  326.  */

  327. .media-library-item label {

  328.   display: inline-block;

  329. }

  330. 

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

  332. .media-library-wrapper .media-library-view {

  333.   position: relative;

  334.   display: flex;

  335.   flex-wrap: wrap;

  336.   justify-content: space-between;

  337. }

  338. 

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

  340.   align-self: flex-end;

  341.   margin: 1em 0;

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

  343. }

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

  345.   text-align: left;

  346. }

  347. 

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

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

  350.   flex: 0 0 100%;

  351. }

  352. 

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

  354.   margin: 0;

  355.   padding-left: 22px; /* LTR */

  356.   color: #333;

  357.   font-size: 15px;

  358.   line-height: 16px;

  359. }

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

  361.   padding-right: 22px;

  362.   padding-left: 0;

  363. }

  364. 

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

  366.   font-weight: bold;

  367. }

  368. 

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

  370.   margin-right: 15px;

  371.   background: url(../../../../misc/icons/333333/grid.svg) left 0 no-repeat; /* LTR */

  372. }

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

  374.   background-position: right 0;

  375. }

  376. 

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

  378.   background: url(../../../../misc/icons/333333/table.svg) left 0 no-repeat; /* LTR */

  379. }

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

  381.   background-position: right 0;

  382. }

  383. 

  384. /**

  385.  * Style the media library grid items.

  386.  */

  387. .media-library-item {

  388.   position: relative;

  389. }

  390. 

  391. /**

  392.  * Ajax throbbers inside a media library item.

  393.  */

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

  395.   position: absolute;

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

  397.   top: 50%;

  398.   left: 50%;

  399.   box-sizing: border-box;

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

  401.   height: 3rem;

  402.   margin: -1.5rem;

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

  404.   border-radius: 3.5rem;

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

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

  407. }

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

  409.   position: absolute;

  410.   top: 50%;

  411.   left: 50%;

  412.   width: 1.75rem;

  413.   height: 1.75rem;

  414.   margin: -0.875rem;

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

  416.   border-right: 3px dotted transparent;

  417. }

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

  419.   display: none;

  420. }

  421. 

  422. .media-library-item--grid {

  423.   justify-content: center;

  424.   box-sizing: border-box;

  425.   width: 50%;

  426.   padding: 8px;

  427.   vertical-align: top;

  428.   outline: none;

  429.   background: #fff;

  430. }

  431. 

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

  433.   position: absolute;

  434.   top: 7px;

  435.   left: 7px;

  436.   width: calc(100% - 16px);

  437.   height: calc(100% - 16px);

  438.   content: "";

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

  440.   pointer-events: none;

  441.   border: 1px solid #dbdbdb;

  442.   border-radius: 2px;

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

  444. }

  445. 

  446. /**

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

  448. * improve padding.

  449. */

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

  451.   outline: none;

  452.   box-shadow: none;

  453. }

  454. 

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

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

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

  458. }

  459. 

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

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

  462.   margin: 0.75em;

  463. }

  464. 

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

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

  467.   width: 33.3%;

  468. }

  469. 

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

  471.   display: flex;

  472.   align-items: center;

  473. }

  474. 

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

  476.   flex: 1;

  477. }

  478. 

  479. /**

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

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

  482.  */

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

  484.   max-width: 75%;

  485. }

  486. 

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

  488.   .media-library-item--grid {

  489.     width: 33.3%;

  490.   }

  491. 

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

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

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

  495.     width: 50%;

  496.   }

  497. 

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

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

  500.     width: 25%;

  501.   }

  502. }

  503. 

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

  505.   .media-library-item--grid {

  506.     width: 25%;

  507.   }

  508. 

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

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

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

  512.     width: 33.3%;

  513.   }

  514. 

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

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

  517.     width: 16.6%;

  518.   }

  519. }

  520. 

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

  522.   .media-library-item--grid {

  523.     width: 16.6%;

  524.   }

  525. 

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

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

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

  529.     width: 25%;

  530.   }

  531. 

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

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

  534.     width: 16.6%;

  535.   }

  536. }

  537. 

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

  539.   overflow: hidden;

  540.   text-align: center;

  541.   background-color: #ebebeb;

  542. }

  543. 

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

  545.   height: 180px;

  546.   object-fit: contain;

  547.   object-position: center center;

  548. }

  549. 

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

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

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

  553.   top: 5px;

  554.   left: 5px;

  555.   border-width: 3px;

  556.   border-radius: 3px;

  557. }

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

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

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

  561. }

  562. 

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

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

  565. }

  566. 

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

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

  569. }

  570. 

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

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

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

  574. }

  575. 

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

  577.   position: absolute;

  578.   z-index: 1;

  579.   top: 16px;

  580.   left: 16px; /* LTR */

  581.   display: block;

  582. }

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

  584.   right: 16px;

  585.   left: auto;

  586. }

  587. 

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

  589.   width: 20px;

  590.   height: 20px;

  591. }

  592. 

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

  594.   margin: 0;

  595. }

  596. 

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

  598.   overflow: hidden;

  599.   height: 100%;

  600.   cursor: pointer;

  601. }

  602. 

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

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

  605.   max-width: 100px;

  606.   height: auto;

  607. }

  608. 

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

  610. .media-library-item__preview {

  611.   padding-bottom: 34px;

  612. }

  613. 

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

  615.   cursor: move;

  616. }

  617. 

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

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

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

  621. }

  622. 

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

  624.   cursor: inherit;

  625. }

  626. 

  627. .media-library-item__status {

  628.   position: absolute;

  629.   top: 40px;

  630.   left: 5px; /* LTR */

  631.   padding: 5px 10px;

  632.   pointer-events: none;

  633.   color: #e4e4e4;

  634.   background: #666;

  635.   font-size: 12px;

  636.   font-style: italic;

  637. }

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

  639.   right: 5px;

  640.   left: auto;

  641. }

  642. 

  643. .media-library-item__attributes {

  644.   position: absolute;

  645.   bottom: 0;

  646.   display: block;

  647.   overflow: hidden;

  648.   max-width: calc(100% - 10px);

  649.   max-height: calc(100% - 50px);

  650.   padding: 5px;

  651.   background: white;

  652. }

  653. 

  654. .media-library-item__name {

  655.   display: block;

  656.   overflow: hidden;

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

  658.   white-space: nowrap;

  659.   text-overflow: ellipsis;

  660.   font-size: 14px;

  661. }

  662. 

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

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

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

  666.   white-space: normal;

  667. }

  668. 

  669. .media-library-item__type {

  670.   color: #696969;

  671.   font-size: 12px;

  672. }

  673. 

  674. .media-library-item--disabled {

  675.   pointer-events: none;

  676.   opacity: 0.5;

  677. }

  678. 

  679. /* Media library widget styles. */

  680. .media-library-widget {

  681.   position: relative;

  682. }

  683. 

  684. .media-library-widget__toggle-weight.media-library-widget__toggle-weight {

  685.   position: absolute;

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

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

  688.   text-decoration: none;

  689. }

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

  691.   right: auto;

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

  693. }

  694. 

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

  696. .media-library-selection {

  697.   margin: 1em -8px;

  698. }

  699. 

  700. /**

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

  702.  *

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

  704.  * background and border property changes.

  705.  */

  706. .media-library-item__edit,

  707. .media-library-item__edit:hover,

  708. .media-library-item__edit:focus,

  709. .media-library-item__remove,

  710. .media-library-item__remove:hover,

  711. .media-library-item__remove:focus,

  712. .media-library-item__remove.button,

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

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

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

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

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

  718.   position: absolute;

  719.   z-index: 1;

  720.   top: 10px;

  721.   overflow: hidden;

  722.   width: 24px;

  723.   height: 24px;

  724.   margin: 5px;

  725.   padding: 0;

  726.   transition: 0.2s border-color;

  727.   color: transparent;

  728.   background-size: 12px;

  729.   text-shadow: none;

  730.   font-size: 0;

  731. }

  732. 

  733. .media-library-item__edit {

  734.   right: 40px; /* LTR */

  735. }

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

  737.   right: auto;

  738.   left: 40px;

  739. }

  740. 

  741. .media-library-item__remove {

  742.   right: 10px; /* LTR */

  743. }

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

  745.   right: auto;

  746.   left: 10px;

  747. }

  748. 

  749. .media-library-item__edit {

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

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

  752.   background-image: url("../../images/icons/545560/pencil.svg");

  753.   background-repeat: no-repeat;

  754.   background-position: center;

  755.   background-size: 12px;

  756. }

  757. .media-library-item__edit:active {

  758.   background-image: url("../../../../misc/icons/ffffff/pencil.svg");

  759. }

  760. .media-library-item__remove,

  761. .media-library-item__remove.button,

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

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

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

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

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

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

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

  769.   background-image: url("../../../../misc/icons/545560/ex.svg");

  770.   background-repeat: no-repeat;

  771.   background-position: center;

  772.   background-size: 12px;

  773. }

  774. 

  775. .media-library-item__remove:active,

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

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

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

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

  780.   background-image: url("../../../../misc/icons/ffffff/ex.svg");

  781. }

  782. 

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

  784. .media-library-add-form__media {

  785.   position: relative;

  786.   display: flex;

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

  788. }

  789. 

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

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

  792.   padding-bottom: 0;

  793.   border-bottom: 0;

  794. }

  795. 

  796. .media-library-add-form__preview {

  797.   display: flex;

  798.   align-items: center;

  799.   justify-content: center;

  800.   width: 220px;

  801.   margin-right: 20px; /* LTR */

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

  803. }

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

  805.   margin-right: 0;

  806.   margin-left: 20px;

  807. }

  808. 

  809. .media-library-add-form__fields {

  810.   flex-grow: 1;

  811. }

  812. 

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

  814.   position: absolute;

  815.   right: 0; /* LTR */

  816.   background-image: url("../../../../misc/icons/000000/ex.svg");

  817.   background-repeat: no-repeat;

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

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

  820. }

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

  822.   right: auto;

  823.   left: 0;

  824. }

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

  826.   background-image: url("../../../../misc/icons/8e929c/ex.svg");

  827. }

  828. 

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

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

  831.   margin-top: 0;

  832. }