diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2d415cc..e9761bb 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -1108,32 +1108,89 @@ --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; + --lwt-text-color: var(--lwt-tab-text) !important; --toolbar-color: var(--lwt-tab-text) !important; + --toolbar-non-lwt-textcolor: var(--lwt-tab-text) !important; + --arrowpanel-color: var(--lwt-tab-text) !important; --focus-outline-color: rgb(172, 112, 255) !important; - /* Toolbar */ --toolbar-bgcolor: #322560 !important; - /* Behind Tabs */ + --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; --lwt-accent-color: #19162f !important; - /* Search Bar Colour */ + --in-content-page-background: var(--lwt-accent-color) !important; --toolbar-field-background-color: #0b0724 !important; - /* Turns Tab Into Same Colour As Toolbar */ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; - /* What Happens When You Hover Over A Button */ --toolbarbutton-hover-background: rgba(255, 255, 255, 0.05) !important; - /* Click On A Button, This Colour Is What The Button Will Be */ --toolbarbutton-active-background: #4d4175 !important; - /* Click A Button With A Context Menu? This Is The Menu Colour */ --arrowpanel-background: #1d1935 !important; - /* Tool Bar Context Menu Outline */ --arrowpanel-border-color: #322560 !important; - /* Line Between Toobar And Site */ --chrome-content-separator-color: none !important; - /* Colour Of The Expanded Address Bar */ --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; - /* Hovering Over The Autocomplete Items Colour */ --autocomplete-popup-hover-background: #1d1935 !important; - /* Clicking On Said Autocomplete Item Colour */ --autocomplete-popup-highlight-background: rgba(65, 48, 117, 0.5) !important; + --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent) !important; + --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important; + --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important; + --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent) !important; + } + :root[privatebrowsingmode="temporary"] #navigator-toolbox:-moz-lwtheme, + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] + #navigator-toolbox:-moz-lwtheme, + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + #navigator-toolbox:-moz-lwtheme, + :root[style*="--lwt-accent-color: rgb(237, 237, 241); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + #navigator-toolbox:-moz-lwtheme, + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] + #navigator-toolbox:-moz-lwtheme, + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + #navigator-toolbox:-moz-lwtheme { + --lwt-tabs-border-color: var(--focus-outline-color) !important; + } + :root[privatebrowsingmode="temporary"] #navigator-toolbox, + :root[privatebrowsingmode="temporary"][lwtheme-image] #navigator-toolbox:-moz-lwtheme, + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #navigator-toolbox, + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"][lwtheme-image] + #navigator-toolbox:-moz-lwtheme, + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + #navigator-toolbox, + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image] + #navigator-toolbox:-moz-lwtheme, + :root[style*="--lwt-accent-color: rgb(237, 237, 241); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + #navigator-toolbox, + :root[style*="--lwt-accent-color: rgb(237, 237, 241); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image] + #navigator-toolbox:-moz-lwtheme, + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image] + #navigator-toolbox:-moz-lwtheme, + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + #navigator-toolbox, + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image] + #navigator-toolbox:-moz-lwtheme { + background-color: var(--lwt-accent-color) !important; + } + :root[privatebrowsingmode="temporary"] #TabsToolbar, + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + #TabsToolbar, + :root[style*="--lwt-accent-color: rgb(237, 237, 241); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + #TabsToolbar, + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + #TabsToolbar { + --lwt-tab-line-color: var(--focus-outline-color) !important; + } + :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] + notification-message[message-bar-type="infobar"], + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + notification-message[message-bar-type="infobar"], + :root[style*="--lwt-accent-color: rgb(237, 237, 241); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + notification-message[message-bar-type="infobar"], + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] + notification-message[message-bar-type="infobar"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + notification-message[message-bar-type="infobar"] { + --message-bar-text-color: var(--lwt-tab-text) !important; + --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, @@ -1144,7 +1201,6 @@ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] menupopup { - /* Right Click Menu */ --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; --menu-color: #eeeeee !important; diff --git a/src/theme/_private.scss b/src/theme/_private.scss index 46265e2..c2687b5 100644 --- a/src/theme/_private.scss +++ b/src/theme/_private.scss @@ -8,48 +8,75 @@ // Like Alpen glow --lwt-tab-text: rgba(232, 224, 255) !important; + --lwt-text-color: var(--lwt-tab-text) !important; --toolbar-color: var(--lwt-tab-text) !important; + --toolbar-non-lwt-textcolor: var(--lwt-tab-text) !important; + --arrowpanel-color: var(--lwt-tab-text) !important; --focus-outline-color: rgb(172, 112, 255) !important; - /* Toolbar */ + // Toolbar --toolbar-bgcolor: #322560 !important; + --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; - /* Behind Tabs */ + // Behind Tabs --lwt-accent-color: #19162F !important; + --in-content-page-background: var(--lwt-accent-color) !important; - /* Search Bar Colour */ + // Search Bar Colour --toolbar-field-background-color: #0B0724 !important; - /* Turns Tab Into Same Colour As Toolbar */ + // Turns Tab Into Same Colour As Toolbar --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; - /* What Happens When You Hover Over A Button */ + // What Happens When You Hover Over A Button --toolbarbutton-hover-background: rgba(255, 255, 255, 0.05) !important; - /* Click On A Button, This Colour Is What The Button Will Be */ + // Click On A Button, This Colour Is What The Button Will Be --toolbarbutton-active-background: #4D4175 !important; - /* Click A Button With A Context Menu? This Is The Menu Colour */ + // Click A Button With A Context Menu? This Is The Menu Colour --arrowpanel-background: #1D1935 !important; - /* Tool Bar Context Menu Outline */ + // Tool Bar Context Menu Outline --arrowpanel-border-color: #322560 !important; - /* Line Between Toobar And Site */ + // Line Between Toobar And Site --chrome-content-separator-color: none !important; - /* Colour Of The Expanded Address Bar */ + // Colour Of The Expanded Address Bar --toolbar-field-focus-background-color:var(--toolbar-field-background-color) !important; - /* Hovering Over The Autocomplete Items Colour */ + // Hovering Over The Autocomplete Items Colour --autocomplete-popup-hover-background: #1D1935 !important; - /* Clicking On Said Autocomplete Item Colour */ + // Clicking On Said Autocomplete Item Colour --autocomplete-popup-highlight-background: rgba(65, 48, 117, 0.5) !important; + // Button + --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent) !important; + --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important; + --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important; + + // Others + --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent) !important; + + #navigator-toolbox:-moz-lwtheme { + --lwt-tabs-border-color: var(--focus-outline-color) !important; + } + #navigator-toolbox, + &[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + background-color: var(--lwt-accent-color) !important; + } + #TabsToolbar { + --lwt-tab-line-color: var(--focus-outline-color) !important; + } + notification-message[message-bar-type="infobar"] { + --message-bar-text-color: var(--lwt-tab-text) !important; + --in-content-page-color: var(--lwt-tab-text) !important; + } menupopup { - /* Right Click Menu */ + // Right Click Menu --menuitem-hover-background-color: #413D54 !important; --menu-background-color: #1D1935 !important; --menu-color: #eeeeee !important;