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