mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
0df0b5177c
* Update chrome.css * Update preferences.json * Update readme.md * Update theme.json * Update chrome.css * Update preferences.json * Update readme.md
162 lines
6.5 KiB
CSS
162 lines
6.5 KiB
CSS
@media (-moz-bool-pref: "zen.tabs.vertical") {
|
|
|
|
/* COLOR POP of pinned tabs (when toggled) */
|
|
@media (-moz-bool-pref: "uc.pins.bg-color.pop") and (not (-moz-bool-pref: "uc.pins.disable-bg-color")) {
|
|
/* background color of pinned tabs in a normal state (not hovered/selected) */
|
|
.tabbrowser-tab[pinned] .tab-stack .tab-background {
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 92%), hsl(from var(--zen-primary-color) h 25% 15%)) !important;
|
|
}
|
|
/* background color when hovering */
|
|
.tabbrowser-tab[pinned]:hover .tab-stack .tab-background{
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 90%), hsl(from var(--zen-primary-color) h 25% 17%)) !important;
|
|
}
|
|
/* background color when selected */
|
|
.tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background,
|
|
.tabbrowser-tab[pinned][multiselected="true"] .tab-stack .tab-background {
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 85%), hsl(from var(--zen-primary-color) h 25% 28%)) !important;
|
|
}
|
|
/* background color when hovering and selected */
|
|
.tabbrowser-tab[pinned][selected="true"]:hover .tab-stack .tab-background,
|
|
.tabbrowser-tab[pinned][multiselected="true"]:hover .tab-stack .tab-background{
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 83%), hsl(from var(--zen-primary-color) h 25% 30%)) !important;
|
|
}
|
|
}
|
|
|
|
/* Makes pinned tabs transparent (when toggled) */
|
|
@media (-moz-bool-pref: "uc.pins.disable-bg-color") {
|
|
.tabbrowser-tab[pinned]:not(:hover):not([selected="true"]) .tab-stack .tab-background {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
/* Make pinned tabs taller (when toggled) */
|
|
@media (-moz-bool-pref: "uc.pins.tall") and (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
|
|
.tabbrowser-tab[pinned] {
|
|
min-height: 43px !important;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
|
|
|
|
/* Set width of pinned tabs (Dropdown) */
|
|
:root:has(#theme-SuperPins[uc-pins-width="Thin"]) {
|
|
--pins-width: 50px;
|
|
}
|
|
:root:has(#theme-SuperPins[uc-pins-width="Normal"]) {
|
|
--pins-width: 60px;
|
|
}
|
|
:root:has(#theme-SuperPins[uc-pins-width="Wide"]) {
|
|
--pins-width: 70px;
|
|
}
|
|
|
|
:root:has(#theme-SuperPins[uc-pins-width="Thin"],
|
|
#theme-SuperPins[uc-pins-width="Normal"],
|
|
#theme-SuperPins[uc-pins-width="Wide"]) {
|
|
#vertical-pinned-tabs-container {
|
|
grid-template-columns: repeat(auto-fit, minmax(var(--pins-width), auto)) !important;
|
|
}
|
|
}
|
|
|
|
/* Set margin between pinned tabs (Dropdown) */
|
|
:root:has(#theme-SuperPins[uc-pins-gap="Small"]) {
|
|
--pins-gap: 1px;
|
|
}
|
|
:root:has(#theme-SuperPins[uc-pins-gap="Normal"]) {
|
|
--pins-gap: 3.5px;
|
|
}
|
|
:root:has(#theme-SuperPins[uc-pins-gap="Big"]) {
|
|
--pins-gap: 6px;
|
|
}
|
|
|
|
:root:has(#theme-SuperPins[uc-pins-gap="Small"],
|
|
#theme-SuperPins[uc-pins-gap="Normal"],
|
|
#theme-SuperPins[uc-pins-gap="Big"]) {
|
|
#vertical-pinned-tabs-container {
|
|
gap: var(--pins-gap) calc(var(--pins-gap) + 3.5px) !important;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "uc.pins.tall") {
|
|
.tabbrowser-tab[pinned] {
|
|
min-height: 43px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Make pinned tabs look more box like */
|
|
@media (-moz-bool-pref: "uc.pins.box-like-corners") {
|
|
.tabbrowser-tab[pinned] .tab-stack .tab-background{
|
|
border-radius: 5px !important;
|
|
}
|
|
}
|
|
|
|
/* Adds border to pinned tabs (when toggled) */
|
|
@media (-moz-bool-pref: "uc.pins.border") {
|
|
.tabbrowser-tab[pinned] .tab-stack .tab-background{
|
|
border: 1px solid var(--zen-colors-border) !important;
|
|
}
|
|
}
|
|
|
|
/* Hides unloaded tabs when tab bar is collapsed (when toggled)*/
|
|
@media (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
|
|
:root:has(#theme-SuperPins[uc-pins-only-show-active="Normal"]) {
|
|
.tabbrowser-tab[pinned][pending="true"] {
|
|
position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
|
|
visibility: hidden !important;
|
|
}
|
|
}
|
|
|
|
/* Shows all pins when user is hovering over them when tab bar is collapsed */
|
|
:root:has(#theme-SuperPins[uc-pins-only-show-active="OnHover"]) {
|
|
.tabbrowser-tab[pinned][pending="true"] {
|
|
position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
#vertical-pinned-tabs-container:hover .tabbrowser-tab[pinned][pending="true"] {
|
|
position: relative !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
#vertical-pinned-tabs-container {
|
|
position: relative;
|
|
}
|
|
|
|
#vertical-pinned-tabs-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#vertical-pinned-tabs-container::before:hover .tabbrowser-tab[pinned][pending="true"] {
|
|
position: relative !important;
|
|
visibility: visible !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hides unloaded tabs when tab bar is collapsed when in "Expand on hove" mode (when toggled) */
|
|
@media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
|
|
:root:has(#theme-SuperPins[uc-pins-only-show-active="Normal"]),
|
|
:root:has(#theme-SuperPins[uc-pins-only-show-active="OnHover"]) {
|
|
#navigator-toolbox:not(
|
|
:is(
|
|
#navigator-toolbox[zen-has-hover],
|
|
#navigator-toolbox:focus-within,
|
|
#navigator-toolbox[movingtab],
|
|
#navigator-toolbox[flash-popup],
|
|
#navigator-toolbox[has-popup-menu],
|
|
#navigator-toolbox:has(.tabbrowser-tab:active),
|
|
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)))) {
|
|
.tabbrowser-tab[pinned][pending="true"] {
|
|
position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
|
|
visibility: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|