Overhauls the look of default zen to make it look nicer with new animations, better UI design, and more.
/* ==== Animations(tabs) ================================================================================= */
/* Tab panels animation */
#tabbrowser-tabpanels > hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
transition: opacity 0.3s ease-out, scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
scale: 0.9 !important;
opacity: 0;
}
#tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]) {
scale: 1 !important;
opacity: 1 !important;
}
/* Website view animations */
#browser:not(:has(.zen-glance-background)) #tabbrowser-tabpanels {
transition: opacity 0.5s ease-out !important;
}
/* Loading tab animation */
tab[busy] {
scale: 0.95 !important;
}
tab[busy] .tab-background {
opacity: 0.3 !important;
}
/* Ctrl+Tab panel animations */
#ctrlTab-panel {
--panel-background: var(--lwt-accent-color) !important;
transition: opacity 0.1s ease-out, scale 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.2s !important;
scale: 0.7;
}
#ctrlTab-panel:has(.ctrlTab-preview:not([hidden="true"])) {
scale: 1 !important;
}
/* Slot styling */
slot:nth-child(1) {
border-radius: 1em !important;
padding: 0 !important;
}
/* ==== Natsumi PiP ==== */
@media not (-moz-bool-pref: "natsumi.pip.disabled") {
@-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") {
/*noinspection CssInvalidFunction*/
* {
--natsumi-primary-color: #a0d490;
--natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%);
--natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%);
@media (prefers-color-scheme: dark) {
--natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #1d1d1d 80%);
--natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #1d1d1d 70%);
}
/* Material: Haze */
--natsumi-mat-hz-background: rgba(255, 255, 255, 0.8);
--natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 30%, rgba(255, 255, 255, 0.8));
--natsumi-mat-hz-blur-radius: 100px;
@media (prefers-color-scheme: dark) {
--natsumi-mat-hz-background: rgba(0, 0, 0, 0.8);
--natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 40%, rgba(0, 0, 0, 0.8));
}
/* Material: Glass */
--natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent);
--natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white));
--toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%);
--toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11));
@media (-moz-bool-pref: "natsumi.theme.force-dark-shadows") {
--natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, black);
}
}
@keyframes pip-fadein-html {
0% {
background-color: transparent;
scale: 0.8;
}
99% {
background-color: transparent;
scale: 1;
}
100% {
background-color: black;
}
}
@keyframes pip-fadein-player {
0% {
filter: blur(30px);
opacity: 0;
}
70% {
filter: blur(5px);
}
100% {
filter: blur(0);
opacity: 1;
}
}
html {
animation: pip-fadein-html 0.5s ease !important;
}
.player-holder {
animation: pip-fadein-player 0.5s ease !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#controls {
opacity: 1 !important;
/*noinspection CssInvalidFunction*/
& > button {
opacity: 0 !important;
top: 0 !important;
filter: blur(5px);
border-radius: 6px !important;
transition: opacity 0.3s ease, top 0.3s ease, filter 0.3s ease, background-color 0.2s ease !important;
backdrop-filter: saturate(var(--natsumi-mat-hz-saturation)) contrast(var(--natsumi-mat-hz-contrast)) blur(var(--natsumi-mat-hz-blur-radius)) !important;
background-image: none !important;
background-color: var(--natsumi-mat-hz-background) !important;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
border: none !important;
@media (-moz-bool-pref: "natsumi.pip.tinted-haze") {
background-color: var(--natsumi-mat-hz-background-tinted) !important;
}
&::before {
content: "";
width: 16px;
height: 16px;
padding: 2px;
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
align-content: center;
justify-content: center;
fill: white !important;
@media (prefers-color-scheme: light) {
fill: black !important;
}
}
&#close::before {
content: url("chrome://browser/skin/zen-icons/close.svg") !important;
}
&#unpip::before {
content: url("chrome://browser/skin/zen-icons/screen.svg") !important;
}
&:hover {
background-color: color-mix(in srgb, var(--natsumi-mat-ga-background) 80%, white) !important;
@media (prefers-color-scheme: light) {
background-color: color-mix(in srgb, var(--natsumi-mat-ga-background) 80%, black) !important;
}
}
&#close:hover, &#unpip:hover {
background-color: #000000 !important; /* Dark on hover */
}
}
#controls-bottom-gradient {
display: none !important;
}
/*noinspection CssInvalidFunction*/
#controls-bottom {
opacity: 0 !important;
bottom: -5px !important;
background-color: var(--natsumi-mat-hz-background) !important;
border-radius: 10px !important;
padding: 10px 15px !important;
margin: 0 5px !important;
width: calc(100% - 10px) !important;
box-sizing: border-box !important;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important;
backdrop-filter: saturate(3) contrast(2) blur(var(--natsumi-mat-hz-blur-radius)) !important;
filter: blur(10px);
transition: opacity 0.3s ease, bottom 0.3s ease, filter 0.3s ease !important;
border: none !important;
@media (-moz-bool-pref: "natsumi.pip.tinted-haze") {
background-color: var(--natsumi-mat-hz-background-tinted) !important;
}
@media (-moz-bool-pref: "natsumi.pip.native-border-radius") {
/* For the sake of adding native radius, we'll reduce the margin of the controls here */
width: 100% !important;
margin: 0 !important;
bottom: -10px !important;
/*
For now this config is available on macOS only, this'll be added to Windows and Linux
once curved PiP for those platforms moves out of experiment status
*/
@media (-moz-platform: macos) {
border-radius: 5px !important;
}
}
.start-controls {
display: flex !important;
/*noinspection CssInvalidFunction*/
#timestamp {
font-size: 12px !important;
color: light-dark(black, white) !important;
}
}
.end-controls {
display: flex !important;
}
#scrubber, #audio-scrubber {
margin: 0 !important;
/*noinspection CssInvalidFunction*/
&::-moz-range-progress {
background: #FFFFFF !important; /* White for progress bar */
}
/*noinspection CssInvalidFunction*/
&::-moz-range-track {
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
}
/*noinspection CssInvalidFunction*/
&::-moz-range-thumb {
background-color: #FFFFFF !important; /* White to match progress bar */
width: 12px !important;
height: 12px !important;
border: none !important;
scale: 1;
transition: scale 0.2s ease;
}
&:hover {
&::-moz-range-thumb {
opacity: 1;
}
}
}
#audio-scrubber {
&::-moz-range-thumb {
width: 8px !important;
height: 8px !important;
opacity: 1 !important;
}
}
/*noinspection CssInvalidFunction*/
button {
opacity: 1 !important;
position: relative;
padding: 6px !important;
background-size: 16px !important;
width: 28px !important;
height: 28px !important;
border-radius: 6px !important;
transition: background-color 0.2s ease !important;
-moz-context-properties: fill;
fill: light-dark(black, white) !important;
&[disabled] {
cursor: default !important;
fill-opacity: 0.4 !important;
&::after {
display: none !important;
}
}
&:not([disabled]) {
&:hover {
background-color: var(--toolbarbutton-hover-background) !important;
}
&:active {
background-color: var(--toolbarbutton-active-background) !important;
}
}
&#playpause {
background-image: url("chrome://browser/skin/zen-icons/media-play.svg") !important;
}
&#audio {
background-image: url("chrome://browser/skin/zen-icons/media-unmute.svg") !important;
}
&#seekBackward {
background-image: url("chrome://browser/skin/zen-icons/reload.svg") !important;
scale: -1 1;
&::before {
content: "5";
font-size: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, -50%);
scale: -1 1;
}
&::after {
scale: -1 1;
}
}
&#seekForward {
background-image: url("chrome://browser/skin/zen-icons/reload.svg") !important;
&::before {
content: "5";
font-size: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&#fullscreen {
background-image: url("chrome://browser/skin/zen-icons/fullscreen.svg") !important;
}
}
.controls-bottom-upper {
margin: 0 !important;
margin-bottom: 5px !important;
width: 100% !important;
height: fit-content !important;
.scrubber-no-drag {
margin: 0 !important;
}
&:has(#scrubber[hidden]) {
display: none !important;
margin: 0 !important;
}
}
.controls-bottom-lower {
margin: 0 !important;
}
}
#settings {
bottom: 80px !important;
right: 0 !important;
display: block !important;
transition: opacity 0.3s ease, bottom 0.3s ease !important;
.arrow {
display: none !important;
}
/*noinspection CssInvalidFunction*/
label, legend {
font-family: system-ui !important;
color: light-dark(black, white) !important;
}
/*noinspection CssInvalidFunction*/
.slider {
background-color: rgba(0, 0, 0, 0.07) !important;
outline: 1px solid light-dark(#8f8f9d, #bfbfc9) !important;
/*noinspection CssInvalidFunction*/
&::before {
background-color: light-dark(#8f8f9d, #bfbfc9) !important;
}
}
input {
/*noinspection CssInvalidFunction*/
&:checked {
border-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important;
}
/*noinspection CssInvalidFunction*/
&:checked + .slider {
background-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important;
outline-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important;
&::before {
background-color: white !important;
}
}
}
/*noinspection CssInvalidFunction*/
& > .panel-fieldset {
background-color: var(--natsumi-mat-ga-background) !important;
backdrop-filter: blur(15px);
filter: blur(0);
transition: backdrop-filter 0.3s ease, filter 0.3s ease;
border: none !important;
box-shadow: 0 0 10px var(--natsumi-mat-ga-shadow-color) !important;
padding: 0 !important;
}
/*noinspection CssInvalidFunction*/
.grey-line {
width: calc(100% - 10px) !important;
margin: 0 auto !important;
background-color: light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important;
}
&.hide {
bottom: 70px !important;
opacity: 0 !important;
pointer-events: none !important;
& > .panel-fieldset {
backdrop-filter: none !important;
filter: blur(5px);
}
}
}
&.muted {
#controls-bottom {
#audio {
background-image: url("chrome://browser/skin/zen-icons/media-mute.svg") !important;
}
}
}
&.playing {
#controls-bottom {
#playpause {
background-image: url("chrome://browser/skin/zen-icons/media-pause.svg") !important;
}
}
}
&:hover {
& > button {
opacity: 1 !important;
top: 10px !important;
filter: blur(0) !important;
}
#controls-bottom {
opacity: 1 !important;
bottom: 5px !important;
filter: blur(0);
@media (-moz-bool-pref: "natsumi.pip.native-border-radius") {
bottom: 0 !important;
}
}
}
}
body:fullscreen {
#controls {
#controls-bottom {
#fullscreen {
background-image: url("chrome://browser/skin/zen-icons/fullscreen-exit.svg") !important;
}
}
}
}
}
}
@-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") {
.player-holder {
border-radius: 8px !important;
overflow: hidden !important;
background: transparent !important;
}
html {
background: transparent !important;
}
}
/* === ESSENTIALS ========================================================================================================== */
/* ESSENTIAL COLOR WITH SHADOW, SPACING & ROUNDED EDGES */
#zen-essentials-container .tabbrowser-tab {
.tab-background {
background-color: light-dark(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.35)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.12) !important;
border-radius: 11px !important;
margin: 2px !important;
position: relative !important;
}
&:hover .tab-background {
background-color: light-dark(rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.45)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.95) !important;
}
@media (-moz-bool-pref: "zen.theme.essentials-favicon-bg") {
.tab-background::after {
content: "" !important;
position: absolute !important;
left:0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
z-index: -1 !important;
}
}
}
/* makes essentials have fixed width of 60px (from superpins) */
:root {
--essentials-width: 60px !important;
}
#zen-essentials-container {
grid-template-columns: repeat(auto-fit, minmax(var(--essentials-width), auto)) !important;
}
.collapsed-toolbar .essential-item {
justify-content: center; /* Ensures items are centered */
align-items: center;
margin: auto; /* Adjust if needed */
}
/* === GENERAL BROWSER UI ================================================================================================== */
#browser {
background: rgba(10, 10, 10, 0.1) !important; /* Increased opacity */
}
browser[transparent='true'] {
background: rgba(255, 255, 255, 0) !important;
}
:root {
--attention-dot-color: transparent !important;
}
#identity-icon-label[value="Extension (Bonjourr · Minimalist Startpage)"] {
display: none !important;
}
/* -------- floating statusbar (credit to the mod) --------- */
#statuspanel {
margin: 10px !important;
}
#statuspanel-label {
border-radius: 11px !important;
padding: 3px 10px !important;
border: 1px solid var(--zen-colors-border) !important;
background: rgba(0, 0, 0, 0.9) !important;
}
/* === PINNED EXTENSIONS LIKE ESSENTIALS ==================================================================================== */
#TabsToolbar-customization-target {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 2.5px !important;
justify-content: space-between !important;
height: calc(100% - 37px) !important;
#tabbrowser-tabs {
min-width: 100% !important;
contain: inline-size !important;
}
.unified-extensions-item {
margin-inline: 2px !important;
border-bottom: 0px !important;
padding: 0px !important;
height: 32px !important;
width: 32px !important;
margin-bottom: 1px !important;
flex-grow: 1 !important;
order: -1 !important;
}
toolbarbutton:not([id="tabs-newtab-button"]) {
height: 32px !important;
width: 32px !important;
flex-grow: 1 !important;
padding: 0px !important;
toolbarbutton,
stack {
--toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important;
}
.toolbarbutton-badge {
display: none !important;
}
.toolbarbutton-text {
display: none !important;
}
}
/*----------- makes background dark and have shadow------------------------- */
/* Matches pinned extensions shadow effect to essentials */
>toolbarbutton:not([id="tabs-newtab-button"]),
>toolbaritem {
background-color: light-dark(rgba(255,255,255,0.25), rgba(0,0,0,0.4)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.12) !important; /* Matches essentials */
border-radius: 11px !important; /* Same as essentials */
margin: 0px !important;
position: relative !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}
>toolbarbutton:not([id="tabs-newtab-button"]):hover,
>toolbaritem:hover {
background-color: light-dark(rgba(255,255,255,0.45), rgba(0,0,0,0.5)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.95) !important; /* Matches essentials */
}
/* === COMPACT SIDEBAR ===================================================================================================== */
.urlbarView-row[type="search"] {
min-height: 50px !important;
}
:root[zen-compact-mode="true"] #urlbar[open] {
width: 50vw !important;
max-width: 600px !important;
left: 50vw !important;
transform: translate(-50%, -50%) scale(1.2) !important;
}
/* Set compact sidebar width equal to normal sidebar width */
:root {
--sidebar-width: 300px; /* Change this to match the default sidebar width */
}
:root[zen-compact-mode="true"] #sidebar {
width: var(--sidebar-width) !important;
min-width: var(--sidebar-width) !important;
}
/* Reduce unnecessary transitions */
:root[zen-compact-mode="true"]:not([customizing]):not([inDOMFullscreen="true"]) #navigator-toolbox {
transition-delay: -0.002s !important;
}
/* === BLUR COMPACT SIDEBAR ================================================================================================ */
/* Compact sidebar with blurred transparent background */
body:has([zen-compact-mode="true"]) #titlebar {
background: rgba(0, 0, 0, 0.4) !important; /* Slightly lighter dark with transparency */
backdrop-filter: blur(1rem) !important; /* Smooth blur effect */
}
/* === GENERAL SIDEBAR ====================================================================================================== */
/* Removes scrollbar in tab panel and adds fade effect */
#zen-tabs-wrapper {
mask-image: linear-gradient(to bottom, black 90%, transparent 100%) !important;
-webkit-mask-image: linear-gradient(to bottom, black 97%, transparent 100%) !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
overflow-y: auto !important;
}
#zen-tabs-wrapper::-webkit-scrollbar {
display: none !important;
}
/* --------------------Better findbar & bookmark sidebar-------------------------- */
/* Transparent Findbar */
findbar {
background: none !important;
border-top: none !important;
}
#zen-sidebar-web-panel {
background: light-dark(#00000022, #00000044) !important;
backdrop-filter: blur(30px) !important;
}
.sidebar-panel {
background: transparent !important;
font-weight: 600 !important;
opacity: 0.7 !important;
}
/* Cleaned & Transparent Sidebar */
#sidebar-box {
background-color: light-dark(rgba(255, 255, 255, 0.11),
rgba(0, 0, 0, 0.2)) !important;
border: none !important;
& #sidebar-header {
border-bottom: none !important;
& #sidebar-close {
!important;
}
}
}
/* Transparent Search box in sidebar */
#sidebar-search-container>#search-box,
#viewButton {
padding: 4px 8px !important;
appearance: none !important;
background-color: transparent !important;
border-radius: 10px !important;
border: none !important;
&:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
&:active {
background-color: rgba(255, 255, 255, 0.1) !important;
}
}
/* ------------------ Media Player (new 1.10b) ----------------------- */
/* ==== "Miniplayer (Modified Natsumi)" ==== */
#zen-media-controls-toolbar > toolbaritem {
border-radius: 11px !important; /* Increased for more rounded corners */
box-shadow: 0 0px 9px rgba(0, 0, 0, 0.55) !important;
}
@keyframes fadein-animation {
0% { opacity: 0; }
100% { opacity: 0.2; }
}
/* Smooth Infinite Gradient Animation */
@keyframes glowing-gradient {
0% { background-position: 0% 50%; }
25% { background-position: 50% 0%; }
50% { background-position: 100% 50%; }
75% { background-position: 50% 100%; }
100% { background-position: 0% 50%; }
}
#zen-media-current-time, #zen-media-duration {
font-variant-numeric: tabular-nums;
}
#zen-media-controls-toolbar {
& > toolbaritem {
position: relative;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
/* Default Glass Effect */
background: rgba(20, 20, 20, 0.4) !important;
backdrop-filter: blur(20px) saturate(var(--natsumi-mat-hz-saturation)) contrast(var(--natsumi-mat-hz-contrast)) !important;
/* Gradient Layer (Initially Hidden) */
&::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00);
background-size: 400% 400%;
opacity: 0; /* Hidden by default */
filter: blur(30px);
z-index: -1;
transition: opacity 0.3s ease-in-out;
}
/* Box Shadow Effect */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
&:hover {
background: rgba(20, 20, 20, 1) !important;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
/* Show gradient only on hover when not playing */
&::before {
opacity: 0.3;
animation: glowing-gradient 8s infinite linear;
}
}
}
/* When playing, enable animation */
&.playing > toolbaritem::before {
opacity: 0.65; /* Visible glow */
animation: glowing-gradient 13s infinite linear;
}
/* Enhance glow on hover when playing */
&.playing > toolbaritem:hover::before {
opacity: 0.6;
}
#zen-media-service-hbox {
padding-top: 5px !important;
transition: padding 0.15s ease-in-out !important;
}
#zen-media-title {
font-weight: 720 !important;
}
#zen-media-artist {
font-size: 10px !important;
}
#zen-media-info-vbox::before {
display: none !important;
}
#zen-media-progress-bar {
&::-moz-range-thumb {
scale: 1;
transition: scale 0.2s ease;
}
&::-moz-range-track, &::-moz-range-progress {
transition: height 0.2s ease;
}
&:hover {
&::-moz-range-thumb {
scale: 1.4;
}
&::-moz-range-track, &::-moz-range-progress {
height: calc(var(--progress-height) + 2px) !important;
}
}
}
}
#zen-media-controls-toolbar {
& #zen-media-focus-button::after {
display:none !important;
}
}
/* --------------- button animations miniplayer ------------------- */
#zen-media-focus-button,
#zen-media-mute-button,
#zen-media-playpause-button,
#zen-media-nexttrack-button,
#zen-media-previoustrack-button,
#zen-media-close-button {
transition: opacity 0.3s ease-in-out, transform 0.17s ease-out;
opacity: 1;
}
#zen-media-focus-button:hover,
#zen-media-mute-button:hover,
#zen-media-playpause-button:hover,
#zen-media-nexttrack-button:hover,
#zen-media-previoustrack-button:hover,
#zen-media-close-button:hover {
opacity: 0.8;
transform: scale(1.1);
}
/* -------- media info height increase animation ------ */
#zen-media-controls-toolbar .show-on-hover {
max-height: 0;
opacity: 0;
transform: translateY(0.5rem);
padding: 0 6px;
pointer-events: none;
filter: blur(8px);
transition: max-height 0.3s ease, filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease;
}
#zen-media-controls-toolbar:hover .show-on-hover {
max-height: 100px;
opacity: 1;
transform: translateY(0);
padding: 6px;
pointer-events: auto;
filter: blur(0);
}
/* Faster disappearance when unhovering */
#zen-media-controls-toolbar:not(:hover) .show-on-hover {
transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease, padding 0.15s ease, max-height 0.2s ease;
}
/* Inner elements (timestamps) - With 0.2s delay */
#zen-media-controls-toolbar .show-on-hover > * {
opacity: 0;
transform: translateY(0.5rem);
filter: blur(8px);
transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s, filter 0.3s ease 0.2s;
}
/* Timestamps appear 0.2s after toolbar starts expanding */
#zen-media-controls-toolbar:hover .show-on-hover > * {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Fade out instantly when unhovering */
#zen-media-controls-toolbar:not(:hover) .show-on-hover > * {
transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
/* === PLAYING/MUTE ICON APPEARANCE CUSTOMIZATION ========================================================================== */
@media not (-moz-bool-pref: "lacuna.tab.default-audio-indicator") {
.tabbrowser-tab img {
transition: opacity 0.3s ease-in-out;
}
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) img {
opacity: 0 !important;
transition: opacity 0.1s !important;
}
.tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block !important;
border: 0px !important;
border-radius: 0px !important;
top: 0px !important;
right: 0px !important;
scale: 1.5 !important;
opacity: 0.9 !important;
margin: 0px 3px !important;
background: white !important;
--play-svg: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%20135%20140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%22%3E%3Crect%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2230%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2260%22%20width%3D%2215%22%20height%3D%22140%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2290%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%22120%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3C%2Fsvg%3E");
--mute-svg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMzYgMTQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiPjxyZWN0IHg9IjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMzQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iNjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iOTQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMTI0IiB5PSI3MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iNiIvPjwvc3ZnPg==");
mask-size: 10px 10px !important;
mask-repeat: no-repeat !important;
mask-position: center !important;
}
@media (prefers-color-scheme: light) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
filter: invert(1);
}
}
&:is([activemedia-blocked]) {
background: none !important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEb0lEQVR4nO2YW4hWVRTHP7URvM6ooWYa1kPlQ4GXxISyC4mUVg/RZQyjKLUsUcsmJRm8pqUgXSCRbhZCqT1mkARaWm+l9qK9jCKZ2KhUD4nWLxbuM/1ncfb3nfPNGaeH84cPPtZ/n7XX2pe1/3tXKiVKlChR4v8I4BZgFtCnB/q+AnjQYuiqo2bgby6htbAIs/e/KvRtMTxWr5PpwHn+w3uFR1o7hg+kf4vlnrwOrgHaxckp4Npuizgex3Wh7wS/AWOyftwH2C8f/wFM6Pao4/FMDDEk+BboneXDBXTGbMe/CvwKbOqGoFcCx4Hlzv64i2l+LUdXAmflg22Of9E5bCowif7O92LHfyLcGWBYNWerXePhwt0JXBT+G6BXUYmEPvaKf+trmnAj3CCvjDkZ5Bq2CDcwTHmCX4DRRSYR+hkNnJR+jgEDhH/FDfTANCdPukaDhXtNuL+AKe7Qmgc8kjNoKyrPAwuBBrHfGvpIsEa4wSG2BE+kOf5aGrwl9mGuarzhvtsqXOZkgOfku3cdt1G434Ghwr0t3B7vtNGt/8nCLXUzpU7nC5c+QvFEnnXfzhVuqFvmS4WbIvYLunIqQUslOKWbGDgk3GqxD3HTvE+XSGjTFxgXfn1TOPtGD7sm4dcId1DsvYHTwt2nTtcJ8anbfIrxkQrX7ipc/7A8zkkb+/860E/aDXeDsUq4Ca7vq4XbkbaHjNglRMdhZEJN7G1upn4W7mWXxHfEccAl0yLcEbH3cpXyUXcoJ9ihiRwU4qHIqOtM3Sh2U6YjIhs1hg3S/ipR2IYbhNtOyrkBPCz2HzURzfx2sW8T+2axPyD2Q27d63KK4awruT8Jd3+KjDd8KPZpYj+miZyJ7IPPI8tHK84XYrdNnRU68rvTdBSwROy7IvunPW8iLZGyuzuy5GrhevnuS7HP60oiurRuE/tHGZbW4R5eWm15N/tnkZG3jTpSOCuxtbBe2o8C/onM1PYMm/0HTWRnpPzanV0FnJbfo5Fl1y+U2Bj2u/K7rI7yuyJWftdGyuwYF8T4yLR7yW/JbHAyw/6vd0lEpTmXboaxA3FnmtowYmYViXI4okSb3L0+TaI0iERJ46pJlLVpZ0WQKNY2wb1eNJoAS9DxjmRl142qisa5btSeqdSnfg1PO8WtM/WScFPFbjEPqibj36wi4ze677YI15wjEbuLJNjiuE1VZPw7wn2V92K1zr0vTXUXq6dsM+a5+oZS/UKYmQY34ucjirvRzdScvFfdAa6CnMz8vtS1q26biVDhlwvXnnrVzfD4cIe7fH1f5OND2MQH3PpX3TfSHbattZ6DVK587PjFdEZjgYlY34pFjtfD0arWkLzVxD/Q2fSeUCleYDKbQ5DLnH1O7uoYXjfsWTKBVayJlR4CMAn4U+LZm+nJVE50/4g9ttujdrCHc/eIfVpP+EywJ3xXBjvV+ssB4H3p32K5q15HzVKpOp5kLheA1tD3RRWN9Tq7Cbi7sOjyl+QZwM090X+JEiVKlKjUwr/rwkME7dPwYwAAAABJRU5ErkJggg==") !important;
width: 16px !important;
height: 16px !important;
margin: 0px 3px !important;
}
&:is([soundplaying]) {
list-style-image: none !important;
mask-image: var(--play-svg) !important;
}
&:is([muted]) {
list-style-image: none !important;
mask-image: var(--mute-svg) !important;
}
}
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover
img {
opacity: 1 !important;
transition: opacity 0.1s ease-out !important;
}
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover
.tab-icon-overlay {
margin: 0px !important;
transition: opacity 0.25s ease-out, transform 0.25s ease-out !important;
transform: translate(6.9px, -6.9px) scale(0.69) !important;
}
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-overlay {
transition: opacity 0.25s ease-in, transform 0.25s ease-in !important;
}
}
#zen-essentials-container {
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
margin: 0px !important;
}
}
}
/* Better rounded workspace indicator */
@media (-moz-bool-pref: "zen.theme.pill-button") {
#PanelUI-zen-workspaces-list toolbarbutton {
&.zen-workspace-button[active="true"] .zen-workspace-icon::before {
background-color: transparent !important;
}
&.zen-workspace-icon {
border: 3px solid var(--zen-colors-border) !important;
}
&.zen-workspace-button[active="true"] .zen-workspace-icon {
border: 3px solid var(--toolbarbutton-icon-fill-attention) !important;
}
}
}
.tab-reset-pin-button {
/* makes pinned tab reset (back to pinned url) button have adjusted roundness */
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
}
/* Animations for essentials and stuff */
#zen-main-app-wrapper:not(:has(#zen-welcome)) {
.tabbrowser-tab {
scale: unset !important;
&[zen-glance-tab] {
box-shadow: none !important;
.tab-label-container {
display: none !important;
}
}
.tab-stack {
transition: transform 0.2s ease !important;
}
.tab-background, .tab-icon-stack, .tab-label-container {
transition: opacity 0.2s ease !important;
}
.tab-background {
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease !important;
overflow: hidden !important;
position: relative !important;
&::before {
transition: opacity 0.3s ease, width 0.3s ease, background 0.3s ease;
opacity: 0;
}
&::after {
content: "";
position: absolute;
width: 100%;
height: var(--tab-min-height);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
}
&[selected]:not([zen-glance-tab="true"]), &[visuallyselected]:not([zen-glance-tab="true"]) {
& > .tab-stack > .tab-background {
&::after {
width: 100%;
opacity: 1;
}
}
}
&:active {
.tab-stack {
transform: scale(0.95, 0.95) !important;
}
}
}
}
/* -------------------------------- Containers ------------------------------------------- */
.tab-context-line {
display: none !important;
}
/* Ensure container tabs have a relative position */
.tabbrowser-tab[usercontextid] .tab-background {
position: relative !important;
overflow: hidden !important;
border-radius: inherit !important;
background-color: color-mix(in srgb, var(--identity-tab-color, #ff8a00) 8%, transparent) !important; /* 0.12 opacity */
transition: background-color 0.3s ease-out !important; /* Smooth transition */
filter: blur(0.5px);
}
/* When hovered or selected: Restore full background opacity */
.tabbrowser-tab[usercontextid]:hover .tab-background,
.tabbrowser-tab[usercontextid][visuallyselected] .tab-background {
background-color: var(--identity-tab-color, #ff8a00) !important;
}
/* Define the gradient animation */
@keyframes container-gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 200% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient layer (Hidden initially) */
.tabbrowser-tab[usercontextid] .tab-background::after {
content: "";
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
/* Dynamic gradient (Appears only on hover) */
background: linear-gradient(45deg,
var(--identity-tab-color, #ff8a00) 15%,
#e52e71 35%,
#7f00ff 55%,
#00c9ff 75%,
var(--identity-tab-color, #ff8a00) 100%
) !important;
background-size: 300% 300% !important;
background-position: 0% 50%;
opacity: 0 !important; /* Fully hidden by default */
filter: blur(15px) !important;
transition: opacity 0.3s ease-out, filter 0.3s ease-out, background-position 4s linear !important;
z-index: -1 !important;
border-radius: inherit !important;
}
/* When hovered: Gradient appears and animates */
.tabbrowser-tab[usercontextid]:hover .tab-background::after {
opacity: 0.8 !important; /* Bright and vibrant */
filter: blur(15px) !important; /* Softer glow */
/* Move the background for a flowing effect */
background-position: 200% 50% !important;
}
/* ------------------- Close button -------------------- */
/* Red gradient when hovering over close or reset button */
.tabbrowser-tab .tab-background::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(to right, rgba(139, 10, 10, 0.75), rgba(139, 30, 10, 0) 40%, transparent 40%) !important;
opacity: 0 !important;
clip-path: inset(0 100% 0 0);
transition: opacity 0.3s ease, clip-path 0.3s ease !important;
z-index: 3 !important;
}
/* On hover over close/reset button: hide default gradient, show red gradient */
.tabbrowser-tab:has(.tab-close-button:hover, .tab-reset-button:hover) .tab-background::after {
opacity: 0 !important;
transition: 1s ease-out;
}
/* show red gradient when hover on cross and contaier tab */
.tabbrowser-tab:has(.tab-close-button:hover, .tab-reset-button:hover) .tab-background::before {
opacity: 0.7 !important;
clip-path: inset(0 0 0 0);
}
/* ------------------------- Tabs Styling -------------------------- */
.tabbrowser-tab[pinned]:not([zen-essentials="true"]) {
.tab-background {
background-color: light-dark(rgba(255,255,255,0.25), rgba(0,0,0,0.18)) !important;
box-shadow: 0 0px 8px rgba(0, 0, 0, 0) !important;
border-radius: 12px !important;
position: relative !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}
&:hover .tab-background {
background-color: light-dark(rgba(255,255,255,0.45), rgba(0,0,0,0.45)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.55) !important;
}
&[selected="true"] .tab-background,
&[visuallyselected="true"] .tab-background {
background-color: light-dark(rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.55)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.55) !important;
}
}
.tabbrowser-tab:not([pinned]) {
.tab-background {
box-shadow: 0 0px 8px rgba(0, 0, 0, 0) !important;
border-radius: 12px !important;
position: relative !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}
&:hover .tab-background {
background-color: light-dark(rgba(255,255,255,0.4), rgba(0,0,0,0.4)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.55) !important;
}
&[selected="true"] .tab-background,
&[visuallyselected="true"] .tab-background {
background-color: light-dark(rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.35)) !important;
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.55) !important;
}
}
/* ----------------------- Natsumi Workspace buttons ------------------------- */
#zen-workspaces-button {
border-radius: 8px !important;
background-color: rgba(255,255,255,0.05) !important;
box-shadow: 0 0 12px rgba(0,0,0,0.22) !important;
padding: 3px !important;
.subviewbutton {
border-radius: 6px !important;
transition: background-color 0.2s ease !important;
font-size: 16px !important;
filter: grayscale(0%) !important;
--toolbarbutton-hover-background: color-mix(in srgb, var(--zen-branding-bg-reverse) 10%, transparent 90%) !important;
&:hover {
background-color: var(--toolbarbutton-hover-background) !important;
}
&:active {
background-color: var(--toolbarbutton-active-background) !important;
}
/*noinspection CssInvalidFunction*/
&[active] {
background-color: light-dark(rgba(255,255,255,1), rgba(255,255,255,0.2)) !important;
box-shadow: 0 0 4px rgba(0,0,0,0.32) !important;
overflow: hidden !important;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
margin-top: 50%;
background: linear-gradient(0, rgba(0, 0, 0, 0.2), transparent);
}
}
}
}
/* ==== ESSENTIALS & STUFF === */
#zen-main-app-wrapper:not(:has(#zen-welcome)) {
/* Tab click animations */
#tabbrowser-tabs:not([movingtab]) {
.tabbrowser-tab {
transition: scale 0.2s ease !important;
}
.tabbrowser-tab:active {
scale: 0.96 !important;
}
.tabbrowser-tab:has(.tab-close-button:hover) {
scale: 1 !important;
}
}
/* Split view tabs */
tab-group[split-view-group] {
.tabbrowser-tab {
& > .tab-stack > .tab-background {
&::after {
mask-image: linear-gradient(to right, black, transparent 60%);
}
}
}
}
}
#zen-essentials-container {
overflow: visible !important;
/*noinspection CssInvalidFunction*/
.tabbrowser-tab {
overflow: visible !important;
&[selected], &[visuallyselected] {
.tab-icon-image {
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
}
& > .tab-stack > .tab-background {
border: none !important;
&::before {
opacity: 0 !important;
}
&::after {
filter: saturate(180%) blur(15px) !important;
}
}
}
}
}
/* === BETTER CUSTOMIZE TOOLBAR ============================================================================================ */
#customization-container {
position: absolute;
z-index: 1;
bottom: 10px;
right: 10px;
height: 80%;
width: 70%;
border-radius: 12px;
padding: 10px;
background: light-dark(rgba(255,255,255,0.32),rgba(0,0,0,0.3)) !important;
}
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
#customization-container {
left: 10px;
}
#customization-container #customization-content-container {
flex-direction: row-reverse;
}
}
#customization-container #customization-panel-container {
padding: 10px !important;
}
#customization-container #customization-panelWrapper {
--panel-arrow-offset: 0px;
}
#customization-container .panel-arrowbox {
display: none !important;
}
#customization-container .panel-arrowcontent {
height: 100% !important;
background: light-dark(rgba(255,255,255,0.8),rgba(0,0,0,0.4)) !important;
border: none !important;
margin: 0px !important;
border-radius: 8px;
}
/* Check when the width is low */
@media (max-width: 700px) { /* Adjust the threshold as needed */
#customization-container {
border: 2px solid red; /* Temporary visual indicator */
}
}
/* === BUTTONS ABOVE URL BAR =============================================================================================== */
#zen-sidebar-top-buttons,
#zen-sidebar-top-buttons-customization-target {
& toolbarbutton:not(.titlebar-button) {
padding: 0px !important;
margin-top: -4px !important;
scale: 1;
}
}
#PanelUI-menu-button {
list-style-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;}</style><path class="st0" d="M16,22.2c3.4,0,6.2-2.8,6.2-6.2c0-3.4-2.8-6.2-6.2-6.2c-3.4,0-6.2,2.8-6.2,6.2C9.8,19.4,12.6,22.2,16,22.2z M20.9,16c0,2.7-2.2,4.9-4.9,4.9s-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9S20.9,13.3,20.9,16z"/><path class="st0" d="M26.7,16c0,5.9-4.8,10.7-10.7,10.7S5.3,21.9,5.3,16S10.1,5.3,16,5.3S26.7,10.1,26.7,16z M16,24.6c4.8,0,8.6-3.9,8.6-8.6S20.8,7.4,16,7.4S7.4,11.2,7.4,16S11.2,24.6,16,24.6z"/><path class="st0" d="M32,16c0,8.8-7.2,16-16,16S0,24.8,0,16S7.2,0,16,0S32,7.2,32,16z M16,29.1c7.3,0,13.1-5.9,13.1-13.1S23.3,2.9,16,2.9S2.9,8.7,2.9,16S8.7,29.1,16,29.1z"/></svg>') !important;
margin: 0px !important;
@media (prefers-color-scheme: light) {
filter: invert(1);
}
}
/* ---------- Windows close buttons ----------- */
.titlebar-close {
transition: background-color 0.3s ease-out, transform 0.2s ease-in-out;
}
.titlebar-close:hover {
background-color: rgba(255, 0, 0, 0.8);
transform: scale(1);
}
.titlebar-min,
.titlebar-max {
transition: background-color 0.3s ease-out, transform 0.2s ease-out;
}
.titlebar-min:hover,
.titlebar-max:hover {
background-color: rgba(200, 200, 200, 0.2);
transform: scale(1);
}
/* === FLOATING URL BAR ANIMATION/BLUR === */
#urlbar[open] {
margin-top: 3px !important;
padding-top: 6px !important;
position: fixed !important;
top: 20% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 50vw !important;
max-width: 600px !important;
min-height: 72px !important;
z-index: 9999 !important;
border-radius: 13px !important;
background: rgba(0, 0, 0, 0) !important;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.35) !important;
backdrop-filter: blur(7px) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
transition: height 0.2s ease-out !important;
}
#urlbar[open] #urlbar-results {
position: relative !important;
width: 100% !important;
top: 100% !important;
max-height: 400px !important;
overflow-y: auto !important;
opacity: 1 !important;
transition: max-height 0.2s ease-out !important;
}
/* Blur background when URL bar opens, scoped to chrome */
#browser:has(#urlbar[open]) .browserContainer {
filter: blur(2rem) brightness(70%) saturate(180%) !important;
backdrop-filter: blur(2rem) contrast(90%) brightness(30%) !important;
opacity: 0.85 !important;
scale: 1.11 !important;
transition: filter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
backdrop-filter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
}
/* Reset blur only when URL bar is closed, scoped to chrome */
.browserContainer:not(:has(#urlbar[open])) {
filter: blur(0px) brightness(100%) saturate(100%) !important;
backdrop-filter: none !important; /* Changed from blur(0px) to none */
opacity: 1 !important;
scale: 1 !important;
transition: filter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
backdrop-filter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
}
/* Floating urlbar background */
#urlbar-background {
background: rgba(0, 0, 0, 0.42) !important;
border-radius: 12px !important;
padding: 10px !important;
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3) !important;
transition: background 0.25s ease, box-shadow 0.25s ease !important;
}
/* Compact mode fixes */
#browser[sidebar="compact"] #urlbar[open] {
left: 50% !important;
transform: translateX(-50%) scale(1) !important;
}
#urlbar-zoom-button {
left: 30px !important;
}
#urlbar[open] #urlbar-zoom-button {
left: 0 !important;
}
:root[zen-compact-mode="true"] #urlbar[open] {
transform: translateX(-50%) scale(1) !important;
}
#urlbar[open] #urlbar-results>*:nth-child(n+6) {
display: none !important;
}
/*------------ URLbar loading animation --------------*/
/* Target the URL bar */
#urlbar {
.urlbar-input-container {
border-radius: 12px !important;
overflow: hidden;
}
.urlbar-input-container::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00);
background-size: 400% 400%;
border-radius: 12px !important;
clip-path: inset(0 round 12px);
animation: urlbar-loading-gradient 4s linear infinite;
animation-play-state: paused;
opacity: 0;
filter: blur(10px) brightness(1); /* Reduced blur */
transition: opacity 0.3s ease-in-out;
z-index: 0; /* Raised to prevent hiding behind */
}
}
#main-window:has(.tabbrowser-tab[selected][busy]) .urlbar-input-container::before {
animation-play-state: running;
opacity: 0.85;
}
/* Apply gradient when the selected tab is busy (loading) */
#main-window:has(.tabbrowser-tab[selected][busy]) .urlbar-input-container::before {
animation-play-state: running;
opacity: 0.485;
}
/* Keyframes for the smoother animation (like Mini Player) */
@keyframes urlbar-loading-gradient {
0% { background-position: 0% 50%; }
25% { background-position: 50% 0%; }
50% { background-position: 100% 50%; }
75% { background-position: 50% 100%; }
100% { background-position: 0% 50%; }
}
Name
Nebula (Dark Mode only)
Description
Overhauls the look of default zen to make it look nicer with new animations, better UI design, and more.
Homepage
https://github.com/JustAdumbPrsn/Nebula-A-Minimal-Theme-for-Zen-Browser
Image
https://i.ibb.co/BFQjgB2/cover.png
Type
Theme Styles
Readme
if you like this theme make sure to give it a ⭐ on Github! https://github.com/JustAdumbPrsn/Nebula-A-Minimal-Theme-for-Zen-Browser