userChrome.css using: Dark Theme w/ Compact Density + Dina TTF

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url('chrome://browser/content/browser.xul') {

    * {
       font-family: "Dina TTF" !important;
       font-size: 12px !important;
    }

    #TabsToolbar .tabbrowser-tab:after, #TabsToolbar .tabbrowser-tab:before, .tab-close-button,
    .titlebar-placeholder[type="pre-tabs"], .titlebar-placeholder[type="post-tabs"], #back-button, #forward-button {
        display: none !important;
    }

    :root {
        --ui-basecolour: #313131;
        --ui-darkcolour: #1c1c1c;
        --ui-accentcolour: #f4702d;

        --tab-selection-background-color: var(--ui-basecolour) !important;
        --tab-hover-background-color: var(--ui-basecolour) !important;
        --chrome-secondary-background-color: var(--ui-basecolour) !important;
        --url-and-searchbar-background-color: var(--ui-basecolour) !important;
        --chrome-background-color: var(--ui-darkcolour) !important;
        --tab-line-color: var(--ui-accentcolour) !important;
        --tabs-border: var(--ui-basecolour) !important;
        --chrome-selection-background-color: var(--ui-accentcolour) !important;
        background-color: var(--ui-darkcolour) !important;
    }

    #urlbar {
        border-color: var(--ui-basecolour) !important;
    }

    #nav-bar {
        box-shadow: none !important;
    }

    #main-window, browser[type="content-primary"], browser[type="content"],
    tabbrowser#content, #content, browser[type="content"] > html {
        background: var(--ui-darkcolour) !important;
   }
}