Copyright © 2021-present Catppuccin Org 5 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /dist/catppuccin.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Mastodon Catppuccin 3 | @namespace github.com/catppuccin/mastodon 4 | @homepageURL https://github.com/catppuccin/mastodon 5 | @version 1.1.4 6 | @description Soothing pastel theme for Mastodon 7 | @author Catppuccin 8 | @updateURL https://github.com/catppuccin/mastodon/raw/main/dist/catppuccin.user.css 9 | @preprocessor less 10 | @var select lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] 11 | @var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] 12 | @var select accentColour "Accent" ["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:Grey"] 13 | ==/UserStyle== */ 14 | @-moz-document domain("mstdn.social"), 15 | domain("fosstodon.org"), 16 | domain("tech.lgbt"), 17 | domain("mastodon.social") { 18 | 19 | .theme-mastodon-light, 20 | :root:has(.theme-mastodon-light), 21 | .skin-mastodon-light, 22 | :root:has(.skin-mastodon-light) { 23 | #mastodon(@lightFlavour, @accentColour); 24 | } 25 | 26 | .theme-default, 27 | .theme-contrast, 28 | :root:has(.theme-default), 29 | :root:has(.theme-contrast), 30 | .skin-default, 31 | .skin-contrast, 32 | :root:has(.skin-default), 33 | :root:has(.skin-contrast) { 34 | #mastodon(@darkFlavour, @accentColour); 35 | } 36 | 37 | #mastodon(@lookup, @accent) { 38 | @catppuccin: { 39 | @latte: { 40 | @rosewater: #dc8a78; 41 | @flamingo: #dd7878; 42 | @pink: #ea76cb; 43 | @mauve: #8839ef; 44 | @red: #d20f39; 45 | @maroon: #e64553; 46 | @peach: #fe640b; 47 | @yellow: #df8e1d; 48 | @green: #40a02b; 49 | @teal: #179299; 50 | @sky: #04a5e5; 51 | @sapphire: #209fb5; 52 | @blue: #1e66f5; 53 | @lavender: #7287fd; 54 | @text: #4c4f69; 55 | @subtext1: #5c5f77; 56 | @subtext0: #6c6f85; 57 | @overlay2: #7c7f93; 58 | @overlay1: #8c8fa1; 59 | @overlay0: #9ca0b0; 60 | @surface2: #acb0be; 61 | @surface1: #bcc0cc; 62 | @surface0: #ccd0da; 63 | @base: #eff1f5; 64 | @mantle: #e6e9ef; 65 | @crust: #dce0e8; 66 | } 67 | @frappe: { 68 | @rosewater: #f2d5cf; 69 | @flamingo: #eebebe; 70 | @pink: #f4b8e4; 71 | @mauve: #ca9ee6; 72 | @red: #e78284; 73 | @maroon: #ea999c; 74 | @peach: #ef9f76; 75 | @yellow: #e5c890; 76 | @green: #a6d189; 77 | @teal: #81c8be; 78 | @sky: #99d1db; 79 | @sapphire: #85c1dc; 80 | @blue: #8caaee; 81 | @lavender: #babbf1; 82 | @text: #c6d0f5; 83 | @subtext1: #b5bfe2; 84 | @subtext0: #a5adce; 85 | @overlay2: #949cbb; 86 | @overlay1: #838ba7; 87 | @overlay0: #737994; 88 | @surface2: #626880; 89 | @surface1: #51576d; 90 | @surface0: #414559; 91 | @base: #303446; 92 | @mantle: #292c3c; 93 | @crust: #232634; 94 | } 95 | @macchiato: { 96 | @rosewater: #f4dbd6; 97 | @flamingo: #f0c6c6; 98 | @pink: #f5bde6; 99 | @mauve: #c6a0f6; 100 | @red: #ed8796; 101 | @maroon: #ee99a0; 102 | @peach: #f5a97f; 103 | @yellow: #eed49f; 104 | @green: #a6da95; 105 | @teal: #8bd5ca; 106 | @sky: #91d7e3; 107 | @sapphire: #7dc4e4; 108 | @blue: #8aadf4; 109 | @lavender: #b7bdf8; 110 | @text: #cad3f5; 111 | @subtext1: #b8c0e0; 112 | @subtext0: #a5adcb; 113 | @overlay2: #939ab7; 114 | @overlay1: #8087a2; 115 | @overlay0: #6e738d; 116 | @surface2: #5b6078; 117 | @surface1: #494d64; 118 | @surface0: #363a4f; 119 | @base: #24273a; 120 | @mantle: #1e2030; 121 | @crust: #181926; 122 | } 123 | @mocha: { 124 | @rosewater: #f5e0dc; 125 | @flamingo: #f2cdcd; 126 | @pink: #f5c2e7; 127 | @mauve: #cba6f7; 128 | @red: #f38ba8; 129 | @maroon: #eba0ac; 130 | @peach: #fab387; 131 | @yellow: #f9e2af; 132 | @green: #a6e3a1; 133 | @teal: #94e2d5; 134 | @sky: #89dceb; 135 | @sapphire: #74c7ec; 136 | @blue: #89b4fa; 137 | @lavender: #b4befe; 138 | @text: #cdd6f4; 139 | @subtext1: #bac2de; 140 | @subtext0: #a6adc8; 141 | @overlay2: #9399b2; 142 | @overlay1: #7f849c; 143 | @overlay0: #6c7086; 144 | @surface2: #585b70; 145 | @surface1: #45475a; 146 | @surface0: #313244; 147 | @base: #1e1e2e; 148 | @mantle: #181825; 149 | @crust: #11111b; 150 | } 151 | } 152 | 153 | @rosewater: @catppuccin[@@lookup][@rosewater]; 154 | @flamingo: @catppuccin[@@lookup][@flamingo]; 155 | @pink: @catppuccin[@@lookup][@pink]; 156 | @mauve: @catppuccin[@@lookup][@mauve]; 157 | @red: @catppuccin[@@lookup][@red]; 158 | @maroon: @catppuccin[@@lookup][@maroon]; 159 | @peach: @catppuccin[@@lookup][@peach]; 160 | @yellow: @catppuccin[@@lookup][@yellow]; 161 | @green: @catppuccin[@@lookup][@green]; 162 | @teal: @catppuccin[@@lookup][@teal]; 163 | @sky: @catppuccin[@@lookup][@sky]; 164 | @sapphire: @catppuccin[@@lookup][@sapphire]; 165 | @blue: @catppuccin[@@lookup][@blue]; 166 | @lavender: @catppuccin[@@lookup][@lavender]; 167 | @text: @catppuccin[@@lookup][@text]; 168 | @subtext1: @catppuccin[@@lookup][@subtext1]; 169 | @subtext0: @catppuccin[@@lookup][@subtext0]; 170 | @overlay2: @catppuccin[@@lookup][@overlay2]; 171 | @overlay1: @catppuccin[@@lookup][@overlay1]; 172 | @overlay0: @catppuccin[@@lookup][@overlay0]; 173 | @surface2: @catppuccin[@@lookup][@surface2]; 174 | @surface1: @catppuccin[@@lookup][@surface1]; 175 | @surface0: @catppuccin[@@lookup][@surface0]; 176 | @base: @catppuccin[@@lookup][@base]; 177 | @mantle: @catppuccin[@@lookup][@mantle]; 178 | @crust: @catppuccin[@@lookup][@crust]; 179 | @accent-colour: @catppuccin[@@lookup][@@accent]; 180 | 181 | body, 182 | .tabs-bar__wrapper, 183 | .admin-wrapper .sidebar-wrapper__inner { 184 | background: @crust; 185 | color: @text; 186 | } 187 | 188 | .account__header__bio .account__header__fields dt { 189 | background: transparent; 190 | } 191 | 192 | .search-popout, 193 | .search-popout em, 194 | .dismissable-banner__message, 195 | .account__header__bio .account__header__fields dt, 196 | .account__section-headline a.active, 197 | .account__section-headline button.active, 198 | .notification__filter-bar a.active, 199 | .notification__filter-bar button.active, 200 | .account__header__bio .account__header__content, 201 | .navigation-bar, 202 | .column-link__badge, 203 | .column-subheading, 204 | .account__display-name strong, 205 | .status__display-name strong, 206 | .notification__message, 207 | .public-layout .public-account-bio .account__header__content, 208 | .reply-indicator__content, 209 | .status__content, 210 | .card__bar .display-name strong { 211 | color: @text; 212 | } 213 | 214 | 215 | .search-popout span, 216 | .link-footer p, 217 | .link-footer p a { 218 | color: @subtext1; 219 | } 220 | 221 | .account__header__tabs__name h1 small, 222 | .account__header__bio .account__header__fields dd, 223 | .display-name__account, 224 | .status__relative-time, 225 | .empty-column-indicator, 226 | .follow_requests-unlocked_explanation, 227 | .account .account__display-name, 228 | .label_input .search__input, 229 | .search__input:focus, 230 | .account__header__fields dt { 231 | color: @subtext0 232 | } 233 | 234 | .compose-panel hr, 235 | .navigation-panel hr { 236 | border-top-color: @subtext0 237 | } 238 | 239 | .trends__item, 240 | .status, 241 | .getting-started__trends h4, 242 | .trends__item__name span, 243 | .story { 244 | border-color: @subtext0 245 | } 246 | 247 | 248 | .account__header__tabs__name h1, 249 | .account__header__content a, 250 | .account__header__bio .account__header__fields a, 251 | .empty-column-indicator a, 252 | .follow_requests-unlocked_explanation a, 253 | .column-back-button, 254 | .icon-button.inverted, 255 | .text-icon-button, 256 | .icon-button.active, 257 | .public-layout .public-account-bio .account__header__fields a, 258 | .column-header__back-button, 259 | .navigation-bar strong, 260 | .reply-indicator__content a.unhandled-link, 261 | .status__content a.unhandled-link { 262 | color: @accent-colour; 263 | } 264 | 265 | .icon-button, 266 | .notification__message .fa { 267 | color: @surface2; 268 | } 269 | 270 | 271 | .icon-button:active, 272 | .icon-button:focus, 273 | .icon-button:hover, 274 | .text-icon-button:active, 275 | .text-icon-button:focus, 276 | .text-icon-button:hover, 277 | .icon-button.inverted:active, 278 | .icon-button.inverted:focus, 279 | .icon-button.inverted:hover, 280 | .public-layout .public-account-bio .account__header__fields a:hover { 281 | color: @accent-colour; 282 | } 283 | 284 | 285 | .ui__header, 286 | .column-header, 287 | .column-header__button, 288 | .column-header__back-button, 289 | .column-back-button, 290 | .drawer__header, 291 | .account__section-headline, 292 | .notification__filter-bar, 293 | .account__section-headline button, 294 | .notification__filter-bar button, 295 | .account__header, 296 | .search__input, 297 | .search__input:focus, 298 | .column-link__badge, 299 | .column-subheading, 300 | .public-layout .header, 301 | .public-layout .public-account-header__bar::before, 302 | .account__header__fields, 303 | .account__header__fields dt, 304 | .account__header__fields dd:not(.account__header__bio .account__header__fields dd), 305 | .focusable:focus, 306 | .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected { 307 | border-color: @mantle; 308 | background: @surface1; 309 | } 310 | 311 | .admin-wrapper .sidebar ul a:hover, 312 | .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { 313 | background: @surface0; 314 | } 315 | 316 | 317 | .dismissable-banner { 318 | border-color: @surface1; 319 | background: @base; 320 | } 321 | 322 | .theme-mastodon-light .account__header__bar, 323 | .theme-mastodon-light .column-header__back-button, 324 | .account__header__bio .account__header__fields dl, 325 | .account__header__bio .account__header__fields, 326 | .empty-column-indicator, 327 | .column > .scrollable, 328 | .nothing-here, 329 | .public-layout .public-account-bio, 330 | .hero-widget__text, 331 | body.admin, 332 | .admin-wrapper .sidebar ul a.selected, 333 | .admin-wrapper .sidebar ul ul { 334 | border-color: @mantle; 335 | background: @base; 336 | } 337 | 338 | 339 | .public-layout .public-account-header__tabs__tabs .counter::after { 340 | border-color: @accent-colour; 341 | } 342 | 343 | .public-layout .public-account-header__tabs__tabs .counter.active::after { 344 | border-color: @accent-colour; 345 | } 346 | 347 | .account, 348 | .load-gap { 349 | border-color: @mantle; 350 | } 351 | 352 | .account__section-headline a.active::after { 353 | border-color: transparent transparent @base; 354 | } 355 | 356 | .account__section-headline a.active::before, 357 | .account__section-headline button.active::after, 358 | .account__section-headline button.active::before, 359 | .notification__filter-bar a.active::after, 360 | .notification__filter-bar a.active::before, 361 | .notification__filter-bar button.active::after, 362 | .notification__filter-bar button.active::before { 363 | border-color: transparent transparent @mantle; 364 | } 365 | 366 | 367 | .search-popout, 368 | .drawer__header a:hover, 369 | .column-header__button:hover, 370 | .account__section-headline button:hover, 371 | .notification__filter-bar button:hover, 372 | .account__section-headline a:hover { 373 | background: @surface2; 374 | } 375 | 376 | .column-link .active, 377 | .column-link--transparent.active, 378 | .column-link--transparent:focus, 379 | .column-link:focus { 380 | color: @accent-colour; 381 | } 382 | 383 | .column-link--transparent:hover, 384 | .column-link:hover { 385 | color: @accent-colour; 386 | } 387 | 388 | .button.button-tertiary:focus, 389 | .button.button-tertiary:hover, 390 | .button.button-tertiary:active { 391 | color: @base; 392 | } 393 | 394 | .button.button-tertiary { 395 | border-color: @accent-colour; 396 | } 397 | 398 | .button, 399 | .button.button-tertiary, 400 | .button.logo-button { 401 | background: @accent-colour; 402 | color: @base; 403 | } 404 | 405 | .button.logo-button svg { 406 | fill: currentColor; 407 | } 408 | 409 | 410 | .public-layout .header .nav-button { 411 | background-color: @surface1; 412 | } 413 | 414 | .public-layout .header .nav-button:hover { 415 | background-color: @surface2; 416 | } 417 | 418 | .button.button-secondary:active, 419 | .button.button-secondary:focus, 420 | .button.button-secondary:hover { 421 | border-color: @accent-colour; 422 | color: @base; 423 | transition: .4s; 424 | } 425 | 426 | .button:active, 427 | .button:focus, 428 | .button:hover, 429 | .button.button-tertiary:active, 430 | .button.button-tertiary:focus, 431 | .button.button-tertiary:hover, 432 | .button.logo-button:active, 433 | .button.logo-button:focus, 434 | .button.logo-button:hover { 435 | background: @accent-colour; 436 | } 437 | 438 | .drawer__inner, 439 | .drawer__inner__mastodon { 440 | background-color: @base; 441 | } 442 | 443 | .compose-form .compose-form__modifiers, 444 | .compose-form .autosuggest-textarea__textarea, 445 | .compose-form .spoiler-input__input { 446 | background: @surface1; 447 | color: @text; 448 | } 449 | 450 | .compose-form .autosuggest-textarea__textarea::placeholder { 451 | color: @subtext0 452 | } 453 | 454 | .compose-form .compose-form__buttons-wrapper { 455 | background: @surface0; 456 | } 457 | 458 | .load-more:hover { 459 | background-color: @mantle; 460 | } 461 | 462 | .character-counter { 463 | color: @subtext0 464 | } 465 | 466 | .public-layout .header, 467 | .hero-widget, 468 | .public-layout .public-account-header, 469 | .public-layout .public-account-bio, 470 | .nothing-here { 471 | box-shadow: none; 472 | } 473 | 474 | .dropdown-menu__arrow:before, 475 | .dropdown-menu__item a, 476 | .dropdown-menu__item button, 477 | .dropdown-menu__container__list, 478 | .dropdown-menu.bottom { 479 | background: @surface0; 480 | color: @text; 481 | } 482 | 483 | .dropdown-menu__item a:hover, 484 | .dropdown-menu__item button:hover { 485 | background: @surface1; 486 | } 487 | 488 | .input-copy, 489 | .simple_form input[type=text], 490 | .simple_form textarea, 491 | .simple_form .block-button, 492 | .simple_form .button, 493 | .simple_form button { 494 | background: @mantle; 495 | color: @text; 496 | } 497 | 498 | .simple_form .block-button:hover, 499 | .simple_form .button:hover, 500 | .simple_form button:hover { 501 | background: @surface0; 502 | } 503 | 504 | .simple_form .input.with_label .label_input > label, 505 | .simple_form select, 506 | .accounts-table__count, 507 | .simple_form textarea { 508 | color: @text; 509 | } 510 | 511 | .simple_form textarea, 512 | .simple_form input[type=password], 513 | .simple_form input[type=number], 514 | .simple_form input[type=text] { 515 | border: 1px solid @crust; 516 | } 517 | 518 | .simple_form input[type=email]:required:valid { 519 | border: 1px solid @green 520 | } 521 | 522 | .simple_form input[type=password], 523 | .simple_form input[type=number], 524 | .simple_form input[type=email]:required:valid, 525 | .simple_form input[type=password]:required:invalid:not(:placeholder-shown) { 526 | color: @text; 527 | background: @mantle; 528 | } 529 | 530 | .simple_form input[type=password]:required:invalid:not(:placeholder-shown) { 531 | border: 1px solid @red; 532 | } 533 | 534 | .simple_form select { 535 | background: @mantle url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px; 536 | border: 1px solid @crust; 537 | } 538 | 539 | .simple_form input[type=datetime-local]:active, 540 | .simple_form input[type=datetime-local]:focus, 541 | .simple_form input[type=email]:active, 542 | .simple_form input[type=email]:focus, 543 | .simple_form input[type=number]:active, 544 | .simple_form input[type=number]:focus, 545 | .simple_form input[type=password]:active, 546 | .simple_form input[type=password]:focus, 547 | .simple_form input[type=text]:active, 548 | .simple_form input[type=text]:focus, 549 | .simple_form input[type=url]:active, 550 | .simple_form input[type=url]:focus, 551 | .simple_form textarea:active, 552 | .simple_form textarea:focus { 553 | border-color: @accent-colour !important; 554 | background: @mantle !important; 555 | color: @text !important; 556 | } 557 | 558 | .table > thead > tr > th { 559 | border-color: @accent-colour !important; 560 | } 561 | 562 | .batch-table__toolbar, 563 | .table > thead > tr > th { 564 | background: @surface0 !important; 565 | color: @text !important; 566 | } 567 | 568 | .simple_form input[type=datetime-local]:hover, 569 | .simple_form input[type=email]:hover, 570 | .simple_form input[type=number]:hover, 571 | .simple_form input[type=password]:hover, 572 | .simple_form input[type=text]:hover, 573 | .simple_form input[type=url]:hover, 574 | .simple_form textarea:hover { 575 | background: @mantle !important; 576 | border-color: @accent-colour !important; 577 | transition: 0.4s; 578 | } 579 | 580 | .batch-table__row { 581 | background: @surface1; 582 | } 583 | 584 | .batch-table__row:hover, 585 | .batch-table__row:nth-child(2n):hover { 586 | background: @surface2; 587 | } 588 | 589 | .batch-table__row:nth-child(2n), 590 | .table > tbody > tr > td { 591 | background: @surface0; 592 | } 593 | 594 | .table > thead > tr > th { 595 | border-bottom: 2px solid @surface0; 596 | } 597 | 598 | .positive-hint { 599 | color: @green !important; 600 | } 601 | 602 | .card__bar { 603 | background: @surface0; 604 | } 605 | } 606 | } 607 | --------------------------------------------------------------------------------