KAD-4921 Change gallery caption background default opacity to .8 for better contrast.

Author: gilbert-hernandez

includes/blocks/class-kadence-blocks-advancedgallery-block.php

@@ -418,11 +418,11 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 				// Caption background color
 				if( empty( $attributes['captionStyle'] ) || ( ! empty( $attributes['captionStyle'] ) && ( 'bottom' === $attributes['captionStyle'] || 'bottom-hover' === $attributes['captionStyle'] ) ) ) {
 					$css->set_selector('.kb-gallery-caption-style-bottom.kb-gallery-id-' . $unique_id . ' .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption, .kb-gallery-caption-style-bottom-hover.kb-gallery-id-' . $unique_id . ' .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption' );
-					$css->add_property('background', 'linear-gradient(0deg, '. $css->render_color( $caption_font['caption']['background'], ( isset( $caption_font['caption']['backgroundOpacity'] ) && is_numeric(  $caption_font['caption']['backgroundOpacity'] ) ) ?  $caption_font['caption']['backgroundOpacity'] : '0.5' ) .' 0, rgba(0, 0, 0, 0) 100%)');
+					$css->add_property('background', 'linear-gradient(0deg, '. $css->render_color( $caption_font['caption']['background'], ( isset( $caption_font['caption']['backgroundOpacity'] ) && is_numeric(  $caption_font['caption']['backgroundOpacity'] ) ) ?  $caption_font['caption']['backgroundOpacity'] : '0.8' ) .' 0, rgba(0, 0, 0, 0) 100%)');
 
 				} else {
 					$css->set_selector('.kb-gallery-caption-style-cover-hover.kb-gallery-id-' . $unique_id . ' .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption, .kb-gallery-caption-style-below.kb-gallery-id-' . $unique_id . ' .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption' );
-					$css->add_property('background', $css->render_color( $caption_font['caption']['background'], ( isset( $caption_font['caption']['backgroundOpacity'] ) && is_numeric(  $caption_font['caption']['backgroundOpacity'] ) ) ?  $caption_font['caption']['backgroundOpacity'] : '0.5' ) );
+					$css->add_property('background', $css->render_color( $caption_font['caption']['background'], ( isset( $caption_font['caption']['backgroundOpacity'] ) && is_numeric(  $caption_font['caption']['backgroundOpacity'] ) ) ?  $caption_font['caption']['backgroundOpacity'] : '0.8' ) );
 				}
 			}
 		}

src/blocks/advancedgallery/block.json

@@ -145,7 +145,7 @@
 					"loadGoogle": true,
 					"color": "",
 					"background": "#000000",
-					"backgroundOpacity": 0.5
+					"backgroundOpacity": 0.8
 				}
 			]
 		},

src/blocks/advancedgallery/edit.js

@@ -1817,7 +1817,7 @@ export default function GalleryEdit(props) {
 													captionStyles[0] &&
 													undefined !== captionStyles[0].backgroundOpacity
 														? captionStyles[0].backgroundOpacity
-														: 0.5
+														: 0.8
 												}
 												onOpacityChange={(value) =>
 													saveCaptionFont({ backgroundOpacity: value })

src/blocks/advancedgallery/style.scss

@@ -139,7 +139,7 @@
 				margin-top: 0;
 				color: #ffffff;
 				text-align: center;
-				background: linear-gradient(0deg, rgba($color: #000000, $alpha: 0.5) 0, rgba($color: #000000, $alpha: 0) 100%);
+				background: linear-gradient(0deg, rgba($color: #000000, $alpha: 0.8) 0, rgba($color: #000000, $alpha: 0) 100%);
 				img {
 					display: inline;
 				}
@@ -217,7 +217,7 @@
 		margin: 0;
 		opacity: 0;
 		transition: opacity 0.3s ease-in-out;
-		background: rgba( 0,0,0, 0.5 );
+		background: rgba( 0,0,0, 0.8 );
 	}
 }
 .kb-gallery-ul.kb-gallery-caption-style-cover-hover .kadence-blocks-gallery-item:hover .kadence-blocks-gallery-item__caption, .kb-gallery-ul.kb-gallery-caption-style-cover-hover .kadence-blocks-gallery-item:focus-within .kadence-blocks-gallery-item__caption {
@@ -278,7 +278,7 @@
 .kb-gallery-caption-style-below .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption {
 	padding: 10px;
 	margin-top:0;
-	background: rgba( 0,0,0, 0.5 );
+	background: rgba( 0,0,0, 0.8 );
 	position: static;
 }
 .kb-gallery-type-carousel .kb-gallery-image-ratio-inherit.kb-gallery-image-contain:after, .kb-gallery-type-slider .kb-gallery-image-ratio-inherit.kb-gallery-image-contain:after {