theme-store/themes/58649066-2b6f-4a5b-af6d-c3d21d16fc00/chrome.css

185 lines
6.2 KiB
CSS

/**
* This Zen theme adds additional styling to the private browsing mode window such as a gradient on the toolbar,
* a border around the browser page, and an icon in the URL bar. These are configurable in the Zen Mods settings.
*
* The --pbmh prefix stands for Private Browsing Mode Highlighting.
*/
/*******************************************\
* Base variables.
\*******************************************/
:root {
--pbmh-private-browsing-mode-base-color: #32064e;
--pbmh-private-browsing-mode-gradient-stop-color: rgb(
from var(--pbmh-private-browsing-mode-color) r g b / 0%
);
--pbmg-private-browsing-mode-gradient-stop-position: 50px;
--pbmg-private-browsing-mode-border-size: 2px;
}
/*******************************************\
* Topbar highlighting.
\*******************************************/
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="match-zen"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from var(--zen-primary-color) calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="blue"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #aac7ff calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="teal"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #74d7cb calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="green"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #a0d490 calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="yellow"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #dec663 calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="orange"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #ffb787 calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="brown"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #dec1b1 calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="red"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #ffb1c0 calc(l - 0.5) c h
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="pink"]
) {
--pbmh-private-browsing-mode-base-color: oklch(
from #f6b0ea calc(l - 0.5) c h
);
}
:root {
--pbmh-private-browsing-mode-color: var(
--pbmh-private-browsing-mode-base-color
);
--pbmh-private-browsing-mode-border: oklch(
from var(--pbmh-private-browsing-mode-color) calc(l + 0.2) c h
);
&:where([lwt-toolbar="light"]) {
--pbmh-private-browsing-mode-color: oklch(
from var(--pbmh-private-browsing-mode-base-color) calc(l + 0.45)
calc(c + 0.05) h
);
--pbmh-private-browsing-mode-border: oklch(
from var(--pbmh-private-browsing-mode-color) calc(l - 0.2) c h
);
}
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-highlighting-style="solid"]
) {
--pbmh-private-browsing-mode-gradient-stop-color: var(
--pbmh-private-browsing-mode-color
);
}
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-highlighting-style]:not(
[uc-private-browsing-top-bar-highlighting-style="none"]
)
) {
&[privatebrowsingmode] #browser {
background-image: linear-gradient(
to bottom,
var(--pbmh-private-browsing-mode-color),
var(--pbmh-private-browsing-mode-gradient-stop-color)
var(--pbmg-private-browsing-mode-gradient-stop-position),
transparent
calc(var(--pbmg-private-browsing-mode-gradient-stop-position) + 1px)
) !important;
}
}
/*******************************************\
* Viewport border styling.
\*******************************************/
:root:has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-border-style="thin"]
) {
--pbmg-private-browsing-mode-border-size: 1px;
}
:root[privatebrowsingmode]:not([inDOMFullscreen="true"]):not(
[chromehidden~="location"]
):not([chromehidden~="toolbar"]):has(
#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-border-style]:not(
[uc-private-browsing-top-bar-border-style="none"]
)
) {
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
box-shadow: 0 0 0 var(--pbmg-private-browsing-mode-border-size)
var(--pbmh-private-browsing-mode-border) !important;
}
}
/*******************************************\
* Private Browsing Mode Icon styling.
\*******************************************/
@media not (-moz-bool-pref: "uc.private-browsing-top-bar.hide-icon") {
[privatebrowsingmode] #zen-profile-button {
position: relative;
}
[privatebrowsingmode] #zen-profile-button::after {
content: "";
position: absolute;
left: calc(100% + 1em);
top: 25%;
bottom: 25%;
aspect-ratio: 1;
width: auto;
height: auto;
border-radius: 100%;
background-color: oklch(
from var(--pbmh-private-browsing-mode-base-color) calc(l + 0.05)
calc(c + 0.2) h
);
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48c3R5bGU+KntmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjEuOTJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIHBvaW50cz0iMC41IDExLjA0IDEyIDExLjA0IDIzLjUgMTEuMDQiLz48cGF0aCBkPSJNMTkuNjcsMTFINC4zM0w1LDQuNjhBMi41NCwyLjU0LDAsMCwxLDcuNTcsMi40MmgwYTIuNDcsMi40NywwLDAsMSwxLjEzLjI3aDBhNy40Myw3LjQzLDAsMCwwLDYuNiwwaDBhMi40NywyLjQ3LDAsMCwxLDEuMTMtLjI3aDBBMi41NCwyLjU0LDAsMCwxLDE5LDQuNjhaIi8+PGNpcmNsZSBjeD0iNi43MyIgY3k9IjE4LjIzIiByPSIzLjM1Ii8+PGNpcmNsZSBjeD0iMTcuMjciIGN5PSIxOC4yMyIgcj0iMy4zNSIvPjxwYXRoIGQ9Ik0xMC4wOCwxOC43MWExLjkyLDEuOTIsMCwxLDEsMy44NCwwIi8+PGxpbmUgeDE9IjEuNDYiIHkxPSIxNS44MyIgeDI9IjQuMzMiIHkyPSIxNS44MyIvPjxsaW5lIHgxPSIxOS42NyIgeTE9IjE1LjgzIiB4Mj0iMjIuNTQiIHkyPSIxNS44MyIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-position: center center;
background-size: 65%;
pointer-events: none;
}
}