diff --git a/README.org b/README.org index 725598c..aeeef0d 100644 --- a/README.org +++ b/README.org @@ -39,6 +39,7 @@ - More dark mode support - GTK system theme support - Windows system theme support + - Mac system theme support - Windows7 compatibility - *Icons* - Panel: like Photon @@ -61,12 +62,15 @@ - Adjust Color: Easily recognizable. - Unselect: - Divide Line: like Photon + - Unloaded: + - Dimmed: Looks like inactive - Clipped: - Clearer Text: Adjusted clipped gradation - Closed Button: Visible on hover - Sound: - Remove Second Label - Show Favicon: Always show favicon + - PIP Icon - Container Tab: - Highlight line position: Displayed under tab. - *Button Design* @@ -81,7 +85,7 @@ - Illustrations: Restore error page illustrations - *Others* - Activate calculator at address bar - - Smooth Scrolling + - Animations - Mouse pointer for each context ** Installation Guide diff --git a/icons/arrow-repeat-all.svg b/icons/arrow-repeat-all.svg index 04d35f3..f331021 100644 --- a/icons/arrow-repeat-all.svg +++ b/icons/arrow-repeat-all.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/arrow-swap.svg b/icons/arrow-swap.svg index 3e9cd87..6bdb4bf 100644 --- a/icons/arrow-swap.svg +++ b/icons/arrow-swap.svg @@ -1,4 +1,3 @@ - - - - + + + \ No newline at end of file diff --git a/icons/book-add.svg b/icons/book-add.svg index 701f923..fec2a1e 100644 --- a/icons/book-add.svg +++ b/icons/book-add.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/book.svg b/icons/book.svg index e60114d..eb196da 100644 --- a/icons/book.svg +++ b/icons/book.svg @@ -1,4 +1,4 @@ - - - - + + + + \ No newline at end of file diff --git a/icons/calendar-agenda.svg b/icons/calendar-agenda.svg index dd6470c..7c45ae8 100644 --- a/icons/calendar-agenda.svg +++ b/icons/calendar-agenda.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/content-view.svg b/icons/content-view.svg index 49238ff..6f9ac01 100644 --- a/icons/content-view.svg +++ b/icons/content-view.svg @@ -1,4 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/icons/copy-select.svg b/icons/copy-select.svg index 0d56800..f116bd1 100644 --- a/icons/copy-select.svg +++ b/icons/copy-select.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/dashboard.svg b/icons/dashboard.svg new file mode 100644 index 0000000..879570b --- /dev/null +++ b/icons/dashboard.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/icons/developer.svg b/icons/developer.svg index d02257d..4c4ea4d 100644 --- a/icons/developer.svg +++ b/icons/developer.svg @@ -3,4 +3,4 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - + \ No newline at end of file diff --git a/icons/document-css.svg b/icons/document-css.svg index ddf331d..2a77b68 100644 --- a/icons/document-css.svg +++ b/icons/document-css.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/document-endnote.svg b/icons/document-endnote.svg index ef937cd..2e490fa 100644 --- a/icons/document-endnote.svg +++ b/icons/document-endnote.svg @@ -1,7 +1,4 @@ - - - - - - + + + diff --git a/icons/document-landscape-split-hint.svg b/icons/document-landscape-split-hint.svg index fc9f621..82954d5 100644 --- a/icons/document-landscape-split-hint.svg +++ b/icons/document-landscape-split-hint.svg @@ -1,8 +1,3 @@ - - - - - - - + + diff --git a/icons/search-file.svg b/icons/document-search.svg similarity index 100% rename from icons/search-file.svg rename to icons/document-search.svg diff --git a/icons/edit-copy.svg b/icons/edit-copy.svg new file mode 100644 index 0000000..f343d80 --- /dev/null +++ b/icons/edit-copy.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/icons/error-tab-crashed.svg b/icons/error-tab-crashed.svg new file mode 100644 index 0000000..9c7ac2d --- /dev/null +++ b/icons/error-tab-crashed.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/eye-hide.svg b/icons/eye-hide.svg index 2b64e30..b941bad 100644 --- a/icons/eye-hide.svg +++ b/icons/eye-hide.svg @@ -1,5 +1,4 @@ - - - - + + + diff --git a/icons/eye-show.svg b/icons/eye-show.svg index 51e4fb5..c4c3444 100644 --- a/icons/eye-show.svg +++ b/icons/eye-show.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/icons/folder.svg b/icons/folder.svg index 1185dde..ee73b3a 100644 --- a/icons/folder.svg +++ b/icons/folder.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/identity-icons-brand.svg b/icons/identity-icons-brand.svg index 9beb35f..c1801e0 100644 --- a/icons/identity-icons-brand.svg +++ b/icons/identity-icons-brand.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/image-add.svg b/icons/image-add.svg index 871abf8..48e9bde 100644 --- a/icons/image-add.svg +++ b/icons/image-add.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/image-alt-text.svg b/icons/image-alt-text.svg index f568344..af87ac2 100644 --- a/icons/image-alt-text.svg +++ b/icons/image-alt-text.svg @@ -1,5 +1,3 @@ - - - - - + + + \ No newline at end of file diff --git a/icons/image-arrow-counterclockwise.svg b/icons/image-arrow-counterclockwise.svg index 782ff9c..01a9987 100644 --- a/icons/image-arrow-counterclockwise.svg +++ b/icons/image-arrow-counterclockwise.svg @@ -1,5 +1,5 @@ - - - - - + + + + + \ No newline at end of file diff --git a/icons/image-copy.svg b/icons/image-copy.svg index 795a283..15fe31d 100644 --- a/icons/image-copy.svg +++ b/icons/image-copy.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/image.svg b/icons/image.svg index 863c9d7..33709ea 100644 --- a/icons/image.svg +++ b/icons/image.svg @@ -1,9 +1,3 @@ - - - - - - + + diff --git a/icons/import-export.svg b/icons/import-export.svg new file mode 100644 index 0000000..4decdd2 --- /dev/null +++ b/icons/import-export.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/icons/key-multiple.svg b/icons/key-multiple.svg index 36f5121..4a64c90 100644 --- a/icons/key-multiple.svg +++ b/icons/key-multiple.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/link.svg b/icons/link.svg new file mode 100644 index 0000000..e3a0ae8 --- /dev/null +++ b/icons/link.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/icons/mail-inbox-all-big.svg b/icons/mail-inbox-all-big.svg deleted file mode 100644 index 511a024..0000000 --- a/icons/mail-inbox-all-big.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/icons/mail-inbox-all.svg b/icons/mail-inbox-all.svg index f2c4456..d2ba265 100644 --- a/icons/mail-inbox-all.svg +++ b/icons/mail-inbox-all.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/mail-inbox-big.svg b/icons/mail-inbox-big.svg deleted file mode 100644 index d3da257..0000000 --- a/icons/mail-inbox-big.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/icons/mail-inbox.svg b/icons/mail-inbox.svg new file mode 100644 index 0000000..669a9c4 --- /dev/null +++ b/icons/mail-inbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/notebook-subsection.svg b/icons/notebook-subsection.svg new file mode 100644 index 0000000..d85c15a --- /dev/null +++ b/icons/notebook-subsection.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/icons/password.svg b/icons/password.svg index a485de7..43d6051 100644 --- a/icons/password.svg +++ b/icons/password.svg @@ -1,6 +1,4 @@ - - - - - + + + diff --git a/icons/paste.svg b/icons/paste.svg index 339916a..8678b77 100644 --- a/icons/paste.svg +++ b/icons/paste.svg @@ -1,4 +1,4 @@ - + diff --git a/icons/play.svg b/icons/play.svg index 756dcc2..a38bb48 100644 --- a/icons/play.svg +++ b/icons/play.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/pocket-outline.svg b/icons/pocket-outline.svg new file mode 100644 index 0000000..80b3b7d --- /dev/null +++ b/icons/pocket-outline.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/icons/reload.svg b/icons/reload.svg new file mode 100644 index 0000000..7e499e6 --- /dev/null +++ b/icons/reload.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/icons/resize-image.svg b/icons/resize-image.svg index c68de66..d5ccbb1 100644 --- a/icons/resize-image.svg +++ b/icons/resize-image.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/resize.svg b/icons/resize.svg index 7df7cc7..43e4aa1 100644 --- a/icons/resize.svg +++ b/icons/resize.svg @@ -1,6 +1,3 @@ - - - - - - + + + \ No newline at end of file diff --git a/icons/select-all-on.svg b/icons/select-all-on.svg index 88c9496..94771c3 100644 --- a/icons/select-all-on.svg +++ b/icons/select-all-on.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/sign-out.svg b/icons/sign-out.svg index 2e1bcab..a23657f 100644 --- a/icons/sign-out.svg +++ b/icons/sign-out.svg @@ -1,4 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/sort.svg b/icons/sort.svg new file mode 100644 index 0000000..e8c10f5 --- /dev/null +++ b/icons/sort.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/icons/tab-copy.svg b/icons/tab-copy.svg deleted file mode 100644 index 427332b..0000000 --- a/icons/tab-copy.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/icons/tab-multiple.svg b/icons/tab-multiple.svg index f77d817..66874c2 100644 --- a/icons/tab-multiple.svg +++ b/icons/tab-multiple.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/icons/tag-open.svg b/icons/tag-open.svg index 697f810..fc55312 100644 --- a/icons/tag-open.svg +++ b/icons/tag-open.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/text-direction-horizontal-ltr.svg b/icons/text-direction-horizontal-ltr.svg index e5ad45e..6c6ab8d 100644 --- a/icons/text-direction-horizontal-ltr.svg +++ b/icons/text-direction-horizontal-ltr.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/text-number-format.svg b/icons/text-number-format.svg index fb4d19b..7f20275 100644 --- a/icons/text-number-format.svg +++ b/icons/text-number-format.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/text-proofing-tools.svg b/icons/text-proofing-tools.svg index 038e9e1..9247c70 100644 --- a/icons/text-proofing-tools.svg +++ b/icons/text-proofing-tools.svg @@ -1,6 +1,3 @@ - - - - - - + + + \ No newline at end of file diff --git a/icons/time-picker.svg b/icons/time-picker.svg index 75cf3d4..098e21f 100644 --- a/icons/time-picker.svg +++ b/icons/time-picker.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/toolbox.svg b/icons/toolbox.svg index e130f6f..7e1a6bb 100644 --- a/icons/toolbox.svg +++ b/icons/toolbox.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/icons/video-clip.svg b/icons/video-clip.svg index 8be8616..65656f1 100644 --- a/icons/video-clip.svg +++ b/icons/video-clip.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/video-snapshot.svg b/icons/video-snapshot.svg index be15181..b44bcce 100644 --- a/icons/video-snapshot.svg +++ b/icons/video-snapshot.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/video.svg b/icons/video.svg index 4cf7727..bce7022 100644 --- a/icons/video.svg +++ b/icons/video.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/whatsnew.svg b/icons/whatsnew.svg new file mode 100644 index 0000000..30d95ab --- /dev/null +++ b/icons/whatsnew.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/icons/webdeveloper.svg b/icons/window-dev-tools.svg similarity index 100% rename from icons/webdeveloper.svg rename to icons/window-dev-tools.svg diff --git a/icons/wrench-filled.svg b/icons/wrench-filled.svg new file mode 100644 index 0000000..d02257d --- /dev/null +++ b/icons/wrench-filled.svg @@ -0,0 +1,6 @@ + + + + diff --git a/user.js b/user.js index 03d1020..f797534 100644 --- a/user.js +++ b/user.js @@ -1,4 +1,7 @@ // ** Theme Related Options **************************************************** +// Draw in Titlebar +user_pref("browser.tabs.drawInTitlebar", true); + // userchrome.css usercontent.css activate user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); @@ -32,49 +35,3 @@ user_pref("browser.urlbar.suggest.calculator", true); // Integrated unit convertor at urlbar // user_pref("browser.urlbar.unitConversion.enabled", true); - -// ** Scrolling Options ******************************************************** -// based on natural smooth scrolling v2 by aveyo -// this preset will reset couple extra variables for consistency -// Pref Value Original -user_pref("apz.allow_zooming", true); /// true -user_pref("apz.force_disable_desktop_zooming_scrollbars", false); /// false -user_pref("apz.paint_skipping.enabled", true); /// true -user_pref("apz.windows.use_direct_manipulation", true); /// true -user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true); /// false -user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); /// "0.25" <- 1. If scroll too slow, set to "0.15" -user_pref("general.smoothScroll.durationToIntervalRatio", 1000); /// 200 -user_pref("general.smoothScroll.lines.durationMaxMS", 100); /// 150 -user_pref("general.smoothScroll.lines.durationMinMS", 0); /// 150 -user_pref("general.smoothScroll.mouseWheel.durationMaxMS", 100); /// 200 -user_pref("general.smoothScroll.mouseWheel.durationMinMS", 0); /// 50 -user_pref("general.smoothScroll.mouseWheel.migrationPercent", 100); /// 100 -user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12); /// 120 -user_pref("general.smoothScroll.msdPhysics.enabled", true); /// false -user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200); /// 1250 -user_pref("general.smoothScroll.msdPhysics.regularSpringConstant", 200); /// 1000 -user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS", 10); /// 12 -user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio", "1.20"); /// "1.3" -user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant", 1000); /// 2000 -user_pref("general.smoothScroll.other.durationMaxMS", 100); /// 150 -user_pref("general.smoothScroll.other.durationMinMS", 0); /// 150 -user_pref("general.smoothScroll.pages.durationMaxMS", 100); /// 150 -user_pref("general.smoothScroll.pages.durationMinMS", 0); /// 150 -user_pref("general.smoothScroll.pixels.durationMaxMS", 100); /// 150 -user_pref("general.smoothScroll.pixels.durationMinMS", 0); /// 150 -user_pref("general.smoothScroll.scrollbars.durationMaxMS", 100); /// 150 -user_pref("general.smoothScroll.scrollbars.durationMinMS", 0); /// 150 -user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); /// "0.4" -user_pref("layers.async-pan-zoom.enabled", true); /// true -user_pref("layout.css.scroll-behavior.spring-constant", "250.0"); /// "250.0" -user_pref("mousewheel.acceleration.factor", 3); /// 10 -user_pref("mousewheel.acceleration.start", -1); /// -1 -user_pref("mousewheel.default.delta_multiplier_x", 100); /// 100 -user_pref("mousewheel.default.delta_multiplier_y", 100); /// 100 -user_pref("mousewheel.default.delta_multiplier_z", 100); /// 100 -user_pref("mousewheel.min_line_scroll_amount", 0); /// 5 -user_pref("mousewheel.system_scroll_override.enabled", true); /// true <- 2. If scroll too fast, set to false -user_pref("mousewheel.system_scroll_override_on_root_content.enabled", false); /// true -user_pref("mousewheel.transaction.timeout", 1500); /// 1500 -user_pref("toolkit.scrollbox.horizontalScrollDistance", 4); /// 5 -user_pref("toolkit.scrollbox.verticalScrollDistance", 3); /// 3 diff --git a/userChrome.css b/userChrome.css index 30ca5f0..c61e85c 100644 --- a/userChrome.css +++ b/userChrome.css @@ -186,7 +186,7 @@ } } - /*= Linux- Global Menubar Active Color =====================================*/ + /*= Linux - Global Menubar Active Color ====================================*/ @media (-moz-gtk-csd-available) { #main-menubar > menu[open="true"], #main-menubar > menu[_moz-menuactive="true"] { @@ -195,6 +195,30 @@ } } + /*= Linux - Light System Default Theme's Selected Tab ======================*/ + @media (-moz-gtk-csd-available) and (-moz-toolbar-prefers-color-scheme: light), + (-moz-gtk-csd-available) and (prefers-color-scheme: light) { + /* Because of + #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { + border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); + box-shadow: 0 0 4px rgba(128,128,142,0.5); + } + */ + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important; + } + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important; + } + } + /** System Default Theme ****************************************************/ /*= Common - URL Bar focus color ===========================================*/ @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { @@ -247,6 +271,260 @@ } } + /*= Windows10 - UWP like color =============================================*/ + @media (-moz-os-version: windows-win10) { + :root:not(:-moz-lwtheme) { + --win-text-color: rgba(0, 0, 0); + --win-bgcolor: rgb(204, 204, 204); + --win-disabled-color: rgb(145, 145, 145); /* also button-active-color */ + --win-disabled-bgcolor: transparent; + --win-hover-bgcolor: rgb(218, 218, 218); + --win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */ + --win-field-bgcolor: #ffffff; + --win-component-bgcolor: #f2f2f2; + --win-sidebar-bgcolor: #e6e6e6; + --win-sidebar-hover-bgcolor: #cfcfcf; + --win-sidebar-border-color: #8a8a8a; + --win-sidebar-button-hover-bgcolor: #b8b8b8; + --win-sidebar-button-hover-active-bgcolor: #a3a3a3; + --win-button-border: #747474; + --win-button-hover-bgcolor: rgba(145, 145, 145, 0.66); + --win-shorcut-text-color: #757575; + --win-error-color: #b31616; + --win-red-border-color: #ff4343; + --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color); + --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color); + --win-accent-active-color: -moz-accent-color; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-text-color: #ffffff; + --win-bgcolor: #2b2b2b; + --win-disabled-color: #747474; /* also button-active-color */ + --win-disabled-bgcolor: transparent; + --win-hover-bgcolor: #2e2e2e; + --win-hover-active-bgcolor: #454545; /* also button-bgcolor */ + --win-field-bgcolor: #373737; + --win-component-bgcolor: #171717; + --win-sidebar-bgcolor: #1f1f1f; + --win-sidebar-hover-bgcolor: #353535; + --win-sidebar-border-color: #5b5b5b; + --win-sidebar-button-hover-bgcolor: #353535; + --win-sidebar-button-hover-active-bgcolor: #4c4c4c; + --win-button-border: #8f8f8f; + --win-button-hover-bgcolor: rgba(116, 116, 116, 0.66); + --win-shorcut-text-color: #adadad; + --win-error-color: #ffb900; + --win-red-border-color: #ff4343; + --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color); + --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color); + --win-accent-active-color: -moz-accent-color; + } + } + + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + /* Text, Icon Color */ + --menu-color: var(--win-text-color) !important; + --lwt-text-color: var(--win-text-color) !important; + --button-color: var(--win-text-color) !important; + --input-color: var(--win-text-color) !important; + --toolbar-color: var(--win-text-color) !important; + --toolbar-non-lwt-textcolor: var(--win-text-color) !important; + --toolbarbutton-icon-fill: var(--win-text-color) !important; + --toolbar-field-focus-color: var(--win-text-color) !important; + --urlbar-popup-action-color: var(--win-text-color) !important; + --toolbar-field-color: var(--win-text-color) !important; + --autocomplete-popup-highlight-color: var(--win-text-color) !important; + --tab-icon-overlay-fill: var(--win-text-color) !important; + --panel-banner-item-color: var(--win-text-color) !important; + --arrowpanel-color: var(--win-text-color) !important; + --autocomplete-popup-color: var(--win-text-color) !important; + + /* Text Disabled Color */ + --menu-disabled-color: var(--win-disabled-color) !important; + --button-active-bgcolor: var(--win-disabled-color) !important; + --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important; + --panel-disabled-color: var(--win-disabled-color) !important; + --download-progress-paused-color: var(--win-disabled-color) !important; + + /* Text Shortcut Color */ + --panel-shortcut-color: var(--win-shorcut-text-color) !important; + --panel-description-color: var(--win-shorcut-text-color) !important; + + /* Title Background, Border Color */ + --menu-border-color: var(--win-bgcolor) !important; + --lwt-accent-color: var(--win-bgcolor) !important; + --toolbar-field-border-color: var(--win-bgcolor) !important; + --arrowpanel-border-color: var(--win-bgcolor) !important; + --chrome-content-separator-color: var(--win-bgcolor) !important; + --toolbarseparator-color: var(--win-bgcolor) !important; + --panel-separator-color: var(--win-bgcolor) !important; + + /* Component Background Color */ + --menu-background-color: var(--win-component-bgcolor) !important; + --toolbar-bgcolor: var(--win-component-bgcolor) !important; + --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important; + --arrowpanel-background: var(--win-component-bgcolor) !important; + --autocomplete-popup-background: var(--win-component-bgcolor) !important; + + /* Field Backround Color */ + --input-bgcolor: var(--win-field-bgcolor) !important; + --toolbar-field-background-color: var(--win-field-bgcolor) !important; + --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important; + --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important; + --button-primary-color: var(--win-field-bgcolor) !important; + --checkbox-checked-color: var(--win-field-bgcolor) !important; + + /* Hover Background Color */ + --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; + --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important; + --panel-banner-item-hover-bgcolor: var(--win-hover-bgcolor) !important; + + /* Hover Active, Button Color */ + --button-bgcolor: var(--win-hover-active-bgcolor) !important; + --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important; + --panel-banner-item-background-color: var(--win-hover-active-bgcolor) !important; + --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important; + --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important; + --panel-banner-item-active-bgcolor: var(--win-hover-active-bgcolor) !important; + --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important; + --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important; + --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important; + + /* Disabled Background Color */ + --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; + + /* Button Hover Color */ + --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important; + --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important; + --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important; + + /* Button Border Color */ + --tab-line-color: var(--win-button-border) !important; + --checkbox-border-color: var(--win-button-border) !important; + --input-border-color: var(--win-button-border) !important; + --autocomplete-popup-separator-color: var(--win-button-border) !important; + + /* Accent Color */ + --button-primary-bgcolor: var(--win-accent-color) !important; + --focus-outline-color: var(--win-accent-color) !important; + --checkbox-checked-bgcolor: var(--win-accent-color) !important; + + /* Accent Content Color */ + --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important; + --urlbar-popup-url-color: var(--win-accent-content-color) !important; + --download-progress-fill-color: var(--win-accent-content-color) !important; + + /* Accent Hover Color */ + --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important; + --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important; + + /* Accent Hover Active Color */ + --button-primary-active-bgcolor: var(--win-accent-active-color) !important; + --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important; + + /* Error Color */ + --error-text-color: var(--win-error-color) !important; + --input-error-border-color: var(--win-error-color) !important; + + /* Others */ + --tab-selected-bgcolor: unset !important; + --tabs-border-color: transparent !important; + --checkbox-checked-border-color: transparent !important; + + /* Other Defaults */ + --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important; + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important; + --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important; + + --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; + + --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; + } + + /*- Menu -----------------------------------------------------------------*/ + html#main-window menupopup:not(:-moz-lwtheme) { + --menu-color: var(--win-text-color) !important; + --menu-background-color: var(--win-component-bgcolor) !important; + --menu-border-color: var(--win-bgcolor) !important; + --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; + --menu-disabled-color: var(--win-disabled-color) !important; + --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; + } + + /*- Toolbar --------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) #titlebar, + :root[lwt-default-theme-in-dark-mode] #titlebar { + --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor); + --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor); + --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor); + --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor); + } + + /*- Sidebar --------------------------------------------------------------*/ + #sidebar-box:not([lwt-sidebar]) { + appearance: none !important; + } + :root:not(:-moz-lwtheme) #sidebar-box, + :root[lwt-default-theme-in-dark-mode] #sidebar-box { + --sidebar-background-color: var(--win-sidebar-bgcolor) !important; + --sidebar-text-color: var(--win-text-color) !important; + --sidebar-border-color: var(--win-sidebar-border-color) !important; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */ + body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { + /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ + --lwt-sidebar-background-color: transparent !important; + --lwt-sidebar-text-color: var(--win-text-color) !important; + } + } + + :root:not(:-moz-lwtheme) + .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2), + :root[lwt-default-theme-in-dark-mode] + .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) { + --button-hover-bgcolor: var(--win-hover-bgcolor) !important; + --button-active-bgcolor: var(--win-hover-active-bgcolor) !important; + } + + /*- Others ---------------------------------------------------------------*/ + /* For overwrite */ + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme) { + --lwt-accent-color: var(--win-bgcolor) !important; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { + --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */ + } + } + + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]) { + background-image: linear-gradient( + color-mix(in srgb, currentColor 11%, transparent), + color-mix(in srgb, currentColor 11%, transparent) + ), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + } + } + /*= Windows10 - Titlebar accent color ======================================*/ @media (-moz-windows-accent-color-in-titlebar) { /* Tab Bar */ @@ -277,6 +555,248 @@ } } + /*= Mac - Default like color ===============================================*/ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + /* Colors */ + --mac-text-color: -moz-dialogtext; + --mac-disabled-color: GrayText; + --mac-bgcolor: Window; + --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); + --mac-field-bgcolor: Window; + --mac-panel-bgcolor: Menu; + --mac-sidebar-bgcolor: -moz-mac-source-list; + --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor)); + --mac-hover-bgcolor: Window; + --mac-disabled-bgcolor: transparent; + --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */ + --mac-accent-color: -moz-accent-color; /* or LinkText */ + --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color); + --mac-accent-hover-color: color-mix( + in srgb, + rgb(0, 0, 0) 10%, + -moz-accent-color + ); /* or -moz-mac-menuselect, Highlight */ + --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */ + + /* Text, Icon Color */ + --menu-color: var(--mac-text-color) !important; + --lwt-text-color: var(--mac-text-color) !important; + --button-color: var(--mac-text-color) !important; + --input-color: var(--mac-text-color) !important; + --toolbar-color: var(--mac-text-color) !important; + --toolbar-non-lwt-textcolor: var(--mac-text-color) !important; + --toolbarbutton-icon-fill: var(--mac-text-color) !important; + --toolbar-field-focus-color: var(--mac-text-color) !important; + --urlbar-popup-action-color: var(--mac-text-color) !important; + --toolbar-field-color: var(--mac-text-color) !important; + --autocomplete-popup-highlight-color: var(--mac-text-color) !important; + --tab-icon-overlay-fill: var(--mac-text-color) !important; + --panel-banner-item-color: var(--mac-text-color) !important; + --arrowpanel-color: var(--mac-text-color) !important; + --autocomplete-popup-color: var(--mac-text-color) !important; + --panel-shortcut-color: var(--mac-text-color) !important; + --panel-description-color: var(--mac-text-color) !important; + + /* Text Disabled Color */ + --menu-disabled-color: var(--mac-disabled-color) !important; + --button-active-bgcolor: var(--mac-disabled-color) !important; + --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important; + --panel-disabled-color: var(--mac-disabled-color) !important; + --download-progress-paused-color: var(--mac-disabled-color) !important; + + /* Background Color */ + --lwt-accent-color: var(--mac-bgcolor) !important; + --menu-background-color: var(--mac-bgcolor) !important; + --autocomplete-popup-background: var(--mac-bgcolor) !important; + + /* Selected Background Color */ + --toolbar-bgcolor: var(--mac-selected-bgcolor) !important; + --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important; + + /* Field Backround Color */ + --input-bgcolor: var(--mac-field-bgcolor) !important; + --toolbar-field-background-color: var(--mac-field-bgcolor) !important; + --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important; + + /* Panel Backround Color */ + --arrowpanel-background: var(--mac-panel-bgcolor) !important; + + /* Hover Background Color */ + --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important; + --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important; + --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important; + + --button-bgcolor: var(--mac-hover-bgcolor) !important; + --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important; + --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important; + --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important; + --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important; + --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important; + --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important; + --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; + + --button-hover-bgcolor: var(--mac-hover-bgcolor) !important; + --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important; + --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; + + /* Disabled Background Color */ + --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important; + + /* Border Color */ + /* + --menu-border-color: var(--mac-bgcolor) !important; + --toolbar-field-border-color: var(--mac-bgcolor) !important; + --arrowpanel-border-color: var(--mac-bgcolor) !important; + --chrome-content-separator-color: var(--mac-bgcolor) !important; + --toolbarseparator-color: var(--mac-bgcolor) !important; + --panel-separator-color: var(--mac-bgcolor) !important; + */ + + /* Button Border Color */ + /* + --tab-line-color: var(---mac-bgcolor) !important; + --checkbox-border-color: var(--mac-bgcolor) !important; + --input-border-color: var(--mac-bgcolor) !important; + --autocomplete-popup-separator-color: var(--mac-bgcolor) !important; + */ + + /* Accent Color Forground */ + --button-primary-color: var(--mac-primary-button-color) !important; + --checkbox-checked-color: var(--mac-primary-button-color) !important; + + /* Accent Color */ + --button-primary-bgcolor: var(--mac-accent-color) !important; + --focus-outline-color: var(--mac-accent-color) !important; + --checkbox-checked-bgcolor: var(--mac-accent-color) !important; + + /* Accent Content Color */ + --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important; + --urlbar-popup-url-color: var(--mac-accent-content-color) !important; + --download-progress-fill-color: var(--mac-accent-content-color) !important; + + /* Accent Hover Color */ + --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important; + --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important; + + /* Accent Hover Active Color */ + --button-primary-active-bgcolor: var(--mac-accent-active-color) !important; + --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important; + + /* Error Color */ + /* + --error-text-color: var(--win-error-color) !important; + --input-error-border-color: var(--win-error-color) !important; + */ + + /* Others */ + --tab-selected-bgcolor: unset !important; + --tabs-border-color: transparent !important; + --checkbox-checked-border-color: transparent !important; + + /* Other Defaults */ + --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important; + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important; + --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important; + + --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; + + --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-field-bgcolor: Field; + --mac-panel-bgcolor: -moz-CellHighlight; + --mac-hover-bgcolor: ButtonFace; + + --toolbar-field-focus-background-color: var(--mac-bgcolor) !important; + --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important; + } + } + + /*- Toolbar --------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) #navigator-toolbox, + :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { + appearance: auto !important; + } + + :root:not(:-moz-lwtheme) #titlebar { + --mac-hover-bgcolor: ButtonFace; + } + :root:not(:-moz-lwtheme) #titlebar, + :root[lwt-default-theme-in-dark-mode] #titlebar { + --button-hover-bgcolor: var(--mac-hover-bgcolor); + --button-active-bgcolor: var(--mac-hover-bgcolor); + --toolbarbutton-hover-background: var(--mac-hover-bgcolor); + --toolbarbutton-active-background: var(--mac-hover-bgcolor); + } + + :root[lwt-default-theme-in-dark-mode] #urlbar { + --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; + } + + /*- Sidebar --------------------------------------------------------------*/ + #sidebar-box:not([lwt-sidebar]) { + appearance: none !important; + } + :root:not(:-moz-lwtheme) #sidebar-box, + :root[lwt-default-theme-in-dark-mode] #sidebar-box { + --sidebar-background-color: var(--mac-sidebar-bgcolor) !important; + --sidebar-text-color: var(--mac-text-color) !important; + /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */ + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */ + body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { + /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ + --lwt-sidebar-background-color: transparent !important; + --lwt-sidebar-text-color: var(--mac-text-color) !important; + } + } + + :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup { + --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor); + --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor); + } + + /*- Others ---------------------------------------------------------------*/ + /* For Overwrite */ + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { + --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } + } + + /* Hard Coded */ + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"] { + background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } + + :root:not(:-moz-lwtheme) #tabs-newtab-button:hover, + :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after, + :root:not([customizing="true"])[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + tab[visuallyselected] + > stack::before, + :root:not([customizing="true"])[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + tab[visuallyselected] + > stack::after { + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } + } + /** Fully Theme Mode ********************************************************/ /* Default Themes https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json @@ -284,7 +804,7 @@ https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json */ - /*= Default Colors - Hardcorded ============================================*/ + /*= Default Colors - Hard Coded ============================================*/ /* Based on chrome://global/skin/in-content/common.css */ :host, :root { @@ -512,10 +1032,13 @@ border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; } + #editBMPanel_folderTree:-moz-lwtheme, #editBMPanel_folderTree:-moz-lwtheme > treechildren, + #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image, #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover), #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected), - #editBMPanel_tagsSelector:-moz-lwtheme { + #editBMPanel_tagsSelector:-moz-lwtheme, + #editBMPanel_tagsSelector:-moz-lwtheme > richlistitem { color: var(--lwt-text-color, fieldtext) !important; } #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) { @@ -541,20 +1064,78 @@ } /*== Sidebar - Field Color =================================================*/ - .sidebar-panel[lwt-sidebar] #search-box, - body[lwt-sidebar] xul|search-textbox.tabsFilter { + .sidebar-panel #search-box, + xul|search-textbox.tabsFilter { + --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent); + appearance: none !important; padding: 8px 11px !important; - border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important; + border: 1px solid var(--input-bgcolor) !important; border-radius: 4px; background-color: var(--lwt-sidebar-background-color, Field) !important; color: var(--lwt-sidebar-text-color, FieldText) !important; } + .sidebar-panel:not([lwt-sidebar]) #search-box { + --input-bgcolor: ThreeDShadow; + } + + .sidebar-panel #search-box[focused="true"], + xul|search-textbox.tabsFilter[focused="true"] { + outline: 1px solid var(--input-bgcolor); + } .sidebar-panel[lwt-sidebar] #search-box[focused="true"], body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] { - border-color: var(--lwt-sidebar-highlight-background-color) !important; - outline: 1px solid var(--lwt-sidebar-highlight-background-color); + --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important; + } + .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], + body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { + border-color: -moz-accent-color !important; /* Hard Coded */ + outline-color: -moz-accent-color !important; + } + + /*= PopupAutoComplete ======================================================*/ + #PopupAutoComplete { + --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background)); + + /* overwrite */ + --panel-border-radius: 4px !important; /* Original: 0 */ + --panel-border-color: var( + --arrowpanel-border-color, + var(--menu-border-color) + ) !important; /* Original: ThreeDShadow */ + + appearance: none !important; + background: transparent !important; + border: none !important; + clip-path: inset(0 round var(--panel-border-radius)); + } + + #PopupAutoComplete > richlistbox { + border-radius: var(--panel-border-radius) !important; + background-color: var(--panel-bgcolor) !important; /* Original: Field */ + color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */ + } + + #PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, + #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, + #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + fill: GrayText !important; + } + + #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { + --panel-border-color: var(--panel-bgcolor); + color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */ + background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */ + border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ + } + + #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, + #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { + background-color: var( + --arrowpanel-dimmed-further, + hsla(0, 0%, 80%, 0.5) + ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ } /* Fully Dark Mode **********************************************************/ @@ -631,15 +1212,42 @@ } } - /*= Downloads ==============================================================*/ - @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml") + /*= Proton Commons =========================================================*/ + @-moz-document url("chrome://global/content/commonDialog.xhtml"), + url("chrome://pippki/content/editcacert.xhtml"), + url("chrome://pippki/content/deletecert.xhtml"), + url("chrome://pippki/content/exceptionDialog.xhtml"), + url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), + url("chrome://global/content/appPicker.xhtml"), + url("chrome://browser/content/pageinfo/pageInfo.xhtml") { + /*- Overwrite ------------------------------------------------------------*/ @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --in-content-page-background: #42414d; } } - #unknownContentType { + + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important; + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important; + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important; + --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important; + --checkbox-checked-color: var(--in-content-primary-button-text-color) !important; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important; + } + + /*- Dialog ---------------------------------------------------------------*/ + #commonDialog, + #editCaCert, + #deleteCertificate, + #exceptiondialog, + #unknownContentType, + #app-picker, + #topBar, /* #topBar, #mainDeck: Page Info */ + #mainDeck { -moz-appearance: none !important; /* For Mac */ color: var(--in-content-page-color) !important; background-color: var(--in-content-page-background) !important; @@ -974,7 +1582,7 @@ display: none !important; } - label { + xul|menuitem > label:not(.menu-text) { margin: 0 3px !important; } @@ -1042,6 +1650,89 @@ outline: none !important; } + /*- List Boxes -----------------------------------------------------------*/ + html|select[size][multiple], + xul|listheader, + xul|richlistbox { + appearance: none !important; + margin-inline: 0 !important; + background-color: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: var(--in-content-text-color) !important; + } + + xul|listheader { + border-bottom: none !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + padding-bottom: 1px !important; + box-shadow: inset 0 -1px var(--in-content-border-color) !important; + overflow: clip !important; /* Clip border-radius */ + } + + xul|listheader + xul|richlistbox { + margin-top: 0 !important; + border-top: none !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + + html|select[size][multiple] > html|option, + xul|treechildren::-moz-tree-row { + padding: 0.3em inherit !important; + margin: 0 !important; + border: none !important; + border-radius: 0 !important; + background-image: none !important; + } + + xul|treechildren::-moz-tree-row(multicol, odd) { + background-color: var(--in-content-box-background-odd); + } + + html|select[size][multiple] > html|option:hover, + xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover, + xul|treechildren::-moz-tree-row(hover) { + background-color: var(--in-content-item-hover) !important; + color: var(--in-content-item-hover-text) !important; + } + + xul|richlistbox > xul|richlistitem[selected], + xul|treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected) !important; + color: var(--in-content-item-selected-text) !important; + } + + xul|richlistbox:not(#categories) > xul|richlistitem[selected] { + /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */ + --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important; + --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important; + --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important; + --in-content-button-text-color: var(--in-content-item-selected-text) !important; + --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important; + --in-content-focus-outline-color: var(--in-content-item-selected-text) !important; + } + + xul|richlistitem[selected] xul|menulist:focus-visible { + outline-offset: -2px !important; + } + + /* Use a 2px border so that selected row highlight is still visible behind + an existing high-contrast border that uses the background color */ + @media (prefers-contrast) { + xul|treechildren::-moz-tree-row(selected) { + border: 2px solid currentColor !important; + border-radius: 4px !important; + } + } + + xul|panel[type="autocomplete-richlistbox"] { + background-color: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-box-border-color) !important; + color: var(--in-content-text-color) !important; + } + /*- Each OS --------------------------------------------------------------*/ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { xul|checkbox, @@ -1110,7 +1801,613 @@ } } + /*= Delete Cert ============================================================*/ + @-moz-document url("chrome://pippki/content/deletecert.xhtml") + { + :root { + --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; + } + #certlist { + border: 1px solid var(--in-content-border-color) !important; + border-radius: 4px !important; + } + } + + /*= Cert Exeption Dialog ===================================================*/ + @-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") + { + :root { + --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; + } + #locationTextBox { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + #locationTextBox:focus { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + #locationTextBox:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + #locationTextBox:disabled { + opacity: 0.4 !important; + } + + #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) { + width: 48px !important; + height: 48px !important; + background-image: url("chrome://global/skin/icons/warning.svg") !important; + background-size: 48px !important; + background-repeat: no-repeat !important; + + -moz-context-properties: fill !important; + fill: currentColor !important; + } + #exceptiondialog:first-child > hbox > vbox > image { + display: none !important; + } + } + + /*= Page Info ==============================================================*/ + @-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") + { + :root { + --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; + } + + #viewGroup > radio { + border-radius: 8px !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + margin: 4px !important; + } + #viewGroup > radio:hover { + background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */ + } + #viewGroup > radio[selected="true"] { + color: var(--in-content-button-text-color) !important; /* SelectedItemText */ + background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */ + } + #viewGroup > radio { + color: var(--in-content-deemphasized-text) !important; /* FieldText */ + } + + #viewGroup > radio { + list-style-image: none !important; + background-image: var(--viewgroup-image) !important; + background-repeat: no-repeat; + background-position: top var(--in-content-button-vertical-padding) center; + background-size: 32px !important; + + -moz-context-properties: fill !important; + fill: currentColor !important; + } + #generalTab { + --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg); + } + #mediaTab { + --viewgroup-image: url(chrome://browser/skin/canvas.svg); + } + #permTab { + --viewgroup-image: url(chrome://browser/skin/permissions.svg); + } + #securityTab { + --viewgroup-image: url(chrome://global/skin/icons/security.svg); + } + + #viewGroup > radio > .radio-label-box { + /* Overwrite */ + margin: 0 !important; + padding: 0 6 !important; + } + + #mainDeck input { + color: var(--in-content-page-color) !important; + } + + #permList { + -moz-appearance: none !important; + color: var(--in-content-page-color) !important; + background-color: var(--in-content-box-background) !important; + } + .permission:hover { + color: var(--in-content-text-color) !important; + background-color: var(--in-content-button-background-hover) !important; + } + .permission radio[disabled] { + color: var(--in-content-deemphasized-text) !important; + } + + treecols { + -moz-appearance: none !important; + background: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + treecols > treecol, + treecols > treecolpicker.treecol-image { + -moz-appearance: none !important; + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + border: 1px solid var(--in-content-border-color) !important; + padding: 4px !important; + border-spacing: 0; + + text-align: center !important; + } + + tree, + treechildren::-moz-tree-row { + -moz-appearance: none !important; + color: var(--in-content-text-color) !important; + background-color: var(--in-content-table-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } + + treechildren::-moz-tree-row(odd) { + background-color: var(--in-content-box-background-odd) !important; + } + + treechildren::-moz-tree-row(hover) { + color: var(--in-content-item-hover-text) !important; + background-color: var(--in-content-item-hover) !important; + } + treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected) !important; + } + + treechildren::-moz-tree-cell { + border-inline: 1px solid var(--in-content-border-color) !important; + border-spacing: 0 !important; + padding: 4px !important; + margin: 0 !important; + } + treechildren::-moz-tree-cell-text(hover) { + color: var(--in-content-item-hover-text) !important; + } + treechildren::-moz-tree-cell-text(selected) { + font-weight: 600 !important; + color: var(--in-content-item-selected-text) !important; + } + + #imagecontainerbox { + background-color: var(--in-content-box-background) !important; + } + + #metatree, + #imagetree, + #imagecontainerbox, + #permList { + border-radius: 4px !important; + } + #metatree, + #imagetree { + overflow: hidden !important; + } + + #topBar, + #imagecontainerbox, + #permList { + border-color: var(--in-content-border-color) !important; + } + } + + /*= Library Popup ==========================================================*/ + @-moz-document url("chrome://browser/content/places/places.xhtml") + { + @media (-moz-gtk-csd-available) { + :root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; + } + + @media not (prefers-contrast) { + :root { + --organizer-color: var(--in-content-page-color); + --organizer-deemphasized-color: var(--in-content-deemphasized-text); + + --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ + --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ + --organizer-content-background: var(--in-content-page-background); + + --organizer-hover-background: var(--in-content-button-background-hover); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: var(--in-content-button-background-active); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: var(--in-content-primary-button-background); + + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: var(--in-content-border-color); + + --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix( + in srgb, + var(--organizer-outline-color) 50%, + transparent + ); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251, 251, 254); + --organizer-deemphasized-color: rgb(191, 191, 201); + + --organizer-toolbar-background: rgb(43, 42, 51); + --organizer-pane-background: rgb(35, 34, 43); + --organizer-content-background: rgb(28, 27, 34); + + --organizer-hover-background: rgb(82, 82, 94); + --organizer-selected-background: rgb(91, 91, 102); + --organizer-outline-color: rgb(0, 221, 255); + + --organizer-toolbar-field-background: var(--in-content-page-background); + --organizer-toolbar-field-background-focused: rgb(66, 65, 77); + scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + } + } + } + + /*- Toolbar & Menus --------------------------------------------------*/ + #placesToolbar { + appearance: none !important; + background-color: var(--organizer-toolbar-background) !important; + color: var(--organizer-color) !important; + border-bottom: 1px solid var(--organizer-border-color) !important; + padding: 4px !important; + padding-inline-end: 6px !important; + } + + #placesToolbar > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; + } + + #placesToolbar > toolbarbutton[disabled] { + opacity: 0.6 !important; + } + + #placesToolbar > toolbarbutton:not([disabled]):hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #placesToolbar > toolbarbutton:not([disabled]):hover:active { + background-color: var(--organizer-selected-background) !important; + } + + #placesToolbar > toolbarbutton > .toolbarbutton-icon, + #placesMenu > menu > image, + #placesMenu > menu > .menubar-text { + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #placesMenu { + margin-inline-start: 6px !important; + } + + #placesMenu > menu { + appearance: none !important; + color: var(--organizer-color) !important; + border-radius: 4px !important; + padding-block: 5px !important; + padding-inline-start: 5px !important; + margin-inline-end: 2px !important; + } + + #placesMenu > menu:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #placesMenu > menu:hover:active, + #placesMenu > menu[open] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + #placesMenu > menu > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 4px !important; + } + + /*- Search Bar ---------------------------------------------------------*/ + #searchFilter { + appearance: none !important; + background-color: var(--organizer-toolbar-field-background) !important; + color: var(--organizer-color) !important; + border: 1px solid var(--organizer-toolbar-field-border-color) !important; + border-radius: 4px !important; + margin: 0 !important; + padding-block: 2px !important; + min-height: 24px !important; + } + + #searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; + background-color: var(--organizer-toolbar-field-background-focused) !important; + border-color: transparent !important; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; + outline-offset: -2px !important; + } + + /*- Sidebar & Splitter -------------------------------------------------*/ + #placesList { + background-color: var(--organizer-pane-background) !important; + } + + #placesView > splitter { + border: 0 !important; + border-inline-end: 1px solid var(--organizer-border-color) !important; + min-width: 0 !important; + width: 3px !important; + background-color: transparent !important; + margin-inline-start: -3px !important; + position: relative !important; + } + + /*- Downloads Pane -----------------------------------------------------*/ + #downloadsRichListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + + /*- Tree ---------------------------------------------------------------*/ + #contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; + } + + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"]), + treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover, + treecolpicker:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover:active, + treecolpicker:hover:active { + background-color: var(--organizer-selected-background) !important; + } + + treecol:not([hideheader="true"], :first-child), + treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; + } + + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + + treechildren::-moz-tree-row { + background-color: transparent !important; + } + + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + + /*- Info Box -----------------------------------------------------------*/ + #detailsPane { + background-color: var(--organizer-pane-background) !important; + color: var(--organizer-color) !important; + padding: 5px !important; + border-top: 1px solid var(--organizer-border-color) !important; + } + + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + appearance: none !important; + min-width: 0 !important; + padding: 5px !important; + margin: 0 !important; + margin-inline-end: 4px !important; + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill !important; + fill: currentColor !important; + } + + #editBookmarkPanelRows .expander-up:hover, + #editBookmarkPanelRows .expander-down:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #editBookmarkPanelRows .expander-up:hover:active, + #editBookmarkPanelRows .expander-down:hover:active { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + + #editBookmarkPanelRows .expander-up:focus-visible, + #editBookmarkPanelRows .expander-down:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + #editBookmarkPanelRows .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); + } + + #editBookmarkPanelRows .expander-up > .button-box, + #editBookmarkPanelRows .expander-down > .button-box { + padding: 0 !important; + } + + #places input { + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + min-height: 20px !important; + padding-inline: 4px !important; + } + + #places input:focus { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + #places input:not(:read-write):focus { + outline: none !important; + } + + .caption-label { + margin-inline-start: 8px !important; + color: var(--organizer-deemphasized-color) !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox { + appearance: none !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + border: 1px solid var(--organizer-border-color) !important; + border-radius: 4px !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { + border: 1px solid transparent !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + + #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } + } + /** Decoration **************************************************************/ + /*= URL, Search Bar ========================================================*/ + #urlbar:hover:not([focused="true"]) > #urlbar-background, + #searchbar:hover:not(:focus-within) { + --toolbar-field-border-color: var(--toolbar-field-focus-border-color); + } + + /*= Other Fields ===========================================================*/ + /* Sidebar */ + .sidebar-panel[lwt-sidebar] #search-box:hover, + body[lwt-sidebar] xul|search-textbox.tabsFilter:hover { + border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important; + } + .sidebar-panel:not([lwt-sidebar]) #search-box:hover, + body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { + border-color: -moz-accent-color !important; + } + + /* Others */ + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent); + } + /*= Downloads Panel ========================================================*/ /* Accent Color for downloaded item */ #downloadsListBox .download-state[exists] .downloadDetails { @@ -1163,6 +2460,181 @@ } */ + /*= Animate ================================================================*/ + /*- Background Color -------------------------------------------------------*/ + button, + toolbarbutton, + stack, + vbox, + .toolbarbutton-icon { + transition: background-color 1s var(--animation-easing-function) !important; + } + button:hover, + toolbarbutton:hover, + stack:hover, + vbox:hover, + .toolbarbutton-icon:hover { + transition: background-color 0.25s var(--animation-easing-function) !important; + } + @media (-moz-gtk-csd-available) { + .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) { + transition: background-image 0.25s var(--animation-easing-function) !important; + } + } + + menu, + menuitem, + .subviewbutton { + /* treechildren::-moz-tree-row: Can't apply */ + transition: background-color 0.5s var(--animation-easing-function) !important; + } + menu:hover, + menuitem:hover, + .subviewbutton:hover { + transition: background-color 0.1s var(--animation-easing-function) !important; + } + + /*- Pinned Tab -------------------------------------------------------------*/ + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) { + /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */ + transition: -moz-box-flex 0.2s var(--animation-easing-function), + margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important; + max-width: var(--tab-max-width, 240px); + } + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] { + transition: -moz-box-flex 0.2s var(--animation-easing-function), + margin-inline-start 0.2s var(--animation-easing-function) !important; + } + + #tabbrowser-tabs:not([movingtab]) .tab-content { + transition: padding-inline 0.2s var(--animation-easing-function), + /* Unloaded Tab */ opacity 0.5s var(--animation-easing-function) !important; + } + #tabbrowser-tabs:not([movingtab]) .tab-content::before, + #tabbrowser-tabs:not([movingtab]) .tab-content::after { + transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important; + } + #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container { + transition: width 0.3s var(--animation-easing-function) !important; + } + #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image { + transition: all 0.3s var(--animation-easing-function) !important; + } + + /*- URL / Search Bar -------------------------------------------------------*/ + #urlbar-background, + #searchbar { + transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important; + } + #urlbar-background:hover, + #searchbar:hover { + transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important; + } + + /* Buttons in URL bar */ + #tracking-protection-icon-container, + #identity-icon-box, + #identity-permission-box, + #notification-popup-box, + #page-action-buttons > .urlbar-page-action { + transition: background-color 2.5s var(--animation-easing-function) !important; + } + #tracking-protection-icon-container:hover, + #identity-icon-box:hover, + #identity-permission-box:hover, + #notification-popup-box:hover, + #page-action-buttons > .urlbar-page-action:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } + + /*- Border - Other Fields --------------------------------------------------*/ + #search-box:hover, + xul|search-textbox.tabsFilter:hover, + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + transition: border-color 1s var(--animation-easing-function) !important; + } + #search-box:hover, + xul|search-textbox.tabsFilter:hover, + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + transition: border-color 0.5s var(--animation-easing-function) !important; + } + + /*- Sidebar ----------------------------------------------------------------*/ + #sidebar-box { + /* like #sidebar-box > #sidebar */ + min-width: 14em; + width: 18em; + max-width: 36em; + + /* Animation */ + transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + #sidebar-box[hidden="true"] { + display: -moz-box !important; + margin-inline-start: -18em; + opacity: 0; + visibility: collapse; + transition-delay: 0s, 0s, 0.25s !important; + } + + /*- Expand - Synced Tabs ---------------------------------------------------*/ + @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") + { + .item-tabs-list { + transition: transform 0.2s ease-out, opacity 0.2s ease-out; + transform: translateY(0%); + opacity: 1; + max-height: 100%; + } + + .item.client.closed .item-tabs-list { + display: flex !important; + + transition: transform 0.2s ease-out, opacity 0.2s ease-out, + max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s; + visibility: hidden; + transform: translateY(-100%); + opacity: 0; + max-height: 0; + } + } + + /*- Arrow - Synced Tabs ----------------------------------------------------*/ + @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") + { + /* treechildren::-moz-tree-twisty: Can't apply */ + #template-container .item.client .item-twisty-container { + transition: transform 0.1s var(--animation-easing-function) !important; + } + + #template-container .item.client.closed .item-twisty-container { + transform: rotate(-90deg); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; + } + + #template-container .item.client.closed .item-twisty-container:dir(rtl) { + transform: rotate(90deg); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; + } + } + + /*- Arrow - Edit Bookmark Popup --------------------------------------------*/ + #editBookmarkPanelRows .expander-up .button-icon, + #editBookmarkPanelRows .expander-down .button-icon { + transition: transform 0.1s var(--animation-easing-function) !important; + } + #editBookmarkPanelRows .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; + } + #editBookmarkPanelRows .expander-up .button-icon { + transform: rotate(180deg); + } + /** Reduce Padding **********************************************************/ /*= Root - Reduce Padding ==================================================*/ :root { @@ -1263,8 +2735,11 @@ } /* Tab - Max Size */ + :root { + --tab-max-width: 225px; + } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { - max-width: 225px !important; + max-width: var(--tab-max-width) !important; /* Original: 225px */ } /* neighbouring tabs should "pinch" together */ @@ -1357,6 +2832,12 @@ background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; } + /*= Nav Bar - Reduce Width =================================================*/ + #nav-bar:not([customizing]) toolbarspring { + min-width: 1px !important; + max-width: 100px !important; + } + /*= URL Bar - Reduce Padding ===============================================*/ :root:not([uidensity="touch"]) #urlbar-container, :root:not([uidensity="touch"]) #search-container { @@ -1775,6 +3256,11 @@ --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ } + /* Unloaded Tab - Contents Opacity ******************************************/ + #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content { + opacity: 0.7; + } + /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons="activetab"] .tab-content:not([pinned]) { padding-inline-start: 8px !important; @@ -1886,20 +3372,27 @@ fill-opacity: 0.8 !important; opacity: 1 !important; } - .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { - margin-inline-end: 9.5px !important; + .tab-label-container > .tab-label { + transition: transform 0.25s var(--animation-easing-function); + } + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); } /* None exist favicon - Size bigger */ .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { transform: translateX(-0.5px) translateY(-1px); inset-inline-end: 0 !important; - margin-inline-end: 5.5px !important; + margin-inline-end: 0 !important; padding: 0 !important; } .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { opacity: 0 !important; /* Favicon hidden */ } + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } /* Busy - Show */ .tab-throbber[busy], @@ -2089,7 +3582,7 @@ :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____), #editBMPanel_unfiledRootItem, #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] { - list-style-image: url("./icons/mail-inbox-all-big.svg") !important; + list-style-image: url("./icons/mail-inbox-all.svg") !important; } /* Other Folder - Open */ @@ -2100,7 +3593,7 @@ treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks), :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) { - list-style-image: url("./icons/mail-inbox-big.svg") !important; + list-style-image: url("./icons/mail-inbox.svg") !important; } /*= Default Icon - Overide =================================================*/ @@ -2190,6 +3683,57 @@ list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ } + /*= Menubar - Icons =========================================*/ + @-moz-document url("chrome://browser/content/places/places.xhtml") + { + @media (-moz-gtk-csd-available) { + #organizeButton, + #viewMenu, + #maintenanceButton, + #back-button, + #forward-button, + #clearDownloadsButton { + fill: currentColor !important; + -moz-context-properties: fill !important; + } + + /* Add */ + #organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg") !important; + } + #viewMenu { + list-style-image: url("./icons/sort.svg") !important; + } + #maintenanceButton { + list-style-image: url("./icons/import-export.svg") !important; + } + + #clearDownloadsButton { + list-style-image: url("chrome://global/skin/icons/delete.svg") !important; + } + #clearDownloadsButton > .toolbarbutton-icon { + display: -moz-inline-box !important; + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 0; + margin-inline-end: 2px; + } + + /* Replace */ + #back-button { + list-style-image: url("chrome://browser/skin/back.svg") !important; + } + #forward-button { + list-style-image: url("chrome://browser/skin/forward.svg") !important; + } + + #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, + #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1) !important; + } + } + } + /** Panel - Icons ***********************************************************/ /*= Padding ================================================================*/ :root { @@ -2295,7 +3839,7 @@ } #appMenu-proton-update-banner::before { - content: url("chrome://browser/skin/whatsnew.svg"); + content: url("./icons/whatsnew.svg"); } #appMenu-fxa-status2::before { /* Don't exist img tag */ @@ -2476,7 +4020,7 @@ /* Web Developer Tools */ #appmenu-developer-tools-view .subviewbutton:nth-child(1), #PanelUI-developer-tools-view .subviewbutton:nth-child(1) { - list-style-image: url("chrome://browser/skin/developer.svg"); + list-style-image: url("./icons/developer.svg"); } /* Task Manager */ #appmenu-developer-tools-view .subviewbutton:nth-child(2), @@ -2491,7 +4035,7 @@ /* Browser Toolbox - Edge webdeveloper.svg */ #appmenu-developer-tools-view .subviewbutton:nth-child(4), #PanelUI-developer-tools-view .subviewbutton:nth-child(4) { - list-style-image: url("./icons/webdeveloper.svg"); + list-style-image: url("./icons/window-dev-tools.svg"); } /* Browser Content Toolbaox - */ #appmenu-developer-tools-view .subviewbutton:nth-child(5), @@ -2516,7 +4060,7 @@ /* Page Source - Edge file-search.svg */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(2), #PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) { - list-style-image: url("./icons/search-file.svg"); + list-style-image: url("./icons/document-search.svg"); } /* Extensions for Devel */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(1), @@ -2613,6 +4157,23 @@ } } + /*= protections-popup ======================================================*/ + #protections-popup-settings-button > .protections-popup-settings-icon, + #protections-popup-show-report-button > .protections-popup-show-report-icon { + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 1em; + } + + #protections-popup-settings-button > .protections-popup-settings-icon { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + } + + #protections-popup-show-report-button > .protections-popup-show-report-icon { + /* chrome://browser/skin/controlcenter/dashboard.svg */ + list-style-image: url("icons/dashboard.svg"); + } + /*= identity-popup =========================================================*/ #identity-popup-clear-sitedata-button, #identity-popup-more-info { @@ -2650,6 +4211,8 @@ menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, #blockedPopupDontShowMessage { /* Color */ -moz-context-properties: fill, fill-opacity !important; @@ -2684,6 +4247,8 @@ menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, #blockedPopupDontShowMessage { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; @@ -2738,6 +4303,8 @@ menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, #blockedPopupDontShowMessage { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: 0 !important; @@ -2762,6 +4329,8 @@ menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, #blockedPopupDontShowMessage { padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; @@ -2773,6 +4342,10 @@ :root { --context-menu-background-padding-default: 6px; } + + #main-menubar > menu > .menubar-text { + padding-inline-start: 3px; + } } /* Padding - Mac */ @@ -2910,7 +4483,7 @@ #context_reloadTab, #context_reloadSelectedTabs { - /* --menuitem-image: url("chrome://global/skin/icons/reload.svg"); */ + --menuitem-image: url("./icons/reload.svg"); } #context_toggleMuteTab, #context_toggleMuteSelectedTabs { @@ -2930,7 +4503,7 @@ } #context_duplicateTab, #context_duplicateTabs { - --menuitem-image: url("./icons/tab-copy.svg"); + --menuitem-image: url("./icons/notebook-subsection.svg"); } #context_bookmarkTab, @@ -2997,7 +4570,7 @@ #toolbar-context-reloadSelectedTab, #toolbar-context-reloadSelectedTabs { - --menuitem-image: url("chrome://browser/skin/reload.svg"); + --menuitem-image: url("./icons/reload.svg"); } #toolbar-context-bookmarkSelectedTab, #toolbar-context-bookmarkSelectedTabs { @@ -3094,13 +4667,13 @@ --menuitem-image: url("chrome://browser/skin/save.svg"); } #context-savelinktopocket { - --menuitem-image: url("chrome://browser/skin/pocket-outline.svg"); + --menuitem-image: url("./icons/pocket-outline.svg"); } #context-copyemail { --menuitem-image: url("chrome://browser/skin/mail.svg"); } #context-copylink { - --menuitem-image: url("chrome://browser/skin/link.svg"); + --menuitem-image: url("./icons/link.svg"); } #context-sendlinktodevice { --menuitem-image: url("./icons/send-to-device.svg"); @@ -3170,7 +4743,7 @@ #context-copyimage, #context-copyvideourl, #context-copyaudiourl { - --menuitem-image: url("chrome://browser/skin/link.svg"); + --menuitem-image: url("./icons/link.svg"); } #context-sendimage, #context-sendvideo, @@ -3197,7 +4770,7 @@ --menuitem-image: url("chrome://browser/skin/save.svg"); } #context-pocket { - --menuitem-image: url("chrome://browser/skin/pocket-outline.svg"); + --menuitem-image: url("./icons/pocket-outline.svg"); } #context-sendpagetodevice { --menuitem-image: url("./icons/send-to-device.svg"); @@ -3222,7 +4795,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #context-copy { - --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); + --menuitem-image: url("./icons/edit-copy.svg"); } #context-paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -3272,7 +4845,7 @@ #context-viewpartialsource-selection, #context-viewsource { - --menuitem-image: url("./icons/search-file.svg"); + --menuitem-image: url("./icons/document-search.svg"); } #context-inspect-a11y { --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg"); @@ -3292,10 +4865,8 @@ #context-forward { --menuitem-image: url("chrome://browser/skin/forward.svg"); } - #context_reloadTab, - #context_reloadSelectedTabs, #context-reload { - --menuitem-image: url("chrome://browser/skin/reload.svg"); + --menuitem-image: url("./icons/reload.svg"); } #context-stop { --menuitem-image: url("chrome://global/skin/icons/close.svg"); @@ -3353,7 +4924,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #placesContext_copy { - --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); + --menuitem-image: url("./icons/edit-copy.svg"); } #placesContext_paste_group { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -3446,7 +5017,7 @@ --menuitem-image: url("./icons/link-square.svg"); } #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { - --menuitem-image: url("chrome://browser/skin/link.svg"); + --menuitem-image: url("./icons/link.svg"); } .downloadRemoveFromHistoryMenuItem { @@ -3475,7 +5046,7 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #syncedTabsCopySelected { - --menuitem-image: url("chrome://browser/skin/link.svg"); + --menuitem-image: url("./icons/link.svg"); } #syncedTabsOpenAllInTabs { @@ -3496,7 +5067,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { - --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); + --menuitem-image: url("./icons/edit-copy.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -3524,7 +5095,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { - --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); + --menuitem-image: url("./icons/edit-copy.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -3550,7 +5121,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] { - --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); + --menuitem-image: url("./icons/edit-copy.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -3658,7 +5229,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #menu_copy { - --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); + --menuitem-image: url("./icons/edit-copy.svg"); } #menu_paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -3803,7 +5374,7 @@ #webDeveloperMenu, /* Legacy */ #browserToolsMenu { - --menuitem-image: url("chrome://browser/skin/developer.svg"); + --menuitem-image: url("./icons/developer.svg"); } #menu_pageInfo { --menuitem-image: url("./icons/document-endnote.svg"); @@ -3821,7 +5392,7 @@ --menuitem-image: url("./icons/bug.svg"); } #menu_browserToolbox { - --menuitem-image: url("./icons/webdeveloper.svg"); + --menuitem-image: url("./icons/window-dev-tools.svg"); } #menu_browserContentToolbox { --menuitem-image: url("./icons/command-frames.svg"); @@ -3834,7 +5405,7 @@ #menu_eyedropper { } #menu_pageSource { - --menuitem-image: url("./icons/search-file.svg"); + --menuitem-image: url("./icons/document-search.svg"); } #extensionsForDevelopers { --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg"); @@ -3868,4 +5439,69 @@ #helpPolicySupport { } + + /** Libray Menu *************************************************************/ + /*= organizeButtonPopup ====================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #newfolder { + --menuitem-image: url("./icons/folder.svg"); + } + #newseparator { + --menuitem-image: url("./icons/vertical-line.svg"); + } + + #orgUndo { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); + } + #orgRedo { + } + + #orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + #orgCopy { + --menuitem-image: url("./icons/edit-copy.svg"); + } + #orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #orgSelectAll { + --menuitem-image: url("./icons/select-all-on.svg"); + } + + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + /*= viewMenuPopup ==========================================================*/ + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + #viewSort { + --menuitem-image: url("./icons/text-sort-ascending.svg"); + } + + /*= maintenanceButtonPopup =================================================*/ + #backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); + } + #fileRestoreMenu { + } + + #fileImport { + --menuitem-image: url("chrome://browser/skin/save.svg"); + } + #fileExport { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } } diff --git a/userContent.css b/userContent.css index 602ffa6..68cdb33 100644 --- a/userContent.css +++ b/userContent.css @@ -1,3 +1,5 @@ +@namespace url(http://www.w3.org/1999/xhtml); + @media (-moz-proton) { @-moz-document url("about:home"), url("about:newtab") { /** Activity Stream - Search Focus Border: like URL ***********************/ @@ -29,6 +31,39 @@ height: 100% !important; /* Original: 48px */ } + /** Activity Stream - Animate *********************************************/ + :root { + --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); + } + + /* Background */ + .top-site-outer, + #searchSubmit, + button.icon, + button.close-button { + transition: background 1.5s var(--animation-easing-function); + } + .top-site-outer:hover, + #searchSubmit:hover, + button.icon:hover, + button.close-button:hover { + transition: background 0.5s var(--animation-easing-function); + } + + /* Search Bar */ + .search-inner-wrapper input { + transition: 1s var(--animation-easing-function); + transition-property: border-color, box-shadow; + } + .search-wrapper .search-inner-wrapper:active input, + .search-wrapper input:focus { + transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); + } + .search-wrapper .search-inner-wrapper:hover input { + border-color: var(--newtab-primary-action-background) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + /** Activity Stream - Home Search Bar looks like proton *******************/ /* Dropdown Colors */ #root { @@ -551,8 +586,7 @@ filter: hue-rotate(330deg) brightness(1.3) !important; } .SecondaryHero-module-icon { - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; + filter: invert(85%) !important; } .Icon-magnifying-glass, .Notice-icon { @@ -577,6 +611,10 @@ .AutoSearchInput-query:is(:hover, :focus) { border-color: var(--in-content-primary-button-background) !important; } + .AutoSearchInput-query:focus { + box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), + 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; + } .PromotedBadge-link--line { border-color: var(--in-content-deemphasized-text) !important; @@ -1099,6 +1137,73 @@ } } + /*= Text ===================================================================*/ + @-moz-document unobservable-document(), + url-prefix("view-source") { + :root { + background-color: var(--in-content-page-background) !important; /* Original: white */ + color: var(--in-content-page-color) !important; /* Original: black */ + } + } + + /*= View Source ============================================================*/ + @-moz-document url-prefix("view-source") { + :root { + /* Colors */ + --view-source-green: var(--green-80); + --view-source-purple: #800080; /* Like alphenglow */ + } + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --view-source-green: var(--green-60); + --view-source-purple: #c68aff; + } + } + + pre[id]::before, + span[id]::before { + color: color-mix( + in srgb, + var(--in-content-page-color) 70%, + var(--in-content-page-background) + ) !important; /* Original: #ccc */ + } + .highlight .start-tag, + .highlight .end-tag { + color: var(--view-source-purple) !important; /* Original: purple */ + } + .highlight .comment { + color: var(--view-source-green) !important; /* Original: green */ + } + .highlight .cdata { + color: var(--in-content-border-invalid) !important; /* Original: #CC0066 */ + } + .highlight .doctype { + color: #4682b4 !important; /* Original: steelblue */ + } + .highlight .pi { + color: orchid !important; /* Original: orchid */ + } + .highlight .entity { + color: #ff4500 !important; /* Original: #FF4500 */ + } + .highlight .attribute-name { + color: var(--view-source-green) !important; /* Original: black */ + } + .highlight .attribute-value { + color: var(--in-content-link-color) !important; /* Original: blue */ + } + .highlight .markupdeclaration { + color: #4682b4 !important; /* Original: steelblue */ + } + .highlight .error, + .highlight + .error + > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) { + color: var(--in-content-error-text-color) !important; /* Original: red */ + } + } + /*= Directory View =========================================================*/ @-moz-document url-prefix("about:sync-log"), regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {