Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
drupal/core/themes/claro/css/theme/media-library.css

898 lines
24 KiB
CSS
Raw Blame History

/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file media-library.pcss.css
* Styling for Media Library.
*/
/**
* Negative margins compensate for modal dialog padding and compensate for
* positioning that would otherwise hide the active tab indicator on the left.
*/
.media-library-wrapper {
display: flex;
margin: -1rem -1.5rem -1rem -1rem; /* LTR */
}
[dir="rtl"] .media-library-wrapper {
margin-right: -1em;
margin-left: -1.5em;
}
.media-library-wrapper .messages-list,
.media-library-wrapper .messages {
margin-top: 0;
margin-bottom: 1.5rem;
}
.media-library-menu {
position: relative;
display: block;
width: 20em;
margin: 0;
padding-top: 0.5rem;
list-style: none;
color: #222330;
}
[dir="rtl"] .media-library-menu {
margin: 0;
}
.media-library-menu__item {
overflow: hidden;
margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
padding: 0.5rem 0;
}
[dir="rtl"] .media-library-menu__item {
margin-right: -0.5rem;
margin-left: -1px;
}
.media-library-menu__item::before {
z-index: 0; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
display: block;
width: 100%;
margin-top: -1px;
content: "";
border-top: 1px solid #d4d4d8;
}
.media-library-menu__link {
position: relative;
display: block;
margin-top: -1px;
padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 0.25rem); /* LTR */
text-decoration: none;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #222330;
border: 1px solid transparent;
border-width: 1px 0 1px 4px; /* LTR */
border-radius: 2px 0 0 2px; /* LTR */
}
[dir="rtl"] .media-library-menu__link {
padding-right: calc(1.5rem - 0.25rem);
padding-left: 0.75rem;
border-width: 1px 4px 1px 0;
border-radius: 0 2px 2px 0;
}
@media screen and (-ms-high-contrast: active) {
.media-library-menu__link {
border-color: transparent;
}
}
/* Menu link states. */
.media-library-menu__link:focus {
z-index: 3; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
text-decoration: none;
box-shadow: none;
}
.media-library-menu__link:hover {
text-decoration: none;
color: #003cc5;
/* These borders are necessary to replace the dividing lines while in the hover state. */
border-top: 1px solid #d4d4d8;
border-bottom: 1px solid #d4d4d8;
background: #f0f5fd;
}
/* This pseudo element provides the background for the hover state. */
.media-library-menu__link::before {
position: absolute;
z-index: -1; /* This should be on a lower level than the menu-item separator lines. */
top: -1px;
right: 0; /* LTR */
bottom: -1px;
left: -0.25rem; /* LTR */
content: "";
pointer-events: none;
background-clip: padding-box;
}
[dir="rtl"] .media-library-menu__link::before {
right: -0.25rem;
left: 0;
}
.media-library-menu__link:focus::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: -1px -0.25rem;
content: "";
pointer-events: none;
border: 3px solid #26a769;
border-radius: 2px;
}
.media-library-menu__link.active {
z-index: 2; /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
color: #003cc5;
border-color: #dedfe4 transparent;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.media-library-menu__link.active:hover {
color: #0036b1;
background-color: #f0f5fd;
}
.media-library-menu__link.active::before {
z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
border-left: 4px solid #003cc5; /* LTR */
border-radius: 2px 0 0 2px; /* LTR */
}
[dir=rtl] .media-library-menu__link.active::before {
border-right: 4px solid #003cc5;
border-left: 0;
border-radius: 0 2px 2px 0;
}
.media-library-menu__link.active:hover::before {
background: none;
}
.media-library-content {
width: 100%;
padding: 1em;
outline: none;
}
.media-library-menu + .media-library-content {
z-index: 0;
border-left: 1px solid #dedfe4; /* LTR */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
[dir="rtl"] .media-library-menu + .media-library-content {
border-right: 1px solid #dedfe4;
border-left: 0;
}
/* Generic media add form styles. */
.media-library-add-form--without-input .form-item {
margin-right: 1rem;
}
/**
* Remove outline from added media list.
*
* The added media list receives focus after adding new media, but since it is
* not an interactive element, it does not need an outline.
*/
.media-library-add-form__added-media {
margin: 0;
padding: 0;
outline: none;
}
/**
* This Media Library form is an exception to the extrasmall button pattern.
* Additional padding is needed to accommodate the remove button icon. The
* margin is adjusted for alignment within the media library dialog.
*/
.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
margin: 0.5rem 0; /* LTR */
/* Left padding is double the background size of the button icon. */
padding: calc(0.25rem - 1px) calc(0.75rem - 1px) calc(0.25rem - 1px) 1.5rem;
}
/* This is needed to override the default extrasmall button left margin. */
[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
margin-left: 0;
}
.media-library-add-form__input-wrapper {
padding: 0.5rem 1.5rem 1.5rem 1.5rem;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Style the media add upload form. */
.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
margin-bottom: 0;
}
.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
display: block;
}
/* Adjust the focus border on this element so it is not too close to buttons. */
.media-library-add-form__added-media:focus {
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #26a769;
}
.media-library-add-form .file-upload-help {
margin: 0.5rem 0 0;
}
/* Align remove buttons with with Save button and compensate for IE scrollbar and focus padding. */
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ui-dialog > .ui-dialog-content {
padding-right: calc(0.75rem - 0.4375rem);
}
[dir="rtl"] .ui-dialog > .ui-dialog-content {
padding-left: calc(0.75rem - 0.4375rem);
}
}
/* Style the media add oEmbed form. */
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: flex;
align-items: center;
}
@media screen and (max-width: 37.5em) {
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: block;
}
}
.media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {
margin-bottom: 0;
}
.media-library-add-form-oembed-url {
width: 100%;
}
/* Media add form selection styles. */
.media-library-add-form__selected-media {
margin-top: 1em;
}
/* Change to padding to account for the negative margin for flex grid. */
.media-library-add-form__selected-media .details-wrapper {
padding: 0 0.625rem 1em 0.625rem;
}
.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
height: 6.25rem;
}
/* Generic media library view styles. */
.media-library-select-all {
flex-basis: 100%;
width: 100%;
margin: 0.625rem 0.5rem;
}
.media-library-select-all input {
margin-right: 0.625rem;
}
[dir="rtl"] .media-library-select-all input {
margin-left: 0.625rem;
}
.media-library-views-form,
.media-library-selection,
.media-library-add-form__selected-media .details-wrapper,
.media-library-view .form--inline {
display: flex;
flex-wrap: wrap;
}
.media-library-views-form > .form-actions {
flex-basis: 100%;
}
.media-library-views-form__header {
flex-basis: 100%;
}
.media-library-views-form__header .form-item {
margin-right: 0.5rem; /* @TODO RTL? */
}
.media-library-views-form__rows {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
margin: 0 -0.5rem;
}
/**
* Override the table display of the visually hidden labels.
*
* The width, height and overflow properties in the styles for the
* .visually-hidden class do not work correctly if the element has a table
* display.
*/
.media-library-item label {
display: inline-block;
}
/* Media library widget view styles. */
.media-library-wrapper .media-library-view {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.media-library-wrapper .view-header {
align-self: flex-end;
margin: 1em 0;
text-align: right; /* LTR */
}
[dir="rtl"] .media-library-wrapper .view-header {
text-align: left;
}
.media-library-wrapper .media-library-view .view-filters,
.media-library-wrapper .media-library-view .view-content {
flex: 0 0 100%;
}
.media-library-wrapper .views-display-link {
margin: 0;
padding-left: 1.375rem; /* LTR */
color: #333;
font-size: 0.9375rem;
line-height: 1rem;
}
[dir="rtl"] .media-library-wrapper .views-display-link {
padding-right: 1.375rem;
padding-left: 0;
}
.media-library-wrapper .views-display-link.is-active {
font-weight: bold;
}
.media-library-wrapper .views-display-link-widget {
margin-right: 0.9375rem;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9zm-8 0h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3A1.5 1.5 0 0 1 2.5 9zm8-8h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3A1.5 1.5 0 0 1 10.5 1zm-8 0h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3A1.5 1.5 0 0 1 2.5 1z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
}
[dir="rtl"] .media-library-wrapper .views-display-link-widget {
background-position: right 0;
}
.media-library-wrapper .views-display-link-widget_table {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M7 15a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 9.5a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 4a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zM2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
}
[dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
background-position: right 0;
}
/**
* Style the media library grid items.
*/
.media-library-item {
position: relative;
}
/**
* Ajax throbbers inside a media library item.
*/
.media-library-item .ajax-progress.ajax-progress.ajax-progress {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
box-sizing: border-box;
width: 3rem; /* 56px */
height: 3rem;
margin: -1.5rem;
border: 1px solid rgba(216, 217, 224, 0.8);
border-radius: 3.5rem;
background: #fff;
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}
.media-library-item .ajax-progress__throbber {
position: absolute;
top: 50%;
left: 50%;
width: 1.75rem;
height: 1.75rem;
margin: -0.875rem;
border: 3px solid #003cc5;
border-right: 3px dotted transparent;
}
.media-library-item .ajax-progress__message {
display: none;
}
.media-library-item--grid {
justify-content: center;
box-sizing: border-box;
width: 50%;
padding: 0.5rem;
vertical-align: top;
outline: none;
background: #fff;
}
.media-library-item--grid:before {
position: absolute;
top: 0.4375rem;
left: 0.4375rem;
width: calc(100% - 1rem);
height: calc(100% - 1rem);
content: "";
transition: border-color 0.2s, color 0.2s, background 0.2s;
pointer-events: none;
border: 1px solid #dbdbdb;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/**
* The media library grid item focus border is moved to a child element to
* improve padding.
*/
.media-library-item--grid:focus {
outline: none;
box-shadow: none;
}
.media-library-item--grid:focus .media-library-item__preview-wrapper {
outline: 2px dotted transparent;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
}
/* Media library widget weight field styles. */
.media-library-item--grid .form-item {
margin: 0.75em;
}
/* The selected items in the add form should be shown a bit smaller. */
.media-library-add-form__selected-media .media-library-item--small {
width: 33.3%;
}
.media-library-widget-modal .ui-dialog-buttonpane {
display: flex;
align-items: center;
}
.media-library-widget-modal .ui-dialog-buttonpane .form-actions {
flex: 1;
}
/**
* By default, the dialog is too narrow to be usable.
* @see Drupal.ckeditor.openDialog()
*/
.ui-dialog--narrow.media-library-widget-modal {
max-width: 75%;
}
@media screen and (min-width: 45em) {
.media-library-item--grid {
width: 33.3%;
}
/* Change the width for the modal and widget since there is less space. */
.media-library-widget-modal .media-library-item--grid,
.media-library-selection .media-library-item--grid {
width: 50%;
}
/* The selected items in the add form should be shown a bit smaller. */
.media-library-add-form__selected-media .media-library-item--small {
width: 25%;
}
}
@media screen and (min-width: 60em) {
.media-library-item--grid {
width: 25%;
}
/* Change the width for the modal and widget since there is less space. */
.media-library-widget-modal .media-library-item--grid,
.media-library-selection .media-library-item--grid {
width: 33.3%;
}
/* The selected items in the add form should be shown a bit smaller. */
.media-library-add-form__selected-media .media-library-item--small {
width: 16.6%;
}
}
@media screen and (min-width: 77em) {
.media-library-item--grid {
width: 16.6%;
}
/* Change the width for the modal and widget since there is less space. */
.media-library-widget-modal .media-library-item--grid,
.media-library-selection .media-library-item--grid {
width: 25%;
}
/* The selected items in the add form should be shown a bit smaller. */
.media-library-add-form__selected-media .media-library-item--small {
width: 16.6%;
}
}
.media-library-item--grid .field--name-thumbnail {
overflow: hidden;
text-align: center;
background-color: #ebebeb;
}
.media-library-item--grid .field--name-thumbnail img {
height: 11.25rem;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center center;
object-position: center center;
}
.media-library-item--grid.is-hover:before,
.media-library-item--grid.checked:before,
.media-library-item--grid.is-focus:before {
top: 0.3125rem;
left: 0.3125rem;
border-width: 3px;
border-radius: 0.1875rem;
}
.media-library-item--grid.is-hover:before,
.media-library-item--grid.checked.is-hover:before {
border-color: #0036b1;
}
.media-library-item--grid.is-focus:before {
border-color: #26a769;
}
.media-library-item--grid.checked:before {
border-color: #5a8bed;
}
.media-library-item--grid .form-boolean--type-checkbox:checked {
border-color: #5a8bed;
background-color: #5a8bed;
}
.media-library-item__click-to-select-checkbox {
position: absolute;
z-index: 1;
top: 1rem;
left: 1rem; /* LTR */
display: block;
}
[dir="rtl"] .media-library-item__click-to-select-checkbox {
right: 1rem;
left: auto;
}
.media-library-item__click-to-select-checkbox input {
width: 1.25rem;
height: 1.25rem;
}
.media-library-item__click-to-select-checkbox .form-item {
margin: 0;
}
.media-library-item__click-to-select-trigger {
overflow: hidden;
height: 100%;
cursor: pointer;
}
/* Media library item table styles. */
.media-library-item--table img {
max-width: 6.25rem;
height: auto;
}
/* Media library entity view display styles. */
.media-library-item__preview {
padding-bottom: 2.125rem;
}
.field--widget-media-library-widget .media-library-item__preview {
cursor: move;
}
.field--widget-media-library-widget .media-library-item__preview img {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
cursor: inherit;
}
.media-library-item__status {
position: absolute;
top: 2.5rem;
left: 0.3125rem; /* LTR */
padding: 0.3125rem 0.625rem;
pointer-events: none;
color: #e4e4e4;
background: #666;
font-size: 0.75rem;
font-style: italic;
}
[dir="rtl"] .media-library-item__status {
right: 0.3125rem;
left: auto;
}
.media-library-item__attributes {
position: absolute;
bottom: 0;
display: block;
overflow: hidden;
max-width: calc(100% - 0.625rem);
max-height: calc(100% - 3.125rem);
padding: 0.3125rem;
background: white;
}
.media-library-item__name {
display: block;
overflow: hidden;
margin: 0.25rem 0.5rem;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.875rem;
}
.media-library-item__attributes:hover .media-library-item__name,
.media-library-item--grid.is-focus .media-library-item__name,
.media-library-item--grid.checked .media-library-item__name {
white-space: normal;
}
.media-library-item__type {
color: #696969;
font-size: 0.75rem;
}
.media-library-item--disabled {
pointer-events: none;
opacity: 0.5;
}
/* Media library widget styles. */
.media-library-widget {
position: relative;
}
.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
position: absolute;
top: 0.75rem;
right: 1rem; /* LTR */
text-decoration: none;
}
[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
right: auto;
left: 1rem;
}
/* Add negative margin for flex grid. */
.media-library-selection {
margin: 1em -0.5rem;
}
/**
* Media library widget edit and delete button styles.
*
* We have to override the .button styles since buttons make heavy use of
* background and border property changes.
*/
.media-library-item__edit,
.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
position: absolute;
z-index: 1;
top: 0.625rem;
overflow: hidden;
width: 1.5rem;
height: 1.5rem;
margin: 0.3125rem;
padding: 0;
transition: 0.2s border-color;
color: transparent;
background-size: 0.75rem;
text-shadow: none;
font-size: 0;
}
.media-library-item__edit {
right: 2.5rem; /* LTR */
}
[dir="rtl"] .media-library-item__edit {
right: auto;
left: 2.5rem;
}
.media-library-item__remove {
right: 0.625rem; /* LTR */
}
[dir="rtl"] .media-library-item__remove {
right: auto;
left: 0.625rem;
}
.media-library-item__edit {
/* !important to override button class border. */
border: 1px solid #d4d4d8 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 0.75rem;
}
.media-library-item__edit:active {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
}
.media-library-item__remove,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
/* !important to override button class border. */
border: 1px solid #d4d4d8 !important;
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 0.75rem;
}
.media-library-item__remove:active,
.media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active {
/* !important to override button class border. */
border-color: #003cc5 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
}
/* Style the added media item container. */
.media-library-add-form__media {
position: relative;
display: flex;
border-bottom: 1px solid #c0c0c0;
}
/* Do not show the bottom border and padding for the last item. */
.media-library-add-form__media:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.media-library-add-form__preview {
display: flex;
align-items: center;
justify-content: center;
width: 13.75rem;
margin-right: 1.25rem; /* LTR */
background: rgba(243, 244, 249, 0.4);
}
[dir="rtl"] .media-library-add-form__preview {
margin-right: 0;
margin-left: 1.25rem;
}
.media-library-add-form__fields {
flex-grow: 1;
}
.media-library-add-form__remove-button {
position: absolute;
right: 0; /* LTR */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 0.5rem center;
background-size: 0.75rem;
}
[dir="rtl"] .media-library-add-form__remove-button {
right: auto;
left: 0;
}
.media-library-add-form__remove-button.button:disabled {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%238e929c' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
}
/* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */
.views-live-preview .media-library-view div.views-row + div.views-row {
margin-top: 0;
}
Reference in New Issue View Git Blame Copy Permalink