From 05f493bf16649382ceff14ef39c7fef97b432f83 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 27 Aug 2022 19:25:24 +0900 Subject: [PATCH 1/4] Fix: Window Control - Linux's control width --- css/leptonChrome.css | 24 +++++++++++++++++++-- src/tabbar/layout/_window_control_size.scss | 20 ++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8c68f0b..56d0e63 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4412,8 +4412,6 @@ } :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 84px; - /* 84px is default value of linux */ --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); } @@ -4430,6 +4428,28 @@ --uc-window-control-width: 138px; } } + @media (-moz-gtk-csd-available) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* 84px is default value of linux */ + } + @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 28px; + } + } + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), + (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), + (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 56px; + } + } + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 84px; + } + } + } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[tabsintitlebar] { diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss index a7f5b59..10148b8 100644 --- a/src/tabbar/layout/_window_control_size.scss +++ b/src/tabbar/layout/_window_control_size.scss @@ -7,7 +7,6 @@ } :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 84px; /* 84px is default value of linux */ --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px @@ -17,6 +16,25 @@ @include OS($win10) { --uc-window-control-width: 138px; } + @include OS($linux) { + $linuxWindowControlWidth: 84px / 3; /* 84px is default value of linux */ + + @media (-moz-gtk-csd-minimize-button), + (-moz-gtk-csd-maximize-button), + (-moz-gtk-csd-close-button) { + --uc-window-control-width: #{ $linuxWindowControlWidth }; + } + + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), + (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), + (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + --uc-window-control-width: #{ $linuxWindowControlWidth * 2 }; + } + + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + --uc-window-control-width: #{ $linuxWindowControlWidth * 3 }; + } + } } @include OS($mac) { :root[tabsintitlebar] { From fcf17074535db4e6c53d6675d46f1807c65ddd26 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 30 Aug 2022 15:22:26 +0900 Subject: [PATCH 2/4] Fix: Window Control - Linux reversed placement --- css/leptonChrome.css | 317 +++++++++++++++++++++++-- src/leptonChrome.scss | 1 + src/tabbar/layout/_navbar_padding.scss | 21 +- src/tabbar/layout/_window_control.scss | 5 +- src/utils/_window_control.scss | 23 ++ 5 files changed, 332 insertions(+), 35 deletions(-) create mode 100644 src/utils/_window_control.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 56d0e63..680779b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4527,7 +4527,20 @@ left: 0; right: unset !important; } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + :root { + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; @@ -4695,7 +4708,20 @@ left: 0; right: unset !important; } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + :root { + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; @@ -4860,7 +4886,20 @@ left: 0; right: unset !important; } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + :root { + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; @@ -5028,7 +5067,20 @@ left: 0; right: unset !important; } + } + @media (-moz-gtk-csd-available) { + @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + :root { + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; @@ -5206,7 +5258,20 @@ left: 0; right: unset !important; } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + :root { + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; @@ -5371,7 +5436,20 @@ left: 0; right: unset !important; } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + :root { + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; @@ -5486,8 +5564,7 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @media (-moz-gtk-csd-available), - (-moz-os-version: windows-win7), + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), @@ -5498,12 +5575,28 @@ --uc-window-drag-space-pre: 0px; } } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + } + } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need window control */ --uc-window-control-space: 0px; } } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-window-control-space: 0px; + } + } + } @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { /* Don't need window control */ @@ -5513,8 +5606,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { - @media (-moz-gtk-csd-available), - (-moz-os-version: windows-win7), + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), @@ -5525,6 +5617,14 @@ --uc-window-control-space: 0px; } } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-window-control-space: 0px; + } + } + } } } } @@ -5541,8 +5641,7 @@ } @media screen and (min-width: 1100px) { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @media (-moz-gtk-csd-available), - (-moz-os-version: windows-win7), + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), @@ -5553,12 +5652,28 @@ --uc-window-drag-space-pre: 0px; } } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + } + } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need window control */ --uc-window-control-space: 0px; } } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-window-control-space: 0px; + } + } + } @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { /* Don't need window control */ @@ -5568,8 +5683,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { - @media (-moz-gtk-csd-available), - (-moz-os-version: windows-win7), + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), @@ -5580,6 +5694,14 @@ --uc-window-control-space: 0px; } } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-window-control-space: 0px; + } + } + } } } } @@ -5589,8 +5711,7 @@ border-inline-style: solid !important; border-inline-color: transparent; } - @media (-moz-gtk-csd-available), - (-moz-os-version: windows-win7), + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), @@ -5651,19 +5772,75 @@ } } } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } + } + } + } + } + } - /* Use this pref to check Mac OS where window controls are on left */ - /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } @@ -5671,7 +5848,7 @@ @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } @@ -5683,12 +5860,12 @@ @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } @@ -5696,12 +5873,12 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + #nav-bar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } @@ -5714,7 +5891,7 @@ @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #TabsToolbar { + #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } @@ -5722,7 +5899,7 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #TabsToolbar { + #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } @@ -5731,20 +5908,114 @@ } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - :root[tabsintitlebar="true"]:not([inFullscreen]) #TabsToolbar { + #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { - :root[tabsintitlebar="true"]:not([inFullscreen]) #TabsToolbar { + #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } } } } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + } + } + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls { right: unset; diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 762566e..0edef2f 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -5,6 +5,7 @@ @use "utils/accent_color" as *; @use "utils/native_menu" as *; @use "utils/one_liner" as *; +@use "utils/window_control" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index d5b5d03..0374dd1 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -14,10 +14,10 @@ @mixin _remove_spacer_oneLiner() { @include Option("userChrome.tabbar.one_liner.tabbar_first") { - @include OS($win, $linux) { + @include WindowControl_Right { @include _remove_spacer_pre; } - @include OS($mac) { + @include WindowControl_Left { @include _remove_spacer_post; } @include Option("userChrome.tabbar.as_titlebar") { @@ -28,7 +28,7 @@ } @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include NotOption("userChrome.tabbar.as_titlebar") { - @include OS($win, $linux) { + @include WindowControl_Right { @include _remove_spacer_post; } } @@ -91,7 +91,7 @@ border-inline-style: solid !important; border-inline-color: transparent; - @include OS($win, $linux) { + @include WindowControl_Right { @include _oneLiner_navBar_borderPadding { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); @@ -110,15 +110,12 @@ } } -/* Use this pref to check Mac OS where window controls are on left */ -/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ -@include OS($mac) { - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { +@include WindowControl_Left { + #nav-bar { @include _oneLiner_navBar_borderPadding { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } - @include Option("userChrome.tabbar.one_liner") { @include _oneLiner_navBar_marginGap { @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @@ -130,7 +127,8 @@ } } } - :root[tabsintitlebar="true"]:not([inFullscreen]) #TabsToolbar { + + #TabsToolbar { @include Option("userChrome.tabbar.one_liner") { @include _oneLiner_navBar_marginGap { @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @@ -144,6 +142,9 @@ } } } +} + +@include OS($mac) { :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls { right: unset; diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index fa32056..aa2e049 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -43,7 +43,7 @@ See the above repository for updates as well as full license text. */ } /* where window controls are on left */ -@include OS($mac) { +@include WindowControl_Left { :root{ --uc-titlebar-padding: 0px !important; } @@ -51,7 +51,8 @@ See the above repository for updates as well as full license text. */ left:0; right: unset !important; } - +} +@include OS($mac) { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; diff --git a/src/utils/_window_control.scss b/src/utils/_window_control.scss new file mode 100644 index 0000000..4a062dd --- /dev/null +++ b/src/utils/_window_control.scss @@ -0,0 +1,23 @@ +@use "os" as *; + +@mixin WindowControl_Right() { + @include OS($win) { + @content; + } + @include OS($linux) { + @media (-moz-gtk-csd-reversed-placement: 0) { + @content; + } + } +} + +@mixin WindowControl_Left() { + @include OS($mac) { + @content; + } + @include OS($linux) { + @media (-moz-gtk-csd-reversed-placement) { + @content; + } + } +} From 21f1844a686579d7e359118bd29f10d05fafa4ec Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 30 Aug 2022 15:36:48 +0900 Subject: [PATCH 3/4] Fix: Padding - Tabbar spacer for placement --- css/leptonChrome.css | 47 ++++++++++++++++++++++++++++++---- src/padding/_tabbar_width.scss | 18 ++++++++++--- 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 680779b..4427944 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3187,14 +3187,51 @@ /* Original: 40px */ } - .titlebar-spacer[type="pre-tabs"] { - width: var(--uc-title-pre-spacer) !important; - } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } - .titlebar-spacer[type="post-tabs"] { - width: var(--uc-title-post-spacer) !important; + .titlebar-spacer[type="post-tabs"] { + width: var(--uc-title-post-spacer) !important; + } } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } + .titlebar-spacer[type="post-tabs"] { + width: var(--uc-title-post-spacer) !important; + } + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-post-spacer) !important; + } + + .titlebar-spacer[type="post-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-post-spacer) !important; + } + + .titlebar-spacer[type="post-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } + } + } /* Tabbar Buttons */ :root { --newtab-button-minus-width-padding: 2px; diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 12e0ec8..b48dd03 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -3,11 +3,21 @@ --uc-title-pre-spacer: 30px; /* Original: 40px */ --uc-title-post-spacer: 25px; /* Original: 40px */ } -.titlebar-spacer[type="pre-tabs"] { - width: var(--uc-title-pre-spacer) !important; +@include WindowControl_Left { + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } + .titlebar-spacer[type="post-tabs"] { + width: var(--uc-title-post-spacer) !important; + } } -.titlebar-spacer[type="post-tabs"] { - width: var(--uc-title-post-spacer) !important; +@include WindowControl_Right { + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-post-spacer) !important; + } + .titlebar-spacer[type="post-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } } /* Tabbar Buttons */ From 138b6ce103602d78b55155ed148a8a7cbc8820fc Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 31 Aug 2022 10:08:09 +0900 Subject: [PATCH 4/4] Clean: Window Control --- css/leptonChrome.css | 986 ++++++++------------ src/tabbar/layout/_navbar_padding.scss | 52 -- src/tabbar/layout/_window_control.scss | 100 +- src/tabbar/layout/_window_control_size.scss | 57 +- 4 files changed, 506 insertions(+), 689 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4427944..2eafb17 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4494,12 +4494,142 @@ } :root[sizemode="fullscreen"] { - --uc-window-control-space: 0; + --uc-window-control-space: 0px; } } :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; - /* Remove pre space */ + } + + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { + --uc-window-control-space: 0px; + } + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") or not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + --uc-window-control-space: 0px; + } + } + } + @media screen and (min-width: 1100px) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { + --uc-window-control-space: 0px; + } + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-space: 0px; + } + } + } + } + } + } + } } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( @@ -4510,10 +4640,56 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -4536,61 +4712,12 @@ background-clip: border-box !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; @@ -4633,28 +4760,6 @@ transition-delay: 0s !important; } } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; @@ -4691,10 +4796,56 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -4717,61 +4868,12 @@ background-clip: border-box !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; @@ -4814,28 +4916,6 @@ transition-delay: 0s !important; } } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; @@ -4869,10 +4949,56 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -4895,61 +5021,12 @@ background-clip: border-box !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; @@ -4992,28 +5069,6 @@ transition-delay: 0s !important; } } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; @@ -5050,10 +5105,56 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -5076,61 +5177,12 @@ background-clip: border-box !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; @@ -5161,8 +5213,6 @@ } } - /* At Full Screen */ - /* At Activated Menubar */ } @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { @@ -5177,30 +5227,6 @@ transition-delay: 0s !important; } } - @media screen and (max-width: 1100px) { - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - } - @media screen and (max-width: 1100px) { - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - } - @media screen and (max-width: 1100px) { - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - } @media screen and (max-width: 1100px) { @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { @@ -5241,10 +5267,56 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -5267,61 +5339,12 @@ background-clip: border-box !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; @@ -5364,28 +5387,6 @@ transition-delay: 0s !important; } } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; @@ -5419,10 +5420,56 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -5445,61 +5492,12 @@ background-clip: border-box !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; @@ -5542,28 +5540,6 @@ transition-delay: 0s !important; } } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; @@ -5598,152 +5574,6 @@ } /*= Navbar - Padding for window controls =====================================*/ /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement: 0) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; - } - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement: 0) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (max-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") or not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - @media screen and (min-width: 1100px) { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; - } - } - @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; - } - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ - --uc-window-control-space: 0px; - } - } - } - } - } - } - } - } #nav-bar { border-inline-style: solid !important; border-inline-color: transparent; diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 0374dd1..52142e9 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -2,39 +2,6 @@ /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ //-- Mixin --------------------------------------------------------------------- -@mixin _remove_spacer_pre() { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; -} - -@mixin _remove_spacer_post() { - /* Don't need window control */ - --uc-window-control-space: 0px; -} - -@mixin _remove_spacer_oneLiner() { - @include Option("userChrome.tabbar.one_liner.tabbar_first") { - @include WindowControl_Right { - @include _remove_spacer_pre; - } - @include WindowControl_Left { - @include _remove_spacer_post; - } - @include Option("userChrome.tabbar.as_titlebar") { - #tabbrowser-tabs { - @include _remove_spacer_post; - } - } - } - @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { - @include NotOption("userChrome.tabbar.as_titlebar") { - @include WindowControl_Right { - @include _remove_spacer_post; - } - } - } -} - @mixin _oneLiner_navBar_borderPadding() { @include NotOption("userChrome.tabbar.one_liner") { @content; @@ -68,25 +35,6 @@ //------------------------------------------------------------------------------ -@include Option("userChrome.tabbar.one_liner") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - @include NotOption("userChrome.tabbar.one_liner.responsive") { - @include _remove_spacer_oneLiner; - } - @include Option("userChrome.tabbar.one_liner.responsive") { - @media screen and (max-width: 1100px) { - @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { - @include _remove_spacer_pre; - @include _remove_spacer_post; - } - } - @media screen and (min-width: 1100px) { - @include _remove_spacer_oneLiner; - } - } - } -} - #nav-bar { border-inline-style: solid !important; border-inline-color: transparent; diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index aa2e049..ba4485f 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -1,10 +1,51 @@ /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ + +/* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } +#navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; +} + +#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, +#TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right:0; + z-index: 1; +} + +#toolbar-menubar[autohide="true"] { + > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + + @include OS($win10) { + &[inactive="true"] > > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } +} + +.titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + @include OS($mac) { + margin-block: 10px; + } +} + +@include WindowControl_Left { + .titlebar-buttonbox-container{ + left:0; + right: unset !important; + } +} + @include OS($win) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; @@ -22,36 +63,6 @@ See the above repository for updates as well as full license text. */ } } -#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, -#TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right:0; - z-index: 1; -} -#toolbar-menubar[autohide="true"] { - > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - - @include OS($win10) { - &[inactive="true"] > > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } -} - -/* where window controls are on left */ -@include WindowControl_Left { - :root{ - --uc-titlebar-padding: 0px !important; - } - .titlebar-buttonbox-container{ - left:0; - right: unset !important; - } -} @include OS($mac) { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; @@ -59,14 +70,6 @@ See the above repository for updates as well as full license text. */ } } -#navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; -} - -:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; -} - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { @include NotOption("userChrome.hidden.tabbar") { opacity: 0; @@ -82,6 +85,7 @@ See the above repository for updates as well as full license text. */ } } } + #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { @include Option("userChrome.hidden.tabbar") { @include Option("userChrome.autohide.navbar") { @@ -90,6 +94,7 @@ See the above repository for updates as well as full license text. */ } } } + @include Animate { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), @@ -100,25 +105,6 @@ See the above repository for updates as well as full license text. */ } } -.titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - @include OS($mac) { - margin-block: 10px; - } -} - -/* At Full Screen */ -:root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; -} -:root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; -} - @include Option("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss index 10148b8..d571c56 100644 --- a/src/tabbar/layout/_window_control_size.scss +++ b/src/tabbar/layout/_window_control_size.scss @@ -6,6 +6,40 @@ --uc-window-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); } +//-- Mixin --------------------------------------------------------------------- +@mixin _remove_spacer_pre() { + --uc-window-drag-space-pre: 0px; // Don't need pre spacer +} + +@mixin _remove_spacer_post() { + --uc-window-control-space: 0px; // Don't need window control +} + +@mixin _remove_spacer_oneLiner() { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { + @include WindowControl_Right { + @include _remove_spacer_pre; + } + @include WindowControl_Left { + @include _remove_spacer_post; + } + @include Option("userChrome.tabbar.as_titlebar") { + #tabbrowser-tabs { + @include _remove_spacer_post; + } + } + } + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { + @include NotOption("userChrome.tabbar.as_titlebar") { + @include WindowControl_Right { + @include _remove_spacer_post; + } + } + } +} + +//------------------------------------------------------------------------------ + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px @@ -41,10 +75,29 @@ --uc-window-control-width: 72px; } :root[sizemode="fullscreen"] { - --uc-window-control-space: 0; + @include _remove_spacer_post; } } :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; /* Remove pre space */ + @include _remove_spacer_pre; +} + +@include Option("userChrome.tabbar.one_liner") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @include _remove_spacer_oneLiner; + } + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { + @include _remove_spacer_pre; + @include _remove_spacer_post; + } + } + @media screen and (min-width: 1100px) { + @include _remove_spacer_oneLiner; + } + } + } }