sfc-utils 1.4.18 → 1.4.20

package/components/topper2.mjs

@@ -48,8 +48,8 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           fullScreenVerticalCss(),
           // Add style override for center-center position (if applicable)
           fullScreenCenterCenterCss(),
-          // Add styling for header-deck container background
-          ... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
+          // Add styling for header-deck container text and background color
+          fullScreenHedDekContainerCss()
         ];
       case "side-by-side":
         return [
@@ -87,6 +87,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     }
   }
 
+  /** get additional positioning css for full screen center-center header-deck container **/
   const fullScreenCenterCenterCss = () => {
     return (
       HeaderDek_Horizontal_Position === "center" &&
@@ -94,6 +95,16 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     ) ? topperStyles.headerDekCenterCenter : "";
   }
 
+  /** get css for full screen header-deck container text and background color **/
+  const fullScreenHedDekContainerCss = () => {
+    switch (Inverted_Colors) {
+      case "black-text-white-bg": return topperStyles.blackTextWhiteBg;
+      case "white-text-black-bg": return topperStyles.whiteTextBlackBg;
+      case "black-text-no-bg": return topperStyles.blackTextNoBg;
+      case "white-text-no-bg": return topperStyles.whiteTextNoBg;
+    }
+  }
+
   const headerStyleList = () => {
     let defaultStyles = [];
     switch (Topper_Style) {
@@ -105,7 +116,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
         defaultStyles = ["left"];
         break;
       case "full-screen":
-        defaultStyles = [topperStyles.hedFullScreen, fullScreenTextAlignCss()];
+        defaultStyles = [topperStyles.hedFullScreen, fullScreenTextAlignCss(), textDecorationCss()];
         break;
       case "side-by-side":
       case "side-by-side-portrait":
@@ -130,7 +141,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
       case "no-visual":
         return ["deck left"];
       case "full-screen":
-        return ["deck", topperStyles.deckFullScreen, fullScreenTextAlignCss()];
+        return ["deck", topperStyles.deckFullScreen, fullScreenTextAlignCss(), textDecorationCss()];
       case "side-by-side":
       case "side-by-side-portrait":
         return ["deck left"];
@@ -148,6 +159,10 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     }
   }
 
+  /** Add styling for drop shadow on white text for full-screen toppers */
+  const textDecorationCss = () => {
+    return (Inverted_Colors === "white-text-no-bg") ? topperStyles.dropshadow : "";
+  }
   /** Add styling for text color on topper slideshow captions. Note that the credits 
    * are grey when the caption is black and white when the captions are white. */
   const sideBySideCapCredColorCss = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/styles/modules/topper2.module.less

@@ -301,6 +301,22 @@
   background-color: rgba(255, 255, 255, 0.54);
 }
 
+.blackTextNoBg {
+  color: @black;
+}
+
+.whiteTextNoBg {
+  color: @white;
+
+  @media @tablet {
+    color: @black;
+  }
+}
+
+.dropshadow {
+  text-shadow: 1px 1px 10px rgba(0, 0, 0, .4)
+}
+
 .hideWhenTablet {
   @media @tablet {
     display: none;