diff --git a/css/plugins/drupalmedia/ckeditor.drupalmedia.css b/css/plugins/drupalmedia/ckeditor.drupalmedia.css index 82923ff..0232f35 100644 --- a/css/plugins/drupalmedia/ckeditor.drupalmedia.css +++ b/css/plugins/drupalmedia/ckeditor.drupalmedia.css @@ -21,14 +21,6 @@ drupal-media { text-align: center; } -/** - * Fix positioning without delete button. Can be removed with this issue: - * @see https://www.drupal.org/project/drupal/issues/3074859 - */ -drupal-media .media-library-item__edit { - right: 10px; -} - /** * Allow alignment to display in CKEditor. */ @@ -39,3 +31,36 @@ drupal-media[data-align=right] { drupal-media[data-align=center] { display: flex; } + +/** + * Embedded media edit button styles. + * + * We have to override the .button styles since buttons make heavy use of + * background and border property changes. + */ +drupal-media .media-library-item__edit, +drupal-media .media-library-item__edit:hover, +drupal-media .media-library-item__edit:focus { + position: absolute; + z-index: 1; + top: 10px; + overflow: hidden; + width: 21px; + height: 21px; + margin: 5px; + padding: 0; + transition: 0.2s border-color; + color: transparent; + border: 2px solid #ccc; + border-radius: 20px; + background-size: 13px; + text-shadow: none; + font-size: 0; + cursor: pointer; +} + +drupal-media .media-library-item__edit { + right: 10px; + background: url("../../../../../../core/misc/icons/787878/pencil.svg") #fff center no-repeat; + background-size: 13px; +}