Closed TheRealMG closed 4 weeks ago
Better Tab Indicators
This Zen Theme provides some alternative styling for the tabs on the sidebar.
https://github.com/TheRealMG/zen-themes/tree/main/BetterTabIndicators
https://raw.githubusercontent.com/TheRealMG/zen-themes/refs/heads/main/BetterTabIndicators/image.png
@media (-moz-bool-pref: "zen.tabs.vertical") { /* Tab Borders Based on Preference */ .tabbrowser-tab:not([pinned]):is([multiselected="true"], [selected]) { &:has(#uc-tabs[uc-tabs-preferred_color="primary"]) .tab-background { border: 2px solid var(--zen-colors-primary) !important; } &:has(#uc-tabs[uc-tabs-preferred_color="secondary"]) .tab-background { border: 2px solid var(--zen-colors-secondary) !important; } &:has(#uc-tabs[uc-tabs-preferred_color="tertiary"]) .tab-background { border: 2px solid var(--zen-colors-tertiary) !important; } &:has(#uc-tabs[uc-tabs-preferred_color="border"]) .tab-background { border: 2px solid var(--zen-colors-border) !important; } &:has(#uc-tabs[uc-tabs-preferred_color="custom"]) .tab-background { @media (prefers-color-scheme: light) { border: 2px solid var(--uc-tabs-preferred_color, #000000) !important; /* Fallback to black */ } @media (prefers-color-scheme: dark) { border: 2px solid var(--uc-tabs-preferred_color, #ffffff) !important; /* Fallback to white */ } } } /* Background Modification for Selected Tab */ #tabbrowser-tabs { & .tabbrowser-tab { &[selected] .tab-background { background: color-mix( in srgb, var(--zen-colors-secondary) 40%, transparent ) !important; } } } /* Dimming Tab Text When Unloaded */ @media (-moz-bool-pref: "uc.tabs.dim_unloaded") { #tabbrowser-tabs { & .tabbrowser-tab { @media (-moz-bool-pref: "zen.tabs.dim-pending") { &[pending="true"] .tab-text { opacity: 0.5; /* Dimmed text for pending tabs */ } } } } } }
# Better Tab Indicators Options for customizing tabs on the sidebar. - Adds a border around active tabs. - Dims the title of tabs when unloaded.
[ { "property": "uc.tabs.preferred_color", "label": "Preferred color for tab border", "type": "dropdown", "options": [ { "label": "Zen primary", "value": "primary" }, { "label": "Zen secondary", "value": "secondary" }, { "label": "Zen tertiary", "value": "tertiary" }, { "label": "Zen border", "value": "border" }, { "label": "Custom color", "value": "custom" } ] }, { "property": "uc.tabs.custom_color_hex", "label": "Custom Color (Hex)", "type": "string", "defaultValue": "#ffffff", "placeholder": "#ffffff" }, { "property": "uc.tabs.dim_unloaded", "label": "Dim Unloaded Tabs", "type": "boolean", "defaultValue": false } ]
Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.
Field must be one of checkbox, dropdown, string but received boolean
Name
Better Tab Indicators
Description
This Zen Theme provides some alternative styling for the tabs on the sidebar.
Homepage
https://github.com/TheRealMG/zen-themes/tree/main/BetterTabIndicators
Image
https://raw.githubusercontent.com/TheRealMG/zen-themes/refs/heads/main/BetterTabIndicators/image.png
Type
Theme Styles
Readme
Preferences