fixes to modal commit

files/assets/css/main.css

@@ -5854,7 +5854,7 @@ html {
 	padding: 12px;
 	padding-bottom: 4px;
 }
-*:target {
+:not(.modal):target {
 	background: rgba(var(--primary_rgb), 0.15) !important;
 	padding: 12px;
 	padding-bottom: 4px;
@@ -7684,6 +7684,6 @@ ul {
 	display: none;
 }
 
-*:target {
+:not(.modal):target {
 	scroll-margin-top: 100px;
 }

files/assets/css/themes/classic.css

@@ -180,7 +180,7 @@ blockquote a {
 .unread {
 	background-color: #d9d9d9 !important;
 }
-*:target {
+:not(.modal):target {
 	background: rgba(var(--primary_rgb), 0.2) !important;
 }
 

files/assets/css/themes/dark.css

@@ -101,7 +101,7 @@ pre {
 	color: #bbb !important;
 }
 
-*:target {
+:not(.modal):target {
 	background: rgba(var(--primary_rgb), 0.2) !important;
 }
 

files/assets/css/themes/light.css

@@ -79,7 +79,7 @@ blockquote {
 .unread {
 	background: #dddddd !important;
 }
-*:target {
+:not(.modal):target {
 	background: rgba(var(--primary_rgb), 0.2) !important;
 }
 

files/assets/js/core.js

@@ -695,11 +695,13 @@ function enablePushNotifications() {
 }
 
 const body = document.getElementsByTagName('body')[0]
-function body_fix() {
+addEventListener('hashchange', () => {
 	if (location.hash.startsWith("#m-"))
 		body.classList.add('modal-open')
 	else
 		body.classList.remove('modal-open')
+})
+
+if (location.hash.startsWith("#m-")) {
+	history.replaceState({}, '', location.href.split('#')[0])
 }
-body_fix()
-addEventListener('hashchange', body_fix)

files/templates/modals/expanded_image.html

@@ -1,8 +1,11 @@
+
 <div class="modal" id="m-expandImage" tabindex="-1">
 	<div class="modal-dialog modal-dialog-centered">
-		<div class="modal-body text-center p-0">
+		<div class="modal-content" style="background-color: transparent !important; border: none !important;">
 			<a rel="nofollow noopener" target="_blank" id="desktop-expanded-image-wrap-link">
-				<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
+				<div class="modal-body text-center p-0">
+					<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
+				</div>
 			</a>
 		</div>
 	</div>