Add CSS and make it similar to invisible spaces

pedro-mendonca · pedro-mendonca · commit 8ab786f50cb4 · 2023-05-04T08:53:32.000+01:00
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1285,9 +1285,18 @@ form.filters-toolbar a.revealing.open {
 	margin-left: 2px;
 }
 
-.invisible-spaces {
-	background-color: var( --gp-color-secondary-600 );
-	opacity: 0.4;
+.invisible-spaces,
+.notranslate.placeholder {
+	background-color: var( --gp-color-neutral-muted );
+	display: inline-block;
+	line-height: 1em;
+	padding: 0.125em;
+	border-radius: 0.125em;
+	border: 1px solid var( --gp-color-border-default );
+}
+
+.notranslate.placeholder {
+	font-family: monospace;
 }
 
 .ternary {
diff --git a/gp-templates/helper-functions.php b/gp-templates/helper-functions.php
@@ -32,7 +32,7 @@ function( $m ) use ( &$glossary_entries ) {
 	// Break out & back into notranslate for translatable attributes.
 	$text = preg_replace( '/(title|aria-label)=([\'"])([^\\2]+?)\\2/', '\\1=\\2</span>\\3<span class="notranslate">\\2', $text );
 	// Wrap placeholders with notranslate.
-	$text = preg_replace( '/(%(\d+\$(?:\d+)?)?[bcdefglosuxEFGX])/', '<span class="notranslate">\\1</span>', $text );
+	$text = preg_replace( '/(%(\d+\$(?:\d+)?)?[bcdefglosuxEFGX])/', '<span class="notranslate placeholder">\\1</span>', $text );
 
 	// Put the glossaries back!
 	$text = preg_replace_callback(
