.media-library-edit__link, .media-library-item .media-library-item__edit, .media-library-item .media-library-item__remove, .media-library-item .media-library-item__remove.button { border-color: var(--gin-border-color) !important; } .media-library-edit__link:link, .media-library-edit__link:hover, .media-library-edit__link:focus, .media-library-edit__link:active, .media-library-edit__link:not(:hover):not(:checked), .media-library-item .media-library-item__edit:link, .media-library-item .media-library-item__edit:hover, .media-library-item .media-library-item__edit:focus, .media-library-item .media-library-item__edit:active, .media-library-item .media-library-item__edit:not(:hover):not(:checked), .media-library-item .media-library-item__remove:link, .media-library-item .media-library-item__remove:hover, .media-library-item .media-library-item__remove:focus, .media-library-item .media-library-item__remove:active, .media-library-item .media-library-item__remove:not(:hover):not(:checked), .media-library-item .media-library-item__remove.button:link, .media-library-item .media-library-item__remove.button:hover, .media-library-item .media-library-item__remove.button:focus, .media-library-item .media-library-item__remove.button:active, .media-library-item .media-library-item__remove.button:not(:hover):not(:checked) { border-color: transparent !important; } .media-library-edit__link:hover, .media-library-edit__link:focus, .media-library-edit__link:active, .media-library-item .media-library-item__edit:hover, .media-library-item .media-library-item__edit:focus, .media-library-item .media-library-item__edit:active, .media-library-item .media-library-item__remove:hover, .media-library-item .media-library-item__remove:focus, .media-library-item .media-library-item__remove:active, .media-library-item .media-library-item__remove.button:hover, .media-library-item .media-library-item__remove.button:focus, .media-library-item .media-library-item__remove.button:active { box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus) !important; } .media-library-edit__link, .media-library-edit__link:hover, .media-library-edit__link:focus, .media-library-edit__link:active, .media-library-item .media-library-item__edit, .media-library-item .media-library-item__edit:hover, .media-library-item .media-library-item__edit:focus, .media-library-item .media-library-item__edit:active, .media-library-item .media-library-item__remove, .media-library-item .media-library-item__remove:hover, .media-library-item .media-library-item__remove:focus, .media-library-item .media-library-item__remove:active, .media-library-item .media-library-item__remove.button, .media-library-item .media-library-item__remove.button:hover, .media-library-item .media-library-item__remove.button:focus, .media-library-item .media-library-item__remove.button:active { width: 32px; height: 32px; margin: var(--gin-spacing-s); background-color: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); box-sizing: border-box; } .media-library-edit__link, .media-library-item .media-library-item__edit { top: .625rem; background-image: url("../../media/sprite.svg#media-edit-view"); background-size: .75rem .75rem; } [dir="ltr"] .media-library-edit__link, [dir="ltr"] .media-library-item .media-library-item__edit { right: 3.125rem; } [dir="rtl"] .media-library-edit__link, [dir="rtl"] .media-library-item .media-library-item__edit { left: 3.125rem; } .media-library-item .media-library-item__remove, .media-library-item .media-library-item__remove.button { background-image: url("../../media/sprite.svg#media-remove-view"); background-size: .75rem .75rem; } .media-library-item { background: none; } .media-library-item img { background-color: var(--gin-pattern-fallback); background-size: calc(var(--gin-pattern-square) * 2) calc(var(--gin-pattern-square) * 2); } [dir="ltr"] .media-library-item img { 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%); background-position: 0 0, var(--gin-pattern-square) var(--gin-pattern-square), var(--gin-pattern-square) var(--gin-pattern-square), 0 0; } [dir="rtl"] .media-library-item img { 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%); background-position: 100% 0, var(--gin-pattern-square) var(--gin-pattern-square), var(--gin-pattern-square) var(--gin-pattern-square), 100% 0; } @media screen and (-ms-high-contrast: active) { .media-library-item img { background: none; } } .media-library-item--grid { border-radius: var(--gin-border-xl); } .media-library-item--grid::before, .media-library-item--grid.is-hover::before, .media-library-item--grid.checked::before, .media-library-item--grid.is-focus::before { display: none; } .media-library-item--grid.sortable-chosen { background: var(--gin-bg-layer); box-shadow: 0 0 48px rgba(0, 0, 0, .075) !important; outline: none; } .media-library-item--grid.sortable-chosen .media-library-item__remove { display: none; } .media-library-item--grid.sortable-ghost { border: 2px dashed var(--gin-border-color); } .media-library-item__content { display: flex; height: 100%; } .media-library-item__content article { width: 100%; } .media-library-item__click-to-select-trigger { overflow: inherit; } .media-library-item__name { color: var(--gin-color-text); word-break: break-all; text-overflow: initial; white-space: initial; overflow: visible; margin: 0; } .media-library-item__attributes { position: static; padding: var(--gin-spacing-xs); background: none; } .media-library-item:focus .media-library-item__preview-wrapper { box-shadow: none; } .media-library-item .media-library-item__preview { position: relative; padding-bottom: 100%; border: 1px solid var(--gin-border-color); border-radius: var(--gin-border-xl); overflow: hidden; } .media-library-item .media-library-item__preview .field img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; } [dir="ltr"] .media-library-item .media-library-item__preview .field img { left: 0; } [dir="rtl"] .media-library-item .media-library-item__preview .field img { right: 0; } .media-library-item.is-hover .media-library-item__preview { border-color: var(--gin-color-text); box-shadow: 0 0 0 2px var(--gin-color-text); } .media-library-item.checked .media-library-item__preview, .media-library-item.is-active .media-library-item__preview { border-color: var(--gin-color-primary); box-shadow: 0 0 0 2px var(--gin-color-primary); } .media-library-item__click-to-select-checkbox .form-boolean { width: 29px; height: 29px; border-radius: var(--gin-border-xs); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); } .media-library-item__click-to-select-checkbox .form-boolean, .gin--dark-mode .media-library-item__click-to-select-checkbox .form-boolean { border-radius: var(--gin-border-xs); } .media-library-item__click-to-select-checkbox .form-boolean:not(:checked), .gin--dark-mode .media-library-item__click-to-select-checkbox .form-boolean:not(:checked) { background-color: white; } .media-library-item__click-to-select-checkbox .form-boolean:not(:hover):not(:checked), .gin--dark-mode .media-library-item__click-to-select-checkbox .form-boolean:not(:hover):not(:checked) { border-color: transparent !important; } .media-library-item__click-to-select-checkbox .form-boolean:focus, .gin--dark-mode .media-library-item__click-to-select-checkbox .form-boolean:focus { box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus) !important; } .media-library-item__click-to-select-checkbox .form-boolean:checked, .gin--dark-mode .media-library-item__click-to-select-checkbox .form-boolean:checked { background-color: var(--gin-color-primary); border-color: var(--gin-color-primary); box-shadow: none; } .media-library-item .form-item { margin: var(--gin-spacing-xs); } .media-library-item .ajax-progress { transform: translateY(-50%); } .media-library-views-form { flex-wrap: initial; } fieldset.media-library-widget .media-library-widget__toggle-weight { font-size: var(--gin-font-size-xxs); padding: var(--gin-spacing-xs); } fieldset.media-library-widget .media-library-edit__link, fieldset.media-library-widget .media-library-item .media-library-item__edit, fieldset.media-library-widget .media-library-item .media-library-item__remove, fieldset.media-library-widget .media-library-item .media-library-item__remove.button { margin: var(--gin-spacing-xs); } .media-library-widget-empty-text { color: var(--gin-color-text-light); margin: 0 0 calc(var(--gin-spacing-xs) * -1) 0; } .media-library-open-button { margin-top: 0; } .media-library-add-form__preview { background: var(--gin-bg-app); } .media-library-add-form__input-wrapper { padding: 0; border: none; background: transparent; box-shadow: none; } .media-library-add-form__input-wrapper .form-item--upload { margin-top: 0; } [dir="ltr"] .media-library-add-form__input-wrapper .form-item--upload { margin-right: 0; } [dir="rtl"] .media-library-add-form__input-wrapper .form-item--upload { margin-left: 0; } .media-library-add-form__input-wrapper .dropzone-enable .button { margin: 0; } .media-library-menu { border-color: var(--gin-border-color); background-color: var(--gin-bg-app); } .media-library-menu__link { color: var(--gin-color-text); text-shadow: none; border-color: var(--gin-border-color); background-color: transparent; } .media-library-menu__link:active, .media-library-menu__link:hover, .media-library-menu__link:focus, .media-library-menu__link.active, .media-library-menu__link:hover:focus, .media-library-menu__link.active:hover, .media-library-menu__link.active:focus { color: var(--gin-color-primary); text-shadow: none; background-color: var(--gin-bg-layer); border-bottom: 1px solid var(--gin-border-color); box-shadow: none; } [dir="ltr"] .media-library-menu__link:active, [dir="ltr"] .media-library-menu__link:hover, [dir="ltr"] .media-library-menu__link:focus, [dir="ltr"] .media-library-menu__link.active, [dir="ltr"] .media-library-menu__link:hover:focus, [dir="ltr"] .media-library-menu__link.active:hover, [dir="ltr"] .media-library-menu__link.active:focus { border-right: 0 none; } [dir="rtl"] .media-library-menu__link:active, [dir="rtl"] .media-library-menu__link:hover, [dir="rtl"] .media-library-menu__link:focus, [dir="rtl"] .media-library-menu__link.active, [dir="rtl"] .media-library-menu__link:hover:focus, [dir="rtl"] .media-library-menu__link.active:hover, [dir="rtl"] .media-library-menu__link.active:focus { border-left: 0 none; } [dir="ltr"] .media-library-menu__link.active::before { border-left-color: var(--gin-color-primary); } [dir="rtl"] .media-library-menu__link.active::before { border-right-color: var(--gin-color-primary); } .media-library-menu__link:focus::after { border: var(--gin-border-xs) solid var(--gin-color-focus); } [dir="ltr"] + .media-library-content { border-left: 1px solid var(--gin-border-color); } [dir="rtl"] + .media-library-content { border-right: 1px solid var(--gin-border-color); } .media-library-view .view-header { padding: var(--gin-spacing-m); color: var(--gin-color-text); text-decoration: none; background: var(--gin-bg-layer3); border-radius: var(--gin-border-m); box-shadow: var(--gin-shadow-l1); } .media-library-wrapper .views-display-link { position: relative; color: var(--gin-color-text); text-decoration: none; background-image: none; white-space: nowrap; } .media-library-wrapper .views-display-link::before { content: ""; display: inline-block; width: 16px; height: 16px; position: absolute; top: 1px; background-color: var(--gin-color-text); } [dir="ltr"] .media-library-wrapper .views-display-link::before { left: 0; } [dir="rtl"] .media-library-wrapper .views-display-link::before { right: 0; } .media-library-wrapper .views-display-link.is-active { color: var(--gin-color-primary); } .media-library-wrapper .views-display-link.is-active::before { background-color: var(--gin-color-primary); } .media-library-wrapper .views-display-link-widget::before { -webkit-mask-image: url("../../media/sprite.svg#grid-view"); mask-image: url("../../media/sprite.svg#grid-view"); } .media-library-wrapper .views-display-link-widget_table::before { -webkit-mask-image: url("../../media/sprite.svg#list-view"); mask-image: url("../../media/sprite.svg#list-view"); } .media-library-content { border-color: var(--gin-border-color); } [dir="ltr"] .media-library-content { border-left: 0 none; } [dir="rtl"] .media-library-content { border-right: 0 none; } .media-library-select-all { color: var(--gin-color-title); padding: 1rem; margin-top: 0; background: var(--gin-bg-layer); border-bottom-left-radius: var(--gin-border-m); border-bottom-right-radius: var(--gin-border-m); box-sizing: border-box; } [dir="ltr"] .media-library-select-all { margin-left: 0; } [dir="rtl"] .media-library-select-all { margin-right: 0; } @media (min-width: 61em) { .media-library-select-all { z-index: 98; position: sticky; top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)); } } .views-field-thumbnail__target-id img { vertical-align: middle; } .gin--dark-mode .ui-dialog .views-exposed-form, .gin--dark-mode .ui-dialog .views-form { background: var(--gin-bg-layer2); } @media (min-width: 90em) { .media-library-widget-modal .media-library-item--grid { width: 20%; } } .media-library-widget-modal .ui-dialog-buttonpane .form-actions { display: flex; flex-direction: row; justify-content: flex-end; white-space: nowrap; margin-top: 0; } [dir="ltr"] .media-library-widget-modal .ui-dialog-buttonpane .form-actions .button:not(:last-child) { margin-right: var(--gin-spacing-xs); } [dir="rtl"] .media-library-widget-modal .ui-dialog-buttonpane .form-actions .button:not(:last-child) { margin-left: var(--gin-spacing-xs); } .media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count { flex-grow: 1; } [dir="ltr"] .media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count { margin-left: 0; } [dir="rtl"] .media-library-widget-modal .ui-dialog-buttonpane .media-library-selected-count { margin-right: 0; } @media (min-width: 80em) { .media-library-selection .media-library-item--grid { width: 20%; } } .layout-region-node-secondary .media-library-selection .media-library-item--grid { width: auto; } .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item { padding: var(--gin-spacing-xl) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs)) var(--gin-spacing-m) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs)); border: 1px solid var(--gin-border-color); } .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item > legend { font-weight: var(--gin-font-weight-heavy); position: relative; top: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs)); transform: translateY(50%); } .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item > legend::before { content: ""; display: block; width: 100%; height: 1px; position: absolute; top: calc((var(--gin-spacing-l) - var(--gin-spacing-xxs)) * -1); background: var(--gin-border-color); } [dir="ltr"] .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item > legend::before { left: 0; } [dir="rtl"] .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item > legend::before { right: 0; } .field--name-field-media.field--widget-entity-reference-autocomplete fieldset.form-item > .form-item h4 { margin-bottom: 0; } .media-library-selected-count { color: var(--gin-color-text-light); }