aleph1.co.uk Git - yaffs-website/blob - web/core/modules/media_library/css/media_library.theme.css

   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
   8 .media-library-views-form__header .form-item {
   9   margin-right: 8px;
  10 }
  11
  12 #drupal-modal .view-header {
  13   margin: 16px 0;
  14 }
  15
  16 .media-library-item {
  17   justify-content: center;
  18   vertical-align: top;
  19   border: 1px solid #dbdbdb;
  20   margin: 16px 16px 2px 2px;
  21   width: 180px;
  22   background: #fff;
  23   transition: border-color 0.2s, color 0.2s, background 0.2s;
  24 }
  25
  26 .media-library-view {
  27   min-height: 300px;
  28 }
  29
  30 .media-library-view .form-actions {
  31   margin: 0.75em 0;
  32 }
  33
  34 .media-library-view .media-library-view--form-actions {
  35   clear: left;
  36   margin: 0.75em 0;
  37   align-self: flex-end;
  38 }
  39
  40 .media-library-item .field--name-thumbnail {
  41   background-color: #ebebeb;
  42   overflow: hidden;
  43   text-align: center;
  44 }
  45
  46 .media-library-item .field--name-thumbnail img {
  47   height: 180px;
  48   object-fit: contain;
  49   object-position: center center;
  50 }
  51
  52 .media-library-item.is-hover,
  53 .media-library-item.checked,
  54 .media-library-item.is-focus {
  55   border-color: #40b6ff;
  56   border-width: 3px;
  57   border-radius: 3px;
  58   margin: 14px 14px 0 0;
  59 }
  60
  61 .media-library-item.checked {
  62   border-color: #0076c0;
  63 }
  64
  65 .media-library-item .js-click-to-select-checkbox input {
  66   width: 30px;
  67   height: 30px;
  68 }
  69
  70 .media-library-item .js-click-to-select-checkbox .form-item {
  71   margin: 0;
  72 }
  73
  74 .media-library-item__preview {
  75   padding-bottom: 34px;
  76 }
  77
  78 .media-library-item__status {
  79   color: #e4e4e4;
  80   font-style: italic;
  81   background: #666;
  82   padding: 5px 10px;
  83   font-size: 12px;
  84 }
  85
  86 .media-library-item .views-field-operations {
  87   height: 30px;
  88 }
  89
  90 .media-library-item .views-field-operations .dropbutton-wrapper {
  91   display: inline-block;
  92   position: absolute;
  93   right: 5px;
  94   bottom: 5px;
  95 }
  96
  97 .media-library-item__attributes {
  98   position: absolute;
  99   bottom: 0;
 100   display: block;
 101   padding: 5px;
 102   max-width: calc(100% - 10px);
 103   max-height: calc(100% - 50px);
 104   overflow: hidden;
 105   background: white;
 106 }
 107
 108 .media-library-item__name {
 109   font-size: 14px;
 110 }
 111
 112 .media-library-item__name a {
 113   display: block;
 114   text-decoration: underline;
 115   margin: 2px;
 116   white-space: nowrap;
 117   overflow: hidden;
 118   text-overflow: ellipsis;
 119 }
 120
 121 .media-library-item__attributes:hover .media-library-item__name a,
 122 .media-library-item__name a:focus,
 123 .media-library-item.is-focus .media-library-item__name a,
 124 .media-library-item.checked .media-library-item__name a {
 125   white-space: normal;
 126 }
 127
 128 .media-library-item__name a:focus {
 129   border: 2px solid;
 130   margin: 0;
 131 }
 132
 133 .media-library-item__type {
 134   font-size: 12px;
 135   color: #696969;
 136 }
 137
 138 .media-library-select-all {
 139   margin: 10px 0 10px 0;
 140 }
 141
 142 .media-library-select-all input {
 143   margin-right: 10px;
 144 }
 145
 146 .media-library-item--disabled {
 147   opacity: 0.5;
 148 }
 149
 150 .media-library-selection {
 151   margin-bottom: 1.5rem;
 152 }
 153
 154 .media-library-widget {
 155   position: relative;
 156 }
 157
 158 .media-library-widget__toggle-weight {
 159   position: absolute;
 160   right: 5px;
 161   top: 5px;
 162 }
 163
 164 .media-library-item .form-item {
 165   margin: 0.75em;
 166 }
 167
 168 .media-library-item__remove,
 169 .media-library-item__remove:hover,
 170 .media-library-item__remove:focus,
 171 .media-library-item__remove.button,
 172 .media-library-item__remove.button:disabled,
 173 .media-library-item__remove.button:disabled:active,
 174 .media-library-item__remove.button:hover,
 175 .media-library-item__remove.button:focus {
 176   position: absolute;
 177   z-index: 1;
 178   top: 0;
 179   right: 0;
 180   width: 24px;
 181   height: 24px;
 182   margin: 5px;
 183   padding: 0;
 184   background: url('../../../misc/icons/787878/ex.svg') #fff center no-repeat;
 185   background-size: 16px 16px;
 186   border: 2px solid #ccc;
 187   border-radius: 20px;
 188   color: transparent;
 189   text-shadow: none;
 190   transition: 0.2s border-color;
 191 }
 192
 193 .media-library-item__remove:hover,
 194 .media-library-item__remove:focus,
 195 .media-library-item__remove.button:hover,
 196 .media-library-item__remove.button:focus,
 197 .media-library-item__remove.button:disabled:active {
 198   border-color: #40b6ff;
 199 }
 200
 201 /* Style the wrappers around new media and files */
 202 .media-library-upload__media,
 203 .media-library-upload__file {
 204   display: flex;
 205   flex-wrap: wrap;
 206   padding: 20px 0 20px 0;
 207 }
 208
 209 .media-library-upload__file {
 210   align-items: center;
 211 }
 212
 213 .media-library-upload__file-label {
 214   margin-right: 10px;
 215 }
 216
 217 /* @todo Remove in https://www.drupal.org/project/drupal/issues/2987921 */
 218 .media-library-upload__source-field .file,
 219 .media-library-upload__source-field .button,
 220 .media-library-upload__source-field .image-preview,
 221 .media-library-upload__source-field .form-type-managed-file > label,
 222 .media-library-upload__source-field .file-size {
 223   display: none;
 224 }
 225
 226 .media-library-upload__media-preview {
 227   margin-right: 20px;
 228   width: 220px;
 229   background: #ebebeb;
 230   display: flex;
 231   align-items: center;
 232   justify-content: center;
 233 }
 234
 235 .media-library-upload__media-preview img {
 236   display: block;
 237 }
 238
 239 /* @todo Remove or re-work in https://www.drupal.org/node/2985168 */
 240 .media-library-widget .media-library-item__name a,
 241 .media-library-view.view-display-id-widget .media-library-item__name a {
 242   color: black;
 243   text-decoration: none;
 244 }
 245
 246 @media screen and (max-width: 600px) {
 247   .media-library-item {
 248     width: 150px;
 249   }
 250   .media-library-item .field--name-thumbnail img {
 251     height: 150px;
 252     width: 150px;
 253   }
 254   .media-library-item .views-field-operations .dropbutton-wrapper {
 255     position: relative;
 256     right: 0;
 257     border: 0;
 258   }
 259 }