Update TPE & add customization

This commit is contained in:
Kaedriz 2025-01-28 13:23:03 +01:00 committed by GitHub
parent 7da97d10ec
commit 26c9394b05
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 83 additions and 31 deletions

View file

@ -1,44 +1,70 @@
#tab-preview-panel { #tab-preview-panel {
/* Removes default background color of panel, below tab title */ /* Matches Zen main background color, also supports gradients */
--panel-background: none !important; @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledBackgroundNative') {
--panel-background: var(--zen-main-browser-background-toolbar) !important;
}
/* Removes shadow in the margin area (dunno if actually does something, or it's just my imagination) */ /* Matches Zen panel radius */
--panel-shadow-margin: none !important; @media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
border-radius: var(--panel-border-radius) !important;
}
/* Removes border between tab title & tab preview image */ /* Custom border radius for tab preview*/
--arrowpanel-border-color: transparent; @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
--panel-border-radius: var(
--zen-mods-TabPreviewEnhanced-borderRadiusAmount
) !important;
}
/* Matches Zen main background color, also supports gradients */ /* Removes border around tab preview */
background: var(--zen-main-browser-background) !important; --zen-appcontent-border: transparent !important;
/* Matches Zen panel radius */ /* Shifts panel to the slightly right */
border-radius: var(--zen-panel-radius); /* TODO: Make customizable */
margin-left: 0.5em !important;
/* Shifts panel to the slightly right */
/* TODO: Make customizable */
margin-left: 0.5em !important;
} }
.tab-preview-thumbnail-container { .tab-preview-thumbnail-container {
/* Fixes proper tab preview image sizing */ /* Fixes proper tab preview image sizing */
&:has(canvas) { &:has(canvas) {
/* TODO: Make optional */ @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledMargins') {
padding: var(--zen-element-separation); /* Add padding around tab preview image */
padding: var(--zen-element-separation);
}
@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledMargins') {
/* Add padding around tab preview image */
padding: var(--zen-element-separation);
}
/* Hide border above preview */ /* Hide border above preview */
border-top: none !important; border-top: none !important;
/* Shrink preview to match added padding */ /* Hides padding between tab preview image and tab preview title */
/* TODO: Make optional with padding as well */ padding-top: 0 !important;
width: calc(var(--panel-width) - (var(--zen-element-separation) * 2)) px !important;
height: unset !important;
/* Some safety code to maintain aspect ratio */ /* Hides padding between tab preview image and tab preview title */
aspect-ratio: 2 / 1 !important; padding-top: 0 !important;
}
canvas { /* Shrink preview to match added padding */
/* Makes tab preview image rounded */ /* TODO: Make optional */
border-radius: var(--zen-panel-radius) !important; 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 {
/* Matches Zen panel radius */
@media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
border-radius: calc(var(--panel-border-radius) / 1.3) !important;
}
/* Custom border radius for tab preview image */
@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
border-radius: calc(
var(--zen-mods-TabPreviewEnhanced-borderRadiusAmount) / 1.3
) !important;
}
}
} }

View file

@ -0,0 +1,26 @@
[
{
"property": "zen.mods.TabPreviewEnhanced.enabledMargins",
"label": "Put margins around tab preview image",
"type": "checkbox",
"defaultValue": true
},
{
"property": "zen.mods.TabPreviewEnhanced.enabledBackgroundNative",
"label": "Follows background color of Zen main browser (Workspaces included)",
"type": "checkbox",
"defaultValue": true
},
{
"property": "zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius",
"label": "Enables custom border radius for tab preview",
"type": "checkbox",
"defaultValue": true
},
{
"property": "zen.mods.TabPreviewEnhanced.borderRadiusAmount",
"label": "Amount of custom border radius (Only active if above is enabled)",
"type": "string",
"defaultValue": "10px"
}
]