mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
72 lines
2.5 KiB
CSS
72 lines
2.5 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 Zen's Look and Feel settings.
|
|
*
|
|
* The --pbmh prefix stands for Private Browsing Mode Highlighting.
|
|
*/
|
|
|
|
:root {
|
|
--pbmh-private-browsing-mode-color: #25003E;
|
|
--pbmh-private-browsing-mode-border: hsl(from var(--pbmh-private-browsing-mode-color) h s calc(l + 20));
|
|
}
|
|
|
|
[devtoolstheme=light] {
|
|
--pbmh-private-browsing-mode-color: #C080EB;
|
|
--pbmh-private-browsing-mode-border: hsl(from var(--pbmh-private-browsing-mode-color) h s calc(l - 20));
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "uc.private-browsing-top-bar.no-bg") {
|
|
[privatebrowsingmode] #nav-bar {
|
|
background-image: linear-gradient(to bottom, var(--pbmh-private-browsing-mode-color), rgb(from var(--pbmh-private-browsing-mode-color) r g b / 0%) 98%) !important;
|
|
}
|
|
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.solid-bg") {
|
|
[privatebrowsingmode] #nav-bar {
|
|
background-image: none !important;
|
|
background-color: var(--pbmh-private-browsing-mode-color) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "uc.private-browsing-top-bar.no-border") {
|
|
:root[privatebrowsingmode]:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
|
|
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
|
|
box-shadow: 0 0 0 2px var(--pbmh-private-browsing-mode-border) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "uc.private-browsing-top-bar.hide-icon") {
|
|
[privatebrowsingmode] #stop-reload-button {
|
|
position: relative;
|
|
}
|
|
|
|
[privatebrowsingmode] #stop-reload-button::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: 70%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*
|
|
* Prevents the spring from collapsing too far and causing the URL bar to overlap the icon
|
|
*/
|
|
[privatebrowsingmode] toolbarspring:has(+ #urlbar-container) {
|
|
min-width: 40px !important;
|
|
}
|
|
|
|
/*
|
|
*If the spring has been remvoed (e.g., the browser width is too small),
|
|
*then add a margin to the URL bar to prevent it from overlapping the icon
|
|
*/
|
|
[privatebrowsingmode] #stop-reload-button+#urlbar-container {
|
|
margin-inline-start: 40px !important;
|
|
}
|
|
}
|