forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
471 lines
16 KiB
CSS
471 lines
16 KiB
CSS
.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);
|
|
}
|
|
|