UI: 42670, adjust the background and font coloring for Lightbox Modal…

… Image Pages and extend expected output for the examples accordingly.

https://mantis.ilias.de/view.php?id=42670

components/ILIAS/UI/src/examples/Modal/LightboxImagePage/show_a_single_image.php

@@ -10,9 +10,9 @@
  *   Example for rendering a lightbox image page modal with a single image.
  *
  * expected output: >
- *   ILIAS shows a buttonn titled "Show Image".
- *   A click onto the button greys out ILIAS, opens a moidal titled "Mountains" including an "X" glyph on the right top,
- *   an image and a Copyright note above the image.
+ *   ILIAS shows a button titled "Show Image".
+ *   A click onto the button greys out ILIAS, opens a modal titled "Mountains" including an "X" glyph on the right top,
+ *   an image and a Copyright note above the image. The modal's background is dark with a light font color.
  *   You can close the modal by hitting the ESC key, clicking onto the greyed out ILIAS in the background outside of the
  *   modal or by clicking the "X" glyph.
  * ---

components/ILIAS/UI/src/examples/Modal/LightboxImagePage/show_multiple_images.php

@@ -13,6 +13,7 @@
  *   ILIAS shows a button titled "Show some fancy images".
  *   A click onto the button will grey out ILIAS and opens a modal with multiple contents which can be viewed one after
  *   another by clicking the arrow glyphs.
+ *   The modal's background is dark with a light font color.
  *   All contents consist of a titled each.
  *   In the lower part of the modal a circle glyph is centered about which you can see that you can look at
  *   three contents within the modal.

templates/default/070-components/UI-framework/Modal/_ui-component_modal.scss

@@ -44,6 +44,24 @@ $il-modal-dark-carousel-color: $il-main-bg !default;
 	border: none;
 	background: none;
 	@include box-shadow($il-shadow--large);
+
+	&.il-modal-lightbox-dark {
+		.modal-content {
+			background-color: $il-modal-dark-color;
+			color: $il-modal-light-color;
+			.modal-header {
+				border-bottom-color: $il-modal-light-color;
+			}
+			.carousel-control {
+				color: $il-modal-dark-carousel-color;
+			}
+		}
+		.close {
+			color: $il-modal-light-color;
+			background-color: $il-modal-dark-color;
+			opacity: 1;
+		}
+	}
 }
 
 // .modal-open      - body class for killing the scroll