487 lines
17 KiB
CSS
487 lines
17 KiB
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, * {
|
|
|
|
font-palette: white !important;
|
|
color-scheme: dark !important; /*--<--dont touch--*/
|
|
|
|
--uc-ultima-window: #231200;
|
|
--lwt-accent-color: #221a0f;
|
|
|
|
--uc-dark: #231200;
|
|
--uc-light: #ffcc99;
|
|
--uc-light-dark: #DCB893; /* FONT ON SELECT here or after*/
|
|
--uc-dark-light: #c2a383;
|
|
--uc-ultima-accent-i: #EDF783; /* nope */
|
|
--uc-ultima-accent-ii: #17347B; /* nope */
|
|
--uc-ultima-accent-iii: #c2a383;
|
|
--uc-ultima-accent-iv: rgba(54, 39, 18, 0.5); /* urlbar background */
|
|
--uc-ultima-background-i: #362712; /* Tabs background */
|
|
--uc-ultima-background-ii: #231200 ;
|
|
--uc-ultima-background-iii: #c2a383; /* text on selected, hovering pills */
|
|
--uc-ultima-background-iv: #362712; /*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: #c2a383;
|
|
--uc-panel-border: #274D58;
|
|
--uc-panel-border-ii: #5e3a1b; /*around main*/
|
|
--uc-context-menu: rgba(54, 39, 18,0.95); /* Right Click*/
|
|
--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: var(--uc-all-border-radius);
|
|
}
|
|
|
|
/*--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="true"]),:root:not(:-moz-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(--uc-ultima-background-ii) !important;
|
|
border-bottom: 1px solid rgba(0,0,0,0) !important;}
|
|
|
|
#navigator-toolbox { &:-moz-window-inactive {
|
|
background-color: var(--uc-ultima-background-ii) !important;
|
|
color: var(--toolbox-non-lwt-textcolor-inactive) !important; }}
|
|
|
|
:root {
|
|
@media (-moz-platform: windows) {
|
|
& { --inactive-titlebar-opacity: 1 !important; }}}
|
|
|
|
|
|
/*----------main window background----------*/
|
|
|
|
body {background: var(--uc-ultima-background-ii) !important;}
|
|
|
|
/*--content window--*/
|
|
|
|
#appcontent, #browser, #tabbrowser-tabbox, #tabbrowser-tabpanels, .browserSidebarContainer
|
|
{ background: var(--uc-ultima-background-ii) !important; }
|
|
|
|
/*HERE ENDS --toolbar-bgcolor */
|
|
|
|
.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-------------------*/
|
|
|
|
#main-window:not([lwtheme="true"]) #tabbrowser-tabs
|
|
{background: var(--uc-tabs-background); box-shadow: 0.1rem 0.3rem 0.4rem -0.1rem rgba(25,25,25,0.8); --tab-loading-fill: var(--uc-ultima-accent-i) !important;}
|
|
|
|
/*--pinned--*/
|
|
|
|
.tabbrowser-tab[pinned=""] .tab-background, .tabbrowser-tab[pinned="true"] .tab-background{
|
|
background: var(--tab-selected-bgcolor) !important;
|
|
box-shadow: 0 0 4px rgba(0,0,0,.4);}
|
|
|
|
.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="true"]) #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="true"]) #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="true"]) #urlbar[open] > #urlbar-background
|
|
{border-color: var(--uc-ultima-accent-iii) !important;}
|
|
|
|
#urlbar[breakout][breakout-extend] {top: 2px !important;}
|
|
|
|
#main-window:not([lwtheme="true"]) #urlbar[breakout][breakout-extend]{
|
|
background-color: var(--uc-context-menu) !important;
|
|
border-radius: 10px;}
|
|
|
|
#main-window:not([lwtheme="true"]) #urlbar-zoom-button
|
|
{background-color: var(--uc-active) !important;}
|
|
|
|
#urlbar-container, #search-container {top: 2px !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="true"]) .panel-subview-body
|
|
{background: var(--uc-ultima-background-iii) !important;}
|
|
|
|
#main-window:not([lwtheme="true"]) .menupopup-arrowscrollbox
|
|
{background-color: var(--uc-ultima-background-ii) !important;}
|
|
|
|
#main-window:not([lwtheme="true"]) .toolbarbutton-icon:hover,
|
|
#main-window:not([lwtheme="true"]) .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="true"]) #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-all-border-radius);}
|
|
.titlebar-button.titlebar-close {}
|
|
|
|
#main-window:not([lwtheme="true"]) .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;}
|
|
|
|
/*--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: -4px !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="true"]) .panel-subview-body
|
|
{background: var(--uc-ultima-background-ii) !important;}
|
|
#main-window:not([lwtheme="true"]) panelview,
|
|
#main-window:not([lwtheme="true"]) #unified-extensions-view
|
|
{background: var(--uc-ultima-background-ii) !important}
|
|
|
|
/*--title buttons--*/
|
|
|
|
/*minmaxclose*/
|
|
|
|
#main-window:not([lwtheme="true"]) .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--*/
|
|
#unified-extensions-button {list-style-image: url("icons/extensions.png") !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;}
|
|
|
|
/*--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--*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|