mirror of
https://github.com/enso-browser/theme-store.git
synced 2026-10-30 20:27:45 +00:00
zeekay
c95570e34a
Update CSS custom properties (--zen-* → --enso-*), attribute selectors, preference keys, element IDs, and descriptive text across all themes, scripts, and metadata files.
200 lines
5.7 KiB
CSS
200 lines
5.7 KiB
CSS
:root {
|
|
--bmb-sound-icon-scale: 1.5;
|
|
--bmb-sound-icon-scale-essentials: 1.26;
|
|
--bmb-sound-icon-scale-glance: 1.15;
|
|
}
|
|
|
|
/* ================== General ================== */
|
|
/* Hide firefox sound button */
|
|
.tab-audio-button {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Tab icon overlay styles */
|
|
.tab-icon-overlay {
|
|
border: none !important;
|
|
transform: translate(130%, 44%) scale(var(--bmb-sound-icon-scale)) !important;
|
|
background-color: transparent !important;
|
|
transition: 0.2s;
|
|
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure sound icon is still visible when tab not selected */
|
|
#navigator-toolbox:not([enso-sidebar-expanded])
|
|
#tabbrowser-tabs
|
|
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not(
|
|
[selected]
|
|
) {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Fill sound button on hover; ensure icon is displayed */
|
|
#navigator-toolbox #tabbrowser-tabs .tabbrowser-tab {
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay {
|
|
&:is([soundplaying], [muted]) {
|
|
&:hover {
|
|
fill: var(--enso-colors-primary) !important;
|
|
transition: 0.2s;
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Enso essentials (expanded tabs) ================== */
|
|
#navigator-toolbox[enso-sidebar-expanded] {
|
|
.tabbrowser-tab[enso-essential] {
|
|
/* Hide tab icon image for collapsed tabs and essentials */
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image {
|
|
display: none !important;
|
|
}
|
|
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay,
|
|
& .tab-icon-stack {
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
transform: translate(20%, 25%)
|
|
scale(var(--bmb-sound-icon-scale-essentials)) !important;
|
|
display: block !important;
|
|
/* Remove extra margin created for vanilla icons */
|
|
margin-inline-end: -2em !important;
|
|
margin-inline-start: -2em !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Enso glance tab (expanded tabs) ================== */
|
|
#navigator-toolbox[enso-sidebar-expanded] {
|
|
.tabbrowser-tab[enso-glance-tab] {
|
|
/* Hide tab icon image */
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image {
|
|
display: none !important;
|
|
}
|
|
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay,
|
|
& .tab-icon-stack {
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
transform: translate(-8%, 25%) scale(var(--bmb-sound-icon-scale-glance)) !important;
|
|
display: block !important;
|
|
margin: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Enso glance tab (pinned tabs) ================== */
|
|
#navigator-toolbox[enso-sidebar-expanded]
|
|
#tabbrowser-tabs
|
|
.tabbrowser-tab[enso-glance-tab] {
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay {
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
margin: 0px !important;
|
|
transform: translate(-35%, 25%) scale(var(--bmb-sound-icon-scale-glance)) !important;
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Pinned tab (tab page changed) ================== */
|
|
#navigator-toolbox[enso-sidebar-expanded] {
|
|
.tabbrowser-tab[enso-pinned-changed] {
|
|
/* Add extra space for sound button when reset tab button is active */
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
.tab-reset-pin-button {
|
|
margin-right: 2.8em !important;
|
|
}
|
|
}
|
|
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay {
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
transform: translate(180%, 45%) scale(var(--bmb-sound-icon-scale)) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Expanded tabs ================== */
|
|
#navigator-toolbox[enso-sidebar-expanded] #tabbrowser-tabs .tabbrowser-tab {
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay {
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
margin-right: 36px !important;
|
|
margin-left: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Split view (expanded tabs) ================== */
|
|
#navigator-toolbox[enso-sidebar-expanded]
|
|
#tabbrowser-tabs
|
|
.tabbrowser-tab[split-view] {
|
|
/* Sound icon takes place of tab icon if tab is not pinned */
|
|
&:is([soundplaying], [muted], [activemedia-blocked]):not([pinned])
|
|
.tab-icon-image {
|
|
display: none !important;
|
|
}
|
|
|
|
& .tab-throbber,
|
|
& .tab-icon-pending,
|
|
& .tab-icon-image,
|
|
& .tab-sharing-icon-overlay,
|
|
& .tab-icon-overlay {
|
|
/* Replace tab icon image with sound button; not needed if tab is pinned or essential */
|
|
&:is([soundplaying], [muted], [activemedia-blocked]):not(
|
|
[enso-essential],
|
|
[pinned]
|
|
) {
|
|
transform: translate(-40%, 46%) scale(var(--bmb-sound-icon-scale)) !important;
|
|
margin-right: 12px !important;
|
|
margin-left: 4px !important;
|
|
}
|
|
|
|
&:not([pinned]) {
|
|
margin-left: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ================== Collapsed tabs ================== */
|
|
#navigator-toolbox:not([enso-sidebar-expanded]) {
|
|
.tab-icon-overlay {
|
|
transform: translate(-40%, 46%) scale(var(--bmb-sound-icon-scale)) !important;
|
|
|
|
/* Prevent sound/media button from being toggled on click when collapsed tab out of focus */
|
|
&:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) {
|
|
pointer-events: none !important;
|
|
}
|
|
}
|
|
|
|
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked])
|
|
.tab-icon-image {
|
|
display: none !important;
|
|
}
|
|
}
|