Change zen to use catppuccin
This commit is contained in:
parent
0749df4ef2
commit
9181de8e47
GPG key ID:
9814758436430045
3 changed files with 287 additions and 203 deletions
|
|
@ -1,217 +1,130 @@
|
|||
/*:root {
|
||||
--c-accent: var(--tab-loading-fill);
|
||||
--c-text: var(--toolbar-color);
|
||||
--c-mantle: var(--lwt-accent-color);
|
||||
--c-base: var(--tabpanel-background-color);
|
||||
--c-surface0: var(--tab-selected-bgcolor);
|
||||
--c-surface1: var(--arrowpanel-border-color);
|
||||
/* Catppuccin Mocha Pink userChrome.css*/
|
||||
|
||||
--zen-primary-color: var(--c-surface0) !important;
|
||||
--zen-colors-primary: var(--c-accent) !important;
|
||||
--zen-colors-secondary: var(--c-surface0) !important;
|
||||
--zen-colors-tertiary: var(--c-base) !important;
|
||||
--zen-colors-border: var(--c-surface1) !important;
|
||||
--toolbarbutton-icon-fill: var(--c-accent) !important;
|
||||
--toolbarbutton-icon-fill-attention: var(--c-accent) !important;
|
||||
--toolbarbutton-icon-fill-attention-text-light: var(--c-text) !important;
|
||||
--toolbarbutton-icon-fill-attention-text-dark: var(--c-base) !important;
|
||||
--lwt-text-color: var(--c-text) !important;
|
||||
--toolbar-field-color: color-mix(in srgb, var(--c-text), transparent 15%) !important;
|
||||
--toolbar-field-focus-color: color-mix(in srgb, var(--c-text), transparent 10%) !important;
|
||||
--arrowpanel-color: var(--c-text) !important;
|
||||
--arrowpanel-background: var(--c-base) !important;
|
||||
--lwt-sidebar-text-color: var(--c-text) !important;
|
||||
--lwt-sidebar-background-color: var(--c-mantle) !important;
|
||||
--toolbar-bgcolor: var(--c-surface0) !important;
|
||||
--newtab-background-color: var(--c-base) !important;
|
||||
--zen-themed-toolbar-bg: var(--c-mantle) !important;
|
||||
--zen-main-browser-background: var(--c-mantle) !important;
|
||||
--urlbarView-highlight-color: var(--c-text) !important;
|
||||
--in-content-primary-button-text-color: var(--c-text) !important;
|
||||
--in-content-primary-button-background: var(--toolbarbutton-hover-background) !important;
|
||||
--in-content-primary-button-background-hover: var(--toolbarbutton-active-background) !important;
|
||||
font-family: Maple Mono NF !important; font-size: 16pt
|
||||
}*/
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--zen-colors-primary: #313244 !important;
|
||||
--zen-primary-color: #f5c2e7 !important;
|
||||
--zen-colors-secondary: #313244 !important;
|
||||
--zen-colors-tertiary: #181825 !important;
|
||||
--zen-colors-border: #f5c2e7 !important;
|
||||
--toolbarbutton-icon-fill: #f5c2e7 !important;
|
||||
--lwt-text-color: #cdd6f4 !important;
|
||||
--toolbar-field-color: #cdd6f4 !important;
|
||||
--tab-selected-textcolor: rgb(225, 204, 238) !important;
|
||||
--toolbar-field-focus-color: #cdd6f4 !important;
|
||||
--toolbar-color: #cdd6f4 !important;
|
||||
--newtab-text-primary-color: #cdd6f4 !important;
|
||||
--arrowpanel-color: #cdd6f4 !important;
|
||||
--arrowpanel-background: #1e1e2e !important;
|
||||
--sidebar-text-color: #cdd6f4 !important;
|
||||
--lwt-sidebar-text-color: #cdd6f4 !important;
|
||||
--lwt-sidebar-background-color: #11111b !important;
|
||||
--toolbar-bgcolor: #313244 !important;
|
||||
--newtab-background-color: #1e1e2e !important;
|
||||
--zen-themed-toolbar-bg: #181825 !important;
|
||||
--zen-main-browser-background: #181825 !important;
|
||||
--toolbox-bgcolor-inactive: #181825 !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Maple Mono NF !important; font-size: 16pt
|
||||
}
|
||||
#permissions-granted-icon {
|
||||
color: #181825 !important;
|
||||
}
|
||||
|
||||
/*tooltip {
|
||||
appearance: none !important;
|
||||
background-color: var(--c-mantle) !important;
|
||||
color: var(--c-text) !important;
|
||||
border: 1px solid color-mix(in srgb, var(--c-accent), transparent 70%) !important;
|
||||
border-radius: 8px !important;
|
||||
}*/
|
||||
.sidebar-placesTree {
|
||||
background-color: #1e1e2e !important;
|
||||
}
|
||||
|
||||
/*#permissions-granted-icon {
|
||||
color: var(--c-mantle) !important;
|
||||
}
|
||||
#zen-workspaces-button {
|
||||
background-color: #1e1e2e !important;
|
||||
}
|
||||
|
||||
.sidebar-placesTree {
|
||||
background-color: var(--c-base) !important;
|
||||
}
|
||||
#TabsToolbar {
|
||||
background-color: #181825 !important;
|
||||
}
|
||||
|
||||
#urlbar-background {
|
||||
background-color: var(--c-surface0) !important;
|
||||
}
|
||||
.urlbar-background {
|
||||
background-color: #1e1e2e !important;
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
background-color: var(--c-mantle) !important;
|
||||
}
|
||||
.content-shortcuts {
|
||||
background-color: #1e1e2e !important;
|
||||
border-color: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
.content-shortcuts {
|
||||
background-color: var(--c-base) !important;
|
||||
border-color: var(--c-accent) !important;
|
||||
}
|
||||
.urlbarView-url {
|
||||
color: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
.urlbarView-url {
|
||||
color: var(--c-accent) !important;
|
||||
}
|
||||
#zenEditBookmarkPanelFaviconContainer {
|
||||
background: #11111b !important;
|
||||
}
|
||||
|
||||
#zenEditBookmarkPanelFaviconContainer {
|
||||
background: var(--c-mantle) !important;
|
||||
}
|
||||
#zen-media-controls-toolbar {
|
||||
& #zen-media-progress-bar {
|
||||
&::-moz-range-track {
|
||||
background: #313244 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toolbarbutton {
|
||||
fill: var(--c-accent) !important;
|
||||
}
|
||||
|
||||
toolbar .toolbarbutton-1 {
|
||||
toolbar .toolbarbutton-1 {
|
||||
&:not([disabled]) {
|
||||
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
|
||||
fill: var(--c-mantle) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#autoscroller {
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
#urlbar-container {
|
||||
background: var(--c-mantle) !important;
|
||||
}*/
|
||||
|
||||
/* Center url bar text when not focused */
|
||||
#urlbar:not([focused]) .urlbar-input {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Floating url bar appear animation + shift down */
|
||||
@keyframes floating-urlbar-show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
/* translate: -10% 0; */
|
||||
}
|
||||
|
||||
70% {
|
||||
scale: 1.02;
|
||||
/* translate: 1% 0; */
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
/* translate: 0 0; */
|
||||
}
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend] {
|
||||
animation: 200ms floating-urlbar-show ease-out;
|
||||
}
|
||||
|
||||
/* Blur menu popups */
|
||||
/*#commonDialog,
|
||||
.menupopup-arrowscrollbox {
|
||||
border-radius: 10px !important;
|
||||
border: 1px solid color-mix(in srgb, var(--arrowpanel-border-color), transparent 70%) !important;
|
||||
background: color-mix(in srgb, var(--arrowpanel-background), transparent 15%) !important;
|
||||
backdrop-filter: blur(25px) !important;
|
||||
}
|
||||
|
||||
#commonDialog {
|
||||
background: color-mix(in srgb, var(--zen-branding-bg), transparent 15%) !important;
|
||||
}*/
|
||||
|
||||
/* Blur floating url bar */
|
||||
/*#urlbar[zen-floating-urlbar][breakout][breakout-extend] > #urlbar-background {
|
||||
border: 1px solid color-mix(in srgb, var(--zen-colors-border), transparent 70%) !important;
|
||||
border-radius: 10px !important;
|
||||
background: color-mix(in srgb, var(--zen-colors-tertiary), transparent 15%) !important;
|
||||
backdrop-filter: blur(25px) !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend] .urlbar-input-container {
|
||||
padding-top: 7px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.urlbarView-body-inner {
|
||||
border: none !important;
|
||||
}*/
|
||||
|
||||
/* Styles the search options */
|
||||
.search-one-offs {
|
||||
border-top: none !important;
|
||||
padding: 4px !important;
|
||||
margin: 0px 0px 7px 0px !important;
|
||||
}
|
||||
|
||||
.searchbar-engine-one-off-item {
|
||||
border-radius: 8px !important;
|
||||
margin-right: 3px !important;
|
||||
}
|
||||
|
||||
#urlbar-anon-search-settings {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
|
||||
/* Border/outline transition fix */
|
||||
* {
|
||||
border: 0px solid transparent;
|
||||
outline: 0px solid transparent;
|
||||
}
|
||||
|
||||
/* Dim unloaded tabs */
|
||||
.tabbrowser-tab[pending] {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
:is(
|
||||
.tab-background,
|
||||
.toolbarbutton-icon,
|
||||
.toolbarbutton-badge-stack,
|
||||
.toolbarbutton-1,
|
||||
.bookmark-item,
|
||||
.PanelUI-zen-profiles-item,
|
||||
.download-state,
|
||||
.urlbarView-row,
|
||||
.urlbarView-action,
|
||||
.searchbar-engine-one-off-item,
|
||||
#urlbar-search-mode-indicator,
|
||||
#tracking-protection-icon-container,
|
||||
#page-action-buttons > *,
|
||||
#identity-box > *,
|
||||
toolbarbutton,
|
||||
toolbaritem,
|
||||
button,
|
||||
menu,
|
||||
menuitem,
|
||||
tab
|
||||
):not(#urlbar-container, #personal-bookmarks) {
|
||||
transition: all 0.15s ease !important;
|
||||
|
||||
&:is(tab) {
|
||||
transition: scale 0.15s ease !important;
|
||||
}
|
||||
|
||||
&:is(:active, :not(tab)[open]) {
|
||||
scale: 0.95 !important;
|
||||
&:is([open], [checked])
|
||||
> :is(
|
||||
.toolbarbutton-icon,
|
||||
.toolbarbutton-text,
|
||||
.toolbarbutton-badge-stack
|
||||
) {
|
||||
fill: #11111b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.identity-color-blue {
|
||||
--identity-tab-color: #89b4fa !important;
|
||||
--identity-icon-color: #89b4fa !important;
|
||||
}
|
||||
|
||||
.identity-color-turquoise {
|
||||
--identity-tab-color: #94e2d5 !important;
|
||||
--identity-icon-color: #94e2d5 !important;
|
||||
}
|
||||
|
||||
.identity-color-green {
|
||||
--identity-tab-color: #a6e3a1 !important;
|
||||
--identity-icon-color: #a6e3a1 !important;
|
||||
}
|
||||
|
||||
.identity-color-yellow {
|
||||
--identity-tab-color: #f9e2af !important;
|
||||
--identity-icon-color: #f9e2af !important;
|
||||
}
|
||||
|
||||
.identity-color-orange {
|
||||
--identity-tab-color: #fab387 !important;
|
||||
--identity-icon-color: #fab387 !important;
|
||||
}
|
||||
|
||||
.identity-color-red {
|
||||
--identity-tab-color: #f38ba8 !important;
|
||||
--identity-icon-color: #f38ba8 !important;
|
||||
}
|
||||
|
||||
.identity-color-pink {
|
||||
--identity-tab-color: #f5c2e7 !important;
|
||||
--identity-icon-color: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
.identity-color-purple {
|
||||
--identity-tab-color: #cba6f7 !important;
|
||||
--identity-icon-color: #cba6f7 !important;
|
||||
}
|
||||
|
||||
hbox#titlebar {
|
||||
background-color: #181825 !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container {
|
||||
background-color: #181825 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
158
zen/userContent.css
Normal file
158
zen/userContent.css
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
/* Catppuccin Mocha Pink userContent.css*/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
/* Common variables affecting all pages */
|
||||
@-moz-document url-prefix("about:") {
|
||||
:root {
|
||||
--in-content-page-color: #cdd6f4 !important;
|
||||
--color-accent-primary: #f5c2e7 !important;
|
||||
--color-accent-primary-hover: rgb(249, 217, 240) !important;
|
||||
--color-accent-primary-active: rgb(245, 195, 219) !important;
|
||||
background-color: #1e1e2e !important;
|
||||
--in-content-page-background: #1e1e2e !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Variables and styles specific to about:newtab and about:home */
|
||||
@-moz-document url("about:newtab"), url("about:home") {
|
||||
|
||||
:root {
|
||||
--newtab-background-color: #1e1e2e !important;
|
||||
--newtab-background-color-secondary: #313244 !important;
|
||||
--newtab-element-hover-color: #313244 !important;
|
||||
--newtab-text-primary-color: #cdd6f4 !important;
|
||||
--newtab-wordmark-color: #cdd6f4 !important;
|
||||
--newtab-primary-action-background: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
.search-wrapper .logo-and-wordmark .logo {
|
||||
background: url("zen-logo-mocha.svg"), url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Mocha/Pink/zen-logo-mocha.svg") no-repeat center !important;
|
||||
display: inline-block !important;
|
||||
height: 82px !important;
|
||||
width: 82px !important;
|
||||
background-size: 82px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 609px) {
|
||||
.search-wrapper .logo-and-wordmark .logo {
|
||||
background-size: 64px !important;
|
||||
height: 64px !important;
|
||||
width: 64px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
|
||||
color: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
.top-site-outer .search-topsite {
|
||||
background-color: #89b4fa !important;
|
||||
}
|
||||
|
||||
.compact-cards .card-outer .card-context .card-context-icon.icon-download {
|
||||
fill: #a6e3a1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Variables and styles specific to about:preferences */
|
||||
@-moz-document url-prefix("about:preferences") {
|
||||
:root {
|
||||
--zen-colors-tertiary: #181825 !important;
|
||||
--in-content-text-color: #cdd6f4 !important;
|
||||
--link-color: #f5c2e7 !important;
|
||||
--link-color-hover: rgb(249, 217, 240) !important;
|
||||
--zen-colors-primary: #313244 !important;
|
||||
--in-content-box-background: #313244 !important;
|
||||
--zen-primary-color: #f5c2e7 !important;
|
||||
}
|
||||
|
||||
groupbox , moz-card{
|
||||
background: #1e1e2e !important;
|
||||
}
|
||||
|
||||
button,
|
||||
groupbox menulist {
|
||||
background: #313244 !important;
|
||||
color: #cdd6f4 !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: #11111b !important;
|
||||
}
|
||||
|
||||
.identity-color-blue {
|
||||
--identity-tab-color: #8aadf4 !important;
|
||||
--identity-icon-color: #8aadf4 !important;
|
||||
}
|
||||
|
||||
.identity-color-turquoise {
|
||||
--identity-tab-color: #8bd5ca !important;
|
||||
--identity-icon-color: #8bd5ca !important;
|
||||
}
|
||||
|
||||
.identity-color-green {
|
||||
--identity-tab-color: #a6da95 !important;
|
||||
--identity-icon-color: #a6da95 !important;
|
||||
}
|
||||
|
||||
.identity-color-yellow {
|
||||
--identity-tab-color: #eed49f !important;
|
||||
--identity-icon-color: #eed49f !important;
|
||||
}
|
||||
|
||||
.identity-color-orange {
|
||||
--identity-tab-color: #f5a97f !important;
|
||||
--identity-icon-color: #f5a97f !important;
|
||||
}
|
||||
|
||||
.identity-color-red {
|
||||
--identity-tab-color: #ed8796 !important;
|
||||
--identity-icon-color: #ed8796 !important;
|
||||
}
|
||||
|
||||
.identity-color-pink {
|
||||
--identity-tab-color: #f5bde6 !important;
|
||||
--identity-icon-color: #f5bde6 !important;
|
||||
}
|
||||
|
||||
.identity-color-purple {
|
||||
--identity-tab-color: #c6a0f6 !important;
|
||||
--identity-icon-color: #c6a0f6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Variables and styles specific to about:addons */
|
||||
@-moz-document url-prefix("about:addons") {
|
||||
:root {
|
||||
--zen-dark-color-mix-base: #181825 !important;
|
||||
--background-color-box: #1e1e2e !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Variables and styles specific to about:protections */
|
||||
@-moz-document url-prefix("about:protections") {
|
||||
:root {
|
||||
--zen-primary-color: #1e1e2e !important;
|
||||
--social-color: #cba6f7 !important;
|
||||
--coockie-color: #89dceb !important;
|
||||
--fingerprinter-color: #f9e2af !important;
|
||||
--cryptominer-color: #b4befe !important;
|
||||
--tracker-color: #a6e3a1 !important;
|
||||
--in-content-primary-button-background-hover: rgb(81, 83, 105) !important;
|
||||
--in-content-primary-button-text-color-hover: #cdd6f4 !important;
|
||||
--in-content-primary-button-background: #45475a !important;
|
||||
--in-content-primary-button-text-color: #cdd6f4 !important;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background-color: #313244 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
zen/zen-logo-mocha.svg
Normal file
13
zen/zen-logo-mocha.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_15_9)">
|
||||
<rect width="1024" height="1024" rx="225" fill="#11111b"/>
|
||||
<circle cx="512" cy="512" r="340" stroke="#cdd6f4" stroke-width="70"/>
|
||||
<circle cx="512" cy="512" r="224.915" stroke="#cdd6f4" stroke-width="51"/>
|
||||
<circle cx="512" cy="512" r="129.018" stroke="#cdd6f4" stroke-width="31"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_15_9">
|
||||
<rect width="1024" height="1024" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 569 B |
Loading…
Add table
Add a link
Reference in a new issue