mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
204 lines
7.6 KiB
CSS
204 lines
7.6 KiB
CSS
@media (-moz-bool-pref: "zen.tabs.vertical") {
|
|
|
|
/* Pins compact mode when toggled */
|
|
@media (-moz-bool-pref: "uc.pins.compact") {
|
|
:root {
|
|
--pinned-tabs-width: var(--tab-min-height);
|
|
--pinned-tabs-gap: 5px;
|
|
--pinned-tabs-height: 36px;
|
|
}
|
|
}
|
|
@media not (-moz-bool-pref: "uc.pins.compact") {
|
|
:root {
|
|
--pinned-tabs-width: calc(var(--tab-min-height) * 1.7);
|
|
--pinned-tabs-gap: 10px;
|
|
}
|
|
}
|
|
|
|
/* Make pinned tabs taller when toggled */
|
|
@media (-moz-bool-pref: "uc.pins.tall") and (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
.tabbrowser-tab[pinned] {
|
|
min-height: 43px !important;
|
|
}
|
|
@media (-moz-bool-pref: "uc.pins.compact") {
|
|
:root {
|
|
--pinned-tabs-width: 43px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Center all tabs and Workspace Button when tab bar expanded when toggled */
|
|
@media (-moz-bool-pref: "uc.tabs.centered") and (not (-moz-bool-pref: "zen.view.compact")) {
|
|
.tabbrowser-tab {
|
|
margin-left: 2px !important;
|
|
}
|
|
#zen-workspaces-button {
|
|
margin-left: 4px !important;
|
|
}
|
|
#tabs-newtab-button {
|
|
margin-left: 5px !important;
|
|
}
|
|
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
.tabbrowser-tab {
|
|
margin-left: 7px !important;
|
|
}
|
|
#zen-workspaces-button {
|
|
margin-left: 8px !important;
|
|
}
|
|
#tabs-newtab-button {
|
|
margin-left: 6px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Increase width of pinned tabs */
|
|
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
.scrollbox-clip > scrollbox {
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--pinned-tabs-width), 1fr)) !important;
|
|
column-gap: var(--pinned-tabs-gap);
|
|
}
|
|
.tabbrowser-tab[pinned] {
|
|
margin-top: calc(var(--pinned-tabs-gap) / 2) !important;
|
|
margin-bottom: calc(var(--pinned-tabs-gap) / 2) !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* COLORS of pinned tabs */
|
|
|
|
@media not (-moz-bool-pref: "uc.pins.disable-bg-color") {
|
|
/* background color of pinned tabs in a normal state (not hovered/selected) */
|
|
.tabbrowser-tab[pinned] {
|
|
background-color: light-dark(color-mix(in srgb, var(--toolbarbutton-hover-background), #ffffff 12%), color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 30%)) !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
/* background color when hovering */
|
|
.tabbrowser-tab[pinned]:hover {
|
|
background-color: light-dark(color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 2%), color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 20%)) !important;
|
|
}
|
|
/* background color when selected */
|
|
.tabbrowser-tab[pinned][selected="true"],
|
|
.tabbrowser-tab[pinned][multiselected="true"] {
|
|
background-color: light-dark(color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 6%), color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 0%)) !important;
|
|
}
|
|
/* background color when hovering and selected */
|
|
.tabbrowser-tab[pinned][selected="true"]:hover,
|
|
.tabbrowser-tab[pinned][multiselected="true"]:hover {
|
|
background-color: light-dark(color-mix(in srgb, var(--toolbarbutton-hover-background), #000000 8%), color-mix(in srgb, var(--toolbarbutton-hover-background), #ffffff 5%)) !important;
|
|
}
|
|
|
|
@media (-moz-bool-pref: "uc.pins.bg-color.pop") {
|
|
/* background color of pinned tabs in a normal state (not hovered/selected) */
|
|
.tabbrowser-tab[pinned] {
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 90%), hsl(from var(--zen-primary-color) h 25% 20%)) !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
/* background color when hovering */
|
|
.tabbrowser-tab[pinned]:hover{
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 88%), hsl(from var(--zen-primary-color) h 25% 22%)) !important;
|
|
}
|
|
/* background color when selected */
|
|
.tabbrowser-tab[pinned][selected="true"],
|
|
.tabbrowser-tab[pinned][multiselected="true"] {
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 83%), hsl(from var(--zen-primary-color) h 25% 35%)) !important;
|
|
}
|
|
/* background color when hovering and selected */
|
|
.tabbrowser-tab[pinned][selected="true"]:hover,
|
|
.tabbrowser-tab[pinned][multiselected="true"]:hover{
|
|
background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 81%), hsl(from var(--zen-primary-color) h 25% 37%)) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Hide seperator line above first normal tab when toggled on */
|
|
@media (-moz-bool-pref: "uc.hide-seperator-line") {
|
|
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) {
|
|
margin-top: var(--pinned-tabs-gap) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
/* Align tab bar with nav bar when not in compact mode when toggled on */
|
|
@media (-moz-bool-pref: "uc.tabs.align-with-navbar") and (not (-moz-bool-pref: "zen.view.compact")) {
|
|
|
|
@media not (-moz-bool-pref: "zen.themes.tabs.legacy-location") {
|
|
#tabbrowser-arrowscrollbox {
|
|
margin-top: 0 !important;
|
|
}
|
|
.scrollbox-clip > scrollbox {
|
|
padding-top: 0 !important;
|
|
}
|
|
.tabbrowser-tab[pinned] {
|
|
margin-top: calc((var(--pinned-tabs-gap) / 2) - 3px) !important;
|
|
margin-bottom: calc((var(--pinned-tabs-gap) / 2) + 3px) !important;
|
|
}
|
|
@media (-moz-bool-pref: "uc.pins.compact") {
|
|
.tabbrowser-tab[pinned] {
|
|
margin-top: calc((var(--pinned-tabs-gap) / 2) - 1px) !important;
|
|
margin-bottom: calc((var(--pinned-tabs-gap) / 2) + 1px) !important;
|
|
}
|
|
}
|
|
@media not (-moz-bool-pref: "uc.pins.compact") {
|
|
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) {
|
|
margin-top: calc(var(--pinned-tabs-gap) - 3px) !important;
|
|
}
|
|
}
|
|
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]) .tabbrowser-tab:nth-child(1 of [fadein]:not([pinned]):not([hidden])) {
|
|
margin-top: 10px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "zen.themes.tabs.legacy-location") {
|
|
#TabsToolbar {
|
|
padding-top: 0 !important;
|
|
}
|
|
@media (-moz-bool-pref: "uc.workspace-button.move-to-bottom") {
|
|
#tabbrowser-arrowscrollbox {
|
|
margin-top: 0 !important;
|
|
}
|
|
.scrollbox-clip > scrollbox {
|
|
padding-top: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Remove the border of the workspace button if enabled when toggled on */
|
|
@media (-moz-bool-pref: "uc.workspace-button.remove-border") {
|
|
#zen-workspaces-button {
|
|
border: hidden !important;
|
|
}
|
|
}
|
|
|
|
/* Move workspace button to the bottom if enabled when toggled on */
|
|
@media (-moz-bool-pref: "uc.workspace-button.move-to-bottom") {
|
|
#zen-workspaces-button {
|
|
order: 1;
|
|
margin-bottom: auto !important;
|
|
}
|
|
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
.tabbrowser-tab[pinned] {
|
|
margin-top: 0px !important;
|
|
margin-bottom: var(--pinned-tabs-gap) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Stop Zen toolbar from greying out when losing focus when toggled on */
|
|
@media (-moz-bool-pref: "uc.zen-toolbar-opacity") {
|
|
:root {
|
|
--inactive-titlebar-opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
/* Add some space above/below pinned tabs when only icon visible -> tabbar not expanded */
|
|
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
.tabbrowser-tab[pinned] {
|
|
margin-top: 2px !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
}
|
|
}
|