You are here

Home » API reference » Varbase Media 8.6

media_library.theme.css in Varbase Media 8.6

Same filename and directory in other branches
  1. 8.7 css/theme/media_library.theme.css
  2. 9.0.x css/theme/media_library.theme.css

media_library.theme.css

@todo Move into the Seven theme when this module is marked as stable.

They have changed this in Drupal 8.7.0 with other style.

See also

https://www.drupal.org/project/drupal/issues/2980769

File

css/theme/media_library.theme.css
View source 
  1. /**

  2.  * @file media_library.theme.css

  3.  *

  4.  * @todo Move into the Seven theme when this module is marked as stable.

  5.  * @see https://www.drupal.org/project/drupal/issues/2980769

  6.  * 

  7.  * They have changed this in Drupal 8.7.0 with other style.

  8.  */

  9. 

  10. .media-library-views-form__header .form-item {

  11.   margin-right: 8px;

  12. }

  13. 

  14. #drupal-modal .view-header {

  15.   margin: 16px 0;

  16. }

  17. 

  18. .media-library-item {

  19.   justify-content: center;

  20.   vertical-align: top;

  21.   border: 1px solid #dbdbdb;

  22.   margin: 16px 16px 2px 2px;

  23.   width: 180px;

  24.   background: #fff;

  25.   transition: border-color 0.2s, color 0.2s, background 0.2s;

  26. }

  27. 

  28. .media-library-view {

  29.   min-height: 300px;

  30. }

  31. 

  32. .media-library-view .form-actions {

  33.   margin: 0.75em 0;

  34. }

  35. 

  36. .media-library-view .media-library-view--form-actions {

  37.   clear: left;

  38.   margin: 0.75em 0;

  39.   align-self: flex-end;

  40. }

  41. 

  42. .media-library-item .field--name-thumbnail {

  43.   background-color: #ebebeb;

  44.   overflow: hidden;

  45.   text-align: center;

  46. }

  47. 

  48. .media-library-item .field--name-thumbnail img {

  49.   height: 180px;

  50.   object-fit: contain;

  51.   object-position: center center;

  52. }

  53. 

  54. .media-library-item.is-hover,

  55. .media-library-item.checked,

  56. .media-library-item.is-focus {

  57.   border-color: #40b6ff;

  58.   border-width: 3px;

  59.   border-radius: 3px;

  60.   margin: 14px 14px 0 0;

  61. }

  62. 

  63. .media-library-item.checked {

  64.   border-color: #0076c0;

  65. }

  66. 

  67. .media-library-item .js-click-to-select-checkbox input {

  68.   width: 30px;

  69.   height: 30px;

  70. }

  71. 

  72. .media-library-item .js-click-to-select-checkbox .form-item {

  73.   margin: 0;

  74. }

  75. 

  76. .media-library-item__preview {

  77.   padding-bottom: 34px;

  78. }

  79. 

  80. .media-library-item__status {

  81.   color: #e4e4e4;

  82.   font-style: italic;

  83.   background: #666;

  84.   padding: 5px 10px;

  85.   font-size: 12px;

  86. }

  87. 

  88. .media-library-item .views-field-operations {

  89.   height: 30px;

  90. }

  91. 

  92. .media-library-item .views-field-operations .dropbutton-wrapper {

  93.   display: inline-block;

  94.   position: absolute;

  95.   right: 5px;

  96.   bottom: 5px;

  97. }

  98. 

  99. .media-library-item__attributes {

  100.   position: absolute;

  101.   bottom: 0;

  102.   display: block;

  103.   padding: 5px;

  104.   max-width: calc(100% - 10px);

  105.   max-height: calc(100% - 50px);

  106.   overflow: hidden;

  107.   background: white;

  108. }

  109. 

  110. .media-library-item__name {

  111.   font-size: 14px;

  112. }

  113. 

  114. .media-library-item__name a {

  115.   display: block;

  116.   text-decoration: underline;

  117.   margin: 2px;

  118.   white-space: nowrap;

  119.   overflow: hidden;

  120.   text-overflow: ellipsis;

  121. }

  122. 

  123. .media-library-item__attributes:hover .media-library-item__name a,

  124. .media-library-item__name a:focus,

  125. .media-library-item.is-focus .media-library-item__name a,

  126. .media-library-item.checked .media-library-item__name a {

  127.   white-space: normal;

  128. }

  129. 

  130. .media-library-item__name a:focus {

  131.   border: 2px solid;

  132.   margin: 0;

  133. }

  134. 

  135. .media-library-item__type {

  136.   font-size: 12px;

  137.   color: #696969;

  138. }

  139. 

  140. .media-library-select-all {

  141.   margin: 10px 0 10px 0;

  142. }

  143. 

  144. .media-library-select-all input {

  145.   margin-right: 10px;

  146. }

  147. 

  148. .media-library-item--disabled {

  149.   opacity: 0.5;

  150. }

  151. 

  152. .media-library-selection {

  153.   margin-bottom: 1.5rem;

  154. }

  155. 

  156. .media-library-widget {

  157.   position: relative;

  158. }

  159. 

  160. .media-library-widget__toggle-weight {

  161.   position: absolute;

  162.   right: 5px;

  163.   top: 5px;

  164. }

  165. 

  166. .media-library-item .form-item {

  167.   margin: 0.75em;

  168. }

  169. 

  170. .media-library-item .media-library-item__remove,

  171. .media-library-item .media-library-item__remove:hover,

  172. .media-library-item .media-library-item__remove:focus,

  173. .media-library-item .media-library-item__remove.button,

  174. .media-library-item .media-library-item__remove.button:disabled,

  175. .media-library-item .media-library-item__remove.button:disabled:active,

  176. .media-library-item .media-library-item__remove.button:hover,

  177. .media-library-item .media-library-item__remove.button:focus {

  178.   position: absolute;

  179.   z-index: 1;

  180.   top: 0;

  181.   right: 0;

  182.   width: 24px;

  183.   height: 24px;

  184.   margin: 5px;

  185.   padding: 0;

  186.   background: url('../../../misc/icons/787878/ex.svg') #fff center no-repeat;

  187.   background-size: 16px 16px;

  188.   border: 2px solid #ccc;

  189.   border-radius: 20px;

  190.   color: transparent;

  191.   text-shadow: none;

  192.   transition: 0.2s border-color;

  193. }

  194. 

  195. .media-library-item .media-library-item__remove:hover,

  196. .media-library-item .media-library-item__remove:focus,

  197. .media-library-item .media-library-item__remove.button:hover,

  198. .media-library-item .media-library-item__remove.button:focus,

  199. .media-library-item .media-library-item__remove.button:disabled:active {

  200.   border-color: #40b6ff;

  201. }

  202. 

  203. /* Style the wrappers around new media and files */

  204. .media-library-upload__media,

  205. .media-library-upload__file {

  206.   display: flex;

  207.   flex-wrap: wrap;

  208.   padding: 20px 0 20px 0;

  209. }

  210. 

  211. .media-library-upload__file {

  212.   align-items: center;

  213. }

  214. 

  215. .media-library-upload__file-label {

  216.   margin-right: 10px;

  217. }

  218. 

  219. /* @todo Remove in https://www.drupal.org/project/drupal/issues/2987921 */

  220. .media-library-upload__source-field .file,

  221. .media-library-upload__source-field .button,

  222. .media-library-upload__source-field .image-preview,

  223. .media-library-upload__source-field .form-type-managed-file > label,

  224. .media-library-upload__source-field .file-size {

  225.   display: none;

  226. }

  227. 

  228. .media-library-upload__media-preview {

  229.   margin-right: 20px;

  230.   width: 220px;

  231.   background: #ebebeb;

  232.   display: flex;

  233.   align-items: center;

  234.   justify-content: center;

  235. }

  236. 

  237. .media-library-upload__media-preview img {

  238.   display: block;

  239. }

  240. 

  241. /* @todo Remove or re-work in https://www.drupal.org/node/2985168 */

  242. .media-library-widget .media-library-item__name a,

  243. .media-library-view.view-display-id-widget .media-library-item__name a {

  244.   color: black;

  245.   text-decoration: none;

  246. }

  247. 

  248. @media screen and (max-width: 600px) {

  249.   .media-library-item {

  250.     width: 150px;

  251.   }

  252.   .media-library-item .field--name-thumbnail img {

  253.     height: 150px;

  254.     width: 150px;

  255.   }

  256.   .media-library-item .views-field-operations .dropbutton-wrapper {

  257.     position: relative;

  258.     right: 0;

  259.     border: 0;

  260.   }

  261. }