userChrome.css

@namespace xhtml url("http://www.w3.org/1999/xhtml");

/**
 * Tested on:
 *   1. NOT TESTED YET Windows 11 + Firefox 108.0
 *   2. MacOS 12.6.1 Monterey + Firefox 120.0
 */

/***************************
 * Reusable variables
 ***************************/
:root {
    --dark-0: #151d28;
    --dark-base: #192330;
    --dark-1: #233143;
    --dark-2: #2a3b51;
    --dark-3: #374e6c;
    --dark-4: #3e5879;
    --light-0: #d7dfea;
    --light-base: #afc0d5;
    --light-1: #a1b5ce;
    --light-2: #94abc7;
    --light-3: #87a0c0;
    --light-4: #7996b9;
    --accent: #63cdcf;
    --yellow: #dbc074;
    --green: #5cb8a7;
    --red: #c94f6d;

    --navbar-right-margin: 80px;  /* Space left for window control buttons. Space just righ of Menu button. */
    --navbar-left-margin: 40px;   /* Space left for "Firefox View" buttons. Space just left of navigation buttons. */
    --navbar-top-margin: -29px;

    --firefox-view-button-down-shift: -27px;
    --firefox-view-button-right-shift: 0px;
    
    /* browser-toolbar (address bar + navigation buttons + more tools button + application menu button) 
       has a slight transparant background. So making it transparant so that theme colors can be seen clearly. */
    --toolbar-bgcolor: transparent !important; 
}

:root[privatebrowsingmode="temporary"] {
    --dark-0: #1c0e34;
    --dark-base: #20103c;
    --dark-1: #2f1d4e;
    --dark-2: #38225d;
    --dark-3: #4a2d7b;
    --dark-4: #53338a;
    --light-0: #cc6b9c;
    --light-base: #b9407c;
    --light-1: #ab3b73;
    --light-2: #9c3569;
    --light-3: #8d305e;
    --light-4: #7d2b54;
    --accent: #e9207e;
    --yellow: #c9b336;
    --green: #36c987;
    --red: #c9365d;

    --navbar-right-margin: 125px;  /* Extra space compared to normal mode for "Private Window" label. */
    
    /* browser-toolbar (address bar + navigation buttons + more tools button + application menu button) 
       has a slight transparant background. So making it transparant so that theme colors can be seen clearly. */
    --toolbar-bgcolor: transparent !important; 
}



/**
 * Config for MacOS. Override values if MacOS.
 */
@supports (-moz-osx-font-smoothing:auto) {
    :root {
        --navbar-right-margin: 0px;  /* Window control buttons are on the left of the window, so no need to leave space on the right of navbar. */
        --navbar-left-margin: 100px;  /* Space left for "Firefox View" button, and window control buttons. Space just left of navigation buttons. */
        --navbar-top-margin: -43px;

        --firefox-view-button-down-shift: -17px;
        --firefox-view-button-right-shift: 70px;
    }
}


/***************************
 * Hide tabs
 ***************************/

/*
   Hide Firefox view's parent container. This has 
   1. #tabbrowser-tabs, #new-tab-button  : Hide entire tab box
   2. .tabs-alltabs-button               : Hide "All Tabs" button
   3. .titlebar-spacer                   : Titlebar spacer is space just before "Firefox view" button.
                                           Displayed when window is restored.
 */
#TabsToolbar-customization-target {
    visibility: hidden;
}

/*
   Tabs have their draggability of window disabled. So, when tabs are hidden but overlapped by navbar,
   it also disables navbar's ability to drag window. So, recursively enable drag for all child elements
   of tabs parent container.
   Also, enable for #scrollbutton-up since it is not child of tabs parent container.
 */
#TabsToolbar-customization-target *, #scrollbutton-up {
    -moz-window-dragging: drag !important;
}

/* Move nav bar up to overlap with tabs bar, which we hid above. */
#nav-bar {
    margin-top: var(--navbar-top-margin) !important;  /* Move navbar up. */
}

/* Move nav bar up to overlap with tabs bar, which we hid above. */
#nav-bar {
    margin-right: var(--navbar-right-margin) !important;
}

/**
 * Now make other cosmetic changes
 */

/* Hide dark line appears above the nav bar. */
#nav-bar {
    box-shadow: none !important;
}

/* Make little spacious nav bar. */
#navigator-toolbox {
    padding: 3px;
}



/******************************************************
 * Window control button customizations
 ******************************************************/
.titlebar-button {
    transition: all 0.3s ease !important;
    padding: 0px 8px !important;
    background: none !important;  /* Hides background colors of the buttons. */
    -moz-context-properties: fill, fill-opacity !important;  /* Hides original icons. */
    margin-top: 7px !important;  /* Align buttonbox vertically. Make in same line as address bar. */
}


#navigator-toolbox {
    border-bottom-color: transparent !important;  /* Hide underline of window control box. */
}


/* Change icons: close button */
.titlebar-close {
    -moz-appearance: none !important;
    fill: var(--red) !important;
    opacity: 0.7 !important;
    list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity' viewBox='0 0 24 24' width='24' height='24'><circle cx='12' cy='12' r='11'/></svg>") !important;
}

.titlebar-close:hover {
    opacity: 1 !important;
}

/* Change icons: minimize button */
.titlebar-min {
    -moz-appearance: none !important;
    fill: var(--yellow) !important;
    opacity: 0.7 !important;
    list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity' viewBox='0 0 24 24' width='24' height='24'><circle cx='12' cy='12' r='11'/></svg>") !important;
}

.titlebar-min:hover {
    opacity: 1 !important;
}

/* Change icons: maximize button */
.titlebar-max {
    -moz-appearance: none !important;
    fill: var(--green) !important;
    opacity: 0.7 !important;
    list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity' viewBox='0 0 24 24' width='24' height='24'><circle cx='12' cy='12' r='11'/></svg>") !important;
}

.titlebar-max:hover {
    opacity: 1 !important;
}

/* Change icons: restore button */
.titlebar-restore {
    -moz-appearance: none !important;
    fill: var(--green) !important;
    opacity: 0.7 !important;
    list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity' viewBox='0 0 24 24' width='24' height='24'><circle cx='12' cy='12' r='11'/></svg>") !important;
}

.titlebar-restore:hover {
    opacity: 1 !important;
}


/***************************
 * Other customizations
 ***************************/
/* Hide sidebar title */
#sidebar-header {
    visibility: collapse
}

/* Hide sidebar and content divider */
.sidebar-splitter {
    border-color: transparent !important;
}

/* Do we really need bookmark button right in front of your eyes all the time? */
#star-button-box {
    visibility: collapse;
}

/* Hide Open in container icon on address bar */
#pageAction-urlbar-_testpilot-containers {
    visibility: collapse;
}

/* Collapse useless tracking protection button in address bar */
#tracking-protection-icon-container {
    visibility: collapse;
}

/* Hide that random horizontal dark line above address bar */
#nav-bar {
    border-top: 0px !important;
}