From d4d2aeecd6c584414ccc304dc785098395bfcd5b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 7 Nov 2024 12:16:34 +0100
Subject: [PATCH] temp duplicate styling as we shouldn't depend on another
 elements styles unless we extend it

---
 .../input-rich-media.element.ts               | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
index 24a92a2af8..c71255813e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
@@ -1,10 +1,9 @@
-import { UmbInputMediaElement } from '../input-media/index.js';
 import { UmbMediaItemRepository } from '../../repository/index.js';
 import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
 import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js';
 import type { UmbMediaItemModel } from '../../repository/index.js';
 import type { UmbUploadableItem } from '../../dropzone/types.js';
-import { customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbConfirmModal, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbId } from '@umbraco-cms/backoffice/id';
@@ -414,7 +413,42 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 		`;
 	}
 
-	static override styles = UmbInputMediaElement.styles;
+	static override styles = [
+		css`
+			:host {
+				position: relative;
+			}
+			.container {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+				grid-auto-rows: 150px;
+				gap: var(--uui-size-space-5);
+			}
+
+			#btn-add {
+				text-align: center;
+				height: 100%;
+			}
+
+			uui-icon {
+				display: block;
+				margin: 0 auto;
+			}
+
+			uui-card-media umb-icon {
+				font-size: var(--uui-size-8);
+			}
+
+			uui-card-media[drag-placeholder] {
+				opacity: 0.2;
+			}
+			img {
+				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
+				background-size: 10px 10px;
+				background-repeat: repeat;
+			}
+		`,
+	];
 }
 
 export default UmbInputRichMediaElement;