all-global-theme-fullmoon.css

/* Full Moon Color Scheme (Dark) styling is split between two options
--- [ default ] and [ lwt - for when themes are applied ]
--- (--toolbar-bgcolor) is used to define the default background
--- and (--lwt-accent-color) when themes (lwt) are applied
*/

/*-------------------------------- Global Variables -----------------------------------*/
/*global variables used for ease of modification, and future customization*/
/*-------------------------------------------------------------------------------------*/

/*--this whole document is wrapped in a media query for systems in dark mode--*/

@media (prefers-color-scheme: dark) {

:root, body, * {

color-scheme: dark !important; /*--<--dont touch--*/

  --uc-ultima-window: rgb(43, 42, 51);

  --uc-dark: #000;
  --uc-light: #fff;
  --uc-light-dark: #fff;
  --uc-dark-light: #000000;
  --uc-ultima-accent-i: #EDF783;
  --uc-ultima-accent-ii: #17347B;
  --uc-ultima-accent-iii: rgb(255, 255, 255);
  --uc-ultima-accent-iv: rgba(28, 27, 34, 0.5);
  --uc-ultima-background-i: rgba(28, 27, 34, 0.5);
  --uc-ultima-background-ii: rgba(28, 27, 34, 0.86);
  --uc-ultima-background-iii: rgba(28, 27, 34, 0.96);
  --uc-ultima-background-iv: rgb(35, 35, 42); /*keep it similar to tabs background ^*/
  --uc-transparent: rgba(0,0,0,0);
  --uc-selected: rgba(0,0,0,0.65);
  --uc-active: rgba(0,0,0,0.75);
  --uc-text: rgb(255, 255, 255);
  --uc-panel-border: rgba(25, 25, 25, 1);
  --uc-panel-border-ii: rgba(45, 45, 45, 0.5);
  --uc-context-menu: rgba(28, 27, 34,1);
  --uc-tabs-background: var(--uc-ultima-background-i);
  --uc-sb-themed: var(--uc-ultima-background-i);
  --uc-sb-themed-ii: var(--uc-ultima-accent-iv);
  --uc-sb-background: var(--uc-transparent);
  --uc-tabs-lwt: color-mix(in srgb, var(--lwt-accent-color) 75%, #000);
  --uc-sb-lwt: color-mix(in srgb, var(--lwt-accent-color) 75%, #000);
  --uc-panel-background: var(--uc-ultima-background-iii);
  --urlbar-icon-border-radius: var(--uc-all-border-radius);
  --arrowpanel-menuitem-border-radius: var(--uc-all-border-radius);
  --arrowpanel-border-radius: var(--uc-all-border-radius);
  --toolbarbutton-border-radius: var(--uc-all-border-radius);
  --urlbar-icon-border-radius: var(--uc-all-border-radius);
  --button-border-radius: 10px;
  --uc-button-border-radius: 10px;
}

/*--scrollbars--*/
* {scrollbar-width:auto !important; scrollbar-color:rgba(50, 50, 60, 0.0) rgba(5,5,5, 0.0) !important;}
#navigator-toolbox
  {scrollbar-width:auto !important; scrollbar-color:rgba(50, 50, 60, 0.3) rgba(5,5,5, 0.0) !important;}

/*-------------------------------------------------------------------------------------
    - Full Moon Color Palette Application
-------------------------------------------------------------------------------------*/

#main-window:not([lwtheme]), :root:not([lwtheme]) {

  --tab-selected-bgcolor: var(--uc-active) !important;
  --tab-selected-textcolor: var(--uc-text) !important;
  --tab-loading-fill: var(--uc-ultima-accent-i) !important;

  --button-hover-bgcolor: var(--uc-selected) !important;
  --toolbarbutton-hover-background: var(--uc-selected) !important;
  --button-active-bgcolor: var(--uc-active) !important;
  --toolbarbutton-active-background: var(--uc-active) !important;
  --button-primary-bgcolor: var(--uc-ultima-accent-i) !important;
  --button-primary-hover-bgcolor: var(--uc-ultima-accent-i) !important;
  --buttons-destructive-hover-bgcolor: #9d1c1c;  /*red*/
  --buttons-destructive-active-bgcolor: #7d2828; /*red*/
  --toolbarbutton-icon-fill: var(--uc-text) !important; /*toolbar button color*/

  --toolbar-field-background-color: var(--uc-ultima-accent-iv) !important;
  --toolbar-field-border-color: var(--uc-ultima-accent-iii) !important;
  --toolbar-field-focus-border-color: var(--uc-ultima-accent-iii) !important;
  --urlbarView-result-button-selected-color: var(--uc-text) !important;
  --urlbarView-result-button-selected-background-color: var(--uc-selected) !important;
  --urlbarView-highlight-background: var(--uc-selected) !important;
  --urlbarView-hover-background: var(--uc-selected) !important;
  --urlbar-box-hover-bgcolor: var(--uc-selected) !important;
  --urlbar-box-hover-text-color: var(--uc-text) !important;

  --toolbar-field-color: var(--uc-text) !important;
  --toolbar-field-focus-color: var(--uc-text) !important;
  --toolbar-color: var(--uc-text) !important;
  --toolbar-field-color: var(--uc-text) !important;
  --toolbar-field-focus-color: var(--uc-text) !important;

  --sidebar-text-color: var(--uc-text) !important;
  --arrowpanel-background: var(--uc-panel-background) !important;
  --arrowpanel-border-color: var(--uc-active) !important;
  --arrowpanel-color: var(--uc-text) !important;
  --newtab-background-color: var(--uc-tabs-background) !important;

  --panel-background: var(--uc-panel-background) !important;
  --panel-item-hover-bgcolor: var(--uc-selected) !important;
  --panel-banner-item-hover-bgcolor: var(--uc-selected) !important;
  --short-notification-background: var(--uc-ultima-accent-ii) !important;
  --panel-border-color: var(--uc-panel-border) !important;
  --organizer-toolbar-background: var(--uc-ultima-accent-iv) !important;
  --organizer-pane-background: var(--uc-ultima-accent-iv) !important;
  --organizer-content-background: var(--uc-ultima-accent-iv) !important;
  --organizer-hover-background: var(--uc-ultima-accent-iv) !important;
  --organizer-selected-background: var(--uc-selected) !important;
  --organizer-focus-selected-color: var(--uc-selected) !important;
  --organizer-outline-color: rgb(0,221,255) !important;
  --organizer-toolbar-field-background: var(--uc-ultima-accent-iv) !important;
  --organizer-toolbar-field-background-focused: rgb(66, 61, 98) !important;
  --content-select-background-image: none !important;

}

:root[dialogroot] {--in-content-page-background: var(--uc-ultima-background-iii) !important;}

/*-------------------------------------------------------------------------------------
    - Default Color Coordination
-------------------------------------------------------------------------------------*/

/*------------fixing the nav bar-------------*/

#navigator-toolbox {
  background-color: var(--toolbar-bgcolor) !important;
  border-bottom: 1px solid rgba(0,0,0,0) !important;
}

#navigator-toolbox { &:-moz-window-inactive {
  background-color: var(--toolbar-bgcolor) !important;
  color: white !important;
}}

:root { @media (-moz-platform: windows) { & {
--inactive-titlebar-opacity: 1 !important;
}}}

:root { @media (-moz-platform: linux) { & {
--inactive-titlebar-opacity: 1 !important;
}}}

/*----------main window background----------*/

body {background: var(--toolbar-bgcolor) !important;}

/*--content window--*/

#appcontent, #browser, #tabbrowser-tabbox, #tabbrowser-tabpanels, .browserSidebarContainer
  { background: var(--toolbar-bgcolor) !important; }

.browserStack
  { background: var(--uc-transparent) !important; }


/*-----------------side bar-----------------*/

#sidebar-header {
  background-color: var(--uc-sb-themed-ii) !important;
} #sidebar {
  background: var(--uc-sb-themed) !important;
} #sidebar-box {
  background-color: var(--uc-transparent) !important;
  box-shadow: 0.1rem 0.3rem 0.4rem -0.1rem rgba(25,25,25,0.8);
}

#sidebar-search-container #search-box, #sidebar-search-container #viewButton {
  appearance: none !important;
  border-radius: 10px !important;
  background-color: var(--uc-ultima-accent-iv) !important;
  box-shadow: 0.1rem 0.3rem 0.4rem -0.1rem rgba(25,25,25,0.8);
}
#bookmarksPanel #sidebar-search-container #search-box {
  appearance: none !important;
  border-radius: 10px !important;
  background-color: var(--uc-ultima-accent-iv) !important;
}

/*-------------------tabs-------------------*/

/*--the panel that holds the vertical tabs--*/

#main-window:not([lwtheme]) #tabbrowser-tabs {
  background: transparent;
  --tab-loading-fill: var(--uc-ultima-accent-i) !important;
}

/*--tabs toolbar container that wraps around the area--*/

#main-window:not([lwtheme]) #TabsToolbar-customization-target {
  box-shadow: 0.15rem 0.3rem 0.4rem -0.1rem rgba(25,25,25,0.8);
  background: var(--uc-ultima-background-iv);
}

/*--pinned tabs style--*/

.tabbrowser-tab[pinned=""] .tab-background, .tabbrowser-tab[pinned="true"] .tab-background {
  background-color: var(--tab-selected-bgcolor) !important;
  box-shadow: inset 0 0 1px 1px #94f3ff !important;
}

/*--tabs tooltip styling--*/

.tab-preview-container {
  background-color: var(--uc-context-menu) !important;
  color: var(--uc-light-dark) !important;
  width: 225px !important;
  border: 1px solid var(--uc-text) !important;
}

/*------------------URL bar----------------*/

#main-window:not([lwtheme]) #urlbar:is([focused="true"], [open]) > #urlbar-background, #searchbar:focus-within {
  background-color: var(--uc-ultima-accent-iv) !important;
  border-radius: var(--uc-all-border-radius) !important;
}

#urlbar:is([focused="true"], [open]) > #urlbar-background, #searchbar:focus-within {
  border-radius: var(--uc-all-border-radius) !important;
}

#main-window:not([lwtheme]) #urlbar-background, #searchbar {
  background-color: var(--uc-ultima-accent-iv) !important;
  border-radius: 10px !important;
  border: 0 !important;
  box-shadow: 0.1rem 0.4rem 0.4rem -0.1rem rgba(25,25,25,0.8);
}

#main-window:not([lwtheme]) #urlbar[open] > #urlbar-background {
  border-color: var(--uc-ultima-accent-iii) !important;
}

#main-window:not([lwtheme]) #urlbar[breakout][breakout-extend] {
  background-color: var(--uc-context-menu) !important;
  border-radius: 10px;
}

#main-window:not([lwtheme]) #urlbar-zoom-button {
  background-color: var(--uc-active) !important;
  margin-top:3px !important;
}

/*---------customize toolbar page-----------*/

#customization-container {background-color: var(--uc-sb-background) !important;}

/*---------bookmark items adjustment--------*/

#PersonalToolbar {background: var(--uc-transparent) !important;}

/*----------------menu popups---------------*/

#main-window:not([lwtheme]) .panel-subview-body
  {background: var(--uc-ultima-background-iii) !important;}

#main-window:not([lwtheme]) .menupopup-arrowscrollbox
  {background-color: var(--uc-ultima-background-ii) !important;}

#main-window:not([lwtheme]) .toolbarbutton-icon:hover,
#main-window:not([lwtheme]) .toolbarbutton-icon[open] {
  background-color: var(--uc-selected) !important;}

:root[dialogroot] {
  --in-content-page-background: var(--uc-ultima-background-iii) !important;
  color: var(--uc-light)  !important;
}

#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox)
  {--panel-color: black !important;}

#ContentSelectDropdownPopup .menupopup-arrowscrollbox { &::part(content) {
  --panel-color: black !important;
}}

#ContentSelectDropdownPopup menupopup, #ContentSelectDropdownPopup panel { &::part(content) {
  --panel-color: black !important;
}}

/*------------------buttons-----------------*/

#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon
  {background-color: var(--uc-selected) !important;}

/*---bookmarks star icon--*/

#main-window:not([lwtheme]) #star-button[starred] {
  fill-opacity: 1 !important;
  fill: var(--uc-ultima-accent-i) !important;
}

/*--title bar buttons - min, max, close--*/

.titlebar-button {
  border-radius: var(--uc-button-border-radius);
}

#main-window:not([lwtheme]) .titlebar-button:hover {
  background-color: var(--uc-selected) !important;
}

.titlebar-close:hover {
  background-color: rgb(191, 66, 66) !important;
}

/*-------------------------------------------------------------------------------------
    - LWT themes
-------------------------------------------------------------------------------------*/
/*--when themes are applied use theme background--*/

/*--main window background--*/

#main-window[lwtheme="true"] body
  {background: var(--lwt-accent-color) !important; }

/*--content window--*/

#main-window[lwtheme="true"] #appcontent, #main-window[lwtheme="true"] #browser,
#main-window[lwtheme="true"] #tabbrowser-tabbox, #main-window[lwtheme="true"] #tabbrowser-tabpanels,
#main-window[lwtheme="true"] .browserSidebarContainer
  { background: var(--uc-transparent) !important; }

#main-window[lwtheme="true"] .browserStack
  { background: var(--uc-transparent) !important; }

#nav-bar {background: initial !important;}


/*---------------side bar---------------*/

/*side bar themed*/

#main-window[lwtheme="true"] #sidebar-header
  { background: var(--uc-sb-lwt) !important; 
} #main-window[lwtheme="true"] #sidebar {
  background: var(--uc-sb-lwt) !important;
} #main-window[lwtheme="true"] #sidebar-box {
  background: var(--uc-transparent) !important;
} .sidebar-panel[lwt-sidebar] {
  background-color: var(--uc-transparent) !important;
}

/* ------------------- tabs ------------------- */

/* when theme applied */

:root:not([customizing]) #tabbrowser-tabs:-moz-lwtheme
  {background-color: var(--uc-tabs-lwt) !important;}

#main-window[lwtheme="true"] #TabsToolbar-customization-target {
  background: var(--uc-tabs-lwt) !important;
}

/*--pinned themed-*/

#main-window[lwtheme="true"] .tab-content[pinned=""] .tab-background,
#main-window[lwtheme="true"] .tab-content[pinned="true"] .tab-background
  { background: var(--lwt-accent-color);}

#main-window[lwtheme="true"] 
  {--tab-selected-bgcolor: var(--lwt-accent-color) !important;}

.tabbrowser-tab[pending="true"] {opacity: 0.3 !important;}

/*-------------------------------------------------------------------------------*/
/*----------------------------------extra----------------------------------------*/
/*-------------------------------------------------------------------------------*/

tooltip {
  background-color: var(--uc-ultima-background-i) !important;
  color: var(--uc-light) !important;
  border-color: var(--uc-dark) !important;
}

/*------------------sidebar extra------------------*/
/*--font size, padding, borders, etc--*/

#sidebar-header {
  font-size: 1.333em;
  padding: 7px !important;
  border-bottom: 0px !important;
}

#sidebar-close {opacity: 0.6 !important;} /*close button*/

/* bookmarks, history, splitter */

#sidebar-search-container #search-box {height: 3em;}

splitter {@media (-moz-platform: windows) { & {
  border-width: 0 0px !important;
  border-style: solid !important;
  background-color: transparent !important;
} } }

@media not (-moz-platform: linux) { .sidebar-splitter {
  border: 0 solid !important;
  border-inline-end-width: 1px !important;
  border-color: transparent !important;
  min-width: 1px !important;
  width: 4px !important;
  background-color: transparent !important;
  margin-inline-start: -7px !important;
} }

/*------------------tabs------------------*/

/* tab background active tab */
/*
.tab-background:is([selected], [multiselected]) {
  box-shadow: 0 0 4px rgba(0,0,0,.4);}
*/  
/* tab background selected */
/*
.tab-background:is([selected], [multiselected]) {
  background-color: light-dark(rgb(255, 255, 255), rgb(66, 65, 77));
  background-origin: border-box;
  background-repeat: repeat-x;
}
*/
/*-------------------*/

/*-----------------extensionspanel----------------------*/
#main-window:not([lwtheme]) .panel-subview-body
  {background: var(--uc-ultima-background-ii) !important;}

#main-window:not([lwtheme]) panelview,
#main-window:not([lwtheme]) #unified-extensions-view
  {background: var(--uc-ultima-background-ii) !important}

/*--title buttons--*/

/*minmaxclose*/

#main-window:not([lwtheme]) .titlebar-button {
  stroke: var(--uc-ultima-accent-iii) !important;
} #main-window[lwtheme="true"] .titlebar-button {
  stroke: var(--toolbarbutton-icon-fill) !important;
}

/*---------fix titlebar opacity----------*/

:root { @media (-moz-platform: windows) { & {
  --inactive-titlebar-opacity: 1 !important;
}}}

/*---------full screen indicator label----------*/
/*--the label that says ("website.com is now in full screen...")--*/

#fullscreen-warning, *.pointerlockfswarning {
  opacity: 0.4 !important;
  border-radius: 20px !important;
} #fullscreen-warning * {
  border-radius: var(--uc-all-border-radius) !important;
}

/*-----------------------------------------------------------------------------------*/
/*---------------------------------CUSTOM ICONS--------------------------------------*/
/*-----------------------------------------------------------------------------------*/

/*--extension menu--*/
#main-window:not([lwtheme]) #unified-extensions-button {
  list-style-image: url("icons/extensions.svg") !important;
  fill: var(--uc-ultima-accent-iii) !important;
}
#main-window[lwtheme="true"] #unified-extensions-button {
  list-style-image: url("icons/extensions.svg") !important;
  fill: var(--lwt-accent-color) !important;
}
/*--bookmarks folder icon--*/
.bookmark-item[container=true] {
  list-style-image: url("icons/bm.png") !important;
}
/*--ublock on--*/
#ublock0_raymondhill_net-BAP image{
  list-style-image: url("icons/ubon.png") !important;
}
/*--ublock off--*/
#ublock0_raymondhill_net-BAP[tooltiptext="uBlock Origin (off)"] image{
  list-style-image: url("icons/uboff.png") !important;
}
#forward-button image{
  list-style-image: url("chrome://global/skin/icons/arrow-right.svg") !important;
  stroke: var(--uc-ultima-accent-iii) !important;
}
#back-button image{
  list-style-image: url("chrome://global/skin/icons/arrow-left.svg") !important;
  stroke: var(--uc-ultima-accent-iii) !important;
}


/*--notification badges--*/
.toolbarbutton-badge {
  background-color: rgba(0,0,0,0.3) !important;
  box-shadow: 0 !important;
  color: var(--uc-light) !important;
  text-shadow: #FDFFFF 0.5px 0 15px!important;
}

/* --downloads button phases (disabled)--
#downloads-button image{
list-style-image: url(icons/downloads.png) !important;
width:16px !important; height:16px !important;}

#downloads-button[attention="success"] image{
list-style-image: url(icons/downloadssuccess.gif) !important;
width:16px !important; height:16px !important; opacity: 1 !important;}

#downloads-button[progress] image{
list-style-image: url(icons/downloadsprogress.gif) !important;
width:16px !important; height:16px !important;}
*/



/*-----------------------------------------------------------------------------------*/
/*-------------------------------------END-------------------------------------------*/
/*-----------------------------------------------------------------------------------*/



} /*--<--this marks the end of the journey--*/