my personal css tweaks for glitch-soc. ermm maybe Call it Mastodon Modern... 2!
0
mastodon-tweaks.css
1@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2
3@keyframes bg-move {
4 0% {
5 background-position: 0 0;
6 }
7 100% {
8 background-position: -560px -560px;
9 }
10}
11
12:root {
13 --emoji-size: 1.5em;
14 --status-gutter-width: 1px;
15 --border-radius: 24px;
16 --smaller-border-radius: 16px;
17 --background-color: light-dark(#f3ebf7, #1f1725);
18 --elevated-tint: #e0d3e6;
19 --border-color: #d8b3e3;
20 --surface-variant-background-color: #f3edf5;
21 --rich-text-container-color: #e0cce0;
22 --accent: 166, 118, 214;
23 --color-border-primary: #d8b3e3;
24}
25.detailed-status__button .icon {
26 background: #cbbed1;
27 padding: 4px 14px;
28 border: 1px solid var(--border-color);
29 border-radius: 18px;
30}
31.detailed-status__button .icon:hover {
32 border-radius: 8px;
33 background: rgb(--accent);
34}
35.tabs-bar__wrapper {
36 border: 0 solid transparent;
37}
38._feat_account_timeline__filtersWrapper {
39 padding: 0;
40 margin-top: -20px;
41}
42._feat_account_timeline__statusWrapper
43 article:has(._feat_account_timeline__pinnedViewAllButton) {
44 border-bottom: 0;
45 border: 0;
46 border-color: transparent;
47}
48._feat_account_timeline__pinnedViewAllButton {
49 padding: 4px;
50 width: calc(35% - 32px);
51 margin: 2px 0px;
52}
53._comp_tags__tag {
54 background-color: var(--elevated-tint);
55}
56._comp_mini_card__card {
57 background: #cbbed1;
58}
59._feat_account_timeline__filterSelectButton {
60 padding: 0;
61}
62._comp_account_header__header {
63 border-radius: 14px;
64 border: 1px solid var(--border-color);
65}
66._comp_account_header__barWrapper {
67 padding-inline: 16px;
68 border: 1px solid var(--border-color);
69 border-top: 0;
70 border-bottom: 0;
71 border-radius: 12px 12px 0 0;
72 background: var(--elevated-tint);
73}
74._comp_tab_list__withSpaceAndBorder {
75 border-bottom: 0;
76 padding-inline: ;
77 background: var(--elevated-tint);
78 border-radius: 0 0 12px 12px;
79 border: 1px solid var(--border-color);
80 border-top: 0;
81 transform: translateY(-16px);
82 padding-inline: 18px;
83}
84html {
85 --avatar-border-radius: 14px;
86 --color-white: #f3ebf7;
87 --color-grey-50: #e2d5e6;
88 --color-indigo-700: #bf73c9;
89 --color-indigo-50: #f7e6f7;
90 --color-indigo-800: rgb(var(--accent));
91}
92body {
93 font-family: "figtree";
94 font-weight: 500;
95 line-height: 16px;
96}
97
98@media screen and (min-width: 1175px) {
99 .columns-area__panels__main {
100 max-width: 675px;
101 }
102}
103.columns-area__panels__main {
104 margin-top: 10px;
105}
106.status__content {
107 line-height: 1.35;
108}
109.status__info {
110 font-size: 12px;
111}
112.emojione:hover {
113 transform: scale(1.5);
114 transition: ease-out 0.2s;
115}
116.emojione {
117 width: auto;
118 max-width: 300px;
119}
120.detailed-status .status__content .emojione {
121 width: auto;
122 max-width: 300px;
123}
124.status__content .emojione,
125.edit-indicator__content .emojione,
126.reply-indicator__content .emojione {
127 width: auto;
128 max-width: 300px;
129}
130.edit-indicator__content,
131.reply-indicator__content,
132.status__content {
133 padding-top: 0;
134}
135.video-player.full-width {
136 margin-left: 4px;
137 margin-right: 4px;
138 border-radius: 12px;
139 outline: 1px solid var(--border-color);
140}
141.status__info .status__display-name {
142 line-height: 23px;
143}
144.reactions-bar__item {
145 margin: 4px;
146 padding: 4px 4px;
147 border-radius: 6px;
148}
149.reactions-bar {
150 margin-top: 5px;
151}
152.content-warning {
153 padding: 6px;
154 line-height: 14px;
155}
156.status .content-warning {
157 margin-bottom: 4px;
158}
159.status__action-bar {
160 margin-bottom: -9px;
161}
162.status__action-bar__button-wrapper {
163 max-width: 40px;
164}
165.account__action-bar__tab {
166 padding: 6px 0;
167}
168.account__section-headline a,
169.account__section-headline button,
170.notification__filter-bar a,
171.notification__filter-bar button {
172 padding: 8px 0;
173}
174.account__action-bar-links {
175 line-height: 14px;
176}
177.reactions-bar__item.active {
178 border-radius: 8px;
179}
180.account__header__fields dl {
181 padding: 4px 8px !important;
182}
183.status__content__read-more-button,
184.status__content__translate-button {
185 margin-top: 6px;
186}
187.status__quote {
188 border-radius: 8px;
189 margin-bottom: 8px;
190 margin-top: 0;
191}
192.status__content__read-more-button,
193.status__content__translate-button {
194 margin-top: 2px;
195}
196.status__prepend + .status:not(.status-direct) {
197 padding-top: 1px;
198}
199.notification-group__main {
200 gap: 4px;
201}
202.notification-group {
203 padding: 12px;
204}
205body.app-body.flavour-glitch > #mastodon .compose-form__submit button {
206 padding: 8px 12px;
207}
208.compose-form {
209 gap: 8px;
210}
211.compose-panel .search,
212.drawer .search {
213 margin-bottom: 12px;
214}
215.detailed-status__meta {
216 margin-top: 10px;
217}
218.account__header__tabs__buttons .icon-button {
219 padding: 3px;
220}
221.button.button-secondary {
222 padding: 5px 12px;
223 border-radius: var(--border-radius);
224}
225.button {
226 padding: 4px 18px;
227}
228.account__header__tabs__buttons {
229 gap: 4px;
230}
231.account__header__bar .avatar {
232 margin-top: 10px;
233}
234.account__header__tabs__name {
235 margin-top: 0px;
236 margin-bottom: 8px;
237}
238.account__header__bar {
239 padding-inline: 12px;
240}
241._comp_badge__badge {
242 border: 1px solid var(--border-color);
243}
244.account__header__familiar-followers {
245 margin-block: 4px;
246}
247.account__relationship .icon-button,
248.explore-suggestions-card .icon-button {
249 padding: 2px;
250}
251.icon:hover {
252 transform: scale(1.05, 1.05);
253}
254.account {
255 padding: 8px;
256}
257.status {
258 padding: 16px 16px;
259}
260.status__info {
261 padding-bottom: 6px;
262}
263.detailed-status__display-name {
264 margin-bottom: 12px;
265}
266.detailed-status {
267 border-top: 0px;
268 padding: 0px 12px;
269 padding-top: 10px;
270 padding-bottom: 12px;
271}
272.detailed-status__wrapper {
273 background: var(--elevated-tint);
274 padding: 4px;
275 border-radius: 18px;
276 border: 1px solid var(--border-color);
277 margin-bottom: 10px;
278}
279[style*="--avatar-height: 28px;"] {
280 --avatar-height: 32px;
281}
282.audio-player,
283.media-gallery,
284.picture-in-picture-placeholder,
285.status-card,
286.status-card.horizontal.interactive,
287.video-player {
288 margin-block: 8px;
289}
290.status-card__content {
291 padding: 6px 10px;
292}
293.upload-progress {
294 gap: 4px;
295}
296.upload-progress__tracker {
297 height: 3px;
298}
299.compose-form__footer {
300 padding: 12px;
301}
302.dialog-modal__header {
303 border-bottom: 0;
304 padding: 6px 12px;
305 min-height: 41px;
306}
307.dialog-modal__content__description {
308 margin: 2px 12px 0;
309}
310.dialog-modal__content__form {
311 gap: 6px;
312 padding: 12px;
313}
314.visibility-dropdown__button {
315 font-size: 13px;
316 height: 36px;
317 border-radius: var(--border-radius);
318}
319.visibility-dropdown__button:hover,
320.visibility-dropdown__button:focus,
321.visibility-dropdown__button:active {
322 border-radius: 4px;
323 background: rgba(0, 0, 0, 0.1);
324 transition: ease-in-out 0.15s;
325}
326.dialog-modal__content {
327 letter-spacing: 0;
328}
329.account__header__buttons .icon-button .icon {
330 height: 20px;
331 width: 20px;
332}
333div [class*="account__avatar-overlay"] {
334 width: 28px;
335 height: 28px;
336}
337.inline-follow-suggestions__body__scrollable__card {
338 border-radius: 14px;
339}
340._account_timeline_components__avatarWrapper {
341 padding-left: 5px;
342 padding-bottom: 5px;
343}
344.account__avatar {
345 padding: 2px;
346 border-radius: var(--avatar-border-radius);
347}
348.full-width .media-gallery__item {
349 border-radius: 18px;
350}
351.media-gallery.full-width {
352 margin-left: 0px;
353 margin-right: 0px;
354}
355.avatar-group {
356 --avatar-height: 32px;
357}
358.avatar-group:not(.avatar-group--compact) {
359 height: 32px;
360 gap: 2px;
361}
362[aria-label*="Notifications"] .media-gallery.full-width {
363 margin-left: 45px;
364}
365.edit-indicator__content,
366.reply-indicator__content,
367.status__content {
368 padding-top: 2px;
369}
370.button--compact {
371 border-radius: var(--border-radius);
372}
373.button.button-secondary:active,
374.button.button-secondary:focus,
375.button.button-secondary:hover {
376 border-radius: 4px;
377 transition: ease-in-out 0.15s;
378}
379.sign-in-banner .button {
380 border-radius: var(--border-radius);
381 transition: ease-in-out 0.15s;
382}
383.sign-in-banner .button:hover {
384 border-radius: 4px;
385 transition: ease-in-out 0.15s;
386}
387.button:active,
388.button:focus,
389.button:hover {
390 border-radius: 4px;
391 transition: ease-in-out 0.15s;
392}
393.button {
394 border-radius: var(--border-radius);
395}
396.dropdown-button {
397 border-radius: var(--border-radius);
398 transition: ease-in-out 0.15s;
399}
400.dropdown-button:hover {
401 border-radius: 4px;
402 transition: ease-in-out 0.15s;
403 background: rgba(0, 0, 0, 0.1);
404}
405.column-link {
406 border-radius: var(--border-radius);
407 gap: 14px;
408}
409.column-link:hover {
410 background: rgba(0, 0, 0, 0.1);
411 transition: ease-in-out 0.15s;
412}
413.search__input {
414 border-radius: var(--border-radius);
415}
416.search__input:hover,
417.search__input:focus,
418.search__input:active {
419 background: rgba(0, 0, 0, 0.1);
420 border-radius: 4px;
421}
422.getting-started__trends {
423 border: 1px solid var(--border-color);
424 border-radius: 14px;
425 background: var(--background-color);
426}
427._account_timeline_components__handleHelp {
428 border: 1px solid var(--border-color);
429}
430.navigation-panel hr,
431.compose-panel hr {
432 margin: 0 0;
433 border-top: 0px;
434}
435._comp_badge__badge:not(._comp_badge__badgeWithoutIcon) {
436 background-color: #d8b3e3;
437}
438.status__info .account__avatar,
439.status__info .status__avatar {
440 max-height: 40px !important;
441 max-width: 40px !important;
442}
443.navigation-panel__menu {
444 padding-top: 36px;
445}
446._account_timeline_components__tabs a {
447 border-radius: 4px;
448 padding: 0 0;
449}
450._account_timeline_components__tabs .active {
451 padding-bottom: 10px;
452 border-radius: 4px;
453}
454._account_timeline_components__tabs a:hover,
455._account_timeline_components__tabs a:active,
456._account_timeline_components__tabs a:focus {
457 background: rgba(0, 0, 0, 0.15);
458}
459.compose-form .autosuggest-textarea__textarea,
460.compose-form .spoiler-input__input {
461 resize: vertical;
462}
463.sign-in-banner {
464 padding: 18px;
465 border: 1px solid var(--border-color);
466 border-radius: var(--border-radius);
467 background: var(--background-color);
468 margin-top: 24px;
469 margin: 12px;
470}
471.link-footer {
472 padding-bottom: 24px;
473 margin-left: 10px;
474}
475.app-body .link-footer::after {
476 content: var(--meta);
477}
478.server-banner__introduction {
479 margin-top: 12px;
480}
481.server-banner {
482 background: var(--background-color);
483 padding: 12px;
484 padding-bottom: 18px;
485 border: 1px solid var(--border-color);
486 border-radius: var(--border-radius);
487}
488.image {
489 border-radius: var(--border-radius);
490 border: 1px solid var(--border-color);
491}
492.simple_form .fields-group__thumbnail {
493 border-radius: var(--border-radius);
494}
495.hover-card {
496 border-radius: var(--border-radius);
497}
498._account_timeline_components__fieldList {
499 margin: 10px 0;
500}
501.icon-with-badge__badge {
502 top: -10px;
503}
504.column-header {
505 border-radius: 18px;
506 margin-bottom: 4px;
507}
508.column-back-button {
509 border-radius: 16px;
510}
511.announcements__mastodon {
512 border-radius: 0 var(--border-radius);
513}
514.announcements__root {
515 margin: 10px;
516 border-radius: var(--border-radius);
517 border: 1px solid var(--color-border-brand-soft);
518}
519.column > .scrollable {
520 border: 0;
521 border-top: 0;
522}
523.notification,
524.status__wrapper,
525.conversation {
526 position: relative;
527 margin-bottom: 8px;
528 border: 1px solid var(--border-color);
529 border-radius: 14px;
530 background-color: var(--elevated-tint);
531}
532.account__header {
533 ._account_timeline_components__header {
534 height: 220px;
535 }
536}
537.account__header__tabs__name .emojione {
538 width: auto;
539 max-width: 300px;
540}
541.audio-player,
542.media-gallery,
543.picture-in-picture-placeholder,
544.status-card,
545.status-card.horizontal.interactive,
546.video-player {
547 margin-block: 0;
548}
549.detailed-status__meta__line {
550 padding: 12px 0;
551}
552.detailed-status__action-bar {
553 padding: 5px 0;
554 border-bottom: 0;
555}
556.status-card.bottomless {
557 border-radius: 18px 18px 0 0;
558 margin-top: 10px;
559}
560.more-from-author {
561 border-radius: 0 0 18px 18px;
562 padding: 10px;
563}
564._comp_account_header__buttonsDesktop .icon-button,
565._comp_account_header__buttonsMobile .icon-button {
566 padding: 3px;
567 border-radius: 24px;
568}
569.pillbar-button {
570 border-radius: 24px;
571 padding: 10px;
572}
573.column-settings__pillbar .pillbar-button:last-child {
574 border-start-end-radius: 0px;
575 border-end-end-radius: 0px;
576 border-radius: 24px;
577}
578.column-settings__pillbar .pillbar-button:first-child {
579 border-start-start-radius: 0px;
580 border-end-start-radius: 0px;
581 border-radius: 24px;
582}
583.pillbar-button: ([disabled]) {
584 background-color: var(--color-bg-secondary);
585}
586.compose-form__highlightable {
587 border-radius: 24px;
588 padding: 2px;
589}
590.account__avatar__counter {
591 bottom: 0;
592}
593.status {
594 border-bottom: 0;
595}