Create Theme: Nebula Theme

### 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

- [ ] JSON Color Theme

### Theme Styles

```css
/* ==== 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><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%; }
}
```

### Readme

```markdown
if you like this theme make sure to give it a ⭐ on Github!

https://github.com/JustAdumbPrsn/Nebula-A-Minimal-Theme-for-Zen-Browser
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Create Theme: Nebula Theme #1311

Name

Description

Homepage

Image

Type

Theme Styles

Readme

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

Create Theme: Nebula Theme #1311

Description

Name

Description

Homepage

Image

Type

Theme Styles

Readme

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions