mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
ddaea776a1
* Update README to indicate where theme settings are now stored. * Add colour choice options to Private Mode Highlighting theme.
91 lines
5.1 KiB
CSS
91 lines
5.1 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 Theme Store settings.
|
|
*
|
|
* The --pbmh prefix stands for Private Browsing Mode Highlighting.
|
|
*/
|
|
|
|
:root {
|
|
--pbmh-private-browsing-mode-base-color: #32064e;
|
|
}
|
|
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.use-zen-theme-color") { :root { --pbmh-private-browsing-mode-base-color: oklch(from var(--zen-primary-color) calc(l - 0.5) c h); } }
|
|
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-blue") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #aac7ff calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-teal") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #74d7cb calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-green") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #a0d490 calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-yellow") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #dec663 calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-orange") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #ffb787 calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-brown") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #dec1b1 calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-red") { :root { --pbmh-private-browsing-mode-base-color: oklch(from #ffb1c0 calc(l - 0.5) c h); } }
|
|
@media (-moz-bool-pref: "uc.private-browsing-top-bar.color-pink") { :root { --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);
|
|
}
|
|
}
|
|
|
|
@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.5rem;
|
|
bottom: 0.5rem;
|
|
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;
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
}
|