mirror of
https://github.com/enso-browser/theme-store.git
synced 2026-10-30 20:27:45 +00:00
zeekay
c95570e34a
Update CSS custom properties (--zen-* → --enso-*), attribute selectors, preference keys, element IDs, and descriptive text across all themes, scripts, and metadata files.
120 lines
6.1 KiB
CSS
120 lines
6.1 KiB
CSS
/**
|
|
* This Enso 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 Enso 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: var(--enso-toolbar-height, 34px);
|
|
--pbmg-private-browsing-mode-border-size: 2px;
|
|
}
|
|
|
|
|
|
/*******************************************\
|
|
* Topbar highlighting.
|
|
\*******************************************/
|
|
|
|
:root:has(#theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="match-enso"]) {
|
|
--pbmh-private-browsing-mode-base-color: var(--enso-primary-color);
|
|
}
|
|
|
|
: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] #enso-appcontent-navbar-container,
|
|
&[privatebrowsingmode][enso-compact-mode="true"]:not([enso-single-toolbar="true"]) #nav-bar {
|
|
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;
|
|
}
|
|
|
|
&[privatebrowsingmode][enso-single-toolbar="true"] #urlbar-background {
|
|
background-color: var(--pbmh-private-browsing-mode-color) !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] .enso-current-workspace-indicator-icon {
|
|
display: block !important;
|
|
color: transparent !important;
|
|
aspect-ratio: 1;
|
|
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;
|
|
}
|
|
}
|