media_library.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/migration/css/components/media_library.pcss.css

Media library styles.

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/components/media_library.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Media library styles.

  4.  */

  5. 

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

  7. 

  8. .media-library-item {

  9.   background: none;

  10.   .media-library-edit__link,

  11.   .media-library-item__edit,

  12.   .media-library-item__edit.button,

  13.   .media-library-item__remove,

  14.   .media-library-item__remove.button {

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

  16. 

  17.     &:link,

  18.     &:hover,

  19.     &:focus,

  20.     &:active,

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

  22.       border-color: transparent !important;

  23.     }

  24. 

  25.     &:hover,

  26.     &:focus,

  27.     &:active {

  28.       box-shadow:

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

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

  31.     }

  32.   }

  33. 

  34.   .media-library-edit__link,

  35.   .media-library-edit__link:hover,

  36.   .media-library-edit__link:focus,

  37.   .media-library-edit__link:active,

  38.   .media-library-item__edit,

  39.   .media-library-item__edit:hover,

  40.   .media-library-item__edit:focus,

  41.   .media-library-item__edit:active,

  42.   .media-library-item__edit.button,

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

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

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

  46.   .media-library-item__remove,

  47.   .media-library-item__remove:hover,

  48.   .media-library-item__remove:focus,

  49.   .media-library-item__remove:active,

  50.   .media-library-item__remove.button,

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

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

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

  54.     box-sizing: border-box;

  55.     width: 32px;

  56.     height: 32px;

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

  58.     border-radius: 50%;

  59.     background-color: white;

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

  61.   }

  62. 

  63.   .media-library-edit__link,

  64.   .media-library-item__edit {

  65.     inset-block-start: 0.625rem;

  66.     inset-inline-end: 3.125rem;

  67.     background-image: url("../../media/icons/media-library/media-edit.svg");

  68.     background-size: 0.75rem 0.75rem;

  69.   }

  70. 

  71.   .media-library-item__remove,

  72.   .media-library-item__remove.button {

  73.     background-image: url("../../media/icons/media-library/media-remove.svg");

  74.     background-size: 0.75rem 0.75rem;

  75.   }

  76. 

  77.   svg,

  78.   img {

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

  80.     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%);

  81.     background-position:

  82.       0 0,

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

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

  85.       0 0;

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

  87. 

  88.     &:dir(rtl) {

  89.       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%);

  90.       background-position:

  91.         100% 0,

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

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

  94.         100% 0;

  95.     }

  96.   }

  97. 

  98.   .form-item {

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

  100.   }

  101. 

  102.   .ajax-progress {

  103.     transform: translateY(-50%);

  104.   }

  105. 

  106.   .media-library-item__preview {

  107.     position: relative;

  108.     overflow: hidden;

  109.     padding-block-end: 100%;

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

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

  112. 

  113.     .field svg,

  114.     .field img {

  115.       position: absolute;

  116.       inset-block-start: 0;

  117.       inset-inline-start: 0;

  118.       width: 100%;

  119.       height: 100%;

  120.       object-fit: cover;

  121.     }

  122.   }

  123. 

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

  125.     box-shadow: none;

  126.   }

  127. 

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

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

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

  131.   }

  132. 

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

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

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

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

  137.   }

  138. }

  139. 

  140. .media-library-item--grid {

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

  142. 

  143.   &::before,

  144.   &.is-hover::before,

  145.   &.checked::before,

  146.   &.is-focus::before {

  147.     display: none;

  148.   }

  149. 

  150.   &.sortable-chosen {

  151.     outline: none;

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

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

  154. 

  155.     .media-library-item__remove {

  156.       display: none;

  157.     }

  158.   }

  159. 

  160.   &.sortable-ghost {

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

  162.   }

  163. }

  164. 

  165. .media-library-item__content {

  166.   display: flex;

  167.   height: 100%;

  168. 

  169.   article {

  170.     width: 100%;

  171.   }

  172. }

  173. 

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

  175.   overflow: inherit;

  176. }

  177. 

  178. .media-library-item__name {

  179.   overflow: visible;

  180.   margin: 0;

  181.   white-space: initial;

  182.   text-overflow: initial;

  183.   word-break: break-all;

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

  185. }

  186. 

  187. .media-library-item__attributes {

  188.   position: static;

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

  190.   background: none;

  191. }

  192. 

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

  194.   width: 29px;

  195.   height: 29px;

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

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

  198. 

  199.   &:not(:checked) {

  200.     background-color: white;

  201.   }

  202. 

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

  204.     border-color: transparent !important;

  205.   }

  206. 

  207.   &:focus {

  208.     box-shadow:

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

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

  211.   }

  212. 

  213.   &:checked {

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

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

  216.     box-shadow: none;

  217.   }

  218. 

  219.   .gin--dark-mode 
  220. 

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

  222.       border-color: transparent !important;

  223.     }

  224. 

  225.     &:focus {

  226.       box-shadow:

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

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

  229.     }

  230. 

  231.     &:checked {

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

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

  234.       box-shadow: none;

  235.     }

  236.   }

  237. }

  238. 

  239. .media-library-views-form {

  240.   flex-direction: column;

  241.   flex-wrap: initial;

  242. }

  243. 

  244. fieldset.media-library-widget {

  245.   .media-library-widget__toggle-weight {

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

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

  248.     line-height: 1;

  249.   }

  250. 

  251.   .media-library-edit__link,

  252.   .media-library-item .media-library-item__edit,

  253.   .media-library-item .media-library-item__remove,

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

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

  256.   }

  257. }

  258. 

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

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

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

  262.   margin-inline: 0;

  263. }

  264. 

  265. .media-library-open-button {

  266.   margin-block-start: 0;

  267. }

  268. 

  269. .media-library-add-form__preview {

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

  271. }

  272. 

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

  274.   padding: 0;

  275.   border: none;

  276.   background: transparent;

  277.   box-shadow: none;

  278. 

  279.   .form-item--upload {

  280.     margin-block-start: 0;

  281.     margin-inline-end: 0;

  282.   }

  283. 

  284.   .dropzone-enable .button {

  285.     margin: 0;

  286.   }

  287. }

  288. 

  289. .media-library-menu {

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

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

  292. }

  293. 

  294. .media-library-menu__link {

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

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

  297.   background-color: transparent;

  298.   text-shadow: none;

  299. 

  300.   &:active,

  301.   &:hover,

  302.   &:focus,

  303.   &.active,

  304.   &:hover:focus,

  305.   &.active:hover,

  306.   &.active:focus {

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

  308.     border-inline-end: 0 none;

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

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

  311.     box-shadow: none;

  312.     text-shadow: none;

  313.   }

  314. 

  315.   &.active::before {

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

  317.   }

  318. 

  319.   &:focus::after {

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

  321.   }

  322. }

  323. 

  324. .media-library-view {

  325.   .view-header {

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

  327.     text-decoration: none;

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

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

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

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

  332.   }

  333. 

  334.   .views-form {

  335.     background: transparent !important;

  336.   }

  337. }

  338. 

  339. .media-library-wrapper {

  340.   margin-block-start: 0;

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

  342. 

  343.   .views-display-link {

  344.     position: relative;

  345.     white-space: nowrap;

  346.     text-decoration: none;

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

  348.     background-image: none;

  349. 

  350.     &::before {

  351.       position: absolute;

  352.       display: inline-block;

  353.       width: 16px;

  354.       height: 16px;

  355.       content: "";

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

  357.       inset-inline-start: 0;

  358.       inset-block-start: 1px;

  359.     }

  360. 

  361.     &.is-active {

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

  363. 

  364.       &::before {

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

  366.       }

  367.     }

  368.   }

  369. 

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

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

  372.   }

  373. 

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

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

  376.   }

  377. }

  378. 

  379. .media-library-content {

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

  381.   border-inline-start: 0 none;

  382. }

  383. 

  384. .media-library-select-all {

  385.   box-sizing: border-box;

  386.   margin-block-start: 0;

  387.   margin-inline-start: 0;

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

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

  390.   border-radius: 0;

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

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

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

  394. }

  395. 

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

  397.   vertical-align: middle;

  398. }

  399. 

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

  401.   .views-exposed-form,

  402.   .views-form {

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

  404.   }

  405. }

  406. 

  407. .media-library-widget-modal {

  408.   .media-library-item--grid {

  409.     @media (--admin-widest) {

  410.       width: 20%;

  411.     }

  412.   }

  413. 

  414.   .ui-dialog-buttonpane {

  415.     flex-direction: column;

  416. 

  417.     .form-actions {

  418.       display: flex;

  419.       flex-direction: row;

  420.       justify-content: flex-end;

  421.       margin-block-start: 0;

  422.       white-space: nowrap;

  423. 

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

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

  426.       }

  427.     }

  428. 

  429.     .media-library-selected-count {

  430.       flex-grow: 1;

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

  432. 

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

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

  435.         margin-block-end: 0;

  436.         margin-inline-start: 0;

  437.       }

  438.     }

  439. 

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

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

  442.       flex-direction: row;

  443.     }

  444.   }

  445. }

  446. 

  447. .js-media-library-widget {

  448.   .fieldset__label {

  449.     margin-block-end: 0;

  450.   }

  451. 

  452.   .media-library-selection {

  453.     margin-block-start: 0;

  454.   }

  455. }

  456. 

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

  458.   @media (--admin-wide) {

  459.     width: 20%;

  460.   }

  461. }

  462. 

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

  464.   width: auto;

  465. }

  466. 

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

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

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

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

  471. 

  472.   > legend {

  473.     position: relative;

  474.     transform: translateY(50%);

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

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

  477. 

  478.     &::before {

  479.       position: absolute;

  480.       display: block;

  481.       width: 100%;

  482.       height: 1px;

  483.       content: "";

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

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

  486.       inset-inline-start: 0;

  487.     }

  488.   }

  489. 

  490.   > .form-item h4 {

  491.     margin-block-end: 0;

  492.   }

  493. }

  494. 

  495. .media-library-selected-count {

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

  497. }

  498. 

  499. .media-library-new-widget {

  500.   .fieldset__label {

  501.     margin-block-end: 0;

  502.   }

  503. 

  504.   .label {

  505.     margin-block-start: 0;

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

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

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

  509.   }

  510. 

  511.   .description {

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

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

  514.   }

  515. 

  516.   .form-type--entity-autocomplete {

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

  518.   }

  519. }

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