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

ILIAS-eLearning#8627) * 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 * UI / Legacy: 42670, adjust carousel controls for lightboxes if no image is included. https://mantis.ilias.de/view.php?id=42670 https://mantis.ilias.de/view.php?id=42497 --------- Co-authored-by: Timon Amstutz <[email protected]>
lukastocker · Dec 10, 2024 · 85caa25 · 85caa25
1 parent 05a7111
commit 85caa25
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git a/components/ILIAS/UI/src/examples/Modal/LightboxImagePage/show_a_single_image.php b/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.
  * ---

diff --git a/components/ILIAS/UI/src/examples/Modal/LightboxImagePage/show_multiple_images.php b/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.

diff --git a/templates/default/070-components/UI-framework/Modal/_ui-component_modal.scss b/templates/default/070-components/UI-framework/Modal/_ui-component_modal.scss
@@ -44,6 +44,31 @@ $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;
+			}
+			.modal-title {
+				padding: 0px;
+			}
+			.carousel-inner {
+				padding: 0px;
+			}
+			.carousel-control {
+				color: $il-modal-dark-carousel-color;
+				width: 15%;
+			}
+		}
+		.close {
+			color: $il-modal-light-color;
+			background-color: $il-modal-dark-color;
+			opacity: 1;
+		}
+	}
 }
 
 // .modal-open      - body class for killing the scroll

diff --git a/templates/default/070-components/legacy/_component_carousel.scss b/templates/default/070-components/legacy/_component_carousel.scss
@@ -76,9 +76,9 @@ $carousel-inner-padding:                      0px 24px !default;
         &.active {
           @include translate3d(0, 0, 0);
           left: 0;
-           &.text-only {
-             padding: 0 15px;
-           }
+          &.text-only {
+            padding: 0 15px;
+          }
         }
       }
     }

diff --git a/templates/default/delos.css b/templates/default/delos.css