How to disable Property Editor on reader mode?

[noob-sidian]

What I’m trying to do

I want to make the Property Editor read-only when using the reading view? Even when I’m in reading view, I can still edit the properties.

Things I have tried

I’ve tried looking in the settings but I can’t find anything there.

[harr]

Feature request? I also find Obsidian’s behavior illogical. Read-only should be read-only, but it isn’t.

[noob-sidian]

Not necessarily a feature request because maybe I can disable it using a CSS snippet or something but have it only take effect in reading view

I just don’t know what the CSS would be.

[harr]

For me it is a feature request. I really want the devs to implement a different default.

There is already a feature request:

Properties: Prevent/Lock Changes in Reading Mode

Use case or problem While in reading mode, changes can still be made to the properties section. It is easy to accidentally click “x” on a tag or list item for example and thus unintentionally change note content. I could see this being a larger issue on mobile with accidental touches. Proposed solution Locking the fields while in reading mode would prevent this.

[harr]

Here’s a starting point for CSS. It makes properties at least a bit less editable. Better ideas welcome!

.markdown-reading-view .metadata-content {
	pointer-events: none;
}

.markdown-reading-view .metadata-content .multi-select-input,
.markdown-reading-view .metadata-content .metadata-add-button {
	display: none;
}

[noob-sidian]

That works great, I edited it so that it also hides the X button beside the tags.

.markdown-reading-view .metadata-content {
	pointer-events: none;
}

.markdown-reading-view .metadata-content .multi-select-input,
.markdown-reading-view .metadata-content .multi-select-pill-remove-button,
.markdown-reading-view .metadata-content .metadata-add-button {
	display: none;
}

Edit:
I had to mark uncheck the “Marked as Solution” on your answer because this apparently also stops the tags from being clickablee.

[harr]

Catching a few more cases. Do you have an idea how to disable plain text properties .metadata-input-longtext?

.markdown-reading-view .metadata-content {
	pointer-events: none;
}

.markdown-reading-view .metadata-content .multi-select-input,
.markdown-reading-view .metadata-content .multi-select-pill-remove-button,
.markdown-reading-view .metadata-content .metadata-add-button {
	display: none;
}

/* Make tags clickable */
.markdown-reading-view .metadata-content .multi-select-pill-content {
	pointer-events: auto;
	padding-right: .7em;
}

/* Make links clickable */
.markdown-reading-view .metadata-content .metadata-link {
	pointer-events: auto;
}

[ariehen]

// moved to custom CSS

[noob-sidian]

This works amazingly, thanks!