-
Notifications
You must be signed in to change notification settings - Fork 0
/
RTLPatcher.theme.css
118 lines (107 loc) · 3.38 KB
/
RTLPatcher.theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
* @name RTLPatcher CSS Assist
* @description Changes message container styles to make their separation clearer.
* @version 0.0.1
* @author amoAR
* @authorId 568288962943385612
* @website https://github.com/amoAR/RTLPatcher
* @source https://github.com/amoAR/RTLPatcher/blob/main/RTLPatcher.theme.css
* @updateUrl https://raw.githubusercontent.com/amoAR/RTLPatcher/refs/heads/main/RTLPatcher.theme.css
*/
/* border gap for other msgs */
li[id^="chat-messages-"]:not(li[class*="myMessage"]) {
margin-left: 70px !important;
}
/* set background for all msgs */
li[id^="chat-messages-"] > div[class*="cozyMessage"] {
background: var(--bg-overlay-1,var(--background-message-hover)) !important;
border-radius: 20px !important;
padding: 5px !important;
margin-bottom: 10px !important;
max-width: 320px !important;
}
/* set inline padding in msgs */
li[id^="chat-messages-"] > div[class*="cozyMessage"] > div[class^="contents"] {
padding: 6px !important;
}
/* fix avatar of others outside their msgs */
li[id^="chat-messages-"] > div[class*="cozyMessage"] > div[class^="contents"] > img:first-child:not(.myAvatar) {
margin-bottom: 25px !important;
left: -50px !important;
right: unset !important;
}
li[id^="chat-messages-"] > div[class*="cozyMessage"] > div[class^="contents"] > img + img:not(.myAvatarDecoration) {
margin-bottom: 25px !important;
left: -54px !important;
right: unset !important;
}
/* fix reply pseudo */
div[class^="repliedMessage"]:not(.myWrapper):before {
right: 103%;
}
.myWrapper > div[id^="message-reply"]:before {
left: 105% !important;
right: calc(-1*(.6*var(--avatar-size) + var(--gutter))) !important;
transform: rotateY(180deg) !important;
}
/* center accessories embeds */
div[id^="message-accessories"], div[id^="message-accessories"] > article, div[class^="visualMediaItemContainer"] {
display: grid;
justify-items: center !important;
justify-self: center !important;
align-self: center !important;
}
div[id^="message-accessories"] > article + div {
gap: unset;
justify-content: space-between;
margin-top: 1rem;
}
div[class^="nonVisualMediaItemContainer"] {
align-items: center;
}
div[class^="nonVisualMediaItem"] {
max-width: 60%;
}
/* neat reactions */
div[aria-label="Add Reaction"] {
display: none !important;
}
div[class^="reactions"] {
margin-left: 3% !important;
justify-self: center !important;
align-self: center !important;
}
div[class^="visualMediaItemContainer"] + div[class^="reactions"] {
margin-top: 2rem;
}
/* mentioned echo pseudo */
div[class*="mentioned"], div[class*="ephemeral"]:before {
border: 4px solid var(--accent-3);
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
}
div[class*="mentioned"]:before {
display: none !important;
}
div[class*="replying"]:before {
height: 50%;
top:25%;
}
/* fix timestamp */
span[class*="timestampInline"] {
vertical-align: top !important;
}
span[class*="timestampVisibleOnHover"] {
display: none;
}
/* fix texts direction in embeds */
div[class^="gridContainer"] > div:first-child > div[class*="embed"], div[class^="gridContainer"] > div:first-child > div[class*="embed"] > span, div[class^="gridContainer"] > div:first-child > div[class*="embed"] > a {
text-align: start;
}
/* centralized special msgs */
div[class^="welcomeCTA"], span[class^="clickableSticker"] {
display: flex;
justify-content: center;
justify-self :center;
}