diff --git a/__tests__/os.test.scss b/__tests__/os.test.scss index 946aee8..a9794bc 100644 --- a/__tests__/os.test.scss +++ b/__tests__/os.test.scss @@ -17,7 +17,7 @@ } } @include expect { - @media (-moz-os-version: windows-win7) { + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { @include example; } } @@ -32,7 +32,7 @@ } } @include expect { - @media (-moz-os-version: windows-win8) { + @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { @include example; } } @@ -47,7 +47,7 @@ } } @include expect { - @media (-moz-os-version: windows-win10) { + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { @include example; } } @@ -107,7 +107,7 @@ } } @include expect { - @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + @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) { @include example; } } @@ -122,7 +122,7 @@ } } @include expect { - @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) { + @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), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) { @include example; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @@ -140,7 +140,7 @@ } } @include expect { - @media (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available), (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + @media (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available), (-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) { @include example; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 26e6ebe..1eef780 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -119,6 +119,32 @@ xul|search-textbox.tabsFilter:hover, transition-delay: 0s, 0s, 0.25s !important; } +/*- Full Screen ------------------------------------------------------------*/ +#navigator-toolbox { + /* Full screen out */ + transition: margin-top 1s ease; +} +#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; +} +#navigator-toolbox[inFullscreen="true"]:hover { + transition-duration: 1.5s; + transition-delay: 0.1s; +} + +@keyframes fullscreen { + from { + margin-top: 0; + } + /* Dont' use `to`: Depending on density */ +} + /*- Expand - Synced Tabs ---------------------------------------------------*/ @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") { diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index 32342b8..421503c 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -1,4 +1,32 @@ /* Toolbar Height */ +@include Option($tabLeptonLikePadding) { + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px; + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 32px; + } + :root[uidensity="touch"] #TabsToolbar { + --tab-min-height: 41px; + } +} +@include Option($tabPhotonLikePadding) { + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 32px; + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px; + } + :root[uidensity="touch"] #TabsToolbar { + --tab-min-height: 41px; + } + + /* Top Margin */ + .tab-background, + .tab-content { + margin-top: 0 !important; + } +} @include NotOption($tabPhotonLikePadding) { :root:not([uidensity]) #TabsToolbar { --tab-min-height: 36px !important; /* 38px -> 36px */ @@ -8,34 +36,18 @@ } } @include NotOption($tabProtonLikePadding) { - #tabbrowser-arrowscrollbox { - max-height: calc(var(--tabbar-max-height, 38px) + var(--space-above-tabbar)); - } - :root[uidensity="touch"] #tabbrowser-arrowscrollbox { - --tabbar-max-height: 45px; - } -} - -@include Option($tabLeptonLikePadding) { - #tabbrowser-arrowscrollbox { - --tabbar-max-height: 38px; - } - :root[uidensity="compact"] #tabbrowser-arrowscrollbox { - --tabbar-max-height: 32px; - } -} -@include Option($tabPhotonLikePadding) { - #tabbrowser-arrowscrollbox { - --tabbar-max-height: 33px; - } - :root[uidensity="compact"] #tabbrowser-arrowscrollbox { - --tabbar-max-height: 29px; + #TabsToolbar { + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */ } - /* Top Margin */ - .tab-background, - .tab-content { - margin-top: 0 !important; + :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox, + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { + max-height: var(--tab-min-height) !important; /* Force apply height */ + } + :root[uidensity="compact"] #tabbrowser-arrowscrollbox { + height: var(--tab-min-height) !important; } } diff --git a/src/tabbar/_connect_to_window.scss b/src/tabbar/_connect_to_window.scss index 7db8cd3..f55dab3 100644 --- a/src/tabbar/_connect_to_window.scss +++ b/src/tabbar/_connect_to_window.scss @@ -16,6 +16,6 @@ #tabbrowser-tabs { z-index: 1 !important; } -#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { - overflow: hidden; +#TabsToolbar { + overflow: hidden; /* Prevent toolbar area over */ } diff --git a/src/theme/_built_in.scss b/src/theme/_built_in.scss index d6d7f4d..a994c92 100644 --- a/src/theme/_built_in.scss +++ b/src/theme/_built_in.scss @@ -1,3 +1,5 @@ +// lwtheme-mozlightdark: Legacy - v96 + /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), /* Legacy */ :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { diff --git a/src/utils/_os.scss b/src/utils/_os.scss index 27895ed..8b26164 100644 --- a/src/utils/_os.scss +++ b/src/utils/_os.scss @@ -14,12 +14,23 @@ $win10: "win10"; $bigsur: "bigsur"; //== Privated Variables ======================================================== -$_win-template: "-moz-os-version: windows-"; +$_win-template: "-moz-os-version: windows-" "-moz-platform: windows-"; $_win-media: ( - #{$win7}: $_win-template + "win7", - #{$win8}: $_win-template + "win8", - #{$win10}: $_win-template + "win10", + #{$win7}: "win7", + #{$win8}: "win8", + #{$win10}: "win10", ); +@each $_win-key in map.keys($_win-media) { + $_win-value: map.get($_win-media, $_win-key); + + $result-template: (); + @for $i from 1 through list.length($_win-template) { + $result-value: list.nth($_win-template, $i) + $_win-value; + $result-template: list.append($result-template, $result-value); + } + $_win-media: map.set($_win-media, $_win-key, $result-template); +} + $_others-media: ( #{$linux}: "-moz-gtk-csd-available", #{$bigsur}: "-moz-mac-big-sur-theme: 0", @@ -39,7 +50,7 @@ $_os-media: map.merge( @each $osName in $osNames { $osMedia: map.get($_os-media, $osName); @if $osMedia != null { - $osMedias: list.append($osMedias, $osMedia); + $osMedias: list.join($osMedias, $osMedia); } }