catppuccin-latte-masto-modern.user.css
edited
1/* ==UserStyle==
2@name Catppuccin Latte Mastodon-Modern (for chuckya/glitch-soc)
3@namespace github.com/openstyles/stylus
4@version 1.0.0
5@description Catppuccin Latte color scheme for Mastodon-Modern userstyle/flavour by Freeplay
6@author Niko @gayfamicom@merping.synth.download
7==/UserStyle== */
8
9@-moz-document domain("wetdry.world"), domain("fuzzies.wtf"), domain("merping.synth.download") {
10 :root {
11 --background-color: hsl(220deg, 21%, 89%);
12 --surface-variant-background-color: hsl(220deg, 23%, 95%);
13 --accent: 136, 57, 239;
14 --rich-text-text-color: #7287fd;
15 --rich-text-decorations-color: var(--rich-text-text-color);
16 --rich-text-container-color: #dce0e8;
17 --text: #4c4f69;
18 --sub-text: #5c5f77;
19 --sub-text2: #6c6f85;
20 --elevated-tint: #e6e9ef;
21 --nested-card-background: rgba(var(--accent), 0.05);
22 --border-color: #ccd0da;
23 --surface-background-color: var(--elevated-tint);
24 --dropdown-background-color: var(--elevated-tint);
25 --elevated-color: #eff1f5;
26 --modal-background-color: var(--elevated-tint);
27 --modal-border-color: var(--border-color);
28 --hover-color: rgba(var(--accent), 0.05);
29 }
30 body {
31 color: var(--text);
32 }
33 .glitch.local-settings {
34 background: var(--background-color);
35 color: var(--text);
36 }
37 .glitch.local-settings__navigation__item.close, .glitch.local-settings__navigation__item.close:hover {
38 background: #f38ba8;
39 color: var(--background-color);
40 }
41 .glitch.local-settings__navigation__item.active {
42 background: rgb(var(--accent));
43 color: var(--background-color);
44 }
45 .glitch.local-settings span.hint {
46 color: var(--sub-text2);
47 }
48 .column-link.active {
49 color: rgb(var(--accent));
50 }
51 .status__content a.unhandled-link, .edit-indicator__content a.unhandled-link, .reply-indicator__content a.unhandled-link {
52 color: rgb(var(--accent));
53 }
54 .status__content__read-more-button, .status__content__translate-button {
55 color: rgb(var(--accent));
56 }
57 .status__content a, .edit-indicator__content a, .reply-indicator__content a {
58 color: rgb(var(--accent));
59 }
60 .status__content, .edit-indicator__content, .reply-indicator__content {
61 color: var(--text);
62 }
63 .status__content__text pre, .status__content__text blockquote, .e-content pre, .e-content blockquote, .edit-indicator__content pre, .edit-indicator__content blockquote, .reply-indicator__content pre, .reply-indicator__content blockquote {
64 margin-bottom: 12px;
65 }
66 .button {
67 background-color: rgb(var(--accent));
68 color: var(--background-color);
69 }
70 .account__header__tabs__name h1 small {
71 color: var(--sub-text);
72 }
73 .account__disclaimer {
74 color: var(--sub-text2);
75 }
76 .account__header__bio .account__header__fields dd {
77 color: var(--sub-text2);
78 }
79 .account__header__bio .account__header__fields .verified a {
80 color: #40a02b;
81 }
82 .account__action-bar__tab strong {
83 color: var(--text);
84 }
85 .account__action-bar__tab>span {
86 color: var(--sub-text2);
87 }
88 .account__header__bio .account__header__content {
89 color: var(--text);
90 }
91 .notification__filter-bar button, .notification__filter-bar a, .account__section-headline button, .account__section-headline a {
92 color: var(--sub-text2);
93 }
94 .notification__filter-bar button.active, .notification__filter-bar a.active, .account__section-headline button.active, .account__section-headline a.active {
95 color: var(--text);
96 background: rgba(var(--accent), 0.05);
97 }
98 .hicolor-privacy-icons .status__visibility-icon.icon-lock, .hicolor-privacy-icons .privacy-dropdown__option .icon-lock {
99 color: #df8e1d;
100 }
101 .hicolor-privacy-icons .status__visibility-icon.icon-unlock, .hicolor-privacy-icons .privacy-dropdown__option .icon-unlock {
102 color: #40a02b;
103 }
104 .hicolor-privacy-icons .status__visibility-icon.icon-globe, .hicolor-privacy-icons .privacy-dropdown__option .icon-globe {
105 color: #04a5e5;
106 }
107 .featured-carousel__header {
108 color: var(--text);
109 }
110 .icon-button {
111 color: var(--sub-text2);
112 }
113 .status__relative-time {
114 color: var(--sub-text2);
115 }
116 .icon-button.active {
117 color: rgb(var(--accent));
118 }
119 .icon-button.star-icon.active {
120 color: rgb(var(--accent));
121 }
122 .column-link {
123 color: var(--sub-text);
124 }
125 .column-header__title {
126 color: var(--text);
127 }
128 .account__header__tabs__name h1 {
129 color: var(--text);
130 }
131 .compose-form__actions .icon-button {
132 color: rgb(var(--accent));
133 }
134 .compose-form__actions .icon-button:hover, .compose-form__actions .icon-button:focus, .compose-form__actions .icon-button:active {
135 color: var(--background-color);
136 background-color: rgb(var(--accent));
137 }
138 .compose-form__actions .icon-button.active {
139 color: var(--background-color);
140 background-color: rgb(var(--accent));
141 }
142 .privacy-dropdown__option:focus, .privacy-dropdown__option.active {
143 color: var(--background-color);
144 background-color: rgb(var(--accent));
145 }
146 .privacy-dropdown__option:focus .privacy-dropdown__option__content, .privacy-dropdown__option:focus .privacy-dropdown__option__content strong, .privacy-dropdown__option:focus .privacy-dropdown__option__additional, .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option.active .privacy-dropdown__option__additional {
147 color: var(--background-color);
148 }
149 .compose-form .spoiler-input__input {
150 background: rgba(var(--accent), .05);
151 color: rgba(var(--accent));
152 }
153 .dropdown-button {
154 color: rgb(var(--accent));
155 background: var(--rich-text-container-color);
156 }
157 .character-counter {
158 color: var(--sub-text);
159 }
160 .button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover {
161 color: rgba(var(--accent), 0.5);
162 border: 1px solid rgba(var(--accent), 0.5);
163 }
164 .button.button-secondary {
165 color: rgb(var(--accent));
166 border: 1px solid rgb(var(--accent));
167 }
168 .account__domain-pill {
169 color: rgb(var(--accent));
170 background: rgba(var(--accent), 0.2);
171 }
172 .account__action-bar {
173 border-top: 1px solid var(--sub-text2);
174 border-bottom: 1px solid var(--sub-text2);
175 }
176 .account__header__bio .account__header__fields a {
177 color: rgb(var(--accent));
178 }
179 .account__action-bar__tab.active {
180 border-bottom: 4px solid rgb(var(--accent));
181 background: rgba(var(--accent), 0.05);
182 }
183 .column-back-button {
184 color: rgb(var(--accent));
185 }
186 .icon-with-badge__badge {
187 background: rgb(var(--accent));
188 color: var(--background-color);
189 }
190 .notification-group--unread:before, .notification-ungrouped--unread:before {
191 -webkit-inline-start: 4px solid rgb(var(--accent));
192 border-inline-start: 4px solid rgb(var(--accent));
193 }
194 .notification-group--favourite .notification-group__icon {
195 color: rgb(var(--accent));
196 }
197 .notification-group--reaction .notification-group__icon {
198 color: rgb(var(--accent));
199 }
200 .notification-group--follow .notification-group__icon, .notification-group--follow-request .notification-group__icon {
201 color: rgb(var(--accent));
202 }
203 .notification-group__main__header__label bdi {
204 color: var(--text);
205 }
206 .notification-group__main__header__label {
207 color: var(--sub-text2);
208 }
209 .notification__filter-bar button.active:before, .notification__filter-bar a.active:before, .account__section-headline button.active:before, .account__section-headline a.active:before {
210 background: rgb(var(--accent));
211 }
212 .hashtag-bar a, .hashtag-bar button {
213 color: rgb(var(--accent));
214 }
215 .link-button {
216 color: rgb(var(--accent));
217 }
218 .button:active, .button:focus, .button:hover {
219 background-color: rgba(var(--accent), 0.75);
220 }
221 .trends__item__name a {
222 color: var(--sub-text);
223 }
224 .trends__item__name {
225 color var(--sub-text2);
226 }
227 .getting-started__trends h4 a {
228 color: var(--sub-text);
229 }
230 .simple_form input[type=text], .simple_form input[type=number], .simple_form input[type=email], .simple_form input[type=password], .simple_form input[type=url], .simple_form input[type=datetime-local], .simple_form textarea {
231 background-color: var(--background-color);
232 color: var(--text);
233 }
234 .simple_form .input.with_label .label_input>label {
235 color: var(--text);
236 }
237 .admin-wrapper .content h4 {
238 color: var(--sub-text);
239 }
240 .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
241 color: rgb(var(--accent));
242 }
243 .admin-wrapper .sidebar ul a {
244 color: var(--sub-text2);
245 }
246 .simple_form p.hint {
247 color: var(--sub-text2);
248 }
249 .simple_form select {
250 background: var(--background-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342425C'/></svg>") no-repeat right 8px center/auto 14px;
251 }
252 .information-badge, .simple_form .recommended, .simple_form .not_recommended {
253 background-color: rgba(var(--accent), 0.1);
254 border: rgba(var(--accent). 0.5);
255 }
256 .simple_form .glitch_only {
257 color: #f38ba8;
258 background-color: #f38ba829
259 }
260 .simple_form .chuckya_only {
261 color: #b4befe;
262 background-color: #b4befe29;
263 }
264 .simple_form button:not(.button):not(.link-button):not(.help-button) {
265 background: rgb(var(--accent));
266 color: var(--background-color);
267 }
268 .simple_form button:not(.button):not(.link-button):not(.help-button):active, .simple_form button:not(.button):not(.link-button):not(.help-button):focus, .simple_form button:not(.button):not(.link-button):not(.help-button):hover {
269 background: rgba(var(--accent), 0.5)
270 }
271 .flash-message.notice {
272 color: #40a02b;
273 background: #40a02b29;
274 }
275 .simple_form .input.radio_buttons .radio label {
276 color: var(--sub-text);
277 }
278 .simple_form .input.with_floating_label .label_input>label {
279 color: var(--text);
280 }
281 .admin-wrapper .sidebar ul a:hover {
282 color: var(--text);
283 }
284 .status__display-name .display-name strong, .account__display-name .display-name strong {
285 color: var(--text);
286 }
287 .status__display-name {
288 color: var(--sub-text2);
289 }
290 .account__header__fields .verified {
291 background: #40a02b29;
292 }
293 .prose a {
294 color: rgb(var(--accent));
295 }
296 .about__section__title {
297 color: rgb(var(--accent));
298 }
299 .rules-list__text {
300 color: var(--text);
301 }
302 .rules-list__hint {
303 color: var(--sub-text2)
304 }
305 .rules-languages>select {
306 background: var(--background-color);
307 color: var(--sub-text);
308 }
309 .rules-languages>label {
310 color: var(--text);
311 }
312 .about__domain-blocks__domain h6, .about__bubble-domains__domain h6 {
313 color: var(--text);
314 }
315 .about__domain-blocks__domain:nth-child(2n), .about__bubble-domains__domain:nth-child(2n) {
316 background: var(--elevated-color);
317 }
318 .about__domain-blocks__domain, .about__bubble-domains__domain {
319 color: var(--sub-text2);
320 }
321 .column-header__wrapper.active {
322 box-shadow: 0 1px rgba(var(--accent), .3);
323 }
324 .column-header__wrapper.active:before {
325 background: radial-gradient(ellipse,rgba(var(--accent),.23),rgba(var(--accent),0) 60%);
326 }
327 .column-header.active .column-header__icon {
328 color: rgb(var(--accent));
329 text-shadow: 0 0 10px rgba(var(--text),.4);
330 }
331 .column-header__collapsible {
332 color: var(--sub-text2);
333 }
334 .column-settings h3 {
335 color: var(--text);
336 }
337 input.glitch-setting-text {
338 border-bottom: 2px solid #313244;
339 }
340 input.glitch-setting-text:focus, input.glitch-setting-text:active {
341 border-bottom-color: rgb(var(--accent));
342 }
343 .emoji-mart-anchor {
344 color: var(--sub-text2);
345 }
346 .emoji-mart-bar:first-child {
347 background: var(--rich-text-container-color);
348 }
349 .emoji-mart-search input {
350 background: var(--rich-text-container-color);
351 }
352 .attachment-list__list a {
353 color: var(--sub-text2)
354 }
355 .button.button-tertiary {
356 color: rgb(var(--accent));
357 border: 1px solid rgb(var(--accent));
358 }
359 .button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover {
360 color: var(--background-color);
361 background: rgba(var(--accent),0.5);
362 }
363 .status__content a.unhandled-link .link-origin-tag, .edit-indicator__content a.unhandled-link .link-origin-tag, .reply-indicator__content a.unhandled-link .link-origin-tag {
364 color: #f9e2af;
365 }
366 .dropdown-button.active {
367 background: rgb(var(--accent));
368 border-color: rgb(var(--accent));
369 color: var(--background-color);
370 }
371 .language-dropdown__dropdown__results__item:focus, .language-dropdown__dropdown__results__item.active {
372 background: rgb(var(--accent));
373 color: var(--background-color);
374 }
375 .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
376 color: var(--background-color);
377 }
378 .language-dropdown__dropdown__results__item__common-name {
379 color: var(--sub-text2);
380 }
381 .language-dropdown__dropdown__results__item {
382 color: var(--text);
383 }
384 .language-dropdown__dropdown .emoji-mart-search input {
385 color: var(--sub-text2);
386 background: var(--background-color);
387 }
388 .privacy-dropdown__option {
389 color: var(--text);
390 }
391 .privacy-dropdown__option__content {
392 color: var(--sub-text2);
393 }
394 .privacy-dropdown__option__content strong {
395 color: var(--text);
396 }
397 .react-toggle--checked .react-toggle-track {
398 background-color: rgb(var(--accent));
399 }
400 .react-toggle-thumb {
401 background-color: var(--background-color);
402 }
403 .status__prepend {
404 color: var(--sub-text2);
405 }
406 .poll__chart.leading {
407 background: rgb(var(--accent));
408 }
409 .poll__chart {
410 background: var(--sub-text2);
411 }
412 .compose-form__actions .icon-button.disabled {
413 color: rgb(var(--accent),0.5)
414 }
415 .dropdown-button[disabled] {
416 color: rgb(var(--accent),0.5);
417 border-color: rgb(var(--accent),0.5);
418 }
419 .edit-indicator {
420 background: var(--rich-text-container-color);
421 border-bottom: .5px solid var(--border-color)
422 }
423 .edit-indicator__header {
424 color: var(--sub-text);
425 }
426 .detailed-status__display-name {
427 color: var(--sub-text2);
428 }
429 .detailed-status__display-name strong {
430 color: var(--text);
431 }
432 .load-more .loading-indicator .circular-progress {
433 color: rgb(var(--accent), 0.5)
434 }
435 .icon-button:hover, .icon-button:active, .icon-button:focus-visible {
436 color: rgb(var(--accent));
437 background-color: rgba(var(--accent), .15);
438 }
439 .help-button {
440 color: var(--background-color);
441 background: rgb(var(--accent));
442 }
443 .help-button:active, .help-button:focus, .help-button:hover {
444 background: rgba(var(--accent), 0.5);
445 }
446 .compose-form__sensitive-button input[type=checkbox]:checked {
447 background-color: rgb(var(--accent));
448 border-color: rgb(var(--accent));
449 }
450 .compose-form__sensitive-button input[type=checkbox]:active, .compose-form__sensitive-button input[type=checkbox]:focus, .compose-form__sensitive-button input[type=checkbox]:hover {
451 border-color: rgb(var(--accent));
452 color: rgb(var(--accent));
453 }
454 .compose-form__sensitive-button input[type=checkbox] {
455 border: 1px solid var(--sub-text2);
456 }
457 .icon-button.active:hover {
458 color: rgb(var(--accent));
459 background: rgba(var(--accent), 0.15)
460 }
461 .hashtag-bar a:after {
462 background-color: rgba(var(--accent), 0.15);
463 }
464 .hashtag-bar .link-button {
465 color: var(--sub-text2);
466 }
467 .account-role {
468 color: rgb(var(--accent));
469 border: 1px solid rgb(var(--accent));
470 }
471 a.status-card:hover .status-card__title, a.status-card:hover .status-card__host, a.status-card:hover .status-card__author, a.status-card:hover .status-card__description, a.status-card:focus .status-card__title, a.status-card:focus .status-card__host, a.status-card:focus .status-card__author, a.status-card:focus .status-card__description, a.status-card:active .status-card__title, a.status-card:active .status-card__host, a.status-card:active .status-card__author, a.status-card:active .status-card__description {
472 color: rgb(var(--accent));
473 }
474 .status-card {
475 color: var(--sub-text2);
476 }
477 .status-card__title {
478 color: var(--text);
479 }
480 .search__popout__menu__item mark {
481 color: var(--text);
482 }
483 .search__popout__menu__item:hover mark {
484 color: var(--background-color);
485 }
486 .search__popout__menu__item {
487 color: var(--sub-text2);
488 }
489 .search__popout h4 {
490 color: var(--sub-text2);
491 }
492 .search__popout__menu__item:hover {
493 background: rgb(var(--accent));
494 color: var(--background-color);
495 }
496 .search__popout .icon-button {
497 color: var(--sub-text2);
498 }
499 .search__popout .icon-button:hover {
500 color: var(--background-color);
501 }
502 .empty-column-indicator, .follow_requests-unlocked_explanation {
503 color: var(--sub-text2);
504 }
505 .column-link:hover, .column-link:focus, .column-link:active {
506 color: rgb(var(--accent));
507 }
508 .column-link:before {
509 background-color: rgba(var(--accent),0.15);
510 }
511 .trends__item__sparkline path:last-child {
512 stroke: rgb(var(--accent)) !important;
513 }
514 .trends__item__sparkline path:first-child {
515 fill: rgba(var(--accent), 0.25) !important;
516 }
517 .account__domain-pill.active {
518 background: rgb(var(--accent));
519 color: var(--background-color);
520 }
521 .account__domain-pill__popout__header__icon {
522 background: rgb(var(--accent));
523 color: var(--background-color);
524 }
525 .account__domain-pill__popout__header h3 {
526 color: var(--text);
527 }
528 .account__domain-pill__popout__handle {
529 background: rgba(var(--accent),0.15);
530 color: rgb(var(--accent));
531 }
532 .account__domain-pill__popout__parts__icon {
533 color: rgb(var(--accent));
534 }
535 .account__domain-pill__popout__parts h6 {
536 color: var(--text);
537 }
538 .account__domain-pill__popout {
539 color: var(--sub-text2);
540 }
541 .emoji-mart-anchor-bar {
542 background-color: rgb(var(--accent));
543 }
544 .emoji-mart-anchor-selected:hover {
545 color: rgb(var(--accent));
546 }
547 .emoji-mart-anchor:hover {
548 color: rgb(var(--accent));
549 }
550 .compose-form__poll__select__value {
551 color: rgb(var(--accent));
552 }
553 .compose-form__poll__select__label {
554 color: var(--sub-text);
555 }
556 .poll__option input[type=text] {
557 background: var(--background-color);
558 color: var(--sub-text);
559 }
560 .poll__option input[type=text]:focus {
561 border-color: rgb(var(--accent))
562 }
563 .poll__input {
564 border: 1px soild #585b70
565 }
566 .compose-form__highlightable.active {
567 border-color: rgb(var(--accent))
568 }
569 .admin-wrapper .content__heading__tabs a.selected {
570 background: rgb(var(--accent));
571 color: var(--background-color);
572 }
573 .admin-wrapper .content__heading__tabs a {
574 color: var(--sub-text2);
575 }
576 .doodle-modal__action-bar, .boost-modal__action-bar {
577 background: var(--background-color);
578 }
579 .doodle-modal__action-bar>div, .boost-modal__action-bar>div {
580 color: var(--text);
581 }
582 .doodle-modal__action-bar .doodle-palette {
583 background: var(--background-color);
584 }
585 .doodle-modal__container canvas {
586 border: 5px solid var(--elevated-tint);
587 }
588 .media-modal__overlay .picture-in-picture__footer .icon-button.active {
589 color: rgb(var(--accent));
590 }
591 .media-modal__overlay .picture-in-picture__footer .icon-button.active:hover, .media-modal__overlay .picture-in-picture__footer .icon-button.active:focus, .media-modal__overlay .picture-in-picture__footer .icon-button.active:active {
592 background: rgba(var(--accent), 0.15);
593 }
594 .media-modal__overlay .picture-in-picture__footer .icon-button {
595 color: var(--text);
596 }
597 .media-modal__overlay .picture-in-picture__footer .icon-button:hover, .media-modal__overlay .picture-in-picture__footer .icon-button:focus, .media-modal__overlay .picture-in-picture__footer .icon-button:active {
598 color: var(--text);
599 background-color: rgba(var(--accent), 0.15);
600 }
601 .compose-form .compose-form__upload__warning button.active {
602 color: rgb(var(--accent));
603 }
604 .account__header__tabs__buttons .icon-button {
605 border: 1px solid rgba(var(--accent), 0.35);
606 background: rgb(var(--accent));
607 }
608 .privacy-dropdown__option:focus, .privacy-dropdown__option.active, .visibility-dropdown__option:focus, .visibility-dropdown__option.active {
609 background: rgb(var(--accent));
610 color: var(--background-color);
611 }
612 .dropdown-menu__item--highlighted {
613 color: rgb(var(--accent));
614 }
615 .notification-bar__action {
616 color: rgb(var(--accent));
617 }
618 .notification-bar__action:hover, .notification-bar__action:focus, .notification-bar__action:active {
619 background: rgba(var(--accent), 0.15);
620 }
621 .no-reduce-motion .status--highlighted-entry:before {
622 background: rgba(var(--accent), 0.2);
623 }
624 .notification-bar {
625 background: var(--background-color);
626 color: var(--sub-text1);
627 }
628 .notification-bar__dismiss-button {
629 color: var(--sub-text1);
630 }
631 .status__info__icons {
632 color: var(--sub-text2);
633 }
634 .upload-area__content {
635 color: var(--text);
636 border: 2px dashed rgb(var(--accent));
637 }
638 .upload-area__background {
639 background: var(--background-color);
640 }
641 .upload-progress {
642 color: var(--sub-text1);
643 }
644 .upload-progress__tracker {
645 background: rgb(var(--accent));
646 }
647 .upload-progress .icon path {
648 fill: rgb(var(--accent));
649 }
650 .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
651 color: var(--text);
652 }
653 .dialog-modal__content__description {
654 color: var(--sub-text2);
655 }
656 .visibility-dropdown__button {
657 color: var(--sub-text1);
658 }
659 .visibility-dropdown__helper {
660 color: var(--sub-text2);
661 }
662 .media-gallery__alt__label, .relationship-tag {
663 color: var(--text-color);
664 background: #dce0e8a6;
665 }
666}