FireFox CSS userChrome

/* Background Image for the Toolbar */
:root {
    --shared-wallpaper: url('img/Wallpaper.png');
}

#navigator-toolbox {
    background: var(--shared-wallpaper) no-repeat center center fixed, transparent;
    background-size: contain;
    background-position: center 0px;
}

/* Make Tabs and Toolbar Transparent */
#TabsToolbar, #urlbar, #nav-bar, .tab-background, #titlebar {
    background: transparent !important;
}

/* Blur */
#navigator-toolbox,
#TabsToolbar,
#urlbar,
#nav-bar,
.tabbrowser-tab,
.toolbarbutton-1,
#back-button,
#forward-button,
#search-container,
#PersonalToolbar {
    backdrop-filter: blur(10px) !important;
    background: rgba(0, 0, 15, 0.5) !important;
}

/* Address Bar Style */
#urlbar {
    color: #ffffff !important;
    background: transparent !important;
}

.tab-close-button.close-icon {
    display: none;
}

#urlbar[focused="true"] {
    background-color: rgb(0, 0, 15) !important;
    border-color: rgb(0, 0, 15) !important;
}

/* Tab Styling */
.tabbrowser-tab[selected="true"] {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.tabbrowser-tab:not([selected="true"]) {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.tabbrowser-tab::after {
    display: none !important;
}

/* Toolbar Button Style */
.toolbarbutton-1:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}

toolbarbutton {
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

#back-button:hover,
#forward-button:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Unnecessary buttons */
#nav-bar .toolbarbutton-1:not(#downloads-button),
#star-button-box,
#PersonalToolbar,
#search-container,
#tracking-protection-icon-box,
#tracking-protection-icon-container,
#downloads-button {
    display: none !important;
}

/* Window Control Buttons */
.titlebar-button.titlebar-close,
.titlebar-button.titlebar-min,
.titlebar-button.titlebar-max,
.titlebar-button.titlebar-restore {
    color: rgb(0, 0, 15) !important;
}

#urlbar-background,#urlbar {
    border-radius: 20px !important;
}

#urlbar[focused="true"] {
    border-radius: 20px !important;
}

:root {
  --urlbar-icon-border-radius: 20px !important;
}

#alltabs-button {
    display: none;
}

#tabs-newtab-button {
    display: none;
}

.titlebar-color{
color: AccentColorText;
background-color: AccentColor;
}

.tab-background{
border-radius: 8px 5px !important;
margin-bottom: 2px !important;
margin-top: 1px !important;
}

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 25%, transparent);
}

menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
min-height: 0px !important;
}

root{
--arrowpanel-menuitem-padding: 2px !important;
}

/* Window Control Buttons */
.titlebar-button.titlebar-close,
.titlebar-button.titlebar-min,
.titlebar-button.titlebar-max,
.titlebar-button.titlebar-restore {
    color: #ffffff !important;
}

/* Tabs Button */
#tabs-newtab-button {
    color: #ffffff !important;  /* Set the color to white */
}

/* Fullscreen Button */
#full-screen-button {
    color: #ffffff !important;  /* Set the color to white */
}

#urlbar *|input::placeholder {
 content: "Gateway to the Internet!";
 color: transparent !important;
 opacity: 0 !important;
}

#urlbar *|input::placeholder:hover {/**/}

#urlbar {
    width: 50% !important;
    left: -100px !important;
}

/* URL bar glow */
#urlbar {
    color: #ffffff !important;
    background: transparent !important;
    border-radius: 20px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgb(0, 0, 144), 0 0 30px rgb(0, 0, 144), 0 0 40px rgb(0, 0, 144);
    animation: blue-glow 1.5s ease-in-out infinite;
}

@keyframes blue-glow {
    0% {
        box-shadow: 0 0 20px rgb(0, 0, 144), 0 0 30px rgb(0, 0, 144);
    }
    50% {
        box-shadow: 0 0 40px rgb(0, 0, 144), 0 0 50px rgb(0, 0, 144);
    }
    100% {
        box-shadow: 0 0 20px rgb(0, 0, 144), 0 0 30px rgb(0, 0, 144);
    }
}

/* Glow effect on focus */
#urlbar[focused="true"] {
    background-color: rgba(0, 0, 144, 0.2) !important;
    box-shadow: 0 0 50px rgb(0, 0, 144), 0 0 40px rgb(0, 0, 144);
}

/* Hover Glow Effect */
#urlbar:hover {
    box-shadow: 0 0 50px rgb(0, 0, 144), 0 0 60px rgb(0, 0, 144);
}

/* Search Bar Blur */
#urlbar-input {
    filter: blur(4px);
}