├── .editorconfig ├── LICENSE ├── README.md ├── assets ├── .gitkeep ├── frappe.webp ├── latte.webp ├── macchiato.webp ├── mocha.webp └── screenshot.webp └── catppuccin.user.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

🚧 This repository has moved to catppuccin/userstyles 🚧

2 | 3 |

4 |

Copyright © 2021-present Catppuccin Org 5 | -------------------------------------------------------------------------------- /assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/invidious/01a4b391981b79069c400b85c2abfa1f426c4b58/assets/.gitkeep -------------------------------------------------------------------------------- /assets/frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/invidious/01a4b391981b79069c400b85c2abfa1f426c4b58/assets/frappe.webp -------------------------------------------------------------------------------- /assets/latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/invidious/01a4b391981b79069c400b85c2abfa1f426c4b58/assets/latte.webp -------------------------------------------------------------------------------- /assets/macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/invidious/01a4b391981b79069c400b85c2abfa1f426c4b58/assets/macchiato.webp -------------------------------------------------------------------------------- /assets/mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/invidious/01a4b391981b79069c400b85c2abfa1f426c4b58/assets/mocha.webp -------------------------------------------------------------------------------- /assets/screenshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/invidious/01a4b391981b79069c400b85c2abfa1f426c4b58/assets/screenshot.webp -------------------------------------------------------------------------------- /catppuccin.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Invidious Catppuccin 3 | @namespace github.com/catppuccin/invidious 4 | @homepageURL https://github.com/catppuccin/invidious 5 | @version 0.3.1 6 | @description Soothing pastel theme for Invidious 7 | @author Catppuccin 8 | @updateURL https://github.com/catppuccin/invidious/raw/main/catppuccin.user.css 9 | @preprocessor less 10 | @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] 11 | @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] 12 | @var select accentColor "Accent Color" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] 13 | @var checkbox styleVideoPlayer "Style Video Player" 1 14 | ==/UserStyle== */ 15 | @-moz-document url-prefix("https://inv.bp.projectsegfau.lt"), 16 | url-prefix("https://inv.privacy.com.de"), 17 | url-prefix("https://inv.riverside.rocks"), 18 | url-prefix("https://inv.vern.cc"), 19 | url-prefix("https://invidio.xamh.de"), 20 | url-prefix("https://invidious.esmailelbob.xyz"), 21 | url-prefix("https://invidious.flokinet.to"), 22 | url-prefix("https://invidious.kavin.rocks"), 23 | url-prefix("https://invidious.namazso.eu"), 24 | url-prefix("https://invidious.nerdvpn.de"), 25 | url-prefix("https://invidious.projectsegfau.lt"), 26 | url-prefix("https://invidious.rhyshl.live"), 27 | url-prefix("https://invidious.sethforprivacy.com"), 28 | url-prefix("https://invidious.slipfox.xyz"), 29 | url-prefix("https://invidious.snopyta.org"), 30 | url-prefix("https://invidious.thewatcherpi.de"), 31 | url-prefix("https://invidious.tiekoetter.com"), 32 | url-prefix("https://iv.winston.sh"), 33 | url-prefix("https://vid.puffyan.us"), 34 | url-prefix("https://y.com.sb"), 35 | url-prefix("https://yewtu.be"), 36 | url-prefix("https://youtube.076.ne.jp"), 37 | url-prefix("https://yt.artemislena.eu"), 38 | { 39 | /* prettier-ignore */ 40 | @catppuccin: { 41 | @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; } 42 | @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; } 43 | @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; } 44 | @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; } 45 | } 46 | 47 | #catppuccin(@lookup, @accent) { 48 | @rosewater: @catppuccin[@@lookup][@rosewater]; 49 | @flamingo: @catppuccin[@@lookup][@flamingo]; 50 | @pink: @catppuccin[@@lookup][@pink]; 51 | @mauve: @catppuccin[@@lookup][@mauve]; 52 | @red: @catppuccin[@@lookup][@red]; 53 | @maroon: @catppuccin[@@lookup][@maroon]; 54 | @peach: @catppuccin[@@lookup][@peach]; 55 | @yellow: @catppuccin[@@lookup][@yellow]; 56 | @green: @catppuccin[@@lookup][@green]; 57 | @teal: @catppuccin[@@lookup][@teal]; 58 | @sky: @catppuccin[@@lookup][@sky]; 59 | @sapphire: @catppuccin[@@lookup][@sapphire]; 60 | @blue: @catppuccin[@@lookup][@blue]; 61 | @lavender: @catppuccin[@@lookup][@lavender]; 62 | @text: @catppuccin[@@lookup][@text]; 63 | @subtext1: @catppuccin[@@lookup][@subtext1]; 64 | @subtext0: @catppuccin[@@lookup][@subtext0]; 65 | @overlay2: @catppuccin[@@lookup][@overlay2]; 66 | @overlay1: @catppuccin[@@lookup][@overlay1]; 67 | @overlay0: @catppuccin[@@lookup][@overlay0]; 68 | @surface2: @catppuccin[@@lookup][@surface2]; 69 | @surface1: @catppuccin[@@lookup][@surface1]; 70 | @surface0: @catppuccin[@@lookup][@surface0]; 71 | @base: @catppuccin[@@lookup][@base]; 72 | @mantle: @catppuccin[@@lookup][@mantle]; 73 | @crust: @catppuccin[@@lookup][@crust]; 74 | @accentColor: @catppuccin[@@lookup][@@accent]; 75 | @linkColor: @accentColor; 76 | @linkHover: if( 77 | @lookup = latte, 78 | darken(@accentColor, 5%), 79 | lighten(@accentColor, 5%) 80 | ); 81 | 82 | & when (@lookup = latte) { 83 | input[type="checkbox"]:checked { 84 | border: 1px solid @crust; 85 | background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImJsYWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHoiLz48L3N2Zz4K"); 86 | } 87 | } 88 | & when not (@lookup = latte) { 89 | input[type="checkbox"]:checked { 90 | border: 1px solid @crust; 91 | background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IndoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHoiLz48L3N2Zz4="); 92 | } 93 | } 94 | 95 | color-scheme: if(@lookup = latte, light, dark); 96 | background-color: @base !important; 97 | color: @text !important; 98 | 99 | ::placeholder { 100 | color: @subtext0; 101 | } 102 | 103 | &::-webkit-scrollbar { 104 | width: 0.25rem; 105 | background: transparent; 106 | } 107 | 108 | &::-webkit-scrollbar-thumb { 109 | border-radius: 9999px; 110 | background: @accentColor; 111 | } 112 | 113 | #logo .pure-menu-heading { 114 | color: @accentColor; 115 | } 116 | 117 | a, 118 | a:not([data-id]) > .icon, 119 | .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], 120 | .playlist-restricted > ol > li > a { 121 | color: @linkColor !important; 122 | } 123 | 124 | a:hover, 125 | a:active, 126 | summary:hover, 127 | a:not([data-id]):hover > .icon, 128 | .pure-u-lg-1-5 > .h-box > a[href^="/watch?"]:hover, 129 | .playlist-restricted > ol > li > a:hover { 130 | color: @linkHover !important; 131 | } 132 | 133 | button.pure-button-primary, 134 | body a.pure-button-primary { 135 | background-color: @surface1 !important; 136 | color: @text !important; 137 | } 138 | 139 | button.pure-button-primary:hover, 140 | button.pure-button-primary:focus, 141 | body a.pure-button-primary:hover, 142 | body a.pure-button-primary:focus { 143 | background-color: @surface2 !important; 144 | color: @text !important; 145 | } 146 | 147 | #subscribe { 148 | background-color: @linkColor !important; 149 | color: @crust !important; 150 | } 151 | 152 | #subscribe:hover, 153 | #subscribe:focus { 154 | background-color: @linkHover !important; 155 | color: @crust !important; 156 | } 157 | 158 | #filters-box { 159 | background-color: @surface0 !important; 160 | } 161 | 162 | .underlined { 163 | border-color: @overlay1; 164 | } 165 | 166 | .video-js .vjs-control-bar, 167 | .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 168 | background-color: @crust !important; 169 | } 170 | 171 | .video-js .vjs-control-bar, 172 | .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 173 | color: @text !important; 174 | } 175 | 176 | .video-js .vjs-slider:hover, 177 | .video-js button:hover { 178 | color: @accentColor !important; 179 | } 180 | 181 | .video-js .vjs-slider { 182 | background-color: @surface2 !important; 183 | } 184 | 185 | .video-js .vjs-load-progress, 186 | .video-js .vjs-load-progress div { 187 | background-color: @surface2 !important; 188 | } 189 | 190 | .video-js.player-style-invidious .vjs-play-progress { 191 | background-color: @accentColor !important; 192 | } 193 | 194 | .vjs-menu li.vjs-menu-item:focus, 195 | .vjs-menu li.vjs-menu-item:hover { 196 | background-color: @surface0 !important; 197 | color: @text !important; 198 | } 199 | 200 | .vjs-menu li.vjs-selected, 201 | .vjs-menu li.vjs-selected:focus, 202 | .vjs-menu li.vjs-selected:hover { 203 | background-color: @blue !important; 204 | } 205 | 206 | .vjs-menu li.vjs-selected, 207 | .vjs-menu li.vjs-selected:focus, 208 | .vjs-menu li.vjs-selected:hover, 209 | .js-focus-visible .vjs-menu li.vjs-selected:hover { 210 | color: @crust !important; 211 | } 212 | 213 | .vjs-modal-dialog-content { 214 | backdrop-filter: blur(4px); 215 | } 216 | 217 | .vjs-share__title { 218 | color: @text !important; 219 | } 220 | .vjs-share__subtitle { 221 | color: @subtext0 !important; 222 | opacity: 100% !important; 223 | } 224 | .vjs-share__short-link { 225 | color: @text !important; 226 | background: @base !important; 227 | } 228 | .vjs-share__btn { 229 | background: @crust !important; 230 | svg path { 231 | fill: @text !important; 232 | } 233 | } 234 | 235 | #related-videos > .h-box > div:not(#autoplay-controls) { 236 | margin-bottom: 48px !important; 237 | } 238 | 239 | footer, 240 | footer a { 241 | color: @subtext0 !important; 242 | } 243 | 244 | .pure-form-message-inline { 245 | color: @subtext0; 246 | } 247 | 248 | select, 249 | input[type="number"], 250 | input[type="input"], 251 | .pure-input-1 { 252 | &:active { 253 | color: @text !important; 254 | } 255 | color: @subtext0 !important; 256 | background: @surface0 !important; 257 | border-color: @crust !important; 258 | box-shadow: none !important; 259 | } 260 | input[type="checkbox"] { 261 | background-color: @surface2; 262 | border: 1px solid @crust; 263 | height: 1rem; 264 | width: 1rem; 265 | -webkit-appearance: none; 266 | appearance: none; 267 | outline: none; 268 | cursor: pointer; 269 | } 270 | 271 | // video player background 272 | #player-container > .video-js > video, 273 | // placeholder for loading thumbnails 274 | .vjs-poster { 275 | & when (@styleVideoPlayer = 1) { 276 | background-color: @mantle !important; 277 | } 278 | } 279 | } 280 | 281 | // synced colorscheme 282 | @media (prefers-color-scheme: light) { 283 | .no-theme { 284 | #catppuccin(@lightFlavor, @accentColor); 285 | } 286 | } 287 | @media (prefers-color-scheme: dark) { 288 | .no-theme { 289 | #catppuccin(@darkFlavor, @accentColor); 290 | } 291 | } 292 | 293 | // manually set colorscheme 294 | .light-theme { 295 | #catppuccin(@lightFlavor, @accentColor); 296 | } 297 | .dark-theme { 298 | #catppuccin(@darkFlavor, @accentColor); 299 | } 300 | } 301 | 302 | // vim:ft=less 303 | --------------------------------------------------------------------------------