Larger Codepen Preview by freeplay

Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/Codepen-larger-pen-preview.user.css

Larger Codepen Preview screenshot
Homepage Install Get Stylus Write a review

Details

Authorfreeplay

LicenseNo License

Created atMay 6, 2022 21:09

Updated atMay 6, 2022 21:10

Applies toCodepen

Statistics

Learn how we calculate statistics in the FAQ.

Total views14

Total installs0

Weekly installs0

Description

Makes that pen preview thing full screen.

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name           Larger Codepen Preview
@version        1.0.0
@description    Makes that pen preview thing full screen.
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/Codepen-larger-pen-preview.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues

@var checkbox thumbClick "Make entire thumbnail open pen in details popup" 1
==/UserStyle== */

@-moz-document domain("codepen.io") {
    /* Insert code here... */
	[class*="ItemPreviewModalPopupAd_adSpace"] {
		display none
	}
	[class*="ItemPreviewModalBody_modal"] {
		max-width unset !important
		margin-top 0 !important
		width calc(100vw - 120px)
	}
	[class*="ItemPreviewModalHeader"] {
		border-radius 0
	}
	[class*="ItemDetailsPreview_preview"] {
		width 100%
		height 90vh
	}
	[class*="_nextPenButton"] {
		right 0
	}
	[class*="_prevPenButton"] {
		left 0
	}
	
	if thumbClick {
		[class*=ItemPreviewPopOutButton_root] {
			left 0
			> button {
				margin-left auto
			}
		}
	}
	
	
}

Reviews

No reviews yet.