Issue #3274230 by thomas.frobieter, Anybody: Media Library: Display VBO...

body .media-library-selection,body .media-library-view--drowl-header-slideshow>.view-content,body .media-library-views-form__rows{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}body .media-library-selection>:not(.media-library-item),body .media-library-view--drowl-header-slideshow>.view-content>:not(.media-library-item),body .media-library-views-form__rows>:not(.media-library-item){grid-column:1/-1;margin:0;width:auto}body .media-library-item{background:#fff}body .media-library-item .field--name-name,body .media-library-item .field--name-name *{font-weight:700;margin-bottom:.75em;color:var(--drowl-gray-darker,#000);font-size:var(--drowl-font-size-base);-webkit-hyphens:auto;hyphens:auto}body .media-library-item__name{font-size:var(--drowl-font-size-base);color:var(--drowl-text-color);word-break:normal;-webkit-hyphens:auto;hyphens:auto}body .media-library-item__metadata{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:.5rem;font-size:var(--drowl-font-size-small);color:grey;margin-top:.35em;overflow:hidden;transition-duration:15ms}body .media-library-item__language{grid-column:1/2}body .media-library-item__language,body .media-library-item__media-id{grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}body .media-library-item__language:hover,body .media-library-item__media-id:hover{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;background:#fff;position:relative;z-index:1}body .media-library-item__media-id{text-align:right}body .media-library-item__authored{border-top:1px solid var(--drowl-gray-light);padding:.5rem 1rem;margin:1rem -1rem .5rem -1rem!important}body .media-library-item .views-field-rendered-entity{flex-grow:1}body .media-library-item .media-library-item__content,body .media-library-item .media-library-item__preview-wrapper{display:flex;flex-direction:column;height:100%}body .media-library-item .media-library-item__preview{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);position:relative;border:0 none;border-radius:0;padding:0;overflow:hidden;background:var(--drowl-gray-light);box-shadow:none!important}body .media-library-item .media-library-item__preview>:first-child{grid-column:span 4;max-width:none;height:165px;width:100%}body .media-library-item .media-library-item__preview img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;height:100%;width:100%}body .media-library-item .media-library-item__preview .media-library-item__preview-wrapper .media-library-item__preview{display:block}body .media-library-item .media-library-item__preview .media-library-item__preview-wrapper .media-library-item__attributes,body .media-library-item .media-library-item__preview .media-library-item__preview-wrapper .media-library-item__preview>:not(img){display:none!important}body .media-library-item .media-library-item__preview img+.field--name-thumbnail{display:none!important}body .media-library-item__preview-item{height:42px;position:relative}body .media-library-item__preview-item:first-child{background-color:#fff;grid-column:1/-1;height:auto}body .media-library-item__preview-item:first-child img{height:100%}body .media-library-item__preview-item--video-preview-image::before{font-family:drowl-media;content:"\e9b4";position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;line-height:1;width:28px;height:28px;border-radius:50%;background:var(--drowl-white-glass);color:var(--drowl-black-glass)}body .media-library-item__preview-item--video-preview-image:hover::before{opacity:.2}body .media-library-item__preview-item--thumbnail:not(:first-child){display:none}body .media-library-item__attributes{max-width:none;padding:.85em calc(var(--grid-gutter) * 2);margin:0 calc(var(--grid-gutter) * -1) calc(var(--grid-gutter) * -1);border-top:1px solid var(--drowl-gray-light);font-size:var(--drowl-font-size-small);line-height:1.25;color:var(--drowl-gray-dark);-webkit-user-select:none;-moz-user-select:none;user-select:none}body .media-library-item__info-link{position:absolute;z-index:55;padding:5px;right:5px;top:5px;line-height:1;border:0 none!important;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--drowl-info);cursor:pointer}body .media-library-item__info-link:focus{box-shadow:none}body .media-library-item__info-link .drowl-admin-ico-remove-circle{display:none}body .media-library-item__info-layer{display:none;position:absolute;top:calc(var(--grid-gutter) * -1);left:calc(var(--grid-gutter) * -1);right:calc(var(--grid-gutter) * -1);bottom:calc(var(--grid-gutter) * -1);z-index:54;padding:1rem;background:#fff;color:var(--drowl-gray-dark);overflow-y:auto;scrollbar-width:thin;cursor:default}body .media-library-item__info-layer *{font-size:var(--drowl-font-size-small,16px);margin:0}body .media-library-item__info-layer>*{margin-bottom:.5em}body .media-library-item__info-layer .field--name-name:first-child{padding-right:30px}body .media-library-item__info-layer .field--name-field-media-folder,body .media-library-item__info-layer .field--name-field-media-tags{overflow:hidden;padding-left:20px;position:relative}body .media-library-item__info-layer .field--name-field-media-folder::before,body .media-library-item__info-layer .field--name-field-media-tags::before{font-family:drowl-admin-ico;vertical-align:middle;margin-left:-20px;margin-top:.3em;float:left}body .media-library-item__info-layer .field--name-field-media-folder .field__label,body .media-library-item__info-layer .field--name-field-media-tags .field__label{display:none}body .media-library-item__info-layer .field--name-field-media-folder .field__item,body .media-library-item__info-layer .field--name-field-media-tags .field__item{background-color:var(--drowl-gray-light);color:var(--drowl-gray-dark);display:inline-block;padding:.25em .85em;border-radius:1em;font-size:12px;margin:3px 2px 3px 0}body .media-library-item__info-layer .field--name-field-media-folder::before{content:"\e9d0"}body .media-library-item__info-layer .field--name-field-media-tags::before{content:"\e9ee"}body .media-library-item--info-layer-visible .media-library-item__info-layer{display:block}body .media-library-item--info-layer-visible .media-library-item__info-link{color:#fff;background:var(--drowl-info)}body .media-library-item--info-layer-visible .media-library-item__info-link .drowl-admin-ico-info-circle{display:none}body .media-library-item--info-layer-visible .media-library-item__info-link .drowl-admin-ico-remove-circle{display:block}body .media-library-item--grid{--grid-gutter:5px;--border-radius:var(--drowl-border-radius-small);--selection-color:var(--drowl-info);--muted:#808080;width:auto!important;display:flex;flex-direction:column;border:1px solid var(--drowl-gray-light);border-radius:var(--border-radius);padding:var(--grid-gutter)}body .media-library-item--grid .media-library-item__click-to-select-checkbox{top:0;right:0;left:auto}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-item{margin:0}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean{box-shadow:none;border-width:0 0 1px 1px;border-radius:0;background-size:18px!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean:not(:hover):not(:checked){border-color:var(--drowl-gray-light)!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean:hover{border-color:var(--selection-color)!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean:checked{border-color:var(--selection-color)!important}body .media-library-item--grid>.views-field-bundle{order:-99;margin:calc(var(--grid-gutter) * -1) calc(var(--grid-gutter) * -1) var(--grid-gutter);padding:var(--grid-gutter) calc(var(--grid-gutter) * 2);border-bottom:1px solid var(--drowl-gray-light);font-size:var(--drowl-font-size-small);-webkit-user-select:none;-moz-user-select:none;user-select:none}body .media-library-item--grid>.views-field-operations{order:99;margin:var(--grid-gutter) calc(var(--grid-gutter) * -1) calc(var(--grid-gutter) * -1);border-top:1px solid var(--drowl-gray-light)}body .media-library-item--grid>.views-field-operations .dropbutton-wrapper{display:flex;box-shadow:none;border-radius:0}body .media-library-item--grid>.views-field-operations .dropbutton{border-color:transparent;border-radius:0}body .media-library-item--grid>.views-field-operations .dropbutton-action>a{padding-left:var(--grid-gutter)}body .media-library-item--grid.is-hover{border-color:var(--selection-color)}body .media-library-item--grid.is-hover .media-library-item__click-to-select-checkbox .form-boolean:not(:hover):not(:checked){border-color:var(--selection-color)!important;background-color:var(--drowl-info-light)}body .media-library-item--grid.checked{border-color:var(--selection-color);outline:2px solid var(--selection-color)}body .media-library-item--grid.checked img{filter:saturate(180%)}body [class*=media-library-item--bundle] .views-field-bundle{display:flex;align-items:center;gap:7px}body [class*=media-library-item--bundle] .views-field-bundle::before{content:"\e99e";font-family:drowl-media;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:18px;color:var(--drowl-info)}body .media-library-item--bundle-video .views-field-bundle::before{content:"\e9b4"}body .media-library-item--bundle-remote-video .views-field-bundle::before{content:"\e9b4"}body .media-library-item--bundle-slideshow .views-field-bundle::before{content:"\e940"}body .media-library-item--bundle-slide .views-field-bundle::before{content:"\e93f"}body .media-library-item--bundle-image .views-field-bundle::before{content:"\e9b0"}body .media-library-item--bundle-document .views-field-bundle::before{content:"\e9ae"}body .media-library-item--bundle-audio .views-field-bundle::before{content:"\e9b2"}body .media-library-item--bundle-vector-image .views-field-bundle::before{content:"\e900"}body .media-library-views-form__header.is-sticky+.media-library-selection .media-library-item:not(.checked):not(.is-hover) iframe,body .media-library-views-form__header.is-sticky+.media-library-selection .media-library-item:not(.checked):not(.is-hover) img,body .media-library-views-form__header.is-sticky+.media-library-selection .media-library-item:not(.checked):not(.is-hover) video,body .media-library-views-form__header.is-sticky+.media-library-views-form__rows .media-library-item:not(.checked):not(.is-hover) iframe,body .media-library-views-form__header.is-sticky+.media-library-views-form__rows .media-library-item:not(.checked):not(.is-hover) img,body .media-library-views-form__header.is-sticky+.media-library-views-form__rows .media-library-item:not(.checked):not(.is-hover) video{filter:grayscale(85%)}body .block-system>.views-form [data-drupal-selector*=edit-header].is-sticky,body .view-content .views-form [data-drupal-selector*=edit-header].is-sticky{background:#fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-top:5px solid var(--drowl-info);border-top-right-radius:0;border-top-left-radius:0}body .block-system>.views-form [data-drupal-selector*=edit-header].is-sticky .form-item__label,body .view-content .views-form [data-drupal-selector*=edit-header].is-sticky .form-item__label{color:var(--drowl-info)}body .media-library-selection .media-library-item:not(.media-library-item--info-layer-visible) .media-library-item__info-link{right:auto;left:5px}body .media-library-selection .media-library-edit__link{font-size:0!important;color:transparent!important}body .media-library-add-form__preview img{position:sticky;top:0;align-self:flex-start}

 No newline at end of file

body .media-library-selection,body .media-library-view--drowl-header-slideshow>.view-content,body .media-library-views-form__rows{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}body .media-library-selection>:not(.media-library-item),body .media-library-view--drowl-header-slideshow>.view-content>:not(.media-library-item),body .media-library-views-form__rows>:not(.media-library-item){grid-column:1/-1;margin:0;width:auto}body .media-library-item{background:#fff}body .media-library-item .field--name-name,body .media-library-item .field--name-name *{font-weight:700;margin-bottom:.75em;color:var(--drowl-gray-darker,#000);font-size:var(--drowl-font-size-base);-webkit-hyphens:auto;hyphens:auto}body .media-library-item__name{font-size:var(--drowl-font-size-base);color:var(--drowl-text-color);word-break:normal;-webkit-hyphens:auto;hyphens:auto}body .media-library-item__metadata{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:.5rem;font-size:var(--drowl-font-size-small);color:grey;margin-top:.35em;overflow:hidden;transition-duration:15ms}body .media-library-item__language{grid-column:1/2}body .media-library-item__language,body .media-library-item__media-id{grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}body .media-library-item__language:hover,body .media-library-item__media-id:hover{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;background:#fff;position:relative;z-index:1}body .media-library-item__media-id{text-align:right}body .media-library-item__authored{border-top:1px solid var(--drowl-gray-light);padding:.5rem 1rem;margin:1rem -1rem .5rem -1rem!important}body .media-library-item .views-field-rendered-entity{flex-grow:1}body .media-library-item .media-library-item__content,body .media-library-item .media-library-item__preview-wrapper{display:flex;flex-direction:column;height:100%}body .media-library-item .media-library-item__preview{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);position:relative;border:0 none;border-radius:0;padding:0;overflow:hidden;background:var(--drowl-gray-light);box-shadow:none!important;min-height:100px}body .media-library-item .media-library-item__preview>:first-child{grid-column:span 4;max-width:none;height:165px;width:100%}body .media-library-item .media-library-item__preview img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;height:100%;width:100%}body .media-library-item .media-library-item__preview .media-library-item__preview-wrapper .media-library-item__preview{display:block}body .media-library-item .media-library-item__preview .media-library-item__preview-wrapper .media-library-item__attributes,body .media-library-item .media-library-item__preview .media-library-item__preview-wrapper .media-library-item__preview>:not(img){display:none!important}body .media-library-item .media-library-item__preview img+.field--name-thumbnail{display:none!important}body .media-library-item__preview-item{height:42px;position:relative}body .media-library-item__preview-item:first-child{background-color:#fff;grid-column:1/-1;height:auto}body .media-library-item__preview-item:first-child img{height:100%}body .media-library-item__preview-item--video-preview-image::before{font-family:drowl-media;content:"\e9b4";position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;line-height:1;width:28px;height:28px;border-radius:50%;background:var(--drowl-white-glass);color:var(--drowl-black-glass)}body .media-library-item__preview-item--video-preview-image:hover::before{opacity:.2}body .media-library-item__preview-item--thumbnail:not(:first-child){display:none}body .media-library-item__attributes{max-width:none;padding:.85em calc(var(--grid-gutter) * 2);margin:0 calc(var(--grid-gutter) * -1) calc(var(--grid-gutter) * -1);border-top:1px solid var(--drowl-gray-light);font-size:var(--drowl-font-size-small);line-height:1.25;color:var(--drowl-gray-dark);-webkit-user-select:none;-moz-user-select:none;user-select:none}body .media-library-item__info-link{position:absolute;z-index:55;padding:5px;right:5px;top:5px;line-height:1;border:0 none!important;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--drowl-info);cursor:pointer}body .media-library-item__info-link:focus{box-shadow:none}body .media-library-item__info-link .drowl-admin-ico-remove-circle{display:none}body .media-library-item__info-layer{display:none;position:absolute;top:calc(var(--grid-gutter) * -1);left:calc(var(--grid-gutter) * -1);right:calc(var(--grid-gutter) * -1);bottom:calc(var(--grid-gutter) * -1);z-index:54;padding:1rem;background:#fff;color:var(--drowl-gray-dark);overflow-y:auto;scrollbar-width:thin;cursor:default}body .media-library-item__info-layer *{font-size:var(--drowl-font-size-small,16px);margin:0}body .media-library-item__info-layer>*{margin-bottom:.5em}body .media-library-item__info-layer .field--name-name:first-child{padding-right:30px}body .media-library-item__info-layer .field--name-field-media-folder,body .media-library-item__info-layer .field--name-field-media-tags{overflow:hidden;padding-left:20px;position:relative}body .media-library-item__info-layer .field--name-field-media-folder::before,body .media-library-item__info-layer .field--name-field-media-tags::before{font-family:drowl-admin-ico;vertical-align:middle;margin-left:-20px;margin-top:.3em;float:left}body .media-library-item__info-layer .field--name-field-media-folder .field__label,body .media-library-item__info-layer .field--name-field-media-tags .field__label{display:none}body .media-library-item__info-layer .field--name-field-media-folder .field__item,body .media-library-item__info-layer .field--name-field-media-tags .field__item{background-color:var(--drowl-gray-light);color:var(--drowl-gray-dark);display:inline-block;padding:.25em .85em;border-radius:1em;font-size:12px;margin:3px 2px 3px 0}body .media-library-item__info-layer .field--name-field-media-folder::before{content:"\e9d0"}body .media-library-item__info-layer .field--name-field-media-tags::before{content:"\e9ee"}body .media-library-item--info-layer-visible .media-library-item__info-layer{display:block}body .media-library-item--info-layer-visible .media-library-item__info-link{color:#fff;background:var(--drowl-info)}body .media-library-item--info-layer-visible .media-library-item__info-link .drowl-admin-ico-info-circle{display:none}body .media-library-item--info-layer-visible .media-library-item__info-link .drowl-admin-ico-remove-circle{display:block}body .media-library-item--grid{--grid-gutter:5px;--border-radius:var(--drowl-border-radius-small);--selection-color:var(--drowl-info);--muted:#808080;width:auto!important;display:flex;flex-direction:column;border:1px solid var(--drowl-gray-light);border-radius:var(--border-radius);padding:var(--grid-gutter)}body .media-library-item--grid .media-library-item__click-to-select-checkbox{position:absolute;z-index:1;display:block;top:0;right:0;left:auto}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-item{margin:0!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean{width:29px;height:29px;box-shadow:none;border-width:0 0 1px 1px;border-radius:0;background-size:18px!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean:not(:hover):not(:checked){border-color:var(--drowl-gray-light,#eee)!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean:hover{border-color:var(--selection-color,#00f)!important}body .media-library-item--grid .media-library-item__click-to-select-checkbox .form-boolean:checked{border-color:var(--selection-color,#00f)!important}body .media-library-item--grid>.views-field-bundle{order:-99;margin:calc(var(--grid-gutter) * -1) calc(var(--grid-gutter) * -1) var(--grid-gutter);padding:var(--grid-gutter) calc(var(--grid-gutter) * 2);border-bottom:1px solid var(--drowl-gray-light);font-size:var(--drowl-font-size-small);-webkit-user-select:none;-moz-user-select:none;user-select:none}body .media-library-item--grid>.views-field-operations{order:99;margin:var(--grid-gutter) calc(var(--grid-gutter) * -1) calc(var(--grid-gutter) * -1);border-top:1px solid var(--drowl-gray-light)}body .media-library-item--grid>.views-field-operations .dropbutton-wrapper{display:flex;box-shadow:none;border-radius:0}body .media-library-item--grid>.views-field-operations .dropbutton{border-color:transparent;border-radius:0}body .media-library-item--grid>.views-field-operations .dropbutton-action>a{padding-left:var(--grid-gutter)}body .media-library-item--grid.is-hover{border-color:var(--selection-color)}body .media-library-item--grid.is-hover .media-library-item__click-to-select-checkbox .form-boolean:not(:hover):not(:checked){border-color:var(--selection-color)!important;background-color:var(--drowl-info-light)}body .media-library-item--grid.checked{border-color:var(--selection-color);outline:2px solid var(--selection-color)}body .media-library-item--grid.checked img{filter:saturate(180%)}body [class*=media-library-item--bundle] .views-field-bundle{display:flex;align-items:center;gap:7px}body [class*=media-library-item--bundle] .views-field-bundle::before{content:"\e99e";font-family:drowl-media;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:18px;color:var(--drowl-info)}body .media-library-item--bundle-video .views-field-bundle::before{content:"\e9b4"}body .media-library-item--bundle-remote-video .views-field-bundle::before{content:"\e9b4"}body .media-library-item--bundle-slideshow .views-field-bundle::before{content:"\e940"}body .media-library-item--bundle-slide .views-field-bundle::before{content:"\e93f"}body .media-library-item--bundle-image .views-field-bundle::before{content:"\e9b0"}body .media-library-item--bundle-document .views-field-bundle::before{content:"\e9ae"}body .media-library-item--bundle-audio .views-field-bundle::before{content:"\e9b2"}body .media-library-item--bundle-vector-image .views-field-bundle::before{content:"\e900"}body .media-library-views-form__header.is-sticky+.media-library-selection .media-library-item:not(.checked):not(.is-hover) iframe,body .media-library-views-form__header.is-sticky+.media-library-selection .media-library-item:not(.checked):not(.is-hover) img,body .media-library-views-form__header.is-sticky+.media-library-selection .media-library-item:not(.checked):not(.is-hover) video,body .media-library-views-form__header.is-sticky+.media-library-views-form__rows .media-library-item:not(.checked):not(.is-hover) iframe,body .media-library-views-form__header.is-sticky+.media-library-views-form__rows .media-library-item:not(.checked):not(.is-hover) img,body .media-library-views-form__header.is-sticky+.media-library-views-form__rows .media-library-item:not(.checked):not(.is-hover) video{filter:grayscale(85%)}body .block-system>.views-form [data-drupal-selector*=edit-header].is-sticky,body .view-content .views-form [data-drupal-selector*=edit-header].is-sticky{background:#fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-top:5px solid var(--drowl-info);border-top-right-radius:0;border-top-left-radius:0}body .block-system>.views-form [data-drupal-selector*=edit-header].is-sticky .form-item__label,body .view-content .views-form [data-drupal-selector*=edit-header].is-sticky .form-item__label{color:var(--drowl-info)}body .media-library-selection .media-library-item:not(.media-library-item--info-layer-visible) .media-library-item__info-link{right:auto;left:5px}body .media-library-selection .media-library-edit__link{font-size:0!important;color:transparent!important}body .media-library-add-form__preview img{position:sticky;top:0;align-self:flex-start}

 No newline at end of file

.media-library-item--grid .views-field-views-bulk-operations-bulk-form{position:absolute;z-index:1;display:block;top:0;right:0;left:auto}.media-library-item--grid .views-field-views-bulk-operations-bulk-form .form-item{margin:0!important}.media-library-item--grid .views-field-views-bulk-operations-bulk-form .form-boolean{width:29px;height:29px;box-shadow:none;border-width:0 0 1px 1px;border-radius:0;background-size:18px!important}.media-library-item--grid .views-field-views-bulk-operations-bulk-form .form-boolean:not(:hover):not(:checked){border-color:var(--drowl-gray-light,#eee)!important}.media-library-item--grid .views-field-views-bulk-operations-bulk-form .form-boolean:hover{border-color:var(--selection-color,#00f)!important}.media-library-item--grid .views-field-views-bulk-operations-bulk-form .form-boolean:checked{border-color:var(--selection-color,#00f)!important}.media-library-item--grid.is-hover .views-field-views-bulk-operations-bulk-form .form-boolean:not(:hover):not(:checked){border-color:var(--selection-color)!important;background-color:var(--drowl-info-light)}

      css/admin/drowl_media.admin.media_library.claro.min.css: { minimized: true, weight: 100 }

  dependencies:

    - drowl_media/admin

admin_views_bulk_operations:

  version: 1.x

  css:

    theme:

      css/admin/drowl_media.admin.media_library_vbo.min.css: { minimized: true, weight: 100 }

  js:

    js/drowl_media.admin.media_library_vbo.min.js: { minimized: true }

 No newline at end of file