1  /* Catppuccin Mocha Mauve userContent.css*/
  2  
  3  @media (prefers-color-scheme: dark) {
  4  
  5    /* Common variables affecting all pages */
  6    @-moz-document url-prefix("about:") {
  7      :root {
  8        --in-content-page-color: #cdd6f4 !important;
  9        --color-accent-primary: #cba6f7 !important;
 10        --color-accent-primary-hover: rgb(217, 191, 249) !important;
 11        --color-accent-primary-active: rgb(223, 167, 247) !important;
 12        background-color: #1e1e2e !important;
 13        --in-content-page-background: #1e1e2e !important;
 14      }
 15  
 16    }
 17  
 18    /* Variables and styles specific to about:newtab and about:home */
 19    @-moz-document url("about:newtab"), url("about:home") {
 20  
 21      :root {
 22        --newtab-background-color: #1e1e2e !important;
 23        --newtab-background-color-secondary: #313244 !important;
 24        --newtab-element-hover-color: #313244 !important;
 25        --newtab-text-primary-color: #cdd6f4 !important;
 26        --newtab-wordmark-color: #cdd6f4 !important;
 27        --newtab-primary-action-background: #cba6f7 !important;
 28      }
 29  
 30      .icon {
 31        color: #cba6f7 !important;
 32      }
 33  
 34      .search-wrapper .logo-and-wordmark .logo {
 35        background: url("zen-logo-mocha.svg"), url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Mocha/Mauve/zen-logo-mocha.svg") no-repeat center !important;
 36        display: inline-block !important;
 37        height: 82px !important;
 38        width: 82px !important;
 39        background-size: 82px !important;
 40      }
 41  
 42      @media (max-width: 609px) {
 43        .search-wrapper .logo-and-wordmark .logo {
 44          background-size: 64px !important;
 45          height: 64px !important;
 46          width: 64px !important;
 47        }
 48      }
 49  
 50      .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
 51        color: #cba6f7 !important;
 52      }
 53  
 54      .top-site-outer .search-topsite {
 55        background-color: #89b4fa !important;
 56      }
 57  
 58      .compact-cards .card-outer .card-context .card-context-icon.icon-download {
 59        fill: #a6e3a1 !important;
 60      }
 61    }
 62  
 63    /* Variables and styles specific to about:preferences */
 64    @-moz-document url-prefix("about:preferences") {
 65      :root {
 66        --zen-colors-tertiary: #181825 !important;
 67        --in-content-text-color: #cdd6f4 !important;
 68        --link-color: #cba6f7 !important;
 69        --link-color-hover: rgb(217, 191, 249) !important;
 70        --zen-colors-primary: #313244 !important;
 71        --in-content-box-background: #313244 !important;
 72        --zen-primary-color: #cba6f7 !important;
 73      }
 74  
 75      groupbox , moz-card{
 76        background: #1e1e2e !important;
 77      }
 78  
 79      button,
 80      groupbox menulist {
 81        background: #313244 !important;
 82        color: #cdd6f4 !important;
 83      }
 84  
 85      .main-content {
 86        background-color: #11111b !important;
 87      }
 88  
 89      .identity-color-blue {
 90        --identity-tab-color: #8aadf4 !important;
 91        --identity-icon-color: #8aadf4 !important;
 92      }
 93  
 94      .identity-color-turquoise {
 95        --identity-tab-color: #8bd5ca !important;
 96        --identity-icon-color: #8bd5ca !important;
 97      }
 98  
 99      .identity-color-green {
100        --identity-tab-color: #a6da95 !important;
101        --identity-icon-color: #a6da95 !important;
102      }
103  
104      .identity-color-yellow {
105        --identity-tab-color: #eed49f !important;
106        --identity-icon-color: #eed49f !important;
107      }
108  
109      .identity-color-orange {
110        --identity-tab-color: #f5a97f !important;
111        --identity-icon-color: #f5a97f !important;
112      }
113  
114      .identity-color-red {
115        --identity-tab-color: #ed8796 !important;
116        --identity-icon-color: #ed8796 !important;
117      }
118  
119      .identity-color-pink {
120        --identity-tab-color: #f5bde6 !important;
121        --identity-icon-color: #f5bde6 !important;
122      }
123  
124      .identity-color-purple {
125        --identity-tab-color: #c6a0f6 !important;
126        --identity-icon-color: #c6a0f6 !important;
127      }
128    }
129  
130    /* Variables and styles specific to about:addons */
131    @-moz-document url-prefix("about:addons") {
132      :root {
133        --zen-dark-color-mix-base: #181825 !important;
134        --background-color-box: #1e1e2e !important;
135      }
136    }
137  
138    /* Variables and styles specific to about:protections */
139    @-moz-document url-prefix("about:protections") {
140      :root {
141        --zen-primary-color: #1e1e2e !important;
142        --social-color: #cba6f7 !important;
143        --coockie-color: #89dceb !important;
144        --fingerprinter-color: #f9e2af !important;
145        --cryptominer-color: #b4befe !important;
146        --tracker-color: #a6e3a1 !important;
147        --in-content-primary-button-background-hover: rgb(81, 83, 105) !important;
148        --in-content-primary-button-text-color-hover: #cdd6f4 !important;
149        --in-content-primary-button-background: #45475a !important;
150        --in-content-primary-button-text-color: #cdd6f4 !important;
151      }
152  
153  
154      .card {
155        background-color: #313244 !important;
156      }
157    }
158  }