my personal css tweaks for glitch-soc. ermm maybe Call it Mastodon Modern... 2!
0
mastodon-tweaks.css
1:root {
2 --avatar-size: 40px;
3 --emoji-size: 1.5em;
4 --status-gutter-width: 1px;
5 --version: "v0.1";
6
7 --meta: 'glitch-soc tweaks: ' var(--version);
8}
9html {
10 --avatar-border-radius: 64px;
11}
12body {
13 font-weight: 500;
14 line-height: 16px;
15}
16@media screen and (min-width: 1175px) {
17 .columns-area__panels__main {
18 max-width: 675px;
19 }
20}
21.status__content {
22 line-height: 1.35;
23}
24.status__info {
25 font-size: 12px;
26}
27.emojione:hover {
28 transform: scale(1.5);
29 transition: ease-out 0.2s;
30}
31.edit-indicator__content,
32.reply-indicator__content,
33.status__content {
34 padding-top: 0;
35}
36.video-player.full-width {
37 margin-left: 4px;
38 margin-right: 4px;
39 border-radius: 12px;
40 outline: 1px solid var(--border-color);
41}
42.icon {
43 width: 20px;
44 height: 20px;
45}
46.content-warning {
47 padding: 6px 12px;
48}
49.status__info .status__display-name {
50 line-height: 23px;
51}
52.reactions-bar__item {
53 margin: 2px;
54 padding: 0 2px;
55}
56.reactions-bar {
57 margin-top: 0;
58}
59.content-warning {
60 padding: 6px;
61 line-height: 14px;
62}
63.status .content-warning {
64 margin-bottom: 4px;
65}
66.status__action-bar {
67 margin-bottom: -9px;
68}
69.status__action-bar__button-wrapper {
70 max-width: 40px;
71}
72.status__info .account__avatar,
73.status__info .status__avatar {
74 max-height: 42px !important;
75 max-width: 42px !important;
76}
77.account__action-bar__tab {
78 padding: 6px 0;
79}
80.account__section-headline a,
81.account__section-headline button,
82.notification__filter-bar a,
83.notification__filter-bar button {
84 padding: 8px 0;
85}
86.account__action-bar-links {
87 line-height: 14px;
88}
89.reactions-bar__item.active {
90 border-radius: 8px;
91}
92.account__header__fields dl {
93 padding: 4px 8px !important;
94}
95.status__content__read-more-button,
96.status__content__translate-button {
97 margin-top: 6px;
98}
99.status__quote {
100 border-radius: 8px;
101 margin-bottom: 8px;
102 margin-top: 0;
103}
104.status__content__read-more-button,
105.status__content__translate-button {
106 margin-top: 2px;
107}
108.status__prepend+.status:not(.status-direct) {
109 padding-top: 1px;
110}
111.notification-group__main {
112 gap: 4px;
113}
114.notification-group {
115 padding: 12px;
116}
117body.app-body.flavour-glitch > #mastodon .compose-form__submit button {
118 padding: 8px 12px;
119}
120.compose-form {
121 gap: 8px;
122}
123.compose-panel .search,
124.drawer .search {
125 margin-bottom: 12px;
126}
127.detailed-status__meta {
128 margin-top: 10px;
129}
130.account__header__tabs__buttons .icon-button {
131 padding: 3px;
132}
133.button.button-secondary {
134 padding: 3px 12px;
135 border-radius: 24px;
136}
137.button {
138 padding: 4px 18px;
139}
140.account__header__tabs__buttons {
141 gap: 4px;
142}
143.account__header__bar .avatar {
144 margin-top: 10px;
145}
146.account__header__tabs__name {
147 margin-top: 0px;
148 margin-bottom: 8px;
149}
150.account__header__bar {
151 padding-inline: 12px;
152}
153._comp_badge__badge {
154 border: 1px solid var(--border-color);
155}
156.account__header__familiar-followers {
157 margin-block: 4px;
158}
159.account__relationship .icon-button,
160.explore-suggestions-card .icon-button {
161 padding: 2px;
162}
163.account {
164 padding: 8px;
165}
166.status {
167 padding: 12px 10px;
168}
169.status__info {
170 padding-bottom: 6px;
171}
172.detailed-status__display-name {
173 margin-bottom: 12px;
174}
175.detailed-status {
176 border-top: 0px;
177 padding: 0px 12px;
178 margin-top: 10px;
179 margin-bottom: 12px;
180}
181[style*="width:46px;height: 46px;"] {
182 width: 42px;
183 height: 42px;
184}
185[style*="--avatar-height: 28px;"] {
186 --avatar-height: 32px;
187}
188.audio-player,
189.media-gallery,
190.picture-in-picture-placeholder,
191.status-card,
192.status-card.horizontal.interactive,
193.video-player {
194 margin-block: 8px;
195}
196.status-card__content {
197 padding: 6px 10px;
198}
199.upload-progress {
200 gap: 4px;
201}
202.upload-progress__tracker {
203 height: 3px;
204}
205.compose-form__footer {
206 padding: 12px;
207}
208.dialog-modal__header {
209 border-bottom: 0;
210 padding: 6px 12px;
211 min-height: 41px;
212}
213.dialog-modal__content__description {
214 margin: 2px 12px 0;
215}
216.dialog-modal__content__form {
217 gap: 6px;
218 padding: 12px;
219}
220.visibility-dropdown__button {
221 font-size: 13px;
222 height: 36px;
223 border-radius: 24px;
224}
225.visibility-dropdown__button:hover,
226.visibility-dropdown__button:focus,
227.visibility-dropdown__button:active {
228 border-radius: 4px;
229 background: rgba(0, 0, 0, 0.1);
230 transition: ease-in-out 0.15s;
231}
232.dialog-modal__content {
233 letter-spacing: 0;
234}
235.account__header__buttons .icon-button .icon {
236 height: 20px;
237 width: 20px;
238}
239div [class*="account__avatar-overlay"] {
240 width: 28px;
241 height: 28px;
242}
243.inline-follow-suggestions__body__scrollable__card {
244 border-radius: 14px;
245}
246._account_timeline_components__avatarWrapper {
247 padding-left: 5px;
248 padding-bottom: 5px;
249}
250.account__avatar:hover {
251 transform: scale(1.05);
252 transition: ease-in-out 0.1s;
253}
254.account__avatar {
255 padding: 2px;
256 border-radius: 64px;
257}
258.full-width .media-gallery__item {
259 border-radius: 18px;
260}
261.media-gallery.full-width {
262 margin-left: 0px;
263 margin-right: 0px;
264}
265.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img:hover {
266 transform: scale(1.02);
267 transition: ease-in-out 0.15s;
268}
269.avatar-group {
270 --avatar-height: 32px;
271}
272.avatar-group:not(.avatar-group--compact) {
273 height: 32px;
274 gap: 2px;
275}
276[aria-label*="Notifications"] .media-gallery.full-width {
277 margin-left: 45px;
278}
279.edit-indicator__content, .reply-indicator__content, .status__content {
280 padding-top: 2px;
281}
282.button--compact {
283 border-radius: 24px;
284}
285.button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover {
286 border-radius: 4px;
287 transition: ease-in-out 0.15s;
288}
289.sign-in-banner .button {
290 border-radius: 24px;
291 transition: ease-in-out 0.15s;
292}
293.sign-in-banner .button:hover {
294 border-radius: 4px;
295 transition: ease-in-out 0.15s;
296}
297.button:active, .button:focus, .button:hover {
298 border-radius: 4px;
299 transition: ease-in-out 0.15s;
300}
301.button {
302 border-radius: 24px;
303}
304.dropdown-button {
305 border-radius: 24px;
306 transition: ease-in-out 0.15s;
307}
308.dropdown-button:hover {
309 border-radius: 4px;
310 transition: ease-in-out 0.15s;
311 background: rgba(0, 0, 0, 0.1);
312}
313@media screen and (min-width: 1175px) {
314 .tabs-bar__wrapper {
315 border-top: 0px;
316 }
317}
318.column-link {
319 border-radius: 24px;
320}
321.column-link:hover {
322 background: rgba(0, 0, 0, 0.1);
323 transition: ease-in-out 0.15s;
324}
325.search__icon-wrapper {
326 margin-top: 32px;
327}
328.search__input {
329 border-radius: 24px;
330 padding: 8px 40px;
331}
332.search__input:hover,
333.search__input:focus,
334.search__input:active {
335 background: rgba(0, 0, 0, 0.1);
336 border-radius: 4px;
337}
338.getting-started__trends {
339 border: 1px solid var(--border-color);
340 border-radius: 4px;
341 background: var(--background-color);
342}
343._account_timeline_components__handleHelp {
344 border: 1px solid var(--border-color);
345}
346.account__avatar img {
347 border: 1px solid var(--border-color);
348}
349.account__avatar img:hover {
350 border: 1px solid var(--color-text-tertiary);
351 color: rgba(0,0,0,0.15);
352}
353.navigation-panel hr, .compose-panel hr {
354 margin: 0 0;
355 border-top: 0px;
356}
357.status__info .account__avatar, .status__info .status__avatar {
358 max-height: 40px !important;
359 max-width: 40px !important;
360}
361.tabs-bar__wrapper {
362 background: var(--background-color);
363}
364.navigation-panel__menu {
365 padding-top: 36px;
366}
367._account_timeline_components__tabs a {
368 border-radius: 4px;
369 padding: 0 0;
370}
371._account_timeline_components__tabs .active {
372 padding-bottom: 10px;
373 border-radius: 4px;
374}
375._account_timeline_components__tabs a:hover,
376._account_timeline_components__tabs a:active,
377._account_timeline_components__tabs a:focus {
378 background: rgba(0,0,0,0.15);
379}
380.compose-panel {
381 width: 345px;
382}
383.columns-area__panels__pane__inner {
384 width: 345px;
385}
386.navigation-panel {
387 width: 345px;
388}
389.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
390 resize: vertical;
391}
392.sign-in-banner {
393 padding: 18px;
394 border: 1px solid var(--border-color);
395 border-radius: 24px;
396 background: var(--background-color);
397 margin-top: 24px;
398 margin: 12px;
399}
400.link-footer {
401 padding-bottom: 24px;
402 margin-left: 10px;
403}
404.app-body .link-footer::after {
405 content: var(--meta);
406}
407.server-banner__introduction {
408 margin-top: 12px;
409}
410.server-banner {
411 background: var(--background-color);
412 padding: 12px;
413 padding-bottom: 18px;
414 border: 1px solid var(--border-color);
415 border-radius: 24px;
416}
417.image {
418 border-radius: 24px;
419 border: 1px solid var(--border-color);
420}
421.compose-panel .search, .drawer .search {
422 padding-top: 36px;
423}
424.simple_form .fields-group__thumbnail {
425 border-radius: 24px;
426}
427.hover-card {
428 border-radius: 24px;
429}
430._account_timeline_components__fieldList {
431 margin: 10px 0;
432}
433.announcements__root {
434 background: var(--background-color);
435 border: 1px solid var(--border-color);
436 border-top: 0px solid;
437}