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