mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 00:45:30 +02:00
185 lines
6.2 KiB
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;
|
|
}
|
|
}
|