media-library.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/theme/media-library.pcss.css
  2. 10 core/themes/claro/css/theme/media-library.pcss.css
  3. 11.x 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. .media-library-wrapper {

  8.   display: flex;

  9.   margin: -1em;

  10. }

  11. 

  12. /**

  13.  * @todo Reuse or build on vertical tabs styling for the media library menu.

  14.  *   https://www.drupal.org/project/drupal/issues/3023767

  15.  */

  16. .media-library-menu {

  17.   display: block;

  18.   width: 600px;

  19.   max-width: 20%;

  20.   margin: 0; /* LTR */

  21.   padding: 0;

  22.   border-bottom: 1px solid #ccc;

  23.   background-color: #e6e5e1;

  24.   line-height: 1;

  25. }

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

  27.   margin: 0;

  28. }

  29. 

  30. /**

  31.  * @todo Use a class instead of the li element.

  32.  *   https://www.drupal.org/project/drupal/issues/3029227

  33.  */

  34. .media-library-menu li {

  35.   display: block;

  36.   padding: 0;

  37.   list-style: none;

  38. }

  39. 

  40. .media-library-menu__link {

  41.   position: relative;

  42.   display: block;

  43.   box-sizing: border-box;

  44.   padding: 15px;

  45.   text-decoration: none;

  46.   border-bottom: 1px solid #b3b2ad;

  47.   background-color: #f2f2f0;

  48.   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);

  49. }

  50. 

  51. .media-library-menu__link:active,

  52. .media-library-menu__link:hover,

  53. .media-library-menu__link:focus {

  54.   background: #fcfcfa;

  55.   text-shadow: none;

  56. }

  57. 

  58. .media-library-menu__link:focus,

  59. .media-library-menu__link:active {

  60.   outline: none;

  61. }

  62. 

  63. .media-library-menu__link.active {

  64.   z-index: 1;

  65.   margin-right: -1px; /* LTR */

  66.   color: #000;

  67.   border-right: 1px solid #fcfcfa; /* LTR */

  68.   border-bottom: 1px solid #b3b2ad;

  69.   background-color: #fff;

  70.   box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);

  71. }

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

  73.   margin-right: 0;

  74.   margin-left: -1px;

  75.   border-right: 0;

  76.   border-left: 1px solid #fcfcfa;

  77. }

  78. 

  79. .media-library-content {

  80.   width: 100%;

  81.   padding: 1em;

  82.   border-left: 1px solid #b3b2ad; /* LTR */

  83.   outline: none;

  84. }

  85. [dir="rtl"] .media-library-content {

  86.   border-right: 1px solid #b3b2ad;

  87.   border-left: 0;

  88. }

  89. 

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

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

  92.   margin: 0 0 1em;

  93. }

  94. 

  95. /**

  96.  * Remove outline from added media list.

  97.  *

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

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

  100.  */

  101. .media-library-add-form__added-media {

  102.   margin: 0;

  103.   padding: 0;

  104.   outline: none;

  105. }

  106. 

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

  108.   padding: 16px;

  109.   border: 1px solid #bfbfbf;

  110.   border-radius: 2px;

  111.   background: #fcfcfa;

  112. }

  113. 

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

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

  116.   margin-bottom: 0;

  117. }

  118. 

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

  120.   margin: 8px 0 0;

  121. }

  122. 

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

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

  125.   display: flex;

  126. }

  127. 

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

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

  130.     display: block;

  131.   }

  132. }

  133. 

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

  135.   margin-bottom: 0;

  136. }

  137. 

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

  139.   width: 100%;

  140. }

  141. 

  142. /**

  143.  * @todo Remove .button when styles are moved to the seven theme in

  144.  *   https://www.drupal.org/project/drupal/issues/2980769

  145.  */

  146. .button.media-library-add-form-oembed-submit {

  147.   align-self: center;

  148. }

  149. 

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

  151. .media-library-add-form__selected-media {

  152.   margin-top: 1em;

  153. }

  154. 

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

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

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

  158. }

  159. 

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

  161.   height: 100px;

  162. }

  163. 

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

  165. .media-library-select-all {

  166.   flex-basis: 100%;

  167.   width: 100%;

  168.   margin: 10px 8px;

  169. }

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

  171.   margin-right: 10px;

  172. }

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

  174.   margin-left: 10px;

  175. }

  176. 

  177. .media-library-views-form,

  178. .media-library-selection,

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

  180. .media-library-views-form__bulk_form,

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

  182.   display: flex;

  183.   flex-wrap: wrap;

  184. }

  185. 

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

  187.   flex-basis: 100%;

  188. }

  189. 

  190. .media-library-views-form__header {

  191.   flex-basis: 100%;

  192. }

  193. 

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

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

  196. }

  197. 

  198. .media-library-views-form__rows {

  199.   display: flex;

  200.   flex-wrap: wrap;

  201.   flex-basis: 100%;

  202.   margin: 0 -8px;

  203. }

  204. 

  205. /**

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

  207.  *

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

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

  210.  * display.

  211.  */

  212. .media-library-item label {

  213.   display: inline-block;

  214. }

  215. 

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

  217. .media-library-wrapper .media-library-view {

  218.   position: relative;

  219.   display: flex;

  220.   flex-wrap: wrap;

  221.   justify-content: space-between;

  222. }

  223. 

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

  225.   align-self: flex-end;

  226.   margin: 1em 0;

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

  228. }

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

  230.   text-align: left;

  231. }

  232. 

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

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

  235.   flex: 0 0 100%;

  236. }

  237. 

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

  239.   margin: 0;

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

  241.   color: #333;

  242.   font-size: 15px;

  243.   line-height: 16px;

  244. }

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

  246.   padding-right: 22px;

  247.   padding-left: 0;

  248. }

  249. 

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

  251.   font-weight: bold;

  252. }

  253. 

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

  255.   margin-right: 15px;

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

  257. }

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

  259.   background-position: right 0;

  260. }

  261. 

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

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

  264. }

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

  266.   background-position: right 0;

  267. }

  268. 

  269. /**

  270.  * Style the media library grid items.

  271.  */

  272. .media-library-item {

  273.   position: relative;

  274. }

  275. 

  276. /**

  277. * The media library item container receives screen reader focus when items are

  278. * removed. Since it is not an interactive element, it does not need an

  279. * outline.

  280. */

  281. .media-library-item--grid {

  282.   justify-content: center;

  283.   box-sizing: border-box;

  284.   width: 50%;

  285.   padding: 8px;

  286.   vertical-align: top;

  287.   outline: none;

  288.   background: #fff;

  289. }

  290. 

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

  292.   position: absolute;

  293.   top: 7px;

  294.   left: 7px;

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

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

  297.   content: "";

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

  299.   pointer-events: none;

  300.   border: 1px solid #dbdbdb;

  301. }

  302. 

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

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

  305.   margin: 0.75em;

  306. }

  307. 

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

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

  310.   width: 33.3%;

  311. }

  312. 

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

  314.   display: flex;

  315.   align-items: center;

  316. }

  317. 

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

  319.   flex: 1;

  320. }

  321. 

  322. /**

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

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

  325.  */

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

  327.   max-width: 75%;

  328. }

  329. 

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

  331.   .media-library-item--grid {

  332.     width: 33.3%;

  333.   }

  334. 

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

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

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

  338.     width: 50%;

  339.   }

  340. 

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

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

  343.     width: 25%;

  344.   }

  345. }

  346. 

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

  348.   .media-library-item--grid {

  349.     width: 25%;

  350.   }

  351. 

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

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

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

  355.     width: 33.3%;

  356.   }

  357. 

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

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

  360.     width: 16.6%;

  361.   }

  362. }

  363. 

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

  365.   .media-library-item--grid {

  366.     width: 16.6%;

  367.   }

  368. 

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

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

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

  372.     width: 25%;

  373.   }

  374. 

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

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

  377.     width: 16.6%;

  378.   }

  379. }

  380. 

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

  382.   overflow: hidden;

  383.   text-align: center;

  384.   background-color: #ebebeb;

  385. }

  386. 

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

  388.   height: 180px;

  389.   object-fit: contain;

  390.   object-position: center center;

  391. }

  392. 

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

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

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

  396.   top: 5px;

  397.   left: 5px;

  398.   border-width: 3px;

  399.   border-color: #40b6ff;

  400.   border-radius: 3px;

  401. }

  402. 

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

  404.   border-color: #0076c0;

  405. }

  406. 

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

  408.   position: absolute;

  409.   z-index: 1;

  410.   top: 16px;

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

  412.   display: block;

  413. }

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

  415.   right: 16px;

  416.   left: auto;

  417. }

  418. 

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

  420.   width: 20px;

  421.   height: 20px;

  422. }

  423. 

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

  425.   margin: 0;

  426. }

  427. 

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

  429.   overflow: hidden;

  430.   height: 100%;

  431.   cursor: pointer;

  432. }

  433. 

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

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

  436.   max-width: 100px;

  437.   height: auto;

  438. }

  439. 

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

  441. .media-library-item__preview {

  442.   padding-bottom: 34px;

  443.   cursor: move;

  444. }

  445. 

  446. .media-library-item__status {

  447.   position: absolute;

  448.   top: 40px;

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

  450.   padding: 5px 10px;

  451.   pointer-events: none;

  452.   color: #e4e4e4;

  453.   background: #666;

  454.   font-size: 12px;

  455.   font-style: italic;

  456. }

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

  458.   right: 5px;

  459.   left: auto;

  460. }

  461. 

  462. .media-library-item__attributes {

  463.   position: absolute;

  464.   bottom: 0;

  465.   display: block;

  466.   overflow: hidden;

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

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

  469.   padding: 5px;

  470.   background: white;

  471. }

  472. 

  473. .media-library-item__name {

  474.   font-size: 14px;

  475. }

  476. 

  477. .media-library-item__name {

  478.   display: block;

  479.   overflow: hidden;

  480.   margin: 2px;

  481.   white-space: nowrap;

  482.   text-overflow: ellipsis;

  483. }

  484. 

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

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

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

  488.   white-space: normal;

  489. }

  490. 

  491. .media-library-item__type {

  492.   color: #696969;

  493.   font-size: 12px;

  494. }

  495. 

  496. .media-library-item--disabled {

  497.   pointer-events: none;

  498.   opacity: 0.5;

  499. }

  500. 

  501. /* Media library widget styles. */

  502. .media-library-widget {

  503.   position: relative;

  504. }

  505. 

  506. /**

  507.  * @todo Change to .media-library-open-button when styles are moved to the

  508.  *   seven theme in https://www.drupal.org/project/drupal/issues/2980769

  509.  */

  510. .button.media-library-open-button {

  511.   margin-bottom: 1em;

  512.   margin-left: 0; /* LTR */

  513. }

  514. [dir="rtl"] .button.media-library-open-button {

  515.   margin-right: 0;

  516.   margin-left: 1em;

  517. }

  518. 

  519. .media-library-widget__toggle-weight {

  520.   position: absolute;

  521.   top: 5px;

  522.   right: 5px; /* LTR */

  523. }

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

  525.   right: auto;

  526.   left: 5px;

  527. }

  528. 

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

  530. .media-library-selection {

  531.   margin: 1em -8px;

  532. }

  533. 

  534. /**

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

  536.  *

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

  538.  * background and border property changes.

  539.  */

  540. .media-library-item__edit,

  541. .media-library-item__edit:hover,

  542. .media-library-item__edit:focus,

  543. .media-library-item__remove,

  544. .media-library-item__remove:hover,

  545. .media-library-item__remove:focus,

  546. .media-library-item__remove.button,

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

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

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

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

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

  552.   position: absolute;

  553.   z-index: 1;

  554.   top: 10px;

  555.   overflow: hidden;

  556.   width: 21px;

  557.   height: 21px;

  558.   margin: 5px;

  559.   padding: 0;

  560.   transition: 0.2s border-color;

  561.   color: transparent;

  562.   border: 2px solid #ccc;

  563.   border-radius: 20px;

  564.   background-size: 13px;

  565.   text-shadow: none;

  566.   font-size: 0;

  567. }

  568. 

  569. .media-library-item__edit {

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

  571. }

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

  573.   right: auto;

  574.   left: 40px;

  575. }

  576. 

  577. .media-library-item__remove {

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

  579. }

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

  581.   right: auto;

  582.   left: 10px;

  583. }

  584. 

  585. .media-library-item__edit {

  586.   background: url("../../../../misc/icons/787878/pencil.svg") #fff center no-repeat;

  587.   background-size: 13px;

  588. }

  589. .media-library-item__remove,

  590. .media-library-item__remove.button,

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

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

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

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

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

  596.   background: url("../../../../misc/icons/787878/ex.svg") #fff center no-repeat;

  597.   background-size: 13px;

  598. }

  599. .media-library-item__edit:hover,

  600. .media-library-item__edit:focus,

  601. .media-library-item__remove:hover,

  602. .media-library-item__remove:focus,

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

  604. .media-library-item__remove.button:focus,

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

  606.   border-color: #40b6ff;

  607. }

  608. 

  609. /**

  610.  * Style the added media item container.

  611.  *

  612.  * The added media container receives screen reader focus since it has the role

  613.  * 'listitem'. Since it is not an interactive element, it does not need an

  614.  * outline.

  615.  */

  616. .media-library-add-form__media {

  617.   position: relative;

  618.   display: flex;

  619.   padding: 1em 0;

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

  621.   outline: none;

  622. }

  623. 

  624. /* Do not show the top padding for the first item. */

  625. .media-library-add-form__media:first-child {

  626.   padding-top: 0;

  627. }

  628. 

  629. /**

  630.  * Change the position of the remove button for the first item.

  631.  *

  632.  * The first item doesn't have a top padding, change the location of the remove

  633.  * button as well.

  634.  */

  635. .media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] {

  636.   top: 5px;

  637. }

  638. 

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

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

  641.   padding-bottom: 0;

  642.   border-bottom: 0;

  643. }

  644. 

  645. .media-library-add-form__preview {

  646.   display: flex;

  647.   align-items: center;

  648.   justify-content: center;

  649.   width: 220px;

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

  651.   background: #ebebeb;

  652. }

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

  654.   margin-right: 0;

  655.   margin-left: 20px;

  656. }

  657. 

  658. .media-library-add-form__fields {

  659.   flex-grow: 1;

  660. }

  661. 

  662. /**

  663.  * @todo Remove [type="submit"] when styles are moved to the seven theme in

  664.  *   https://www.drupal.org/project/drupal/issues/2980769

  665.  */

  666. .media-library-add-form__remove-button[type="submit"] {

  667.   position: absolute;

  668.   top: 25px;

  669.   right: 6px;

  670.   margin-right: 0;

  671. }

  672. [dir="rtl"] .media-library-add-form__remove-button[type="submit"] {

  673.   right: auto;

  674.   left: 13px;

  675.   margin-left: 0;

  676. }

  677. 

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

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

  680.   margin-top: 0;

  681. }

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