Fix lightbox close button on narrow screens. (#4144)

- Fixes black-on-black hover in all themes.
- Fixes non-rounded lightbox border in Bootstrap 5 themes.
- Improves size and position in Bootstrap 5 themes.
- Ensures that lightbox title doesn't overlap the close button.
- Ensures consistent focus outline on the close button.

themes/bootstrap3/less/components/lightbox.less

@@ -5,6 +5,10 @@
   margin-inline: auto;
   margin-block: 1rem;
   padding-inline: 1rem;
+
+  #lightbox-title {
+    margin-right: 1.5rem;
+  }
 }
 @media (min-width: 768px) {
   #modal .modal-dialog {
@@ -17,6 +21,10 @@
 /* <#LESS */
     min-width: 600px;
     padding: 0;
+
+    #lightbox-title {
+      margin-right: inherit;
+    }
   }
 }
 
@@ -32,6 +40,10 @@
     left: 0;
     right: auto;
   }
+
+  &:hover {
+    outline: dotted 1px @text-color;
+  }
 }
 #modal .close svg {
   width: 1em;
@@ -52,10 +64,12 @@
       left: -1.75em;
       right: auto;
     }
+    &:hover {
+      background-color: #000;
+    }
   }
 }
 
-#modal .modal-content > .close:hover { background-color: #000; }
 #modal .modal-body h1,
 #modal .modal-body h2 {
   margin-top: 0.3rem;

themes/bootstrap3/scss/components/lightbox.scss

@@ -5,6 +5,10 @@
   margin-inline: auto;
   margin-block: 1rem;
   padding-inline: 1rem;
+
+  #lightbox-title {
+    margin-right: 1.5rem;
+  }
 }
 @media (min-width: 768px) {
   #modal .modal-dialog {
@@ -17,6 +21,10 @@
 <#LESS */
     min-width: 600px;
     padding: 0;
+
+    #lightbox-title {
+      margin-right: inherit;
+    }
   }
 }
 
@@ -32,6 +40,10 @@
     left: 0;
     right: auto;
   }
+
+  &:hover {
+    outline: dotted 1px $text-color;
+  }
 }
 #modal .close svg {
   width: 1em;
@@ -52,10 +64,12 @@
       left: -1.75em;
       right: auto;
     }
+    &:hover {
+      background-color: #000;
+    }
   }
 }
 
-#modal .modal-content > .close:hover { background-color: #000; }
 #modal .modal-body h1,
 #modal .modal-body h2 {
   margin-top: 0.3rem;

themes/bootstrap5/scss/bs3-compat.scss

@@ -344,8 +344,19 @@ h6, .h6 {
   display: none !important;
 }
 
-#modal .modal-content > .close {
+#modal .modal-dialog .modal-content > .close {
   border: 0;
+
+  @media (max-width: 767px) {
+    font-size: 1.5rem;
+    background-color: var(--#{$prefix}modal-bg);
+    top: 0.5rem;
+    right: 0.5rem;
+
+    body.rtl & {
+      left: 0.5rem;
+    }
+  }
 }
 
 .fade.show {

themes/bootstrap5/scss/components/lightbox.scss

@@ -5,6 +5,10 @@
   margin-inline: auto;
   margin-block: 1rem;
   padding-inline: 1rem;
+
+  #lightbox-title {
+    margin-right: 1.5rem;
+  }
 }
 @media (min-width: 768px) {
   #modal .modal-dialog {
@@ -17,6 +21,10 @@
 <#LESS */
     min-width: 600px;
     padding: 0;
+
+    #lightbox-title {
+      margin-right: inherit;
+    }
   }
 }
 
@@ -32,6 +40,10 @@
     left: 0;
     right: auto;
   }
+
+  &:hover {
+    outline: dotted 1px $text-color;
+  }
 }
 #modal .close svg {
   width: 1em;
@@ -52,10 +64,12 @@
       left: -1.75em;
       right: auto;
     }
+    &:hover {
+      background-color: #000;
+    }
   }
 }
 
-#modal .modal-content > .close:hover { background-color: #000; }
 #modal .modal-body h1,
 #modal .modal-body h2 {
   margin-top: 0.3rem;