media_library.css

Same filename in this branch
  1. main core/themes/admin/migration/css/components/media_library.css
Same filename and directory in other branches
  1. 11.x core/themes/admin/migration/css/components/media_library.css
  2. 11.x core/themes/default_admin/migration/css/components/media_library.css

Media library styles.

File

View on git.drupalcode.org

core/themes/default_admin/migration/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.  * Media library styles.

  11.  */

  12. 

  13. .media-library-item {

  14.   background: none;

  15.   .media-library-edit__link,

  16.   .media-library-item__edit,

  17.   .media-library-item__edit.button,

  18.   .media-library-item__remove,

  19.   .media-library-item__remove.button {

  20.     border-color: var(--gin-border-color) !important;

  21. 

  22.     &:link,

  23.     &:hover,

  24.     &:focus,

  25.     &:active,

  26.     &:not(:hover, :checked) {

  27.       border-color: transparent !important;

  28.     }

  29. 

  30.     &:hover,

  31.     &:focus,

  32.     &:active {

  33.       box-shadow:

  34.         0 0 0 1px var(--gin-color-focus-border),

  35.         0 0 0 4px var(--gin-color-focus) !important;

  36.     }

  37.   }

  38. 

  39.   .media-library-edit__link,

  40.   .media-library-edit__link:hover,

  41.   .media-library-edit__link:focus,

  42.   .media-library-edit__link:active,

  43.   .media-library-item__edit,

  44.   .media-library-item__edit:hover,

  45.   .media-library-item__edit:focus,

  46.   .media-library-item__edit:active,

  47.   .media-library-item__edit.button,

  48.   .media-library-item__edit.button:hover,

  49.   .media-library-item__edit.button:focus,

  50.   .media-library-item__edit.button:active,

  51.   .media-library-item__remove,

  52.   .media-library-item__remove:hover,

  53.   .media-library-item__remove:focus,

  54.   .media-library-item__remove:active,

  55.   .media-library-item__remove.button,

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

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

  58.   .media-library-item__remove.button:active {

  59.     box-sizing: border-box;

  60.     width: 2rem;

  61.     height: 2rem;

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

  63.     border-radius: 50%;

  64.     background-color: white;

  65.     box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);

  66.   }

  67. 

  68.   .media-library-edit__link,

  69.   .media-library-item__edit {

  70.     inset-block-start: 0.625rem;

  71.     inset-inline-end: 3.125rem;

  72.     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3e%3c/path%3e  %3c/g%3e%3c/svg%3e");

  73.     background-size: 0.75rem 0.75rem;

  74.   }

  75. 

  76.   .media-library-item__remove,

  77.   .media-library-item__remove.button {

  78.     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cpath d='M20 4L4 20' /%3e    %3cpath d='M4 4L20 20' /%3e  %3c/g%3e%3c/svg%3e");

  79.     background-size: 0.75rem 0.75rem;

  80.   }

  81. 

  82.   svg,

  83.   img {

  84.     background-color: var(--gin-pattern-fallback);

  85.     background-image: linear-gradient(-45deg, var(--gin-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--gin-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--gin-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--gin-pattern) 25%, transparent 26%);

  86.     background-position:

  87.       0 0,

  88.       var(--gin-pattern-square) var(--gin-pattern-square),

  89.       var(--gin-pattern-square) var(--gin-pattern-square),

  90.       0 0;

  91.     background-size: calc(var(--gin-pattern-square) * 2) calc(var(--gin-pattern-square) * 2);

  92. 

  93.     &:dir(rtl) {

  94.       background-image: linear-gradient(45deg, var(--gin-pattern) 25%, transparent 26%), linear-gradient(45deg, var(--gin-pattern) 25%, transparent 26%), linear-gradient(-135deg, var(--gin-pattern) 25%, transparent 26%), linear-gradient(-135deg, var(--gin-pattern) 25%, transparent 26%);

  95.       background-position:

  96.         100% 0,

  97.         var(--gin-pattern-square) var(--gin-pattern-square),

  98.         var(--gin-pattern-square) var(--gin-pattern-square),

  99.         100% 0;

  100.     }

  101.   }

  102. 

  103.   .form-item {

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

  105.   }

  106. 

  107.   .ajax-progress {

  108.     transform: translateY(-50%);

  109.   }

  110. 

  111.   .media-library-item__preview {

  112.     position: relative;

  113.     overflow: hidden;

  114.     padding-block-end: 100%;

  115.     border: 1px solid var(--gin-border-color);

  116.     border-radius: var(--gin-border-xl);

  117. 

  118.     .field svg,

  119.     .field img {

  120.       position: absolute;

  121.       inset-block-start: 0;

  122.       inset-inline-start: 0;

  123.       width: 100%;

  124.       height: 100%;

  125.       object-fit: cover;

  126.     }

  127.   }

  128. 

  129.   &:focus .media-library-item__preview-wrapper {

  130.     box-shadow: none;

  131.   }

  132. 

  133.   &.is-hover .media-library-item__preview {

  134.     border-color: var(--gin-color-text);

  135.     box-shadow: 0 0 0 2px var(--gin-color-text);

  136.   }

  137. 

  138.   &.checked .media-library-item__preview,

  139.   &.is-active .media-library-item__preview {

  140.     border-color: var(--gin-color-primary);

  141.     box-shadow: 0 0 0 2px var(--gin-color-primary);

  142.   }

  143. }

  144. 

  145. .media-library-item--grid {

  146.   border-radius: var(--gin-border-xl);

  147. 

  148.   &::before,

  149.   &.is-hover::before,

  150.   &.checked::before,

  151.   &.is-focus::before {

  152.     display: none;

  153.   }

  154. 

  155.   &.sortable-chosen {

  156.     outline: none;

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

  158.     box-shadow: 0 0 48px rgb(0, 0, 0, 0.075) !important;

  159. 

  160.     .media-library-item__remove {

  161.       display: none;

  162.     }

  163.   }

  164. 

  165.   &.sortable-ghost {

  166.     border: 2px dashed var(--gin-border-color);

  167.   }

  168. }

  169. 

  170. .media-library-item__content {

  171.   display: flex;

  172.   height: 100%;

  173. 

  174.   article {

  175.     width: 100%;

  176.   }

  177. }

  178. 

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

  180.   overflow: inherit;

  181. }

  182. 

  183. .media-library-item__name {

  184.   overflow: visible;

  185.   margin: 0;

  186.   white-space: initial;

  187.   text-overflow: initial;

  188.   word-break: break-all;

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

  190. }

  191. 

  192. .media-library-item__attributes {

  193.   position: static;

  194.   padding: var(--space-xs);

  195.   background: none;

  196. }

  197. 

  198. .media-library-item__click-to-select-checkbox .form-boolean {

  199.   width: 1.8125rem;

  200.   height: 1.8125rem;

  201.   border-radius: var(--gin-border-xs);

  202.   box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);

  203. 

  204.   &:not(:checked) {

  205.     background-color: white;

  206.   }

  207. 

  208.   &:not(:hover, :checked) {

  209.     border-color: transparent !important;

  210.   }

  211. 

  212.   &:focus {

  213.     box-shadow:

  214.       0 0 0 1px var(--gin-color-focus-border),

  215.       0 0 0 4px var(--gin-color-focus) !important;

  216.   }

  217. 

  218.   &:checked {

  219.     border-color: var(--gin-color-primary);

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

  221.     box-shadow: none;

  222.   }

  223. 

  224.   .gin--dark-mode 
  225. 

  226.     &:not(:hover, :checked) {

  227.       border-color: transparent !important;

  228.     }

  229. 

  230.     &:focus {

  231.       box-shadow:

  232.         0 0 0 1px var(--gin-color-focus-border),

  233.         0 0 0 4px var(--gin-color-focus) !important;

  234.     }

  235. 

  236.     &:checked {

  237.       border-color: var(--gin-color-primary);

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

  239.       box-shadow: none;

  240.     }

  241.   }

  242. }

  243. 

  244. .media-library-views-form {

  245.   flex-direction: column;

  246.   flex-wrap: initial;

  247. }

  248. 

  249. fieldset.media-library-widget {

  250.   .media-library-widget__toggle-weight {

  251.     padding: var(--space-xs);

  252.     font-size: var(--font-size-xxs);

  253.     line-height: 1;

  254.   }

  255. 

  256.   .media-library-edit__link,

  257.   .media-library-item .media-library-item__edit,

  258.   .media-library-item .media-library-item__remove,

  259.   .media-library-item .media-library-item__remove.button {

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

  261.   }

  262. }

  263. 

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

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

  266.   margin-block: 0 calc(var(--space-xs) * -1);

  267.   margin-inline: 0;

  268. }

  269. 

  270. .media-library-open-button {

  271.   margin-block-start: 0;

  272. }

  273. 

  274. .media-library-add-form__preview {

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

  276. }

  277. 

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

  279.   padding: 0;

  280.   border: none;

  281.   background: transparent;

  282.   box-shadow: none;

  283. 

  284.   .form-item--upload {

  285.     margin-block-start: 0;

  286.     margin-inline-end: 0;

  287.   }

  288. 

  289.   .dropzone-enable .button {

  290.     margin: 0;

  291.   }

  292. }

  293. 

  294. .media-library-menu {

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

  296.   background-color: var(--gin-bg-app);

  297. }

  298. 

  299. .media-library-menu__link {

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

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

  302.   background-color: transparent;

  303.   text-shadow: none;

  304. 

  305.   &:active,

  306.   &:hover,

  307.   &:focus,

  308.   &.active,

  309.   &:hover:focus,

  310.   &.active:hover,

  311.   &.active:focus {

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

  313.     border-inline-end: 0 none;

  314.     border-block-end: 1px solid var(--gin-border-color);

  315.     background-color: var(--gin-bg-layer);

  316.     box-shadow: none;

  317.     text-shadow: none;

  318.   }

  319. 

  320.   &.active::before {

  321.     border-inline-start-color: var(--gin-color-primary);

  322.   }

  323. 

  324.   &:focus::after {

  325.     border: var(--gin-border-xs) solid var(--gin-color-focus);

  326.   }

  327. }

  328. 

  329. .media-library-view {

  330.   .view-header {

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

  332.     -webkit-text-decoration: none;

  333.     text-decoration: none;

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

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

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

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

  338.   }

  339. 

  340.   .views-form {

  341.     background: transparent !important;

  342.   }

  343. }

  344. 

  345. .media-library-wrapper {

  346.   margin-block-start: 0;

  347.   margin-inline: calc(var(--space-m) * -1);

  348. 

  349.   .views-display-link {

  350.     position: relative;

  351.     white-space: nowrap;

  352.     -webkit-text-decoration: none;

  353.     text-decoration: none;

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

  355.     background-image: none;

  356. 

  357.     &::before {

  358.       position: absolute;

  359.       display: inline-block;

  360.       width: 1rem;

  361.       height: 1rem;

  362.       content: "";

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

  364.       inset-inline-start: 0;

  365.       inset-block-start: 1px;

  366.     }

  367. 

  368.     &.is-active {

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

  370. 

  371.       &::before {

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

  373.       }

  374.     }

  375.   }

  376. 

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

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

  379.   }

  380. 

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

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

  383.   }

  384. }

  385. 

  386. .media-library-content {

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

  388.   border-inline-start: 0 none;

  389. }

  390. 

  391. .media-library-select-all {

  392.   box-sizing: border-box;

  393.   margin-block-start: 0;

  394.   margin-inline-start: 0;

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

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

  397.   border-radius: 0;

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

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

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

  401. }

  402. 

  403. .views-field-thumbnail__target-id img {

  404.   vertical-align: middle;

  405. }

  406. 

  407. .gin--dark-mode .ui-dialog {

  408.   .views-exposed-form,

  409.   .views-form {

  410.     background: var(--gin-bg-layer2);

  411.   }

  412. }

  413. 

  414. .media-library-widget-modal {

  415.   .media-library-item--grid {

  416.     @media (min-width: 90em) {

  417.       width: 20%;

  418.     }

  419.   }

  420. 

  421.   .ui-dialog-buttonpane {

  422.     flex-direction: column;

  423. 

  424.     .form-actions {

  425.       display: flex;

  426.       flex-direction: row;

  427.       justify-content: flex-end;

  428.       margin-block-start: 0;

  429.       white-space: nowrap;

  430. 

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

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

  433.       }

  434.     }

  435. 

  436.     .media-library-selected-count {

  437.       flex-grow: 1;

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

  439. 

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

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

  442.         margin-block-end: 0;

  443.         margin-inline-start: 0;

  444.       }

  445.     }

  446. 

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

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

  449.       flex-direction: row;

  450.     }

  451.   }

  452. }

  453. 

  454. .js-media-library-widget {

  455.   .fieldset__label {

  456.     margin-block-end: 0;

  457.   }

  458. 

  459.   .media-library-selection {

  460.     margin-block-start: 0;

  461.   }

  462. }

  463. 

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

  465.   @media (min-width: 80em) {

  466.     width: 20%;

  467.   }

  468. }

  469. 

  470. .layout-region--secondary .media-library-selection .media-library-item--grid {

  471.   width: auto;

  472. }

  473. 

  474. .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item {

  475.   padding-block: var(--space-xl) var(--space-m);

  476.   padding-inline: calc(var(--space-l) - var(--space-xxs));

  477.   border: 1px solid var(--gin-border-color);

  478. 

  479.   > legend {

  480.     position: relative;

  481.     transform: translateY(50%);

  482.     font-weight: var(--font-weight-heavy);

  483.     inset-block-start: calc(var(--space-l) - var(--space-xxs));

  484. 

  485.     &::before {

  486.       position: absolute;

  487.       display: block;

  488.       width: 100%;

  489.       height: 1px;

  490.       content: "";

  491.       background: var(--gin-border-color);

  492.       inset-block-start: calc((var(--space-l) - var(--space-xxs)) * -1);

  493.       inset-inline-start: 0;

  494.     }

  495.   }

  496. 

  497.   > .form-item h4 {

  498.     margin-block-end: 0;

  499.   }

  500. }

  501. 

  502. .media-library-selected-count {

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

  504. }

  505. 

  506. .media-library-new-widget {

  507.   .fieldset__label {

  508.     margin-block-end: 0;

  509.   }

  510. 

  511.   .label {

  512.     margin-block-start: 0;

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

  514.     font-size: var(--font-size-h6);

  515.     font-weight: var(--font-weight-bold);

  516.   }

  517. 

  518.   .description {

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

  520.     font-size: var(--font-size-s);

  521.   }

  522. 

  523.   .form-type--entity-autocomplete {

  524.     margin-block: var(--space-s);

  525.   }

  526. }

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