media-library.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  2. 11.x core/themes/claro/css/theme/media-library.css
  3. 11.x core/themes/admin/css/theme/media-library.css
  4. 11.x core/themes/default_admin/css/theme/media-library.css
Same filename and directory in other branches
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  2. 10 core/themes/claro/css/theme/media-library.css
  3. 9 core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  4. 9 core/themes/seven/css/theme/media-library.css
  5. 9 core/themes/seven/css/classy/layout/media-library.css
  6. 9 core/themes/claro/css/theme/media-library.css
  7. 9 core/themes/bartik/css/classy/layout/media-library.css
  8. 9 core/themes/classy/css/layout/media-library.css
  9. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/layout/media-library.css
  10. 8.9.x core/themes/seven/css/theme/media-library.css
  11. 8.9.x core/themes/seven/css/classy/layout/media-library.css
  12. 8.9.x core/themes/claro/css/theme/media-library.css
  13. 8.9.x core/themes/bartik/css/classy/layout/media-library.css
  14. 8.9.x core/themes/classy/css/layout/media-library.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @file
 *
 * Styling for Media Library.
 */

/*
 * 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: 1.375rem;
    white-space: nowrap;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--gin-color-text);
    background-image: none;
    font-size: 0.9375rem;
    line-height: 1rem;

    &::before {
      position: absolute;
      display: inline-block;
      width: 1rem;
      height: 1rem;
      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("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3crect x='3' y='3' width='7' height='7'%3e%3c/rect%3e    %3crect x='14' y='3' width='7' height='7'%3e%3c/rect%3e    %3crect x='14' y='14' width='7' height='7'%3e%3c/rect%3e    %3crect x='3' y='14' width='7' height='7'%3e%3c/rect%3e  %3c/g%3e%3c/svg%3e");
  }

  .views-display-link-widget_table::before {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cline x1='8' y1='6' x2='21' y2='6'%3e%3c/line%3e    %3cline x1='8' y1='12' x2='21' y2='12'%3e%3c/line%3e    %3cline x1='8' y1='18' x2='21' y2='18'%3e%3c/line%3e    %3cline x1='3' y1='6' x2='3.01' y2='6'%3e%3c/line%3e    %3cline x1='3' y1='12' x2='3.01' y2='12'%3e%3c/line%3e    %3cline x1='3' y1='18' x2='3.01' y2='18'%3e%3c/line%3e  %3c/g%3e%3c/svg%3e");
  }
}

#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: 0.5rem 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 0.625rem;
  margin-inline: 0 0.5rem;
  padding-block: 0 var(--space-m);
  padding-inline: var(--space-m);

  input {
    margin-inline-end: 0.625rem;
  }
}

.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: 0.5rem;
  }
}

.media-library-views-form__rows {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 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%, 93.75rem);
  }

  .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 (min-width: 36.75em) {
        margin-block-end: 0;
        margin-inline-start: 0;
      }
    }

    /* cspell:disable-next-line */
    @media (min-width: 36.75em) {
      flex-direction: row;
    }
  }
}

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

.media-library-selection {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 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);
  -webkit-text-decoration: none;
  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: 1.25rem;
  padding: 0.625rem;
  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: 13.75rem;
  background: var(--gin-bg-app);
}

.media-library-add-form__fields {
  display: grid;
  flex-grow: 1;
  gap: 0.625rem;

  .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: 0.9375rem;
    padding: var(--space-m);
    -webkit-text-decoration: none;
    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.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

  10.  *

  11.  * Styling for Media Library.

  12.  */

  13. 

  14. /*

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

  16.  */

  17. 

  18. .field--widget-media-library-widget {

  19.   .media-library-item__preview {

  20.     cursor: move;

  21. 

  22.     img {

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

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

  25.     }

  26.   }

  27. 

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

  29.     cursor: inherit;

  30.   }

  31. }

  32. 

  33. /**

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

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

  36.  */

  37. 

  38. #media-library-wrapper {

  39.   display: flex;

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

  41. 

  42.   .messages-list,

  43.   .messages {

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

  45.   }

  46. 

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

  48.   .views-display-link {

  49.     position: relative;

  50.     margin: 0;

  51.     padding-inline-start: 1.375rem;

  52.     white-space: nowrap;

  53.     -webkit-text-decoration: none;

  54.     text-decoration: none;

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

  56.     background-image: none;

  57.     font-size: 0.9375rem;

  58.     line-height: 1rem;

  59. 

  60.     &::before {

  61.       position: absolute;

  62.       display: inline-block;

  63.       width: 1rem;

  64.       height: 1rem;

  65.       content: "";

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

  67.       inset-block-start: 1px;

  68.       inset-inline-start: 0;

  69.     }

  70. 

  71.     &.is-active {

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

  73.       font-weight: bold;

  74. 

  75.       &::before {

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

  77.       }

  78.     }

  79.   }

  80. 

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

  82.     mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3crect x='3' y='3' width='7' height='7'%3e%3c/rect%3e    %3crect x='14' y='3' width='7' height='7'%3e%3c/rect%3e    %3crect x='14' y='14' width='7' height='7'%3e%3c/rect%3e    %3crect x='3' y='14' width='7' height='7'%3e%3c/rect%3e  %3c/g%3e%3c/svg%3e");

  83.   }

  84. 

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

  86.     mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cline x1='8' y1='6' x2='21' y2='6'%3e%3c/line%3e    %3cline x1='8' y1='12' x2='21' y2='12'%3e%3c/line%3e    %3cline x1='8' y1='18' x2='21' y2='18'%3e%3c/line%3e    %3cline x1='3' y1='6' x2='3.01' y2='6'%3e%3c/line%3e    %3cline x1='3' y1='12' x2='3.01' y2='12'%3e%3c/line%3e    %3cline x1='3' y1='18' x2='3.01' y2='18'%3e%3c/line%3e  %3c/g%3e%3c/svg%3e");

  87.   }

  88. }

  89. 

  90. #media-library-content {

  91.   width: 100%;

  92.   padding: 1em;

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

  94.   border-inline-start: 0 none;

  95.   outline: none;

  96. 

  97.   .media-library-menu + 
  98. }

  99. 

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

  101. 

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

  103.   margin-inline-end: 1rem;

  104. }

  105. 

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

  107.   .form-item--upload {

  108.     margin-block-start: 0;

  109.     margin-inline-end: 0;

  110.   }

  111. 

  112.   .dropzone-enable .button {

  113.     margin: 0;

  114.   }

  115. }

  116. 

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

  118. 

  119. .media-library-add-form {

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

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

  122.   }

  123. 

  124.   .file-upload-help {

  125.     margin: 0.5rem 0 0;

  126.   }

  127. }

  128. 

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

  130. 

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

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

  133.     display: flex;

  134.     align-items: center;

  135. 

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

  137.       display: block;

  138.     }

  139.   }

  140. 

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

  142.     margin-block-end: 0;

  143.   }

  144. }

  145. 

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

  147.   width: 100%;

  148. }

  149. 

  150. .media-library-select-all {

  151.   flex-basis: 100%;

  152.   box-sizing: border-box;

  153.   width: 100%;

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

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

  156.   border-radius: 0;

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

  158.   margin-block: 0 0.625rem;

  159.   margin-inline: 0 0.5rem;

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

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

  162. 

  163.   input {

  164.     margin-inline-end: 0.625rem;

  165.   }

  166. }

  167. 

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

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

  170.   display: flex;

  171.   flex-wrap: wrap;

  172. }

  173. 

  174. .media-library-views-form__header {

  175.   flex-basis: 100%;

  176. 

  177.   .form-item {

  178.     margin-inline-end: 0.5rem;

  179.   }

  180. }

  181. 

  182. .media-library-views-form__rows {

  183.   display: grid;

  184.   gap: 0.625rem;

  185.   grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));

  186. }

  187. 

  188. .media-library-widget-modal {

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

  190.   &.ui-dialog--narrow {

  191.     min-width: min(75%, 93.75rem);

  192.   }

  193. 

  194.   .ui-dialog-buttonpane {

  195.     display: flex;

  196.     flex-direction: column;

  197.     align-items: center;

  198. 

  199.     .form-actions,

  200.     .field-actions {

  201.       flex: 1;

  202.     }

  203. 

  204.     .form-actions {

  205.       display: flex;

  206.       flex-direction: row;

  207.       justify-content: flex-end;

  208.       margin-block-start: 0;

  209.       white-space: nowrap;

  210. 

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

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

  213.       }

  214.     }

  215. 

  216.     .media-library-selected-count {

  217.       flex-grow: 1;

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

  219. 

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

  221.       @media (min-width: 36.75em) {

  222.         margin-block-end: 0;

  223.         margin-inline-start: 0;

  224.       }

  225.     }

  226. 

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

  228.     @media (min-width: 36.75em) {

  229.       flex-direction: row;

  230.     }

  231.   }

  232. }

  233. 

  234. /*

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

  236.  * inserted.

  237.  */

  238. 

  239. .media-library-selection {

  240.   display: grid;

  241.   gap: 0.625rem;

  242.   grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));

  243. }

  244. 

  245. /* Media library widget styles. */

  246. 

  247. .media-library-widget {

  248.   position: relative;

  249. }

  250. 

  251. fieldset.media-library-widget {

  252.   .media-library-edit__link {

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

  254.   }

  255. }

  256. 

  257. .media-library-widget__toggle-weight {

  258.   position: absolute;

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

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

  261.   -webkit-text-decoration: none;

  262.   text-decoration: none;

  263. 

  264.   .fieldset.media-library-widget 
  265. }

  266. 

  267. /* The 
  268.  that is shown after a media item has been uploaded */

  269. 

  270. .media-library-add-form__media {

  271.   position: relative;

  272.   display: flex;

  273.   gap: 1.25rem;

  274.   padding: 0.625rem;

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

  276. 

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

  278.   &:last-child {

  279.     padding-block-end: 0;

  280.     border-block-end: 0;

  281.   }

  282. }

  283. 

  284. /*

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

  286.  * completed an upload.

  287.  */

  288. 

  289. .media-library-add-form__preview {

  290.   display: flex;

  291.   align-items: center;

  292.   justify-content: center;

  293.   width: 13.75rem;

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

  295. }

  296. 

  297. .media-library-add-form__fields {

  298.   display: grid;

  299.   flex-grow: 1;

  300.   gap: 0.625rem;

  301. 

  302.   .form-item,

  303.   .form-managed-file__meta {

  304.     margin-block: 0;

  305.   }

  306. }

  307. 

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

  309.   position: absolute;

  310.   inset-inline-end: 0;

  311. 

  312.   &.button--extrasmall {

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

  314.   }

  315. }

  316. 

  317. .media-library-selected-count {

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

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

  320. }

  321. 

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

  323.   margin-inline: 0;

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

  325. }

  326. 

  327. .media-library-open-button {

  328.   margin-block-start: 0;

  329. }

  330. 

  331. .media-library-view {

  332.   display: grid;

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

  334. 

  335.   .view-header {

  336.     display: flex;

  337.     flex-wrap: wrap;

  338.     gap: 0.9375rem;

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

  340.     -webkit-text-decoration: none;

  341.     text-decoration: none;

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

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

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

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

  346.   }

  347. 

  348.   .views-exposed-form {

  349.     margin-block: 0;

  350.   }

  351. }

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