mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Update TPE & add customization
This commit is contained in:
parent
7da97d10ec
commit
26c9394b05
2 changed files with 83 additions and 31 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
26
themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/preferences.json
Normal file
26
themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/preferences.json
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
Loading…
Add table
Add a link
Reference in a new issue