[create-theme]: Tab Preview Enhanced

[Kaedriz]

Name

Tab Preview Enhanced

Description

Enhanced tab preview, respecting user background color and padding

Homepage

https://github.com/Kaedriz/ZenMods/tree/main/TabPreviewEnhanced

Image

https://i.imgur.com/0uQVhEW.png

Type

• JSON Color Theme

Theme Styles

#tab-preview-panel {
	/* Removes default background color of panel, below tab title */
	--panel-background: none !important;

	/* Removes shadow in the margin area (dunno if actually does something, or it's just my imagination) */
	--panel-shadow-margin: none !important;

	/* Removes border between tab title & tab preview image */
	--arrowpanel-border-color: transparent;

	/* Matches Zen main background color, also supports gradients */
	background: var(--zen-main-browser-background) !important;

	/* Matches Zen panel radius */
	border-radius: var(--zen-panel-radius);

	/* Shifts panel to the slightly right */
	/* TODO: Make customizable */
	margin-left: 0.5em !important;
}

.tab-preview-thumbnail-container {
	/* Fixes proper tab preview image sizing */
	&:has(canvas) {
		/* TODO: Make optional */
		padding: var(--zen-element-separation);

		/* Hide border above preview */
		border-top: none !important;

		/* Shrink preview to match added padding */
		/* TODO: Make optional with padding as well */
		width: calc(var(--panel-width) - (var(--zen-element-separation) * 2)) px !important;
		height: unset !important;

		/* Some safety code to maintain aspect ratio */
		aspect-ratio: 2 / 1 !important;
	}

	canvas {
		/* Makes tab preview image rounded */
		border-radius: var(--zen-panel-radius) !important;
	}
}

Readme

Enhanced tab preview, which matches browser background color.

Also adds padding around tab preview image, to synergize with the rest of the browser.
For now, mostly just styles it differently, later some customization is planned.

For bugs and discussion, go to project github.

Works as of `1.0.2-b.2`

Preferences

No response

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-898 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.