mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 00:45:30 +02:00
Update chrome.css - Added transparent compact sidebar
This commit is contained in:
Sameera Sandakelum
GitHub
parent
3b9d322e76
commit
c3495abae2
1 changed files with 214 additions and 5 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue