Keep padding on spoiled elements

SteamDatabase · Oct 21, 2024 · 0b02c5e · 0b02c5e
1 parent 36d5918
commit 0b02c5e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/scripts/community/filedetails_guide.js b/scripts/community/filedetails_guide.js
@@ -36,31 +36,23 @@ if( document.querySelector( '.guideTopContent' ) )
 
 		const checkboxWrapper = document.createElement( 'label' );
 		checkboxWrapper.textContent = _t( 'spoilers_reveal' );
-		checkboxWrapper.className = 'workshopItemControlCtn general_btn';
-		checkboxWrapper.style.gap = '5px';
+		checkboxWrapper.className = 'workshopItemControlCtn general_btn steamdb_reveal_spoilers_button';
 
 		const checkbox = document.createElement( 'input' );
 		checkbox.type = 'checkbox';
-		checkbox.style.colorScheme = 'dark';
-		checkbox.style.margin = 0;
-		checkbox.style.cursor = 'pointer';
 		checkboxWrapper.prepend( checkbox );
 		controls.append( checkboxWrapper );
 
-		checkbox.addEventListener( 'change', event =>
+		checkbox.addEventListener( 'change', () =>
 		{
-			const spoilers = guide.querySelectorAll( '.bb_spoiler,.steamdb_spoiler_revealed' );
-			const reveal = event.target.checked;
-
-			checkboxWrapper.style.backgroundColor = reveal ? '#2d6bcd' : '';
-			checkboxWrapper.style.color = reveal ? '#fff' : '';
+			const spoilers = guide.querySelectorAll( '.bb_spoiler' );
+			const reveal = checkbox.checked;
 
 			StartViewTransition( () =>
 			{
 				for( const spoiler of spoilers )
 				{
 					spoiler.classList.toggle( 'steamdb_spoiler_revealed', reveal );
-					spoiler.classList.toggle( 'bb_spoiler', !reveal );
 				}
 			} );
 		} );

diff --git a/styles/community.css b/styles/community.css
@@ -66,3 +66,29 @@ a.apphub_NumInApp:hover {
 	gap: 4px;
 	align-items: center;
 }
+
+.steamdb_reveal_spoilers_button {
+	cursor: pointer;
+	align-items: center;
+	gap: 5px;
+}
+
+.steamdb_reveal_spoilers_button:has(input:checked) {
+	background: #2d6bcd;
+	color: #fff;
+}
+
+.steamdb_reveal_spoilers_button > input {
+	margin: 0;
+	color-scheme: dark;
+	cursor: pointer;
+}
+
+span.bb_spoiler.steamdb_spoiler_revealed {
+	background-color: rgb(0 0 0 / 50%);
+	color: #fff;
+}
+
+span.bb_spoiler.steamdb_spoiler_revealed > span {
+	visibility: visible;
+}