mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Update chrome.css
This commit is contained in:
Kaedriz
GitHub
parent
db13a9f42a
commit
2d1bb4c461
1 changed files with 286 additions and 57 deletions
|
|
@ -1,10 +1,15 @@
|
||||||
/** Globals styles, regardless of mode */
|
/** Globals styles, regardless of mode */
|
||||||
|
|
||||||
|
/* Remove native audio indicator button */
|
||||||
|
.tab-audio-button {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Resizes the glance tab indicator on essential tabs */
|
/* Resizes the glance tab indicator on essential tabs */
|
||||||
#navigator-toolbox
|
#navigator-toolbox
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-essential='true']
|
.tabbrowser-tab[zen-essential="true"]
|
||||||
.tabbrowser-tab[zen-glance-tab='true'] {
|
.tabbrowser-tab[zen-glance-tab="true"] {
|
||||||
--tab-collapsed-width: 24px !important;
|
--tab-collapsed-width: 24px !important;
|
||||||
--tab-min-width: 16px !important;
|
--tab-min-width: 16px !important;
|
||||||
|
|
||||||
|
|
@ -15,8 +20,8 @@
|
||||||
|
|
||||||
/* Centers & resizes the glance tab indicator, to be more cohesive across essential & pinned tabs */
|
/* Centers & resizes the glance tab indicator, to be more cohesive across essential & pinned tabs */
|
||||||
#navigator-toolbox
|
#navigator-toolbox
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-glance-tab='true'] {
|
.tabbrowser-tab[zen-glance-tab="true"] {
|
||||||
& .tab-content {
|
& .tab-content {
|
||||||
padding: 0px !important;
|
padding: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
@ -34,8 +39,8 @@
|
||||||
|
|
||||||
/* Centers the tab icon on essential tabs */
|
/* Centers the tab icon on essential tabs */
|
||||||
#navigator-toolbox
|
#navigator-toolbox
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-essential='true'] {
|
.tabbrowser-tab[zen-essential="true"] {
|
||||||
& .tab-icon-image,
|
& .tab-icon-image,
|
||||||
.tab-throbber {
|
.tab-throbber {
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
|
|
@ -43,17 +48,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Legacy Mode - Round circle */
|
/** Legacy Mode - Round circle */
|
||||||
@media not (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.audioWave.enabled') {
|
@media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.audioWave.enabled") {
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab
|
.tabbrowser-tab
|
||||||
.tab-icon-overlay:not([crashed]) {
|
.tab-icon-overlay:not([crashed]) {
|
||||||
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
||||||
|
display: flex !important;
|
||||||
background-color: #161717 !important;
|
background-color: #161717 !important;
|
||||||
border: 1px solid #ffffff29 !important;
|
border: 1px solid #ffffff29 !important;
|
||||||
transition: transform 100ms ease-in-out,
|
transition: transform 100ms ease-in-out,
|
||||||
background-color 100ms ease-in-out;
|
background-color 100ms ease-in-out;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
background-position: center !important;
|
||||||
|
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled') {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") {
|
||||||
&:hover {
|
&:hover {
|
||||||
transition: transform 100ms ease-in-out,
|
transition: transform 100ms ease-in-out,
|
||||||
background-color 100ms ease-in-out !important;
|
background-color 100ms ease-in-out !important;
|
||||||
|
|
@ -63,32 +71,44 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[soundplaying] {
|
||||||
|
/* Revert old icon */
|
||||||
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") {
|
||||||
|
@media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
|
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
|
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&[muted] {
|
&[muted] {
|
||||||
/* Different background color when muted */
|
/* Different background color when muted */
|
||||||
background-color: rgb(122, 31, 31) !important;
|
background-color: rgb(122, 31, 31) !important;
|
||||||
|
|
||||||
/* Revert old icon */
|
/* Revert old icon */
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") {
|
||||||
background-image: url('chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg') !important;
|
@media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
}
|
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[soundplaying] {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
/* Revert old icon */
|
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important;
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
}
|
||||||
background-image: url('chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg') !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[activemedia-blocked] {
|
&[activemedia-blocked] {
|
||||||
/* Revert old icon */
|
/* Revert old icon */
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") {
|
||||||
background-image: url('chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg') !important;
|
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg") !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Revert new, zen's audio indicator */
|
/* Revert new, zen's audio indicator */
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") {
|
||||||
&[muted],
|
&[muted],
|
||||||
&[soundplaying],
|
&[soundplaying],
|
||||||
&[activemedia-blocked] {
|
&[activemedia-blocked] {
|
||||||
|
|
@ -98,9 +118,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Patches for essential tabs indicator */
|
/* Patches for essential tabs indicator */
|
||||||
#navigator-toolbox[zen-sidebar-expanded='true']
|
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-essential='true']
|
.tabbrowser-tab[zen-essential="true"]
|
||||||
.tab-icon-stack {
|
.tab-icon-stack {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
|
|
@ -117,8 +137,8 @@
|
||||||
margin: 5px !important;
|
margin: 5px !important;
|
||||||
|
|
||||||
background-color: hsl(180, 2%, 9%, 50%) !important;
|
background-color: hsl(180, 2%, 9%, 50%) !important;
|
||||||
border: 1px solid hsla(0, 0%, 100%, 10%) !important;
|
border: 1px solid hsla(0, 0%, 100%, 3%) !important;
|
||||||
background-size: 75% !important;
|
background-size: 65% !important;
|
||||||
border-radius: 7px !important;
|
border-radius: 7px !important;
|
||||||
transform-origin: top right !important;
|
transform-origin: top right !important;
|
||||||
|
|
||||||
|
|
@ -126,7 +146,7 @@
|
||||||
background-color: hsl(0, 59%, 30%, 50%) !important;
|
background-color: hsl(0, 59%, 30%, 50%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled') {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") {
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
@ -134,10 +154,64 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Patches for pinned tabs indicator while in SuperPins */
|
||||||
|
@media (-moz-bool-pref: "uc.pins.legacy-layout") {
|
||||||
|
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||||
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
|
.tabbrowser-tab[pinned]
|
||||||
|
.tab-icon-stack {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
|
||||||
|
& .tab-icon-image,
|
||||||
|
.tab-throbber {
|
||||||
|
place-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Some stylistic changes for essential tabs indicator */
|
||||||
|
& .tab-icon-overlay:not([crashed]) {
|
||||||
|
width: 24px !important;
|
||||||
|
height: 24px !important;
|
||||||
|
margin: 5px !important;
|
||||||
|
|
||||||
|
background-color: hsl(180, 2%, 9%, 50%) !important;
|
||||||
|
border: 1px solid hsla(0, 0%, 100%, 10%) !important;
|
||||||
|
background-size: 75% !important;
|
||||||
|
border-radius: 7px !important;
|
||||||
|
transform-origin: top right !important;
|
||||||
|
|
||||||
|
&[muted] {
|
||||||
|
background-color: hsl(0, 59%, 30%, 50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") {
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change positioning of indicator on essential tabs */
|
||||||
|
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||||
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
|
.tabbrowser-tab[pinned] {
|
||||||
|
--tab-inline-padding: 0px !important;
|
||||||
|
|
||||||
|
& .tab-icon-overlay:not([crashed]) {
|
||||||
|
/* position: absolute !important; */
|
||||||
|
top: 0px !important;
|
||||||
|
right: 0px !important;
|
||||||
|
margin: 4px !important;
|
||||||
|
place-self: start end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Change positioning of indicator on essential tabs */
|
/* Change positioning of indicator on essential tabs */
|
||||||
#navigator-toolbox[zen-sidebar-expanded='true']
|
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-essential='true'] {
|
.tabbrowser-tab[zen-essential="true"] {
|
||||||
--tab-inline-padding: 0px !important;
|
--tab-inline-padding: 0px !important;
|
||||||
|
|
||||||
& .tab-icon-overlay:not([crashed]) {
|
& .tab-icon-overlay:not([crashed]) {
|
||||||
|
|
@ -151,8 +225,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Standardize tab icon size, to prevent size flexing */
|
/* Standardize tab icon size, to prevent size flexing */
|
||||||
#navigator-toolbox[zen-sidebar-expanded='true']
|
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab
|
.tabbrowser-tab
|
||||||
.tab-icon-stack {
|
.tab-icon-stack {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
|
@ -160,10 +234,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Audio Wave version */
|
/** Audio Wave version */
|
||||||
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.audioWave.enabled') {
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.audioWave.enabled") {
|
||||||
/** Variables section */
|
/** Variables section */
|
||||||
/* Normal tab bar */
|
/* Normal tab bar */
|
||||||
#tabbrowser-tabs[orient='vertical'] {
|
#tabbrowser-tabs[orient="vertical"] {
|
||||||
/* Normal tab */
|
/* Normal tab */
|
||||||
& .tabbrowser-tab {
|
& .tabbrowser-tab {
|
||||||
--audio-button-top: -4px;
|
--audio-button-top: -4px;
|
||||||
|
|
@ -173,8 +247,19 @@
|
||||||
--audio-wave-height: 17px;
|
--audio-wave-height: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Patch for SuperPins */
|
||||||
|
@media (-moz-bool-pref: "uc.pins.legacy-layout") {
|
||||||
|
/* Pinned tab */
|
||||||
|
& .tabbrowser-tab[pinned] {
|
||||||
|
--audio-button-top: -4px;
|
||||||
|
--audio-button-left: 0px;
|
||||||
|
--audio-wave-top: -6px;
|
||||||
|
--audio-wave-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Essential tab */
|
/* Essential tab */
|
||||||
& .tabbrowser-tab[zen-essential='true'] {
|
& .tabbrowser-tab[zen-essential="true"] {
|
||||||
--audio-button-top: -4px;
|
--audio-button-top: -4px;
|
||||||
--audio-button-left: 0px;
|
--audio-button-left: 0px;
|
||||||
--audio-wave-top: -4px;
|
--audio-wave-top: -4px;
|
||||||
|
|
@ -183,17 +268,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collapsed tab bar */
|
/* Collapsed tab bar */
|
||||||
#navigator-toolbox:not([zen-sidebar-expanded='true'])
|
#navigator-toolbox:not([zen-sidebar-expanded="true"])
|
||||||
#tabbrowser-tabs[orient='vertical'] {
|
#tabbrowser-tabs[orient="vertical"] {
|
||||||
/* Normal tab */
|
/* Normal tab */
|
||||||
& .tabbrowser-tab:not([zen-essential='true']) {
|
& .tabbrowser-tab {
|
||||||
--audio-button-top: 0px;
|
--audio-button-top: 0px;
|
||||||
--audio-button-left: 0px;
|
--audio-button-left: 6px;
|
||||||
--audio-wave-top: 4px;
|
--audio-wave-top: 4px;
|
||||||
|
--audio-wave-left: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Patch for SuperPins */
|
||||||
|
@media (-moz-bool-pref: "uc.pins.legacy-layout") {
|
||||||
|
/* Pinned tab */
|
||||||
|
& .tabbrowser-tab[pinned] {
|
||||||
|
--audio-button-top: 0px;
|
||||||
|
--audio-button-left: 0px;
|
||||||
|
--audio-wave-top: -2px;
|
||||||
|
--audio-wave-left: -6px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Essential tab */
|
/* Essential tab */
|
||||||
& .tabbrowser-tab[zen-essential='true'] {
|
& .tabbrowser-tab[zen-essential="true"] {
|
||||||
/* These 2 could be deleted, as are inherited */
|
/* These 2 could be deleted, as are inherited */
|
||||||
--audio-button-top: 0px;
|
--audio-button-top: 0px;
|
||||||
--audio-button-left: 0px;
|
--audio-button-left: 0px;
|
||||||
|
|
@ -202,8 +299,47 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Split tabs */
|
||||||
|
#tabbrowser-tabs[orient="vertical"] tab-group[split-view-group="true"] {
|
||||||
|
/* Normal tab */
|
||||||
|
& .tabbrowser-tab {
|
||||||
|
--audio-wave-top: 4px;
|
||||||
|
--audio-wave-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Patch for SuperPins */
|
||||||
|
@media (-moz-bool-pref: "uc.pins.legacy-layout") {
|
||||||
|
/* Pinned tab */
|
||||||
|
& .tabbrowser-tab[pinned] {
|
||||||
|
--audio-wave-top: -2px;
|
||||||
|
--audio-wave-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Collapsed tab bar & Split tabs */
|
||||||
|
#navigator-toolbox:not([zen-sidebar-expanded="true"]) {
|
||||||
|
#tabbrowser-tabs[orient="vertical"] tab-group[split-view-group="true"] {
|
||||||
|
/* Normal tab */
|
||||||
|
& .tabbrowser-tab {
|
||||||
|
--audio-button-left: 0px;
|
||||||
|
--audio-wave-top: 7px;
|
||||||
|
--audio-wave-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Patch for SuperPins */
|
||||||
|
@media (-moz-bool-pref: "uc.pins.legacy-layout") {
|
||||||
|
/* Pinned tab */
|
||||||
|
& .tabbrowser-tab[pinned] {
|
||||||
|
--audio-wave-top: 1px;
|
||||||
|
--audio-wave-left: -6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Some styling for mute/unmute audio button */
|
/* Some styling for mute/unmute audio button */
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab
|
.tabbrowser-tab
|
||||||
.tab-icon-overlay:not([crashed]) {
|
.tab-icon-overlay:not([crashed]) {
|
||||||
top: var(--audio-button-top, 0px) !important;
|
top: var(--audio-button-top, 0px) !important;
|
||||||
|
|
@ -211,7 +347,7 @@
|
||||||
width: 24px !important;
|
width: 24px !important;
|
||||||
height: 24px !important;
|
height: 24px !important;
|
||||||
|
|
||||||
padding: 4px !important;
|
padding: 5px !important;
|
||||||
border-radius: 6px !important;
|
border-radius: 6px !important;
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
|
|
||||||
|
|
@ -220,8 +356,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Centers the tab icon, when collapsed tab bar */
|
/* Centers the tab icon, when collapsed tab bar */
|
||||||
#navigator-toolbox:not([zen-sidebar-expanded='true'])
|
#navigator-toolbox:not([zen-sidebar-expanded="true"])
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab {
|
.tabbrowser-tab {
|
||||||
& .tab-icon-image,
|
& .tab-icon-image,
|
||||||
.tab-throbber {
|
.tab-throbber {
|
||||||
|
|
@ -230,28 +366,42 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab Icon to mute playing audio */
|
/* Tab Icon to mute playing audio */
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[soundplaying]:not([zen-glance-tab]):hover
|
.tabbrowser-tab[soundplaying]:not([zen-glance-tab]):hover
|
||||||
> .tab-stack
|
> .tab-stack
|
||||||
> .tab-content
|
> .tab-content
|
||||||
> .tab-icon-stack
|
> .tab-icon-stack
|
||||||
> .tab-icon-overlay:not([crashed]) {
|
> .tab-icon-overlay:not([crashed]) {
|
||||||
list-style-image: url('chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg') !important;
|
@media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab Icon to unmute muted audio */
|
/* Tab Icon to unmute muted audio */
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[muted]:not([zen-glance-tab]):hover
|
.tabbrowser-tab[muted]:not([zen-glance-tab]):hover
|
||||||
> .tab-stack
|
> .tab-stack
|
||||||
> .tab-content
|
> .tab-content
|
||||||
> .tab-icon-stack
|
> .tab-icon-stack
|
||||||
> .tab-icon-overlay:not([crashed]) {
|
> .tab-icon-overlay:not([crashed]) {
|
||||||
list-style-image: url('chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg') !important;
|
@media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") {
|
||||||
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show button to mute/unmute audio, on hover, in place of tab icon */
|
/* Show button to mute/unmute audio, on hover, in place of tab icon */
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab:has([soundplaying], [muted]):not([zen-glance-tab]):hover {
|
.tabbrowser-tab:has([soundplaying], [muted]):not(
|
||||||
|
[zen-glance-tab]
|
||||||
|
):hover {
|
||||||
&
|
&
|
||||||
> .tab-stack
|
> .tab-stack
|
||||||
> .tab-content
|
> .tab-content
|
||||||
|
|
@ -277,9 +427,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Patches for SuperPins compatibility */
|
||||||
|
@media (-moz-bool-pref: "uc.pins.legacy-layout") {
|
||||||
|
/* Patch for pinned tabs with SuperPins */
|
||||||
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
|
.tabbrowser-tab[pinned]
|
||||||
|
.tab-icon-stack {
|
||||||
|
width: 100% !important;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
/* TODO: Take padding from variable */
|
||||||
|
width: calc(100% + 12px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tab-icon-image {
|
||||||
|
justify-self: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
|
.tabbrowser-tab[pinned]:not([zen-essential="true"])
|
||||||
|
.tab-icon-stack::before {
|
||||||
|
bottom: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-content {
|
||||||
|
border-radius: var(--border-radius-medium) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Patch for collapsed pinned tabs with SuperPins */
|
||||||
|
#navigator-toolbox:not([zen-sidebar-expanded="true"])
|
||||||
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
|
.tabbrowser-tab
|
||||||
|
.tab-icon-stack {
|
||||||
|
width: var(--tab-collapsed-background-width) !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: var(--tab-collapsed-background-width) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Patch for essential tabs */
|
/* Patch for essential tabs */
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-essential='true']
|
.tabbrowser-tab[zen-essential="true"]
|
||||||
.tab-icon-stack {
|
.tab-icon-stack {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -291,9 +483,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Patch for collapsed essential tabs */
|
/* Patch for collapsed essential tabs */
|
||||||
#navigator-toolbox:not([zen-sidebar-expanded='true'])
|
#navigator-toolbox:not([zen-sidebar-expanded="true"])
|
||||||
#tabbrowser-tabs[orient='vertical']
|
#tabbrowser-tabs[orient="vertical"]
|
||||||
.tabbrowser-tab[zen-essential='true']
|
.tabbrowser-tab[zen-essential="true"]
|
||||||
.tab-icon-stack {
|
.tab-icon-stack {
|
||||||
width: var(--tab-collapsed-background-width) !important;
|
width: var(--tab-collapsed-background-width) !important;
|
||||||
|
|
||||||
|
|
@ -307,7 +499,7 @@
|
||||||
> .tab-stack
|
> .tab-stack
|
||||||
> .tab-content
|
> .tab-content
|
||||||
> .tab-icon-stack::before {
|
> .tab-icon-stack::before {
|
||||||
content: '' !important;
|
content: "" !important;
|
||||||
z-index: -1 !important;
|
z-index: -1 !important;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -329,13 +521,50 @@
|
||||||
transition: fill 1000ms ease-in-out, opacity 1000ms ease-in-out;
|
transition: fill 1000ms ease-in-out, opacity 1000ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Compatibility patch for collapsed split tabs */
|
||||||
|
tab-group[split-view-group="true"]
|
||||||
|
.tabbrowser-tab:not([zen-glance-tab])
|
||||||
|
> .tab-stack
|
||||||
|
> .tab-content
|
||||||
|
> .tab-icon-stack::before {
|
||||||
|
width: calc(var(--zen-sidebar-width) - 14px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Compatibility patch for hidden tab bar */
|
/* Compatibility patch for hidden tab bar */
|
||||||
#zen-main-app-wrapper[zen-compact-mode='true']
|
#zen-main-app-wrapper[zen-compact-mode="true"]
|
||||||
.tabbrowser-tab
|
.tabbrowser-tab
|
||||||
.tab-icon-stack::before {
|
.tab-icon-stack::before {
|
||||||
width: calc(var(--zen-sidebar-width) - 30px) !important;
|
width: calc(var(--zen-sidebar-width) - 30px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Patch for Split Tabs */
|
||||||
|
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||||
|
tab-group[split-view-group="true"]
|
||||||
|
.tabbrowser-tab {
|
||||||
|
/* Section based on how many tabs are split */
|
||||||
|
|
||||||
|
/* 2 split tabs */
|
||||||
|
&:nth-of-type(1):nth-last-of-type(2) .tab-icon-stack::before,
|
||||||
|
&:nth-of-type(2):nth-last-of-type(1) .tab-icon-stack::before {
|
||||||
|
width: calc(var(--zen-sidebar-width) / 2 - 11px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3 split tabs */
|
||||||
|
&:nth-of-type(1):nth-last-of-type(3) .tab-icon-stack::before,
|
||||||
|
&:nth-of-type(2):nth-last-of-type(2) .tab-icon-stack::before,
|
||||||
|
&:nth-of-type(3):nth-last-of-type(1) .tab-icon-stack::before {
|
||||||
|
width: calc(var(--zen-sidebar-width) / 3 - 8px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 4 split tabs */
|
||||||
|
&:nth-of-type(1):nth-last-of-type(4) .tab-icon-stack::before,
|
||||||
|
&:nth-of-type(2):nth-last-of-type(3) .tab-icon-stack::before,
|
||||||
|
&:nth-of-type(3):nth-last-of-type(2) .tab-icon-stack::before,
|
||||||
|
&:nth-of-type(4):nth-last-of-type(1) .tab-icon-stack::before {
|
||||||
|
width: calc(var(--zen-sidebar-width) / 4 - 8px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* TODO: Attempt at different animation for subset of tabs, will need manual re-timing of each svg animation sadly */
|
/* TODO: Attempt at different animation for subset of tabs, will need manual re-timing of each svg animation sadly */
|
||||||
.tabbrowser-tab[soundplaying] {
|
.tabbrowser-tab[soundplaying] {
|
||||||
/* 4s delay */
|
/* 4s delay */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue