media-library.pcss.css

Same filename in this branch
  1. 11.x core/themes/claro/css/theme/media-library.pcss.css
  2. 11.x core/themes/admin/css/theme/media-library.pcss.css
  3. 11.x core/themes/default_admin/css/theme/media-library.pcss.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/theme/media-library.pcss.css
  2. 9 core/themes/claro/css/theme/media-library.pcss.css
  3. 8.9.x core/themes/claro/css/theme/media-library.pcss.css
/*
 * @file
 *
 * Styling for Media Library.
 */

@import "../base/media-queries.pcss.css";

/*
 * The field widget shown on the entity create page.
 */
.field--widget-media-library-widget {
  .media-library-item__preview {
    cursor: move;

    img {
      border-start-start-radius: 2px;
      border-start-end-radius: 2px;
    }
  }

  .js-media-library-item:only-child .media-library-item__preview {
    cursor: inherit;
  }
}

/**
 * Negative margins compensate for modal dialog padding and compensate for
 * positioning that would otherwise hide the active tab indicator on the start.
 */
#media-library-wrapper {
  display: flex;
  margin-inline: calc(-1 * var(--space-l));

  .messages-list,
  .messages {
    margin-block: 0 var(--space-l);
  }

  /* "Grid" and "Table" buttons. */
  .views-display-link {
    position: relative;
    margin: 0;
    padding-inline-start: 22px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--gin-color-text);
    background-image: none;
    font-size: 15px;
    line-height: 16px;

    &::before {
      position: absolute;
      display: inline-block;
      width: 16px;
      height: 16px;
      content: "";
      background-color: var(--gin-color-text);
      inset-block-start: 1px;
      inset-inline-start: 0;
    }

    &.is-active {
      color: var(--gin-color-primary);
      font-weight: bold;

      &::before {
        background-color: var(--gin-color-primary);
      }
    }
  }

  .views-display-link-widget::before {
    mask-image: url("../../migration/media/icons/media-library/grid.svg");
  }

  .views-display-link-widget_table::before {
    mask-image: url("../../migration/media/icons/media-library/list.svg");
  }
}

#media-library-content {
  width: 100%;
  padding: 1em;
  border-color: var(--gin-border-color);
  border-inline-start: 0 none;
  outline: none;

  .media-library-menu + & {
    z-index: var(--vertical-tabs-menu--z-index);
    border-inline-start: var(--vertical-tabs-border);
    box-shadow: var(--vertical-tabs-shadow);
  }
}

/* Generic media add form styles. */
.media-library-add-form--without-input .form-item {
  margin-inline-end: 1rem;
}

.media-library-add-form__input-wrapper {
  .form-item--upload {
    margin-block-start: 0;
    margin-inline-end: 0;
  }

  .dropzone-enable .button {
    margin: 0;
  }
}

/* Form within media library that allows you to upload additional media. */
.media-library-add-form {
  .messages-list:has(.messages) {
    margin-block: var(--space-m);
  }

  .file-upload-help {
    margin: 8px 0 0;
  }
}

/* Style the media add oEmbed form. */
.media-library-add-form--oembed {
  .media-library-add-form__input-wrapper {
    display: flex;
    align-items: center;

    @media screen and (max-width: 37.5em) {
      display: block;
    }
  }

  &.media-library-add-form--without-input .form-item-url {
    margin-block-end: 0;
  }
}

.media-library-add-form-oembed-url {
  width: 100%;
}

.media-library-select-all {
  flex-basis: 100%;
  box-sizing: border-box;
  width: 100%;
  color: var(--gin-color-title);
  border-block-end: 1px solid var(--gin-border-color-table-header);
  border-radius: 0;
  background: var(--gin-bg-layer);
  margin-block: 0 10px;
  margin-inline: 0 8px;
  padding-block: 0 var(--space-m);
  padding-inline: var(--space-m);

  input {
    margin-inline-end: 10px;
  }
}

.media-library-add-form__selected-media .details-wrapper,
.media-library-view .form--inline {
  display: flex;
  flex-wrap: wrap;
}

.media-library-views-form__header {
  flex-basis: 100%;

  .form-item {
    margin-inline-end: 8px;
  }
}

.media-library-views-form__rows {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.media-library-widget-modal {
  /* By default, the dialog is too narrow to be usable. @see Drupal.ckeditor5.openDialog() */
  &.ui-dialog--narrow {
    min-width: min(75%, 1500px);
  }

  .ui-dialog-buttonpane {
    display: flex;
    flex-direction: column;
    align-items: center;

    .form-actions,
    .field-actions {
      flex: 1;
    }

    .form-actions {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-block-start: 0;
      white-space: nowrap;

      .button:not(:last-child) {
        margin-inline-end: var(--space-xs);
      }
    }

    .media-library-selected-count {
      flex-grow: 1;
      margin-block-end: var(--space-s);

      /* cspell:disable-next-line */
      @media (--admin-xsmall) {
        margin-block-end: 0;
        margin-inline-start: 0;
      }
    }

    /* cspell:disable-next-line */
    @media (--admin-xsmall) {
      flex-direction: row;
    }
  }
}

/*
 * Selection widget area shown on the parent form after items are
 * inserted.
 */
.media-library-selection {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Media library widget styles. */
.media-library-widget {
  position: relative;
}

fieldset.media-library-widget {
  .media-library-edit__link {
    margin: var(--space-xs);
  }
}

.media-library-widget__toggle-weight {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-end: var(--space-m);
  text-decoration: none;

  .fieldset.media-library-widget & {
    padding: var(--space-xs);
    font-size: var(--font-size-xxs);
    line-height: 1;
  }
}

/* The <li> that is shown after a media item has been uploaded */
.media-library-add-form__media {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 10px;
  border-block-end: 1px solid #c0c0c0;

  /* Do not show the bottom border and padding for the last item. */
  &:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }
}

/*
 * Only renders after a file is uploaded via the add-form. Coverage matrix never
 * completed an upload.
 */
.media-library-add-form__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  background: var(--gin-bg-app);
}

.media-library-add-form__fields {
  display: grid;
  flex-grow: 1;
  gap: 10px;

  .form-item,
  .form-managed-file__meta {
    margin-block: 0;
  }
}

.media-library-add-form__remove-button {
  position: absolute;
  inset-inline-end: 0;

  &.button--extrasmall {
    margin: var(--space-xs) 0;
  }
}

.media-library-selected-count {
  margin: 0 var(--space-l);
  color: var(--gin-color-text-light);
}

.media-library-widget-empty-text {
  margin-inline: 0;
  color: var(--gin-color-text-light);
}

.media-library-open-button {
  margin-block-start: 0;
}

.media-library-view {
  display: grid;
  gap: var(--space-l);

  .view-header {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: var(--space-m);
    text-decoration: none;
    color: var(--gin-color-text);
    border-radius: var(--gin-border-m);
    background: var(--gin-bg-layer3);
    box-shadow: var(--gin-shadow-l1);
  }

  .views-exposed-form {
    margin-block: 0;
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/css/components/media-library.pcss.css

View source 
  1. /*

  2.  * @file

  3.  *

  4.  * Styling for Media Library.

  5.  */

  6. 

  7. @import "../base/media-queries.pcss.css";

  8. 

  9. /*

  10.  * The field widget shown on the entity create page.

  11.  */

  12. .field--widget-media-library-widget {

  13.   .media-library-item__preview {

  14.     cursor: move;

  15. 

  16.     img {

  17.       border-start-start-radius: 2px;

  18.       border-start-end-radius: 2px;

  19.     }

  20.   }

  21. 

  22.   .js-media-library-item:only-child .media-library-item__preview {

  23.     cursor: inherit;

  24.   }

  25. }

  26. 

  27. /**

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

  29.  * positioning that would otherwise hide the active tab indicator on the start.

  30.  */

  31. #media-library-wrapper {

  32.   display: flex;

  33.   margin-inline: calc(-1 * var(--space-l));

  34. 

  35.   .messages-list,

  36.   .messages {

  37.     margin-block: 0 var(--space-l);

  38.   }

  39. 

  40.   /* "Grid" and "Table" buttons. */

  41.   .views-display-link {

  42.     position: relative;

  43.     margin: 0;

  44.     padding-inline-start: 22px;

  45.     white-space: nowrap;

  46.     text-decoration: none;

  47.     color: var(--gin-color-text);

  48.     background-image: none;

  49.     font-size: 15px;

  50.     line-height: 16px;

  51. 

  52.     &::before {

  53.       position: absolute;

  54.       display: inline-block;

  55.       width: 16px;

  56.       height: 16px;

  57.       content: "";

  58.       background-color: var(--gin-color-text);

  59.       inset-block-start: 1px;

  60.       inset-inline-start: 0;

  61.     }

  62. 

  63.     &.is-active {

  64.       color: var(--gin-color-primary);

  65.       font-weight: bold;

  66. 

  67.       &::before {

  68.         background-color: var(--gin-color-primary);

  69.       }

  70.     }

  71.   }

  72. 

  73.   .views-display-link-widget::before {

  74.     mask-image: url("../../migration/media/icons/media-library/grid.svg");

  75.   }

  76. 

  77.   .views-display-link-widget_table::before {

  78.     mask-image: url("../../migration/media/icons/media-library/list.svg");

  79.   }

  80. }

  81. 

  82. #media-library-content {

  83.   width: 100%;

  84.   padding: 1em;

  85.   border-color: var(--gin-border-color);

  86.   border-inline-start: 0 none;

  87.   outline: none;

  88. 

  89.   .media-library-menu + 
  90. }

  91. 

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

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

  94.   margin-inline-end: 1rem;

  95. }

  96. 

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

  98.   .form-item--upload {

  99.     margin-block-start: 0;

  100.     margin-inline-end: 0;

  101.   }

  102. 

  103.   .dropzone-enable .button {

  104.     margin: 0;

  105.   }

  106. }

  107. 

  108. /* Form within media library that allows you to upload additional media. */

  109. .media-library-add-form {

  110.   .messages-list:has(.messages) {

  111.     margin-block: var(--space-m);

  112.   }

  113. 

  114.   .file-upload-help {

  115.     margin: 8px 0 0;

  116.   }

  117. }

  118. 

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

  120. .media-library-add-form--oembed {

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

  122.     display: flex;

  123.     align-items: center;

  124. 

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

  126.       display: block;

  127.     }

  128.   }

  129. 

  130.   &.media-library-add-form--without-input .form-item-url {

  131.     margin-block-end: 0;

  132.   }

  133. }

  134. 

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

  136.   width: 100%;

  137. }

  138. 

  139. .media-library-select-all {

  140.   flex-basis: 100%;

  141.   box-sizing: border-box;

  142.   width: 100%;

  143.   color: var(--gin-color-title);

  144.   border-block-end: 1px solid var(--gin-border-color-table-header);

  145.   border-radius: 0;

  146.   background: var(--gin-bg-layer);

  147.   margin-block: 0 10px;

  148.   margin-inline: 0 8px;

  149.   padding-block: 0 var(--space-m);

  150.   padding-inline: var(--space-m);

  151. 

  152.   input {

  153.     margin-inline-end: 10px;

  154.   }

  155. }

  156. 

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

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

  159.   display: flex;

  160.   flex-wrap: wrap;

  161. }

  162. 

  163. .media-library-views-form__header {

  164.   flex-basis: 100%;

  165. 

  166.   .form-item {

  167.     margin-inline-end: 8px;

  168.   }

  169. }

  170. 

  171. .media-library-views-form__rows {

  172.   display: grid;

  173.   gap: 10px;

  174.   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  175. }

  176. 

  177. .media-library-widget-modal {

  178.   /* By default, the dialog is too narrow to be usable. @see Drupal.ckeditor5.openDialog() */

  179.   &.ui-dialog--narrow {

  180.     min-width: min(75%, 1500px);

  181.   }

  182. 

  183.   .ui-dialog-buttonpane {

  184.     display: flex;

  185.     flex-direction: column;

  186.     align-items: center;

  187. 

  188.     .form-actions,

  189.     .field-actions {

  190.       flex: 1;

  191.     }

  192. 

  193.     .form-actions {

  194.       display: flex;

  195.       flex-direction: row;

  196.       justify-content: flex-end;

  197.       margin-block-start: 0;

  198.       white-space: nowrap;

  199. 

  200.       .button:not(:last-child) {

  201.         margin-inline-end: var(--space-xs);

  202.       }

  203.     }

  204. 

  205.     .media-library-selected-count {

  206.       flex-grow: 1;

  207.       margin-block-end: var(--space-s);

  208. 

  209.       /* cspell:disable-next-line */

  210.       @media (--admin-xsmall) {

  211.         margin-block-end: 0;

  212.         margin-inline-start: 0;

  213.       }

  214.     }

  215. 

  216.     /* cspell:disable-next-line */

  217.     @media (--admin-xsmall) {

  218.       flex-direction: row;

  219.     }

  220.   }

  221. }

  222. 

  223. /*

  224.  * Selection widget area shown on the parent form after items are

  225.  * inserted.

  226.  */

  227. .media-library-selection {

  228.   display: grid;

  229.   gap: 10px;

  230.   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  231. }

  232. 

  233. /* Media library widget styles. */

  234. .media-library-widget {

  235.   position: relative;

  236. }

  237. 

  238. fieldset.media-library-widget {

  239.   .media-library-edit__link {

  240.     margin: var(--space-xs);

  241.   }

  242. }

  243. 

  244. .media-library-widget__toggle-weight {

  245.   position: absolute;

  246.   inset-block-start: var(--space-s);

  247.   inset-inline-end: var(--space-m);

  248.   text-decoration: none;

  249. 

  250.   .fieldset.media-library-widget 
  251. }

  252. 

  253. /* The 
  254.  that is shown after a media item has been uploaded */

  255. .media-library-add-form__media {

  256.   position: relative;

  257.   display: flex;

  258.   gap: 20px;

  259.   padding: 10px;

  260.   border-block-end: 1px solid #c0c0c0;

  261. 

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

  263.   &:last-child {

  264.     padding-block-end: 0;

  265.     border-block-end: 0;

  266.   }

  267. }

  268. 

  269. /*

  270.  * Only renders after a file is uploaded via the add-form. Coverage matrix never

  271.  * completed an upload.

  272.  */

  273. .media-library-add-form__preview {

  274.   display: flex;

  275.   align-items: center;

  276.   justify-content: center;

  277.   width: 220px;

  278.   background: var(--gin-bg-app);

  279. }

  280. 

  281. .media-library-add-form__fields {

  282.   display: grid;

  283.   flex-grow: 1;

  284.   gap: 10px;

  285. 

  286.   .form-item,

  287.   .form-managed-file__meta {

  288.     margin-block: 0;

  289.   }

  290. }

  291. 

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

  293.   position: absolute;

  294.   inset-inline-end: 0;

  295. 

  296.   &.button--extrasmall {

  297.     margin: var(--space-xs) 0;

  298.   }

  299. }

  300. 

  301. .media-library-selected-count {

  302.   margin: 0 var(--space-l);

  303.   color: var(--gin-color-text-light);

  304. }

  305. 

  306. .media-library-widget-empty-text {

  307.   margin-inline: 0;

  308.   color: var(--gin-color-text-light);

  309. }

  310. 

  311. .media-library-open-button {

  312.   margin-block-start: 0;

  313. }

  314. 

  315. .media-library-view {

  316.   display: grid;

  317.   gap: var(--space-l);

  318. 

  319.   .view-header {

  320.     display: flex;

  321.     flex-wrap: wrap;

  322.     gap: 15px;

  323.     padding: var(--space-m);

  324.     text-decoration: none;

  325.     color: var(--gin-color-text);

  326.     border-radius: var(--gin-border-m);

  327.     background: var(--gin-bg-layer3);

  328.     box-shadow: var(--gin-shadow-l1);

  329.   }

  330. 

  331.   .views-exposed-form {

  332.     margin-block: 0;

  333.   }

  334. }

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