media-library-item.css

Same filename and directory in other branches
  1. 11.x core/themes/default_admin/css/components/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(--admin-color-bg-raised);

  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(--admin-color-link);

  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(--admin-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(--admin-radius-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. 

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

  94. 

  95. .media-library-edit__link,

  96. .media-library-item__edit,

  97. .media-library-item__edit.button,

  98. .media-library-item__remove,

  99. .media-library-item__remove.button {

  100.   border-color: var(--admin-color-border);

  101. 

  102.   &:focus {

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

  104.   }

  105. }

  106. 

  107. .media-library-edit__link,

  108. .media-library-item__edit {

  109.   inset-block-start: 0.625rem;

  110.   inset-inline-end: 3.125rem;

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

  112.   background-size: 0.75rem 0.75rem;

  113. }

  114. 

  115. .media-library-item__remove,

  116. .media-library-item__remove.button {

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

  118.   background-size: 0.75rem 0.75rem;

  119. }

  120. 

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

  122.   position: absolute;

  123.   z-index: 1;

  124.   inset-block-start: 1rem;

  125.   inset-inline-start: 1rem;

  126.   display: block;

  127. 

  128.   input {

  129.     width: 1.25rem;

  130.     height: 1.25rem;

  131.   }

  132. 

  133.   .form-item {

  134.     margin: 0;

  135.   }

  136. 

  137.   .form-boolean {

  138.     width: 1.8125rem;

  139.     height: 1.8125rem;

  140.     border-radius: var(--admin-radius-xs);

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

  142. 

  143.     &:hover,

  144.     &:active {

  145.       border-color: transparent;

  146.     }

  147. 

  148.     &:checked {

  149.       border-color: var(--admin-color-primary);

  150.       background-color: var(--admin-color-primary);

  151.     }

  152.   }

  153. }

  154. 

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

  156.   cursor: pointer;

  157. }

  158. 

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

  160. 

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

  162.   max-width: 6.25rem;

  163.   height: auto;

  164. }

  165. 

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

  167. 

  168. .media-library-item__preview {

  169.   position: relative;

  170.   overflow: clip;

  171.   border: 1px solid var(--admin-color-border);

  172.   border-radius: var(--admin-radius-xl);

  173.   aspect-ratio: 1;

  174.   background-color: var(--admin-color-bg-surface-nested);

  175.   background-image: linear-gradient(-45deg, var(--admin-color-border) 25%, transparent 26%), linear-gradient(-45deg, var(--admin-color-border) 25%, transparent 26%), linear-gradient(135deg, var(--admin-color-border) 25%, transparent 26%), linear-gradient(135deg, var(--admin-color-border) 25%, transparent 26%);

  176.   background-position:

  177.     0 0,

  178.     var(--admin-pattern-square) var(--admin-pattern-square),

  179.     var(--admin-pattern-square) var(--admin-pattern-square),

  180.     0 0;

  181.   background-size: calc(var(--admin-pattern-square) * 2) calc(var(--admin-pattern-square) * 2);

  182. 

  183.   svg,

  184.   img {

  185.     position: absolute;

  186.     max-width: 100%;

  187.     max-height: 100%;

  188.     margin: auto;

  189.     object-fit: cover;

  190.     inset: 0;

  191.   }

  192. 

  193.   .media-library-item.is-hover 
  194.   }

  195. 

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

  197.   .media-library-item.is-active 
  198. }

  199. 

  200. /*

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

  202.  * states.

  203.  */

  204. 

  205. .media-library-item__status {

  206.   position: absolute;

  207.   inset-block-start: 2.5rem;

  208.   inset-inline-start: 0.3125rem;

  209.   padding: 0.3125rem 0.625rem;

  210.   pointer-events: none;

  211.   color: #e4e4e4;

  212.   background: #666;

  213.   font-size: 0.75rem;

  214.   font-style: italic;

  215. }

  216. 

  217. .media-library-item__attributes {

  218.   padding: var(--admin-space-xs);

  219. }

  220. 

  221. .media-library-item__name {

  222.   text-wrap: pretty;

  223.   color: var(--admin-color-text);

  224.   font-size: 0.875rem;

  225. }

  226. 

  227. .media-library-item__content {

  228.   display: flex;

  229.   height: 100%;

  230. 

  231.   article {

  232.     width: 100%;

  233.   }

  234. }

  235. 

  236. .media-library-item__type {

  237.   color: #696969;

  238.   font-size: 0.75rem;

  239. }

  240. 

  241. .media-library-item--disabled {

  242.   pointer-events: none;

  243.   opacity: 0.5;

  244. }

  245. 

  246. /**

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

  248.  *

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

  250.  * background and border property changes.

  251.  */

  252. 

  253. .media-library-item__edit,

  254. .media-library-item__edit:hover,

  255. .media-library-item__edit:focus,

  256. .media-library-item__remove,

  257. .media-library-item__remove:hover,

  258. .media-library-item__remove:focus,

  259. .media-library-item__remove.button,

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

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

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

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

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

  265.   position: absolute;

  266.   z-index: 1;

  267.   inset-block-start: 0.625rem;

  268.   overflow: hidden;

  269.   width: 1.5rem;

  270.   height: 1.5rem;

  271.   margin: 0.3125rem;

  272.   padding: 0;

  273.   transition: 0.2s border-color;

  274.   color: transparent;

  275.   background-size: 0.75rem;

  276.   text-shadow: none;

  277.   font-size: 0;

  278. }

  279. 

  280. .media-library-item__edit {

  281.   inset-inline-end: 2.5rem;

  282.   border: 1px solid var(--admin-color-border);

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

  284.   background-repeat: no-repeat;

  285.   background-position: center;

  286.   background-size: 0.75rem;

  287. 

  288.   &:active {

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

  290.   }

  291. }

  292. 

  293. .media-library-item__remove,

  294. .media-library-item__remove.button,

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

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

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

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

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

  300.   inset-inline-end: 0.625rem;

  301.   border: 1px solid var(--admin-color-border);

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

  303.   background-repeat: no-repeat;

  304.   background-position: center;

  305.   background-size: 0.75rem;

  306. }

  307. 

  308. .media-library-item__remove:active,

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

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

  311.   border-color: var(--admin-color-link);

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

  313. }

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