From 2c50ba45dd0953d4cd5fe1c5d693079a67588f4f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 29 Oct 2021 15:25:19 +0900 Subject: [PATCH 1/7] Fix: CI - Format test only modified `userChrome.css`, `userContent.css` --- .github/workflows/format.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index b7ad9b8..36e2922 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -9,6 +9,9 @@ on: - dev - photon-style - proton-style + paths: + - userChrome.css + - userContent.css jobs: prettier: From b598053df86c3c3a56368f5bbf5c18fd972d4d2f Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Sat, 30 Oct 2021 23:22:53 +0900 Subject: [PATCH 2/7] Fix: Darkmode at Stable to Dev #250 `layout.css.prefers-color-scheme.content-override` at 95+ - 0: dark - 1: light - 2: OS (old behavior) - 3: browser (the new default) Unfortunately, there are limits. - In Nightly - Works fine. - However, `-moz-toolbar-prefers-color-scheme: dark` should be removed as legacy. - Stable to Dev - If the system is in dark mode, it is unconditionally dark mode. - However, if the system is used in dark mode, the browser theme will also use dark mode, so it is not a very big side effect. --- user.js | 5 ++++- userChrome.css | 6 +++--- userContent.css | 4 ++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/user.js b/user.js index f0d16eb..03d1020 100644 --- a/user.js +++ b/user.js @@ -20,9 +20,12 @@ user_pref("layout.css.backdrop-filter.enabled", true); // Restore Compact Mode - 89 Above user_pref("browser.compactmode.show", true); -// about:home Search Bar +// about:home Search Bar - 89 Above user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false); +// Browser Theme Based Scheme - Will be activate 95 Above +// user_pref("layout.css.prefers-color-scheme.content-override", 3); + // ** Useful Options *********************************************************** // Integrated calculator at urlbar user_pref("browser.urlbar.suggest.calculator", true); diff --git a/userChrome.css b/userChrome.css index 38fd06c..0efb762 100644 --- a/userChrome.css +++ b/userChrome.css @@ -371,7 +371,7 @@ --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); } - @media (prefers-color-scheme: dark) { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :host, :root { /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */ @@ -505,7 +505,7 @@ --menu-border-color: #cfcfd8; --menuitem-hover-background-color: #e0e0e6; } - @media (prefers-color-scheme: dark) { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --menu-border-color: rgba(107, 107, 107, 0.3); --menu-color: #fbfbfe; @@ -563,7 +563,7 @@ /*= Downloads ==============================================================*/ @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml") { - @media (prefers-color-scheme: dark) { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --in-content-page-background: #42414d; } diff --git a/userContent.css b/userContent.css index d2644c5..602ffa6 100644 --- a/userContent.css +++ b/userContent.css @@ -40,7 +40,7 @@ --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; } - @media (prefers-color-scheme: dark) { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { #root { /* Default Dark Mode */ --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */ @@ -334,7 +334,7 @@ --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); } - @media (prefers-color-scheme: dark) { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :host, :root { /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */ From 5d9c20be6a72e052c20caddb34e2b5431ca25916 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 3 Nov 2021 09:54:40 +0900 Subject: [PATCH 3/7] Fix: Remove Tab Border - At nightly 96 #259 --- userChrome.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/userChrome.css b/userChrome.css index 0efb762..c13b0c4 100644 --- a/userChrome.css +++ b/userChrome.css @@ -47,6 +47,25 @@ --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215)); } + /*= Remove Tab Border ======================================================*/ + /* Light Theme */ + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ + } + + /* Dark Theme */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ + } + /*= Light Weight Theme =====================================================*/ /* Header Image */ :root[lwtheme-image] { From ba7befe224503fc15c536c4feee765329ddbe790 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Nov 2021 12:11:12 +0900 Subject: [PATCH 4/7] Add: Fully Theme - Bookmark Popup #263 --- userChrome.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/userChrome.css b/userChrome.css index c13b0c4..092da99 100644 --- a/userChrome.css +++ b/userChrome.css @@ -505,6 +505,36 @@ } } + /*== Bookmark Popup Color ==================================================*/ + #editBMPanel_folderTree:-moz-lwtheme, + #editBMPanel_tagsSelector:-moz-lwtheme { + appearance: none !important; + border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; + } + + #editBMPanel_folderTree:-moz-lwtheme > treechildren, + #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover), + #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected), + #editBMPanel_tagsSelector:-moz-lwtheme { + color: var(--lwt-text-color, fieldtext) !important; + } + #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) { + font-weight: 600 !important; + } + + #editBMPanel_folderTree:-moz-lwtheme > treechildren, + #editBMPanel_tagsSelector:-moz-lwtheme { + background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important; + } + #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover), + #editBMPanel_tagsSelector > richlistitem:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important; + } + #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected), + #editBMPanel_tagsSelector > richlistitem[selected="true"] { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; + } + /* Fully Dark Mode **********************************************************/ /*= Remove White Flash =====================================================*/ #tabbrowser-tabbox, From 12b2ea43e2dd5f9cd1d84dbb88099dc2748ae0e4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Nov 2021 12:22:19 +0900 Subject: [PATCH 5/7] Add: Fully Theme - Bookmark Popup Field's background #263 --- userChrome.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/userChrome.css b/userChrome.css index 092da99..9433903 100644 --- a/userChrome.css +++ b/userChrome.css @@ -535,6 +535,11 @@ background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; } + #editBMPanel_namePicker, + #editBMPanel_tagsField { + --input-bgcolor: var(--arrowpanel-background, Field); + } + /* Fully Dark Mode **********************************************************/ /*= Remove White Flash =====================================================*/ #tabbrowser-tabbox, From 234d23e3128530a0ee11ea605004e41b0bf6418f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Nov 2021 13:57:57 +0900 Subject: [PATCH 6/7] Add: Fully Theme - Sidebar field --- userChrome.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/userChrome.css b/userChrome.css index 9433903..a0abe33 100644 --- a/userChrome.css +++ b/userChrome.css @@ -540,6 +540,21 @@ --input-bgcolor: var(--arrowpanel-background, Field); } + /*== Sidebar - Field Color =================================================*/ + .sidebar-panel[lwt-sidebar] #search-box { + appearance: none !important; + padding: 8px 11px !important; + border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important; + border-radius: 4px; + + background-color: var(--lwt-sidebar-background-color, Field) !important; + color: var(--lwt-sidebar-text-color, FieldText) !important; + } + .sidebar-panel[lwt-sidebar] #search-box[focused="true"] { + border-color: var(--lwt-sidebar-highlight-background-color) !important; + outline: 1px solid var(--lwt-sidebar-highlight-background-color); + } + /* Fully Dark Mode **********************************************************/ /*= Remove White Flash =====================================================*/ #tabbrowser-tabbox, From 8de99608c46d35db530f1b797087df9f9f185797 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Nov 2021 14:21:43 +0900 Subject: [PATCH 7/7] Fix: Fully Theme - Synced Tabs --- userChrome.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index a0abe33..bd13dc5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -541,7 +541,8 @@ } /*== Sidebar - Field Color =================================================*/ - .sidebar-panel[lwt-sidebar] #search-box { + .sidebar-panel[lwt-sidebar] #search-box, + body[lwt-sidebar] xul|search-textbox.tabsFilter { appearance: none !important; padding: 8px 11px !important; border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important; @@ -550,7 +551,8 @@ background-color: var(--lwt-sidebar-background-color, Field) !important; color: var(--lwt-sidebar-text-color, FieldText) !important; } - .sidebar-panel[lwt-sidebar] #search-box[focused="true"] { + .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); }