media-library-item.css

Style the media library items.

File

View on git.drupalcode.org

core/themes/default_admin/css/components/media-library-item.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.  * Style the media library items.

  12.  */

  13. 

  14. .media-library-item {

  15.   position: relative;

  16.   background: none;

  17. 

  18.   /* Ajax throbbers inside a media library item. */

  19.   .ajax-progress {

  20.     position: absolute;

  21.     z-index: calc(var(--vertical-tabs-menu--z-index) + 1);

  22.     box-sizing: border-box;

  23.     width: 3.5rem;

  24.     height: 3.5rem;

  25.     margin: -1.5rem;

  26.     transform: translateY(-50%);

  27.     border: var(--input-border-size) solid var(--jui-dropdown-border-color);

  28.     border-radius: 3.5rem;

  29.     background: var(--color-white);

  30.     box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);

  31.     inset-block-start: 50%;

  32.     inset-inline-start: 50%;

  33.   }

  34. 

  35.   .ajax-progress__throbber {

  36.     position: absolute;

  37.     inset-block-start: 50%;

  38.     inset-inline-start: 50%;

  39.     width: 1.75rem;

  40.     height: 1.75rem;

  41.     margin: -0.875rem;

  42.     border: 3px solid var(--color-absolutezero);

  43.     border-inline-end: 0.1875rem dotted transparent;

  44.   }

  45. 

  46.   label {

  47.     display: inline-block;

  48.   }

  49. 

  50.   .ajax-progress__message {

  51.     display: none;

  52.   }

  53. 

  54.   .form-item {

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

  56.   }

  57. }

  58. 

  59. .media-library-item__preview-wrapper {

  60.   position: relative;

  61. 

  62.   .media-library-item:focus 
  63. }

  64. 

  65. .media-library-item--grid {

  66.   justify-content: center;

  67.   box-sizing: border-box;

  68.   padding: 0.5rem;

  69.   vertical-align: top;

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

  71.   outline: none;

  72. 

  73.   /**

  74.    * The media library grid item focus border is moved to a child element to

  75.    * improve padding.

  76.    */

  77.   &:focus {

  78.     outline: none;

  79.     box-shadow: none;

  80. 

  81.     .media-library-item__preview-wrapper {

  82.       outline: var(--focus-outline);

  83.       box-shadow: var(--focus-box-shadow);

  84.     }

  85.   }

  86. 

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

  88.   .form-item {

  89.     margin: 0.75em;

  90.   }

  91. 

  92.   .form-boolean--type-checkbox:checked {

  93.     border-color: var(--button--focus-border-color);

  94.     background-color: var(--button--focus-border-color);

  95.   }

  96. }

  97. 

  98. /* Edit/remove button base appearance. */

  99. 

  100. .media-library-edit__link,

  101. .media-library-item__edit,

  102. .media-library-item__edit.button,

  103. .media-library-item__remove,

  104. .media-library-item__remove.button {

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

  106. 

  107.   &:focus {

  108.     outline: var(--focus-outline);

  109.   }

  110. }

  111. 

  112. .media-library-edit__link,

  113. .media-library-item__edit {

  114.   inset-block-start: 0.625rem;

  115.   inset-inline-end: 3.125rem;

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

  117.   background-size: 0.75rem 0.75rem;

  118. }

  119. 

  120. .media-library-item__remove,

  121. .media-library-item__remove.button {

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

  123.   background-size: 0.75rem 0.75rem;

  124. }

  125. 

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

  127.   position: absolute;

  128.   z-index: 1;

  129.   inset-block-start: 1rem;

  130.   inset-inline-start: 1rem;

  131.   display: block;

  132. 

  133.   input {

  134.     width: 1.25rem;

  135.     height: 1.25rem;

  136.   }

  137. 

  138.   .form-item {

  139.     margin: 0;

  140.   }

  141. 

  142.   .form-boolean {

  143.     width: 1.8125rem;

  144.     height: 1.8125rem;

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

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

  147. 

  148.     &:hover,

  149.     &:active {

  150.       border-color: transparent;

  151.     }

  152. 

  153.     &:checked {

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

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

  156.     }

  157.   }

  158. }

  159. 

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

  161.   cursor: pointer;

  162. }

  163. 

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

  165. 

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

  167.   max-width: 6.25rem;

  168.   height: auto;

  169. }

  170. 

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

  172. 

  173. .media-library-item__preview {

  174.   position: relative;

  175.   overflow: clip;

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

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

  178.   aspect-ratio: 1;

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

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

  181.   background-position:

  182.     0 0,

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

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

  185.     0 0;

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

  187. 

  188.   svg,

  189.   img {

  190.     position: absolute;

  191.     max-width: 100%;

  192.     max-height: 100%;

  193.     margin: auto;

  194.     object-fit: cover;

  195.     inset: 0;

  196.   }

  197. 

  198.   .media-library-item.is-hover 
  199.   }

  200. 

  201.   .media-library-item.checked &,

  202.   .media-library-item.is-active 
  203. }

  204. 

  205. /*

  206.  * Status overlay shown during media processing; only fires for transient

  207.  * states.

  208.  */

  209. 

  210. .media-library-item__status {

  211.   position: absolute;

  212.   inset-block-start: 2.5rem;

  213.   inset-inline-start: 0.3125rem;

  214.   padding: 0.3125rem 0.625rem;

  215.   pointer-events: none;

  216.   color: #e4e4e4;

  217.   background: #666;

  218.   font-size: 0.75rem;

  219.   font-style: italic;

  220. }

  221. 

  222. .media-library-item__attributes {

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

  224. }

  225. 

  226. .media-library-item__name {

  227.   text-wrap: pretty;

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

  229.   font-size: 0.875rem;

  230. }

  231. 

  232. .media-library-item__content {

  233.   display: flex;

  234.   height: 100%;

  235. 

  236.   article {

  237.     width: 100%;

  238.   }

  239. }

  240. 

  241. .media-library-item__type {

  242.   color: #696969;

  243.   font-size: 0.75rem;

  244. }

  245. 

  246. .media-library-item--disabled {

  247.   pointer-events: none;

  248.   opacity: 0.5;

  249. }

  250. 

  251. /**

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

  253.  *

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

  255.  * background and border property changes.

  256.  */

  257. 

  258. .media-library-item__edit,

  259. .media-library-item__edit:hover,

  260. .media-library-item__edit:focus,

  261. .media-library-item__remove,

  262. .media-library-item__remove:hover,

  263. .media-library-item__remove:focus,

  264. .media-library-item__remove.button,

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

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

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

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

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

  270.   position: absolute;

  271.   z-index: 1;

  272.   inset-block-start: 0.625rem;

  273.   overflow: hidden;

  274.   width: 1.5rem;

  275.   height: 1.5rem;

  276.   margin: 0.3125rem;

  277.   padding: 0;

  278.   transition: 0.2s border-color;

  279.   color: transparent;

  280.   background-size: 0.75rem;

  281.   text-shadow: none;

  282.   font-size: 0;

  283. }

  284. 

  285. .media-library-item__edit {

  286.   inset-inline-end: 2.5rem;

  287.   border: 1px solid var(--color-gray-200);

  288.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");

  289.   background-repeat: no-repeat;

  290.   background-position: center;

  291.   background-size: 0.75rem;

  292. 

  293.   &:active {

  294.     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");

  295.   }

  296. }

  297. 

  298. .media-library-item__remove,

  299. .media-library-item__remove.button,

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

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

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

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

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

  305.   inset-inline-end: 0.625rem;

  306.   border: 1px solid var(--color-gray-200);

  307.   background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");

  308.   background-repeat: no-repeat;

  309.   background-position: center;

  310.   background-size: 0.75rem;

  311. }

  312. 

  313. .media-library-item__remove:active,

  314. .media-library-item__remove.button:active,

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

  316.   border-color: var(--color-absolutezero);

  317.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");

  318. }

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