From 3be8d36a3bbb2037a8373f821107d6ff0dd5d4bd Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 28 Apr 2022 10:45:09 +0900 Subject: [PATCH 01/29] Add: Option - Pinned tab button at hover #378 - `userChrome.tab.close_button_at_pinned.always` - `userChrome.tab.close_button_at_pinned.background` --- css/leptonChrome.css | 48 +++++++++++++++--- src/tabbar/_container_tab.scss | 1 + src/tabbar/_selected_tab.scss | 2 +- .../selected_tab/_pinned_close_button.scss | 49 ++++++++++++++----- 4 files changed, 80 insertions(+), 20 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7c2f73f..0393908 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4271,9 +4271,9 @@ margin: unset !important; } } -/*= Selected Tab - Photon like contextline ===================================*/ +/*= Selected Tab - Pinned tab's close button =================================*/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ @@ -4282,16 +4282,52 @@ margin-inline: -4px !important; /* (24px - 16px) / 2 */ } - - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-image { display: none !important; } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; + /* (24px - 16px) / 2 */ + } + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { + .tabbrowser-tab[pinned]:not([busy]):hover .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; + /* (24px - 16px) / 2 */ + } + .tabbrowser-tab[pinned]:not([busy]):hover .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned]:hover .tab-icon-image { + display: none !important; + } + } } /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ diff --git a/src/tabbar/_container_tab.scss b/src/tabbar/_container_tab.scss index dbb8d66..b3a966d 100644 --- a/src/tabbar/_container_tab.scss +++ b/src/tabbar/_container_tab.scss @@ -50,6 +50,7 @@ .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { opacity: 0; } + // Don't hide at userChrome.tab.close_button_at_pinned.background } /* Pinned Tab - Titlechanged Indicator override */ diff --git a/src/tabbar/_selected_tab.scss b/src/tabbar/_selected_tab.scss index b5b262f..0c422fd 100644 --- a/src/tabbar/_selected_tab.scss +++ b/src/tabbar/_selected_tab.scss @@ -23,7 +23,7 @@ @import "selected_tab/photon_like_contextline"; } -/*= Selected Tab - Photon like contextline ===================================*/ +/*= Selected Tab - Pinned tab's close button =================================*/ @include Option("userChrome.tab.close_button_at_pinned") { @import "selected_tab/pinned_close_button"; } diff --git a/src/tabbar/selected_tab/_pinned_close_button.scss b/src/tabbar/selected_tab/_pinned_close_button.scss index e6bde8c..1ca2c04 100644 --- a/src/tabbar/selected_tab/_pinned_close_button.scss +++ b/src/tabbar/selected_tab/_pinned_close_button.scss @@ -1,17 +1,40 @@ -.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; +@mixin pinnedCloseButtonShow($prefix: "") { + #{$prefix} .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -4px !important; /* (24px - 16px) / 2 */ + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; /* (24px - 16px) / 2 */ + } } -.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; +@mixin pinnedIconStackLayout($prefix: "") { + #{$prefix} .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } } -.tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { - display: none !important; +@mixin pinnedIconHide($prefix: "") { + #{$prefix} .tab-icon-image { + display: none !important; + } +} + +.tabbrowser-tab[pinned] { + @include pinnedCloseButtonShow("&[visuallyselected]:not([busy]):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([busy]):hover"); + @include pinnedIconHide("&[visuallyselected]:hover"); + + @include Option("userChrome.tab.close_button_at_pinned.always") { + @include pinnedCloseButtonShow("&[visuallyselected]:not([busy])"); + @include pinnedIconStackLayout("&[visuallyselected]:not([busy])"); + @include pinnedIconHide("&[visuallyselected]"); + } + @include Option("userChrome.tab.close_button_at_pinned.background") { + @include pinnedCloseButtonShow("&:not([busy]):hover"); + @include pinnedIconStackLayout("&:not([busy]):hover"); + @include pinnedIconHide("&:hover"); + } } From 226c995823719fb1f7e6c10cf52feec2aca6fa8e Mon Sep 17 00:00:00 2001 From: MS_Y Date: Fri, 29 Apr 2022 16:15:50 +0900 Subject: [PATCH 02/29] Doc: README - precautions --- README.org | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.org b/README.org index 9ba6820..31f36c0 100644 --- a/README.org +++ b/README.org @@ -18,10 +18,14 @@ ----- -🔔🔔 A project redesign is in progress. #351 +🔔🔔 Did you set a custom, but not work? -It's built with SCSS and all configured as options. \\ -It's in beta testing, and I'am looking forward to hearing from you. +You should copy [[./user.js][ ~user.js~ ]] file before the theme works. + +The option system depends on user configuration, and nothing applies without settings. \\ +Also, real-time changes are difficult for [[./docs/Restrictions.md#supports][technical limitations]] and require restarts. + +Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflict]] and should be explicitly =false=. ----- From 4b0fa3db83dbf9945039e94fd1b8e537815dae49 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 1 May 2022 00:54:08 +0900 Subject: [PATCH 03/29] Fix: Selected Tab - backported #337 to #382 https://github.com/black7375/Firefox-UI-Fix/commit/af691559568cedcbe5c76135d7644943b92ea7c9 --- css/leptonChrome.css | 6 ++++-- src/tabbar/selected_tab/_photon_like_contextline.scss | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7c2f73f..f002467 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4205,8 +4205,10 @@ .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { /* Photon like color Default: var(--tab-line-color, rgb(10, 132, 255)) - Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ - background-color: var(--tab-line-color, #0a84ff) !important; + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) + + FF v96+ replace by var(--lwt-tab-line-color) */ + background-color: var(--tab-line-color, var(--lwt-tab-line-color, #0a84ff)) !important; } .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { diff --git a/src/tabbar/selected_tab/_photon_like_contextline.scss b/src/tabbar/selected_tab/_photon_like_contextline.scss index f500d7c..6863996 100644 --- a/src/tabbar/selected_tab/_photon_like_contextline.scss +++ b/src/tabbar/selected_tab/_photon_like_contextline.scss @@ -18,8 +18,10 @@ .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { /* Photon like color Default: var(--tab-line-color, rgb(10, 132, 255)) - Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ - background-color: var(--tab-line-color, rgb(10, 132, 255)) !important; + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) + + FF v96+ replace by var(--lwt-tab-line-color) */ + background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important; } .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { From e71c5c38a9998636c14c1b06792c12b85f628079 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 1 May 2022 01:38:38 +0900 Subject: [PATCH 04/29] Fix: Pinned Tab - Close button hide at `movingtab` exclude `always` option #378 Info: `#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab` is not working. Because `#tabbrowser-tabs > #tabbrowser-arrowscrollbox` is shadowroot. Co-authored-by: BPower0036 <80090789+BPower0036@users.noreply.github.com> --- css/leptonChrome.css | 21 ++++++++---------- .../selected_tab/_pinned_close_button.scss | 22 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0393908..f2e49c6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4273,21 +4273,20 @@ } /*= Selected Tab - Pinned tab's close button =================================*/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-close-button { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ width: 24px !important; height: 24px !important; - margin-inline: -4px !important; - /* (24px - 16px) / 2 */ + margin-inline: -1px !important; } - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-icon-stack { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-image { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { @@ -4297,8 +4296,7 @@ /* Looks like hover */ width: 24px !important; height: 24px !important; - margin-inline: -4px !important; - /* (24px - 16px) / 2 */ + margin-inline: -1px !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { width: 0 !important; @@ -4310,21 +4308,20 @@ } } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { - .tabbrowser-tab[pinned]:not([busy]):hover .tab-close-button { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ width: 24px !important; height: 24px !important; - margin-inline: -4px !important; - /* (24px - 16px) / 2 */ + margin-inline: -1px !important; } - .tabbrowser-tab[pinned]:not([busy]):hover .tab-icon-stack { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - .tabbrowser-tab[pinned]:hover .tab-icon-image { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } } diff --git a/src/tabbar/selected_tab/_pinned_close_button.scss b/src/tabbar/selected_tab/_pinned_close_button.scss index 1ca2c04..54beb65 100644 --- a/src/tabbar/selected_tab/_pinned_close_button.scss +++ b/src/tabbar/selected_tab/_pinned_close_button.scss @@ -1,16 +1,16 @@ @mixin pinnedCloseButtonShow($prefix: "") { - #{$prefix} .tab-close-button { + #{$prefix}:not([busy]) .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ width: 24px !important; height: 24px !important; - margin-inline: -4px !important; /* (24px - 16px) / 2 */ + margin-inline: -1px !important; } } @mixin pinnedIconStackLayout($prefix: "") { - #{$prefix} .tab-icon-stack { + #{$prefix}:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; @@ -23,18 +23,18 @@ } .tabbrowser-tab[pinned] { - @include pinnedCloseButtonShow("&[visuallyselected]:not([busy]):hover"); - @include pinnedIconStackLayout("&[visuallyselected]:not([busy]):hover"); - @include pinnedIconHide("&[visuallyselected]:hover"); + @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); @include Option("userChrome.tab.close_button_at_pinned.always") { - @include pinnedCloseButtonShow("&[visuallyselected]:not([busy])"); - @include pinnedIconStackLayout("&[visuallyselected]:not([busy])"); + @include pinnedCloseButtonShow("&[visuallyselected]"); + @include pinnedIconStackLayout("&[visuallyselected]"); @include pinnedIconHide("&[visuallyselected]"); } @include Option("userChrome.tab.close_button_at_pinned.background") { - @include pinnedCloseButtonShow("&:not([busy]):hover"); - @include pinnedIconStackLayout("&:not([busy]):hover"); - @include pinnedIconHide("&:hover"); + @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); } } From 305f6eb477a87651a1bc485944ed14bdd4ac7483 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 1 May 2022 01:40:04 +0900 Subject: [PATCH 05/29] Clean: `selected tab` -> `clipped tab` #378 Co-authored-by: BPower0036 <80090789+BPower0036@users.noreply.github.com> --- css/leptonChrome.css | 110 +++++++++--------- src/tabbar/_clipped_tab.scss | 5 + src/tabbar/_selected_tab.scss | 5 - .../selected_tab/_pinned_close_button.scss | 40 ------- 4 files changed, 60 insertions(+), 100 deletions(-) delete mode 100644 src/tabbar/selected_tab/_pinned_close_button.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f2e49c6..f43b6f5 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4271,61 +4271,6 @@ margin: unset !important; } } -/*= Selected Tab - Pinned tab's close button =================================*/ -@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; - } - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { - display: none !important; - } - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; - } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; - } - } -} /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @supports -moz-bool-pref("userChrome.tab.dynamic_separtor") { @@ -4743,6 +4688,61 @@ /* Redefine from 19px !important, Original: 17px = (width - padding) */ } } +/** Clipped tabs - Show close button at pinned tab ****************************/ +@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -1px !important; + } + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { + display: none !important; + } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -1px !important; + } + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -1px !important; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { + display: none !important; + } + } +} /** Clipped tabs - Always show tab icon ***************************************/ @supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") { .tab-icon-image:not([src], [pinned], [crashed], [busy]) { diff --git a/src/tabbar/_clipped_tab.scss b/src/tabbar/_clipped_tab.scss index ef4b341..8b237a8 100644 --- a/src/tabbar/_clipped_tab.scss +++ b/src/tabbar/_clipped_tab.scss @@ -8,6 +8,11 @@ @import "clipped_tab/show_close_button_at_hover"; } +/** Clipped tabs - Show close button at pinned tab ****************************/ +@include Option("userChrome.tab.close_button_at_pinned") { + @import "clipped_tab/pinned_close_button"; +} + /** Clipped tabs - Always show tab icon ***************************************/ @include Option("userChrome.tab.always_show_tab_icon") { @import "clipped_tab/always_show_tab_icon"; diff --git a/src/tabbar/_selected_tab.scss b/src/tabbar/_selected_tab.scss index 0c422fd..8ef7dd8 100644 --- a/src/tabbar/_selected_tab.scss +++ b/src/tabbar/_selected_tab.scss @@ -22,8 +22,3 @@ @include Option("userChrome.tab.photon_like_contextline") { @import "selected_tab/photon_like_contextline"; } - -/*= Selected Tab - Pinned tab's close button =================================*/ -@include Option("userChrome.tab.close_button_at_pinned") { - @import "selected_tab/pinned_close_button"; -} diff --git a/src/tabbar/selected_tab/_pinned_close_button.scss b/src/tabbar/selected_tab/_pinned_close_button.scss deleted file mode 100644 index 54beb65..0000000 --- a/src/tabbar/selected_tab/_pinned_close_button.scss +++ /dev/null @@ -1,40 +0,0 @@ -@mixin pinnedCloseButtonShow($prefix: "") { - #{$prefix}:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; - } -} -@mixin pinnedIconStackLayout($prefix: "") { - #{$prefix}:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } -} -@mixin pinnedIconHide($prefix: "") { - #{$prefix} .tab-icon-image { - display: none !important; - } -} - -.tabbrowser-tab[pinned] { - @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); - @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); - @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); - - @include Option("userChrome.tab.close_button_at_pinned.always") { - @include pinnedCloseButtonShow("&[visuallyselected]"); - @include pinnedIconStackLayout("&[visuallyselected]"); - @include pinnedIconHide("&[visuallyselected]"); - } - @include Option("userChrome.tab.close_button_at_pinned.background") { - @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); - @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); - @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); - } -} From f51106d31246b239b88c36bb6de912a0f5e3882b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 2 May 2022 20:36:08 +0900 Subject: [PATCH 06/29] Doc: Restrictions - URL quote --- docs/Restrictions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Restrictions.md b/docs/Restrictions.md index 910d0f7..a74021f 100644 --- a/docs/Restrictions.md +++ b/docs/Restrictions.md @@ -170,7 +170,7 @@ html|input { If you want to limit the coverage to some pages, you can use [`@-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document): ```css /* Main browser UI */ -@-moz-document url(chrome://browser/content/browser.xhtml) { +@-moz-document url("chrome://browser/content/browser.xhtml") { /* Your CSS */ } From a0fe7b59f7699a2be92426cdc4796cb312335ab1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 4 May 2022 04:39:14 +0900 Subject: [PATCH 07/29] Fix: Pinned Tab - Close button width & build missing file #378 --- css/leptonChrome.css | 32 ++++++++---- .../clipped_tab/_pinned_close_button.scss | 51 +++++++++++++++++++ 2 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 src/tabbar/clipped_tab/_pinned_close_button.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f43b6f5..68a234f 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4690,13 +4690,25 @@ } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + #tabbrowser-tabs { + --uc-close-button-size: 24px; + --uc-close-button-padding: 6px; + --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); + } + + #tabbrowser-tabs[closebuttons="activetab"] { + --uc-close-button-size: 20px; + --uc-close-button-padding: 4px; + } + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; @@ -4711,9 +4723,10 @@ display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { width: 0 !important; @@ -4729,9 +4742,10 @@ display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; diff --git a/src/tabbar/clipped_tab/_pinned_close_button.scss b/src/tabbar/clipped_tab/_pinned_close_button.scss new file mode 100644 index 0000000..fd091b5 --- /dev/null +++ b/src/tabbar/clipped_tab/_pinned_close_button.scss @@ -0,0 +1,51 @@ +#tabbrowser-tabs { + --uc-close-button-size: 24px; + --uc-close-button-padding: 6px; + --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); +} +#tabbrowser-tabs[closebuttons="activetab"] { + --uc-close-button-size: 20px; + --uc-close-button-padding: 4px; +} + +@mixin pinnedCloseButtonShow($prefix: "") { + #{$prefix}:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + + /* Looks like hover */ + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; + } +} +@mixin pinnedIconStackLayout($prefix: "") { + #{$prefix}:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } +} +@mixin pinnedIconHide($prefix: "") { + #{$prefix} .tab-icon-image { + display: none !important; + } +} + +.tabbrowser-tab[pinned] { + @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); + + @include Option("userChrome.tab.close_button_at_pinned.always") { + @include pinnedCloseButtonShow("&[visuallyselected]"); + @include pinnedIconStackLayout("&[visuallyselected]"); + @include pinnedIconHide("&[visuallyselected]"); + } + @include Option("userChrome.tab.close_button_at_pinned.background") { + @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); + } +} From 818f29a66c4432faf9dd55844db309d670f3f945 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 4 May 2022 10:36:43 +0900 Subject: [PATCH 08/29] Clean: `_main_menubar` -> `_global_menubar` --- src/icons/{_main_menubar.scss => _global_menubar.scss} | 0 src/leptonChrome.scss | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/icons/{_main_menubar.scss => _global_menubar.scss} (100%) diff --git a/src/icons/_main_menubar.scss b/src/icons/_global_menubar.scss similarity index 100% rename from src/icons/_main_menubar.scss rename to src/icons/_global_menubar.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index e079f80..49d3d4c 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -92,7 +92,7 @@ @import "icons/context_menu"; } @include Option("userChrome.icon.global_menubar") { - @import "icons/main_menubar"; + @import "icons/global_menubar"; } @include Option("userChrome.icon.global_menu") { @import "icons/global_menu"; From 30cdbf63088d17dcedc7f20d59d6c4ca6eb0ac2a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 4 May 2022 10:46:25 +0900 Subject: [PATCH 09/29] Fix: Global Menubar - padding at icon with non `userChrome.padding.global_menubar` --- css/leptonChrome.css | 6 ++++++ src/icons/_layout_menu.scss | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f002467..92471d1 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6002,6 +6002,12 @@ --menuitem-image: none; /* Prevent Image Inheritance */ } + + @supports not -moz-bool-pref("userChrome.padding.global_menubar") { + #main-menubar > menu { + padding-block: 2px !important; + } + } } /* Padding - Windows */ @media (-moz-os-version: windows-win7), diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss index dbb393a..026e88f 100644 --- a/src/icons/_layout_menu.scss +++ b/src/icons/_layout_menu.scss @@ -77,6 +77,12 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) #main-menubar > menu > menupopup { --menuitem-image: none; /* Prevent Image Inheritance */ } + + @include NotOption("userChrome.padding.global_menubar") { + #main-menubar > menu { + padding-block: 2px !important;; + } + } } /* Padding - Windows */ From 0ad35b4ec10f7f098b81184fc4916ee53f6bd74f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 5 May 2022 14:18:16 +0900 Subject: [PATCH 10/29] Fix: DragSpace - Like firefox 88 https://searchfox.org/mozilla-esr78/search?q=--space-above-tabbar&path=&case=false®exp=false --- css/leptonChrome.css | 42 +++++++++++++++++++++++++++++----- src/padding/_drag_space.scss | 44 ++++++++++++++++++++++++++++++++---- 2 files changed, 75 insertions(+), 11 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 92471d1..13b6b7b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3169,13 +3169,43 @@ /* If the option is not specified, it is equivalent to 0px. */ } - :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { - height: calc(var(--tab-min-height) + var(--space-above-tabbar)); + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size)); + } } - - :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, - :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { - padding-top: var(--space-above-tabbar) !important; + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-gtk-csd-available) { + :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + var(--space-above-tabbar)); + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #TabsToolbar > .toolbar-items { + padding-top: var(--space-above-tabbar) !important; + } + } + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { + /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */ + /* Add extra space to titlebar for dragging */ + :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: calc(var(--space-above-tabbar) + 4px) !important; + } + } + @media (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10), + (-moz-gtk-csd-available) { + /* Add extra space to titlebar for dragging */ + :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: var(--space-above-tabbar) !important; + } } } @supports -moz-bool-pref("userChrome.padding.tabbar_height") { diff --git a/src/padding/_drag_space.scss b/src/padding/_drag_space.scss index d9dc8df..47cacc9 100644 --- a/src/padding/_drag_space.scss +++ b/src/padding/_drag_space.scss @@ -1,12 +1,46 @@ /* for Extra Drag Space */ +// https://searchfox.org/mozilla-esr78/search?q=--space-above-tabbar&path=&case=false®exp=false :root { --space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */ } -:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { - height: calc(var(--tab-min-height) + var(--space-above-tabbar)); +@mixin dragSpaceHeight { + :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { + @content; + } } -:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, -:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { - padding-top: var(--space-above-tabbar) !important; +@mixin dragSpacePadding { + /* Add extra space to titlebar for dragging */ + :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + @content; + } +} + +@include OS($win10) { + @include dragSpaceHeight { + height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size)); + } +} +@include OS($win7, $win8, $linux) { + @include dragSpaceHeight { + height: calc(var(--tab-min-height) + var(--space-above-tabbar)); + } +} + +@include OS($mac) { + #TabsToolbar > .toolbar-items { + padding-top: var(--space-above-tabbar) !important; + } +} +@include OS($win7) { + /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */ + @include dragSpacePadding { + padding-top: calc(var(--space-above-tabbar) + 4px) !important; + } +} +@include OS($win8, $win10, $linux) { + @include dragSpacePadding { + padding-top: var(--space-above-tabbar) !important; + } } From 295a2cd62c904f358797dc86fb754fa65dc9a283 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 5 May 2022 14:31:54 +0900 Subject: [PATCH 11/29] Fix: FullScreen - Overlap's background color at linux --- css/leptonChrome.css | 7 +++++++ src/fullscreen/_index.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 13b6b7b..8f019f3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5133,6 +5133,13 @@ visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */ } + + @media (-moz-gtk-csd-available) { + /* Fix transparent backgorund */ + :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { + appearance: auto !important; + } + } } } /** Library - Icons Replace ***************************************************/ diff --git a/src/fullscreen/_index.scss b/src/fullscreen/_index.scss index de46eaf..048b4fe 100644 --- a/src/fullscreen/_index.scss +++ b/src/fullscreen/_index.scss @@ -11,3 +11,10 @@ :root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */ } + +@include OS($linux) { + /* Fix transparent backgorund */ + :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { + appearance: auto !important; + } +} From c2fb8a79974bbbef7e22b43060bd4ae0a0ca85e2 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 5 May 2022 20:20:10 +0900 Subject: [PATCH 12/29] Add: Option - `userChrome.padding.drag_space.maximized` #370 --- css/leptonChrome.css | 26 ++++++++++++++++++++++++++ src/padding/_drag_space.scss | 11 +++++++++++ 2 files changed, 37 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8f019f3..a3d8e6c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3173,6 +3173,12 @@ :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size)); } + + @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { + :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size)); + } + } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), @@ -3182,6 +3188,12 @@ :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { height: calc(var(--tab-min-height) + var(--space-above-tabbar)); } + + @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { + :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + var(--space-above-tabbar)); + } + } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #TabsToolbar > .toolbar-items { @@ -3195,6 +3207,13 @@ :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { padding-top: calc(var(--space-above-tabbar) + 4px) !important; } + + @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { + :root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: calc(var(--space-above-tabbar) + 4px) !important; + } + } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8), @@ -3206,6 +3225,13 @@ :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { padding-top: var(--space-above-tabbar) !important; } + + @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { + :root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: var(--space-above-tabbar) !important; + } + } } } @supports -moz-bool-pref("userChrome.padding.tabbar_height") { diff --git a/src/padding/_drag_space.scss b/src/padding/_drag_space.scss index 47cacc9..7602622 100644 --- a/src/padding/_drag_space.scss +++ b/src/padding/_drag_space.scss @@ -8,6 +8,11 @@ :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { @content; } + @include Option("userChrome.padding.drag_space.maximized") { + :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] { + @content; + } + } } @mixin dragSpacePadding { /* Add extra space to titlebar for dragging */ @@ -15,6 +20,12 @@ :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { @content; } + @include Option("userChrome.padding.drag_space.maximized") { + :root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + @content; + } + } } @include OS($win10) { From 713ca295a0f313c1e3df2789f8cc169d6e34b5b7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 6 May 2022 14:33:10 +0900 Subject: [PATCH 13/29] Add: Option - `userChrome.tab.static_separator.selected_accent` --- css/leptonChrome.css | 17 +++++++++++++---- .../unselected_tab/_static_separator.scss | 7 ++++++- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a3d8e6c..d937614 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4522,10 +4522,19 @@ right: 0; } - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[beforeselected-visible] .tab-background::after { - opacity: 0; + @supports -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after, + .tabbrowser-tab[beforeselected-visible] .tab-background::after { + --lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); + } + } + @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after, + .tabbrowser-tab[beforeselected-visible] .tab-background::after { + opacity: 0; + } } /* Animate */ diff --git a/src/tabbar/unselected_tab/_static_separator.scss b/src/tabbar/unselected_tab/_static_separator.scss index 77a4745..1bfe6cf 100644 --- a/src/tabbar/unselected_tab/_static_separator.scss +++ b/src/tabbar/unselected_tab/_static_separator.scss @@ -28,7 +28,12 @@ .tabbrowser-tab[visuallyselected] .tab-background::before, .tabbrowser-tab[visuallyselected] .tab-background::after, .tabbrowser-tab[beforeselected-visible] .tab-background::after { - opacity: 0; + @include Option("userChrome.tab.static_separator.selected_accent") { + --lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); + } + @include NotOption("userChrome.tab.static_separator.selected_accent") { + opacity: 0; + } } /* Animate */ From d779e40f80019ca337df1203a311bdd39caea906 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 7 May 2022 00:51:57 +0900 Subject: [PATCH 14/29] Add: Options - new options for #380 --- user.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/user.js b/user.js index 5ebe927..3b3fd5b 100644 --- a/user.js +++ b/user.js @@ -36,6 +36,7 @@ user_pref("userChrome.tab.lepton_like_padding", true); // Original user_pref("userChrome.tab.dynamic_separtor", true); // Original, Proton // user_pref("userChrome.tab.static_separator", true); // Photon +// user_pref("userChrome.tab.static_separator.selected_accent", true); // Just option user_pref("userChrome.tab.newtab_button_like_tab", true); // Original // user_pref("userChrome.tab.newtab_button_smaller", true); // Photon @@ -78,6 +79,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.padding.first_tab", true); // user_pref("userChrome.padding.drag_space", true); +// user_pref("userChrome.padding.drag_space.maximized", true); // user_pref("userChrome.padding.menu_compact", true); // user_pref("userChrome.padding.urlView_expanding", true); @@ -93,6 +95,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); +// user_pref("userChrome.tab.close_button_at_pinned.always", true); +// user_pref("userChrome.tab.close_button_at_pinned.background", true); // user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // user_pref("userChrome.tab.centered_label", true); From d47b3d82254f29fcc53a417f8c6e5d3dd10d3c5e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 8 May 2022 03:30:03 +0900 Subject: [PATCH 15/29] Doc: Template with github form --- .github/ISSUE_TEMPLATE/feature_request.md | 23 ---------- .github/ISSUE_TEMPLATE/feature_request.yml | 50 ++++++++++++++++++++++ .github/pull_request_template.md | 24 ----------- .github/pull_request_template.yml | 44 +++++++++++++++++++ 4 files changed, 94 insertions(+), 47 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml delete mode 100644 .github/pull_request_template.md create mode 100644 .github/pull_request_template.yml diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 9b544b9..0000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '' -labels: 'Issue::Enhancement' -assignees: '' - ---- - -**Is your feature request related to a problem?** - - -**The solution I'd like** - - -**Screenshots or video** - - -**Alternatives I've considered** - - -**Additional context** - diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 0000000..2555fbc --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -0,0 +1,50 @@ +name: Feature request +description: Suggest an idea for this project +title: "" +labels: ["Issue::Enhancement"] + +body: + - type: textarea + id: is-your-feature-related-to-a-problem + attributes: + label: Is your feature request related to a problem + description: A clear and concise description of what the problem is. + placeholder: Ex. I don't like this design that [...] + validations: + required: false + + - type: textarea + id: the-solution-i-d-like + attributes: + label: The solution I'd like + description: A clear and concise description of what you want to happen. + placeholder: Ex. I hope that the tab bar background of Windows 7 is an AERO interface like IE. + validations: + required: false + + - type: textarea + id: screenshots-or-video + attributes: + label: Screenshots or video + description: If is helpful to attach screenshots or video similar to the desired features. + placeholder: Drag or paste images or videos to upload + validations: + required: false + + - type: textarea + id: alternatives-i-ve-considered + attributes: + label: Alternatives I've considered + description: A clear and concise description of any alternative solutions or features you've considered. + placeholder: Ex. I don't like this design that [...] + validations: + required: false + + - type: textarea + id: additional-context + attributes: + label: Additional context + description: Add any other context or screenshots about the feature request here. + placeholder: Anything to write down or refer to is fine + validations: + required: false diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index d1da789..0000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,24 +0,0 @@ -**Describe the PR** - - -**Related Issue** - - -**Screenshots** - - -**Environment (please complete the following information):** - - - - PR Type - - [ ] `Add:` Add feature or enhanced. - - [ ] `Fix:` Bug fix or change default values. - - [ ] `Clean:` Refactoring. - - [ ] `Doc:` Update docs. - - Distribution - - [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix) - - [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style) - - [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style) - -**Additional context** - diff --git a/.github/pull_request_template.yml b/.github/pull_request_template.yml new file mode 100644 index 0000000..e1715e3 --- /dev/null +++ b/.github/pull_request_template.yml @@ -0,0 +1,44 @@ +name: Pull Request Template +description: Pull Request's template +title: "" + +body: + - type: textarea + id: describe-the-pr + attributes: + label: Describe the PR + description: A clear and consise description of what the PR is. + placeholder: Tell us what you did! + validations: + required: true + + - type: textarea + id: screenshots + attributes: + label: Screenshots + description: If applicable, and screenshots to help explain your commit. + placeholder: Drag or paste images or videos to upload + validations: + required: false + + - type: checkboxes + id: pr-type + attributes: + label: PR Type? + description: You may select more than one. + options: + - label: "`Add:` Add feature or enhanced." + - label: "`Fix:` Bug fix or change default values." + - label: "`Clean:` Refactoring or code quality improvement." + - label: "`Doc:` Update docs." + validations: + required: true + + - type: textarea + id: additional-context + attributes: + label: Additional context + description: Add any other context about the commit here. + placeholder: Anything to write down or refer to is fine + validations: + required: false From ca5814827a79009ee715be5af93b51d818494b9c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 8 May 2022 22:02:02 +0900 Subject: [PATCH 16/29] Fix: Fullscreen - Delay `0.1s` -> `1s` #383 --- css/leptonChrome.css | 2 +- src/decoration/_animate.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index afa0cc9..32fd236 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2892,7 +2892,7 @@ #navigator-toolbox[inFullscreen="true"]:hover { transition-duration: 1.5s; - transition-delay: 0.1s; + transition-delay: 1s; } @keyframes fullscreen { diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 9277427..cef67a3 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -133,7 +133,7 @@ xul|search-textbox.tabsFilter:hover, } #navigator-toolbox[inFullscreen="true"]:hover { transition-duration: 1.5s; - transition-delay: 0.1s; + transition-delay: 1s; } @keyframes fullscreen { From 1a18247aaa2bc7f03c08a38bfb3bdf32d5d465a5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 8 May 2022 23:38:49 +0900 Subject: [PATCH 17/29] Fix: Fullscreen - Separated `bookmarkbar` option #383 --- css/leptonChrome.css | 13 +++++++------ src/fullscreen/_index.scss | 25 +++++++------------------ src/leptonChrome.scss | 6 +----- user.js | 2 ++ 4 files changed, 17 insertions(+), 29 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 32fd236..d039ef1 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5210,12 +5210,6 @@ /* Makes the UI take up the entire width */ } - :root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]), - :root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { - visibility: unset !important; - /* Makes the bookmarks toolbar visible if enabled */ - } - @media (-moz-gtk-csd-available) { /* Fix transparent backgorund */ :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { @@ -5224,6 +5218,13 @@ } } } +@supports -moz-bool-pref("userChrome.fullscreen.show_bookmarkbar") { + :root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]), + :root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { + visibility: unset !important; + /* Makes the bookmarks toolbar visible if enabled */ + } +} /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ diff --git a/src/fullscreen/_index.scss b/src/fullscreen/_index.scss index 048b4fe..104d324 100644 --- a/src/fullscreen/_index.scss +++ b/src/fullscreen/_index.scss @@ -1,20 +1,9 @@ -:root[sizemode="fullscreen"] #navigator-toolbox { - position: fixed !important; /* Needed for content to take up entire height */ - z-index: 1000 !important; /* Puts the UI above the content */ -} - -:root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { - width: 100%; /* Makes the UI take up the entire width */ -} - -:root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]), -:root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { - visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */ -} - -@include OS($linux) { - /* Fix transparent backgorund */ - :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { - appearance: auto !important; +@include Option("userChrome.fullscreen.overlap") { + @include Option("browser.fullscreen.autohide") { + @import "overlap"; } } + +@include Option("userChrome.fullscreen.show_bookmarkbar") { + @import "show_bookmarkbar"; +} diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 49d3d4c..9701422 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -66,11 +66,7 @@ @import "panel/index"; /** Fullscreen - Overlap toolbar **********************************************/ -@include Option("userChrome.fullscreen.overlap") { - @include Option("browser.fullscreen.autohide") { - @import "fullscreen/index"; - } -} +@import "fullscreen/index"; /** Library - Icons Replace ***************************************************/ @include Option("userChrome.icon.library") { diff --git a/user.js b/user.js index 3b3fd5b..37711f9 100644 --- a/user.js +++ b/user.js @@ -105,6 +105,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); +// user_pref("userChrome.fullscreen.show_bookmarkbar", true); // Sideeffect show #383 + // user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true); From 699eefd1b068d6e6b2bce7870510ad80bff167e1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 9 May 2022 00:09:58 +0900 Subject: [PATCH 18/29] Fix: Fullscreen - Adjust overlap delay term #383 --- css/leptonChrome.css | 2 +- src/decoration/_animate.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d039ef1..ca50752 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2892,7 +2892,7 @@ #navigator-toolbox[inFullscreen="true"]:hover { transition-duration: 1.5s; - transition-delay: 1s; + transition-delay: 0.5s; } @keyframes fullscreen { diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index cef67a3..6f9e81e 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -133,7 +133,7 @@ xul|search-textbox.tabsFilter:hover, } #navigator-toolbox[inFullscreen="true"]:hover { transition-duration: 1.5s; - transition-delay: 1s; + transition-delay: 0.5s; } @keyframes fullscreen { From c236fe7422c31903fd48442ec3884715220059d4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 9 May 2022 14:37:02 +0900 Subject: [PATCH 19/29] Fix: Fullscreen - Margin top 0 at hover #383 Now, not works - start-transition: margin-top 0.3s var(--animation-easing-function) 50ms; - end-transtion: margin-top 1.5s var(--animation-easing-function) 0.5s; It has been merge into: - transition: margin-top 1.3s var(--animation-easing-function) 50ms; --- css/leptonChrome.css | 5 ++--- src/decoration/_animate.scss | 8 +++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ca50752..62e8568 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2887,12 +2887,11 @@ animation-name: fullscreen; animation-timing-function: ease; /* Full screen navbar not hover */ - transition: margin-top 0.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms; } #navigator-toolbox[inFullscreen="true"]:hover { - transition-duration: 1.5s; - transition-delay: 0.5s; + margin-top: 0 !important; } @keyframes fullscreen { diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 6f9e81e..10cbc2c 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -129,11 +129,13 @@ xul|search-textbox.tabsFilter:hover, animation-timing-function: ease; /* Full screen navbar not hover */ - transition: margin-top 0.3s var(--animation-easing-function) 50ms; + // transition: margin-top 0.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms; } #navigator-toolbox[inFullscreen="true"]:hover { - transition-duration: 1.5s; - transition-delay: 0.5s; + // transition-duration: 1.5s; // Not works, because !important + // transition-delay: 0.5s; + margin-top: 0 !important; } @keyframes fullscreen { From 4678fa53e4a77a11c011ad56cc0636e2a4f050b1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 10 May 2022 05:10:33 +0900 Subject: [PATCH 20/29] Clean: compatibility/_theme --- css/leptonChrome.css | 17 +++----- src/compatibility/_theme.scss | 77 ++++++++++++++++++++--------------- 2 files changed, 49 insertions(+), 45 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 62e8568..c09d95a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -77,24 +77,18 @@ /*= Remove Tab Border ========================================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { /* TARGET: original, photon */ - /* Light Theme */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme, #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 =======================================================*/ @@ -105,7 +99,6 @@ background-repeat: no-repeat !important; background-position: right top !important; } - @media (min-width: 2500px) { :root[lwtheme-image] { background-size: contain; diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index 5ece917..87c2a7f 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -16,10 +16,12 @@ } /*= Zoom in button's plus icon horizontal rate ===============================*/ -#customization-palette-container #zoom-in-button > .toolbarbutton-icon, -#customization-panel-container #zoom-in-button > .toolbarbutton-icon, -#widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon { - padding-inline-start: 0px !important; +#customization-palette-container, +#customization-panel-container, +#widget-overflow-mainView { + #zoom-in-button > .toolbarbutton-icon { + padding-inline-start: 0px !important; + } } /*= Icon Fill Color ==========================================================*/ @@ -36,31 +38,38 @@ } /*= Disabled menu background color ===========================================*/ -menuitem[disabled="true"], -menu[disabled="true"] { - background-color: transparent !important; +menuitem, +menu { + &[disabled="true"] { + background-color: transparent !important; + } } /*= Remove Tab Border ========================================================*/ +@mixin _theme_removeTabBorder($options...) { + %noneBorder { + /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ + border: unset !important; + } + @each $prefix, $postfix in $options { + #TabsToolbar#{$prefix} + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background#{$postfix} { + @extend %noneBorder; + } + } +} + @include Option("userChrome.tab.connect_to_window") { /* TARGET: original, photon */ - /* 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)) */ - } + @include _theme_removeTabBorder( + // Light Theme + ":not([brighttext])", + // Dark Theme + "[brighttext]" ":-moz-lwtheme" + ); } /*= Light Weight Theme =======================================================*/ @@ -69,21 +78,23 @@ menu[disabled="true"] { background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; -} -@media (min-width: 2500px) { - :root[lwtheme-image] { + + // For high-resolution screen's image ratio + @media (min-width: 2500px) { background-size: contain; @include Option("userChrome.compatibility.covered_header_image") { background-size: cover; } } -} -:root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { - background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; - background-repeat: var(--lwt-background-tiling) !important; - background-position: var(--lwt-background-alignment) !important; - background-color: unset !important; /* Original: var(--lwt-accent-color) */ + + // lwtheme compatibility + #navigator-toolbox:-moz-lwtheme { + background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; + background-repeat: var(--lwt-background-tiling) !important; + background-position: var(--lwt-background-alignment) !important; + background-color: unset !important; /* Original: var(--lwt-accent-color) */ + } } /* Navbar Border */ From 0d6ef76665e7c1b817e4039e187921710a63fdc1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 10 May 2022 14:36:22 +0900 Subject: [PATCH 21/29] Clean: refactoring compatibility/os --- css/leptonChrome.css | 14 +++--- src/compatibility/_os.scss | 98 ++++++++++++++++++++------------------ 2 files changed, 57 insertions(+), 55 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index c09d95a..5bbcf2b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -131,11 +131,9 @@ :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { border-top: 0.5px solid #2f2f2f !important; } - :root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { border-top-color: #393939 !important; } - @media (-moz-windows-accent-color-in-titlebar) { :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { border-top-color: -moz-accent-color !important; @@ -153,18 +151,19 @@ } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - #TabsToolbar:-moz-lwtheme { - color: var(--lwt-text-color) !important; - } - - /* Remove Aero */ #TabsToolbar { + /* Remove Aero */ /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */ background-image: unset !important; } + #TabsToolbar:-moz-lwtheme { + /* background textcolor */ + color: var(--lwt-text-color) !important; + } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { #navigator-toolbox:-moz-lwtheme { + /* background textcolor */ color: var(--lwt-text-color) !important; } } @@ -207,7 +206,6 @@ border: none !important; /* Remove border */ } - #PlacesToolbar menu:not([disabled], :active)[_moz-menuactive="true"], #PlacesToolbar menuitem:not([disabled], :active)[_moz-menuactive="true"], #BMB_bookmarksPopup menu:not([disabled], :active)[_moz-menuactive="true"], diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 16d0606..cfe2c38 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -1,14 +1,17 @@ /*= Windows 10 - Top border of accent color at ESR #358 ======================*/ @include OS($win10) { - :root[sizemode=normal][tabsintitlebar] #navigator-toolbox { - border-top: .5px solid rgb(47, 47, 47) !important; - } - :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { - border-top-color: rgb(57, 57, 57) !important; - } - @media (-moz-windows-accent-color-in-titlebar) { - :root[sizemode=normal][tabsintitlebar] #navigator-toolbox { - border-top-color: -moz-accent-color !important; + :root[sizemode=normal][tabsintitlebar] { + #navigator-toolbox { + border-top: .5px solid rgb(47, 47, 47) !important; + } + &:-moz-window-inactive #navigator-toolbox { + border-top-color: rgb(57, 57, 57) !important; + } + + @media (-moz-windows-accent-color-in-titlebar) { + #navigator-toolbox { + border-top-color: -moz-accent-color !important; + } } } } @@ -20,20 +23,25 @@ background-color: var(--lwt-accent-color) !important; } } -@include OS($win7) { - #TabsToolbar:-moz-lwtheme { - color: var(--lwt-text-color) !important; - } - /* Remove Aero */ +@mixin _os_winTabBarTextColor { + /* background textcolor */ + color: var(--lwt-text-color) !important; +} +@include OS($win7) { #TabsToolbar { + &:-moz-lwtheme { + @include _os_winTabBarTextColor; + } + + /* Remove Aero */ /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */ background-image: unset !important; } } @include OS($win8) { #navigator-toolbox:-moz-lwtheme { - color: var(--lwt-text-color) !important; + @include _os_winTabBarTextColor; } } @@ -66,26 +74,27 @@ #BMB_bookmarksPopup menu, #BMB_bookmarksPopup menuitem { border: none !important; /* Remove border */ - } - #PlacesToolbar menu:not([disabled], :active)[_moz-menuactive="true"], - #PlacesToolbar menuitem:not([disabled], :active)[_moz-menuactive="true"], - #BMB_bookmarksPopup menu:not([disabled], :active)[_moz-menuactive="true"], - #BMB_bookmarksPopup menuitem:not([disabled], :active)[_moz-menuactive="true"] { - background-color: var(--button-hover-bgcolor) !important; + + &:not([disabled], :active)[_moz-menuactive="true"] { + background-color: var(--button-hover-bgcolor) !important; + } } } -@include OS($win7) { +@mixin _os_menuEmulate($bgRate, $bdRate) { menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] { - background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; - border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; + background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important; + border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important; } menu[_moz-menuactive="true"][disabled="disabled"], menuitem[_moz-menuactive="true"][disabled="true"] { - background-color: color-mix(in srgb, currentColor 5%, transparent) !important; - border-color: color-mix(in srgb, currentColor 60%, transparent) !important; + background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important; + border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important; } +} +@include OS($win7) { + @include _os_menuEmulate(5%, 60%); /* Remove text shadow */ :root:-moz-lwtheme #toolbar-menubar { @@ -100,16 +109,7 @@ } } @include OS($win8) { - menu[_moz-menuactive="true"], - menuitem[_moz-menuactive="true"] { - background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; - border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; - } - menu[_moz-menuactive="true"][disabled="disabled"], - menuitem[_moz-menuactive="true"][disabled="true"] { - background-color: color-mix(in srgb, currentColor 17%, transparent) !important; - border-color: color-mix(in srgb, currentColor 80%, transparent) !important; - } + @include _os_menuEmulate(17%, 80%); } @include OS($linux) { @@ -140,6 +140,15 @@ } /*= Linux - Light System Default Theme's Selected Tab ========================*/ +$_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5); +@mixin _os_linuxDefaultThemeSelectedTab { + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + @content; + } +} @include OS($linux) { @include Light { /* Because of @@ -148,18 +157,13 @@ 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; + @include _os_linuxDefaultThemeSelectedTab { + box-shadow: $_os_linuxDefaultShadow !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; + #TabsToolbar:not([brighttext]) { + @include _os_linuxDefaultThemeSelectedTab { + box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), $_os_linuxDefaultShadow !important; + } } } } From f50d274191331af3f5cedbc079f2e800028b2841 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 10 May 2022 15:57:52 +0900 Subject: [PATCH 22/29] Clean: refactoring decoration/animate --- css/leptonChrome.css | 24 +---- src/decoration/_animate.scss | 175 +++++++++++++++++------------------ 2 files changed, 92 insertions(+), 107 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5bbcf2b..504703a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2768,7 +2768,6 @@ */ transition: background-color 0.5s var(--animation-easing-function) !important; } - .subviewbutton:hover { transition: background-color 0.1s var(--animation-easing-function) !important; } @@ -2779,21 +2778,17 @@ 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; } - #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::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; } @@ -2804,7 +2799,6 @@ 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), @@ -2819,7 +2813,6 @@ #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, @@ -2836,12 +2829,11 @@ .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 { + #search-box:hover:hover, + xul|search-textbox.tabsFilter:hover:hover, + #editBMPanel_namePicker:hover:hover, + #editBMPanel_tagsField:hover:hover, + .findbar-container .findbar-textbox:hover:hover { transition: border-color 0.5s var(--animation-easing-function) !important; } @@ -2856,7 +2848,6 @@ 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; @@ -2871,7 +2862,6 @@ transition: margin-top 1s ease; transform-origin: top; } - #navigator-toolbox[inFullscreen="true"] { /* Full screen enter */ animation-duration: 1s; @@ -2880,7 +2870,6 @@ /* Full screen navbar not hover */ transition: margin-top 1.3s var(--animation-easing-function) 50ms; } - #navigator-toolbox[inFullscreen="true"]:hover { margin-top: 0 !important; } @@ -2918,12 +2907,10 @@ #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; @@ -2938,7 +2925,6 @@ #editBookmarkPanelRows .expander-up { list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; } - #editBookmarkPanelRows .expander-up .button-icon { transform: rotate(180deg); } diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 10cbc2c..8c76b34 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -1,20 +1,16 @@ /*- Background Color -------------------------------------------------------*/ -button, -toolbarbutton, -stack, -vbox, -.toolbarbutton-icon, -#tabs-newtab-button > .toolbarbutton-icon { - transition: background-color 1s var(--animation-easing-function) !important; -} -button:hover, -toolbarbutton:hover, -stack:hover, -vbox:hover, -.toolbarbutton-icon:hover, -#tabs-newtab-button:hover > .toolbarbutton-icon { - transition: background-color 0.25s var(--animation-easing-function) !important; +@mixin _animate_bgColor($duration, $presudo: "") { + button#{$presudo}, + toolbarbutton#{$presudo}, + stack#{$presudo}, + vbox#{$presudo}, + .toolbarbutton-icon#{$presudo}, + #tabs-newtab-button#{$presudo} > .toolbarbutton-icon { + transition: background-color $duration var(--animation-easing-function) !important; + } } +@include _animate_bgColor(1s); +@include _animate_bgColor(0.25s, ":hover"); @include OS($linux) { .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) { transition: background-image 0.25s var(--animation-easing-function) !important; @@ -26,41 +22,47 @@ vbox:hover, menu, menuitem is not apply. */ transition: background-color 0.5s var(--animation-easing-function) !important; -} -.subviewbutton:hover { - transition: background-color 0.1s var(--animation-easing-function) !important; + &: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; -} -#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]) { + .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; + } + &[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::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; + } + } + + .tab-content { + &::before, + &::after { + transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important; + } + .tab-label-container { + transition: width 0.3s var(--animation-easing-function) !important; + } + .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; + &:hover { + transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important; + } } /* Buttons in URL bar */ @@ -70,13 +72,9 @@ vbox:hover, #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; + &:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } } /*- Border - Other Fields --------------------------------------------------*/ @@ -86,13 +84,9 @@ xul|search-textbox.tabsFilter: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; + &:hover { + transition: border-color 0.5s var(--animation-easing-function) !important; + } } /*- Sidebar ----------------------------------------------------------------*/ @@ -106,13 +100,14 @@ xul|search-textbox.tabsFilter:hover, /* 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; + + &[hidden="true"] { + display: -moz-box !important; + margin-inline-start: -18em; + opacity: 0; + visibility: collapse; + transition-delay: 0s, 0s, 0.25s !important; + } } } @@ -121,21 +116,23 @@ xul|search-textbox.tabsFilter:hover, /* Full screen out */ transition: margin-top 1s ease; transform-origin: top; -} -#navigator-toolbox[inFullscreen="true"] { - /* Full screen enter */ - animation-duration: 1s; - animation-name: fullscreen; - animation-timing-function: ease; - /* Full screen navbar not hover */ - // transition: margin-top 0.3s var(--animation-easing-function) 50ms; - transition: margin-top 1.3s var(--animation-easing-function) 50ms; -} -#navigator-toolbox[inFullscreen="true"]:hover { - // transition-duration: 1.5s; // Not works, because !important - // transition-delay: 0.5s; - margin-top: 0 !important; + &[inFullscreen="true"] { + /* Full screen enter */ + animation-duration: 1s; + animation-name: fullscreen; + animation-timing-function: ease; + + /* Full screen navbar not hover */ + // transition: margin-top 0.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms; + &:hover { + // Full screen navbar hover + // transition-duration: 1.5s; // Not works, because !important + // transition-delay: 0.5s; + margin-top: 0 !important; + } + } } @keyframes fullscreen { @@ -171,18 +168,20 @@ xul|search-textbox.tabsFilter:hover, @-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 { + .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; - } + &.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; + &:dir(rtl) { + transform: rotate(90deg); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; + } + } } } @@ -193,7 +192,7 @@ xul|search-textbox.tabsFilter:hover, } #editBookmarkPanelRows .expander-up { list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; -} -#editBookmarkPanelRows .expander-up .button-icon { - transform: rotate(180deg); + .button-icon { + transform: rotate(180deg); + } } From e14aef7736fa23af2a389518788d9fdaf2f33e6f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 10 May 2022 16:01:36 +0900 Subject: [PATCH 23/29] Fix: Animate - Field border disappear duration --- css/leptonChrome.css | 15 +++++++-------- src/decoration/_animate.scss | 11 +++++------ 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 504703a..aaf2aac 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2822,18 +2822,18 @@ } /*- Border - Other Fields --------------------------------------------------*/ + #search-box, + xul|search-textbox.tabsFilter, + #editBMPanel_namePicker, + #editBMPanel_tagsField, + .findbar-container .findbar-textbox { + 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 1s var(--animation-easing-function) !important; - } - #search-box:hover:hover, - xul|search-textbox.tabsFilter:hover:hover, - #editBMPanel_namePicker:hover:hover, - #editBMPanel_tagsField:hover:hover, - .findbar-container .findbar-textbox:hover:hover { transition: border-color 0.5s var(--animation-easing-function) !important; } @@ -2913,7 +2913,6 @@ } #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 --------------------------------------------*/ diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 8c76b34..8c7035a 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -78,11 +78,11 @@ } /*- Border - Other Fields --------------------------------------------------*/ -#search-box:hover, -xul|search-textbox.tabsFilter:hover, -#editBMPanel_namePicker:hover, -#editBMPanel_tagsField:hover, -.findbar-container .findbar-textbox:hover { +#search-box, +xul|search-textbox.tabsFilter, +#editBMPanel_namePicker, +#editBMPanel_tagsField, +.findbar-container .findbar-textbox { transition: border-color 1s var(--animation-easing-function) !important; &:hover { transition: border-color 0.5s var(--animation-easing-function) !important; @@ -179,7 +179,6 @@ xul|search-textbox.tabsFilter:hover, &:dir(rtl) { transform: rotate(90deg); - background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; } } } From 0c2148882cdbcfd7a155de433e5b91dd3230d790 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 10 May 2022 16:35:39 +0900 Subject: [PATCH 24/29] Clean: refactoring decoration/download_panel --- css/leptonChrome.css | 2 -- src/decoration/_download_panel.scss | 20 +++++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index aaf2aac..e60ca0c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2721,7 +2721,6 @@ #downloadsListBox .download-state[exists] .downloadDetails { color: var(--button-primary-bgcolor); } - #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover { color: var(--button-primary-hover-bgcolor); } @@ -2731,7 +2730,6 @@ text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); } - #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { filter: grayscale(100%) !important; } diff --git a/src/decoration/_download_panel.scss b/src/decoration/_download_panel.scss index 9274b5d..1139ee9 100644 --- a/src/decoration/_download_panel.scss +++ b/src/decoration/_download_panel.scss @@ -1,16 +1,18 @@ /* Accent Color for downloaded item */ #downloadsListBox .download-state[exists] .downloadDetails { color: var(--button-primary-bgcolor); -} -#downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover { - color: var(--button-primary-hover-bgcolor); + &.downloadDetailsHover { + color: var(--button-primary-hover-bgcolor); + } } /* File moved or missing */ -#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget { - text-decoration: line-through; - text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); -} -#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { - filter: grayscale(100%) !important; +#downloadsListBox .download-state:not([exists], [state="0"]) { + .downloadTarget { + text-decoration: line-through; + text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); + } + .downloadTypeIcon { + filter: grayscale(100%) !important; + } } From 69fd0495359ae21a2321e9df2d00297ebb135cd5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 11 May 2022 03:48:45 +0900 Subject: [PATCH 25/29] Fix: bookmark menu's padding #391 - support `userChrome.padding.menu_compact` - add `userChrome.padding.bookmark_menu.compact` --- css/leptonChrome.css | 18 +++++++++++++++++- src/padding/_bookmark_menu.scss | 16 +++++++++++++++- user.js | 1 + 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e60ca0c..cceab51 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3530,12 +3530,28 @@ --bookmark-menu-padding: 1.5px; } - :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, + @supports -moz-bool-pref("userChrome.padding.menu_compact") { + :root { + --bookmark-menu-padding: 2px; + } + + :root[uidensity="compact"] { + --bookmark-menu-padding: 0px; + } + } :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem { padding-block: var(--bookmark-menu-padding) !important; } + + @supports -moz-bool-pref("userChrome.padding.menu_compact") or -moz-bool-pref("userChrome.padding.bookmark_menu.compact") { + :root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item, + :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item { + min-height: unset !important; + /* Original: 24px */ + } + } } /*= Global Menu - Set Padding ================================================*/ @supports -moz-bool-pref("userChrome.padding.global_menubar") { diff --git a/src/padding/_bookmark_menu.scss b/src/padding/_bookmark_menu.scss index 6e59825..adb088b 100644 --- a/src/padding/_bookmark_menu.scss +++ b/src/padding/_bookmark_menu.scss @@ -4,10 +4,24 @@ :root[uidensity="compact"] { --bookmark-menu-padding: 1.5px; } +@include Option("userChrome.padding.menu_compact") { + :root { + --bookmark-menu-padding: 2px; + } + :root[uidensity=compact] { + --bookmark-menu-padding: 0px; + } +} -:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem { padding-block: var(--bookmark-menu-padding) !important; } + +@include Option("userChrome.padding.menu_compact", "userChrome.padding.bookmark_menu.compact") { + :root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item, + :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item { + min-height: unset !important; /* Original: 24px */ + } +} diff --git a/user.js b/user.js index 37711f9..5c37c00 100644 --- a/user.js +++ b/user.js @@ -82,6 +82,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.padding.drag_space.maximized", true); // user_pref("userChrome.padding.menu_compact", true); +// user_pref("userChrome.padding.bookmark_menu.compact", true); // user_pref("userChrome.padding.urlView_expanding", true); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); From 34c78d0d782c6866df2c8fef5e1a103b74ef7573 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 11 May 2022 03:53:24 +0900 Subject: [PATCH 26/29] Fix: Default option show_bookmarkbar #383 --- user.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/user.js b/user.js index 5c37c00..f40bcae 100644 --- a/user.js +++ b/user.js @@ -106,8 +106,6 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); -// user_pref("userChrome.fullscreen.show_bookmarkbar", true); // Sideeffect show #383 - // user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true); @@ -158,6 +156,7 @@ user_pref("userChrome.tab.container", true); user_pref("userChrome.tab.crashed", true); user_pref("userChrome.fullscreen.overlap", true); +user_pref("userChrome.fullscreen.show_bookmarkbar", true); user_pref("userChrome.icon.library", true); user_pref("userChrome.icon.panel", true); From 8aeab44e7030f60bb8069a742b2009e445cd7be0 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 11 May 2022 04:59:26 +0900 Subject: [PATCH 27/29] Fix: Selected Tab - Remove outline at connected tab #388 --- css/leptonChrome.css | 10 ++++++++++ src/compatibility/_theme.scss | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index cceab51..f56ed34 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -90,6 +90,16 @@ /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ border: unset !important; } + + #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme, + .tab-background[selected]:-moz-lwtheme { + outline-color: transparent !important; + } + + .keyboard-focused-tab > .tab-stack > .tab-background, + .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background { + outline: var(--focus-outline) !important; + } } /*= Light Weight Theme =======================================================*/ /* Header Image */ diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index 87c2a7f..e30c33f 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -70,6 +70,16 @@ menu { // Dark Theme "[brighttext]" ":-moz-lwtheme" ); + + #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme, + .tab-background[selected]:-moz-lwtheme { + // Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); + outline-color: transparent !important; + } + .keyboard-focused-tab > .tab-stack > .tab-background, + .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background { + outline: var(--focus-outline) !important; + } } /*= Light Weight Theme =======================================================*/ From 1bb978d10e6d17fa8c0755e0e352f40d9114d544 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 11 May 2022 05:47:33 +0900 Subject: [PATCH 28/29] Fix: Pined Tab - Margin end #378 --- css/leptonChrome.css | 6 ++++++ src/tabbar/clipped_tab/_pinned_close_button.scss | 3 +++ 2 files changed, 9 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f56ed34..6b1082d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4822,6 +4822,12 @@ display: none !important; } } + + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) + .tab-close-button { + margin-inline-end: var(--uc-close-button-margin) !important; + } } /** Clipped tabs - Always show tab icon ***************************************/ @supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") { diff --git a/src/tabbar/clipped_tab/_pinned_close_button.scss b/src/tabbar/clipped_tab/_pinned_close_button.scss index fd091b5..e5f2b1d 100644 --- a/src/tabbar/clipped_tab/_pinned_close_button.scss +++ b/src/tabbar/clipped_tab/_pinned_close_button.scss @@ -49,3 +49,6 @@ @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); } } +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { + margin-inline-end: var(--uc-close-button-margin) !important; +} From f1c53f29a8462ad46b37a9507edfff18a15b70a8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 11 May 2022 05:53:13 +0900 Subject: [PATCH 29/29] Revert "Doc: Template with github form" This reverts commit d47b3d82254f29fcc53a417f8c6e5d3dd10d3c5e. --- .github/ISSUE_TEMPLATE/feature_request.md | 23 ++++++++++ .github/ISSUE_TEMPLATE/feature_request.yml | 50 ---------------------- .github/pull_request_template.md | 24 +++++++++++ .github/pull_request_template.yml | 44 ------------------- 4 files changed, 47 insertions(+), 94 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml create mode 100644 .github/pull_request_template.md delete mode 100644 .github/pull_request_template.yml diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..9b544b9 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,23 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: 'Issue::Enhancement' +assignees: '' + +--- + +**Is your feature request related to a problem?** + + +**The solution I'd like** + + +**Screenshots or video** + + +**Alternatives I've considered** + + +**Additional context** + diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml deleted file mode 100644 index 2555fbc..0000000 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ /dev/null @@ -1,50 +0,0 @@ -name: Feature request -description: Suggest an idea for this project -title: "" -labels: ["Issue::Enhancement"] - -body: - - type: textarea - id: is-your-feature-related-to-a-problem - attributes: - label: Is your feature request related to a problem - description: A clear and concise description of what the problem is. - placeholder: Ex. I don't like this design that [...] - validations: - required: false - - - type: textarea - id: the-solution-i-d-like - attributes: - label: The solution I'd like - description: A clear and concise description of what you want to happen. - placeholder: Ex. I hope that the tab bar background of Windows 7 is an AERO interface like IE. - validations: - required: false - - - type: textarea - id: screenshots-or-video - attributes: - label: Screenshots or video - description: If is helpful to attach screenshots or video similar to the desired features. - placeholder: Drag or paste images or videos to upload - validations: - required: false - - - type: textarea - id: alternatives-i-ve-considered - attributes: - label: Alternatives I've considered - description: A clear and concise description of any alternative solutions or features you've considered. - placeholder: Ex. I don't like this design that [...] - validations: - required: false - - - type: textarea - id: additional-context - attributes: - label: Additional context - description: Add any other context or screenshots about the feature request here. - placeholder: Anything to write down or refer to is fine - validations: - required: false diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..d1da789 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,24 @@ +**Describe the PR** + + +**Related Issue** + + +**Screenshots** + + +**Environment (please complete the following information):** + + + - PR Type + - [ ] `Add:` Add feature or enhanced. + - [ ] `Fix:` Bug fix or change default values. + - [ ] `Clean:` Refactoring. + - [ ] `Doc:` Update docs. + - Distribution + - [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix) + - [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style) + - [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style) + +**Additional context** + diff --git a/.github/pull_request_template.yml b/.github/pull_request_template.yml deleted file mode 100644 index e1715e3..0000000 --- a/.github/pull_request_template.yml +++ /dev/null @@ -1,44 +0,0 @@ -name: Pull Request Template -description: Pull Request's template -title: "" - -body: - - type: textarea - id: describe-the-pr - attributes: - label: Describe the PR - description: A clear and consise description of what the PR is. - placeholder: Tell us what you did! - validations: - required: true - - - type: textarea - id: screenshots - attributes: - label: Screenshots - description: If applicable, and screenshots to help explain your commit. - placeholder: Drag or paste images or videos to upload - validations: - required: false - - - type: checkboxes - id: pr-type - attributes: - label: PR Type? - description: You may select more than one. - options: - - label: "`Add:` Add feature or enhanced." - - label: "`Fix:` Bug fix or change default values." - - label: "`Clean:` Refactoring or code quality improvement." - - label: "`Doc:` Update docs." - validations: - required: true - - - type: textarea - id: additional-context - attributes: - label: Additional context - description: Add any other context about the commit here. - placeholder: Anything to write down or refer to is fine - validations: - required: false