mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
110 lines
3.8 KiB
CSS
110 lines
3.8 KiB
CSS
@media (-moz-bool-pref: "zen.tabs.vertical") {
|
|
|
|
@media (-moz-bool-pref: "uc.pins.compact") {
|
|
:root {
|
|
--pinned-tabs-size: calc(var(--tab-min-height) * 1);
|
|
--pinned-tabs-gap: 5px;
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "uc.pins.compact") {
|
|
:root {
|
|
--pinned-tabs-size: calc(var(--tab-min-height) * 1.9);
|
|
--pinned-tabs-gap: 10px;
|
|
}
|
|
}
|
|
|
|
/* Increase size of pinned tabs */
|
|
|
|
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
|
.scrollbox-clip > scrollbox {
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--pinned-tabs-size), 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*/
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
/* Align tab bar with nav bar when not in compact mode when toggled on */
|
|
@media not (-moz-bool-pref: "zen.view.compact"){
|
|
@media (-moz-bool-pref: "uc.tab-bar.align-with-navbar") {
|
|
#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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|