diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css index 322af009..792a1f41 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css +++ b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css @@ -9,15 +9,20 @@ } /* tab tint */ -.browserStack { - browser { - @media -moz-pref( "mod.sameerasw.zen_light_tint_flip") { +:root:has([mod-sameerasw_zen_light_tint="1"]) { + .browserStack { + browser { background-color: light-dark( rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1) ) !important; } - @media -moz-pref( "mod.sameerasw.zen_light_tint_disabled") { + } +} + +:root:has([mod-sameerasw_zen_light_tint="2"]) { + .browserStack { + browser { background-color: transparent !important; } } @@ -104,7 +109,7 @@ tabpanels .browserStack browser { } /* no tab image */ -#browser:has([zen-has-empty-tab=""]) .deck-selected .browserStack { +#browser:has([zen-empty-tab="true"][selected="true"]) .browserStack { @media -moz-pref( "mod.sameerasw.zen_notab_img_enabled") { background-image: var( --mod-sameerasw-zen_notab_img, @@ -129,3 +134,207 @@ tabpanels .browserStack browser { } } } +/* ============= Transparent Sidebar: Mask or Push ============= */ + +:root:has( + [mod-sameerasw_zen_compact_sidebar_type="1"], + [mod-sameerasw_zen_compact_sidebar_type="2"] + ) { + #zen-main-app-wrapper { + --zen-sidebar-custom-width: var( + --mod-sameerasw-zen_compact_sidebar_width, + 165px + ) !important; + } + + [zen-compact-mode="true"] #navigator-toolbox { + --zen-sidebar-width: var(--zen-sidebar-custom-width) !important; + --actual-zen-sidebar-width: var(--zen-sidebar-custom-width) !important; + width: var(--zen-sidebar-custom-width) !important; + } +} + +/* Shared: Soft mask background and shadow */ +#main-window:has([mod-sameerasw_zen_compact_sidebar_type="2"]) #titlebar::before { + box-shadow: light-dark(#fff3, #0003) 0px -36px 30px 0px inset, + rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, + rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, + rgba(0, 0, 0, 0.09) 0px 32px 16px !important; + background-color: light-dark(#fff8, #0005) !important; +} + +/* Shared: Content reveal trigger condition */ +#zen-main-app-wrapper[zen-compact-mode="true"]:has( + [zen-user-show=""], + #navigator-toolbox[zen-has-hover="true"], + [has-popup-menu=""] + ) { + /* Content styles when sidebar is revealed */ +} + +/* Mask type - left sidebar */ +#main-window:not([zen-right-side="true"]):has([mod-sameerasw_zen_compact_sidebar_type="2"]) + #zen-main-app-wrapper[zen-compact-mode="true"]:has( + [zen-user-show=""], + #navigator-toolbox[zen-has-hover="true"], + [has-popup-menu=""] + ) #tabbrowser-tabpanels { + mask-image: linear-gradient( + to right, + transparent 0, + transparent calc(var(--zen-sidebar-custom-width) + 4px), + black calc(var(--zen-sidebar-custom-width) + 8px), + black 100% + ) !important; +} + +/* Mask type - right sidebar */ +#main-window[zen-right-side="true"]:has([mod-sameerasw_zen_compact_sidebar_type="2"]) + #zen-main-app-wrapper[zen-compact-mode="true"]:has( + [zen-user-show=""], + #navigator-toolbox[zen-has-hover="true"], + [has-popup-menu=""] + ) #tabbrowser-tabpanels { + mask-image: linear-gradient( + to left, + transparent 0, + transparent calc(var(--zen-sidebar-custom-width) + 4px), + black calc(var(--zen-sidebar-custom-width) + 8px), + black 100% + ) !important; +} + +/* Push type - left sidebar */ +#main-window:not([zen-right-side="true"]):has([mod-sameerasw_zen_compact_sidebar_type="1"]) + #zen-main-app-wrapper[zen-compact-mode="true"]:has( + [zen-user-show=""], + #navigator-toolbox[zen-has-hover="true"], + [has-popup-menu=""] + ) #zen-appcontent-wrapper { + transform: translateX(var(--zen-sidebar-custom-width)) !important; +} + +/* Push type - right sidebar */ +#main-window[zen-right-side="true"]:has([mod-sameerasw_zen_compact_sidebar_type="1"]) + #zen-main-app-wrapper[zen-compact-mode="true"]:has( + [zen-user-show=""], + #navigator-toolbox[zen-has-hover="true"], + [has-popup-menu=""] + ) #zen-appcontent-wrapper { + transform: translateX(calc(0px - var(--zen-sidebar-custom-width))) !important; +} + +/* Shared Push Transition (used in both left and right) */ +#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"]) #zen-appcontent-wrapper { + --zen-compact-mode-func: linear( + 0 0%, + 0.002748 1%, + 0.010544 2%, + 0.022757 3%, + 0.038804 4%, + 0.058151 5%, + 0.080308 6%, + 0.104828 7%, + 0.131301 8%, + 0.159358 9%, + 0.188662 10%, + 0.21891 11%, + 0.249828 12%, + 0.281172 13%, + 0.312724 14%, + 0.344288 15%, + 0.375693 16%, + 0.40679 17%, + 0.437447 18%, + 0.467549 19%, + 0.497 20%, + 0.525718 21%, + 0.553633 22%, + 0.580688 23%, + 0.60684 24%, + 0.632052 25%, + 0.656298 26%, + 0.679562 27%, + 0.701831 28%, + 0.723104 29%, + 0.743381 30%, + 0.76267 31%, + 0.780983 32%, + 0.798335 33%, + 0.814744 34%, + 0.830233 35%, + 0.844826 36%, + 0.858549 37%, + 0.87143 38%, + 0.883498 39%, + 0.894782 40%, + 0.905314 41%, + 0.915125 42%, + 0.924247 43%, + 0.93271 44%, + 0.940547 45%, + 0.947787 46%, + 0.954463 47%, + 0.960603 48%, + 0.966239 49%, + 0.971397 50%, + 0.976106 51%, + 0.980394 52%, + 0.984286 53%, + 0.987808 54%, + 0.990984 55%, + 0.993837 56%, + 0.99639 57%, + 0.998664 58%, + 1.000679 59%, + 1.002456 60%, + 1.004011 61%, + 1.005363 62%, + 1.006528 63%, + 1.007522 64%, + 1.008359 65%, + 1.009054 66%, + 1.009618 67%, + 1.010065 68%, + 1.010405 69%, + 1.010649 70%, + 1.010808 71%, + 1.01089 72%, + 1.010904 73%, + 1.010857 74%, + 1.010757 75%, + 1.010611 76%, + 1.010425 77%, + 1.010205 78%, + 1.009955 79%, + 1.009681 80%, + 1.009387 81%, + 1.009077 82%, + 1.008754 83%, + 1.008422 84%, + 1.008083 85%, + 1.00774 86%, + 1.007396 87%, + 1.007052 88%, + 1.00671 89%, + 1.006372 90%, + 1.00604 91%, + 1.005713 92%, + 1.005394 93%, + 1.005083 94%, + 1.004782 95%, + 1.004489 96%, + 1.004207 97%, + 1.003935 98%, + 1.003674 99%, + 1.003423 100% + ) !important; + transition: transform 0.25s var(--zen-compact-mode-func) !important; +} + +/* Push: transparent titlebar */ +#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"]) #titlebar::before { + background-color: transparent !important; + outline: none !important; + box-shadow: none !important; +}