userChrome.css

/* * { */
  /* font-family: Proxima Nova, NanumBarunGothic, sans-serif !important; */
/* } */


/* Close button on tabs */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    color: #ffffff !important;
    border-radius: 1280px !important;
    padding: 0px 3px 0px 3px !important;
    width: 19px !important;
    height: 19px !important;
}

#TabsToolbar, .tabbrowser-tab {
    height: 20px !important;
    font-weight: bold !important;
}

#titlebar {
    --tab-min-height: 15px !important;
    width: 20px !important;
    /* --proton-tab-block-margin: 2px !important; */
}

/* Hide window controls on fullscreen */
#window-controls { display: none; }

/* Change color of normal tabs */
tab:not([selected="true"]) {
    /* color: #699999 !important; */
    /* background-color: #343d46 !important; */
    color: #6c7980 !important;
    border: none;
}

/* tab font */
tab {
    font-family: 'Jetbrains Mono', monospace;
    border: none;
    }

/* safari style tab width */
.tabbrowser-tab[fadein]{ max-width: 100vw !important; border: none; }

/* Hide Nav Bar */
#nav-bar { visibility: collapse; }

toolbar#nav-bar {
    background: var(--base_color1) !important;
    box-shadow: none !important;
    padding-bottom: 3px !important;
    --toolbarbutton-icon-fill-attention:var(--outer_color3);
}
toolbar#nav-bar toolbarbutton .toolbarbutton-icon,
toolbar#nav-bar toolbarbutton #fxa-avatar-image {
    transition: all 0.3s ease !important;
    fill: var(--orbit_color) !important;
}

/* style navbar */
#nav-bar,
#navigator-toolbox {
    border-width: 0 !important;
    font: 8px;
}

/* For Animation and animation delay uncomment the two lines: transition, transition-delay */
#nav-bar:not([customizing]) {
    visibility: visible;
    margin-top: -40px;
    /* transition-delay: 1s; */
    filter: alpha(opacity=0);
    opacity: 0;
    transition: visibility, ease 0.5s, margin-top, ease 0.5s, opacity, ease 0.5s,
    rotate, ease 0.4s !important;
}

#nav-bar:hover,
#nav-bar:focus-within,
#urlbar[focused='true'],
#identity-box[open='true'],
#titlebar:hover + #nav-bar:not([customizing]),
#toolbar-menubar:not([inactive='true']) ~ #nav-bar:not([customizing]) {
    visibility: visible;
    margin-top: 0px;
    filter: alpha(opacity=100);
    opacity: 100;
    margin-bottom: -0.2px;
}
/* end nav-bar */

/* Empty space before and after the url bar */
#customizableui-special-spring1,
#customizableui-special-spring2 { display: none; }

/* style navbar */
#nav-bar,
#navigator-toolbox {
    border-width: 0 !important;
  }

#sidebar-button { display: none; }

#star-button {
    transition: all 0.3s ease !important;
    border-radius: 3px !important;
}


/* #main-menubar */
/* { */
    /* background-color: #343d46 !important; */
/* } */

/* hide tab bar if only one tab open */
tab:only-of-type { display: none; }

/* remove min-height from tabs toolbar (needed for fullscreen one tab) */
#TabsToolbar, #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, #tabbrowser-arrowscrollbox {
    padding: 0px 0px 0px 0px !important;
    /* color: #699999 !important; */
    /* background: #285577 !important; */
    /* color: #fff !important; */
    /* background-color: #343d46 !important; */
}

/* Tab: selected colors */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
    /* background: #285577 !important; */
    background: #625f !important;
    color: #ffffff !important;
    border: none !important;
}

/* Tab: hovered colors */
#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
    /* background: #285577 !important; */
    background: #625f !important;
    color: #ffffff !important;
    border: none !important;
 }

/* remove white margin around active tabs */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab[visuallyselected]::after {
    border: none !important;
}

/*AGENT_SHEET*/
#main-window #navigator-toolbox #TabsToolbar:not(:-moz-lwtheme){
    /* background: #285577 !important; */
    background: #2855 !important;
}
/* hide website icons */
.tabbrowser-tab .tab-icon-image {
    display: none !important;
    padding: 0 !important;
  }

/* show favicon if tab is pinned */
.tabbrowser-tab[pinned] .tab-icon-image {
    display: inline !important;
    padding: 0 !important;
  }

/* hide window controls */
.titlebar-buttonbox-container {
    display: none;
}


/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/* thanks to Speravir: https://github.com/Aris-t2/CustomCSSforFx/issues/368#issuecomment-859216327 */

/* https://old.reddit.com/r/FirefoxCSS/comments/nqyhcm/anyone_got_any_css_to_put_the_audible_icon_back/h0eti2o/ */
.tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
  max-height: 0px !important;
}
.tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]) {
  grid-area: s;
}

.tab-icon-overlay {
  padding: 0 !important;
}

.tab-icon-overlay:hover {
  background: none !important;
}
.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) > * {
  opacity: 1 !important;
}

/* .tab-icon-overlay[soundplaying] { */
  /* fill: #ffffff !important;/\* var(--green-70) *\/ */
/* } */
/* .tab-icon-overlay[muted] { */
  /* fill: #ffffff !important;/\* var(--red-60) *\/ */
/* } */
/* .tab-icon-overlay[activemedia-blocked] { */
  /* fill: #ffffff !important;/\* var(--yellow-50) *\/ */
/* } */