-
Notifications
You must be signed in to change notification settings - Fork 3
/
speech-bubbles.css
84 lines (75 loc) · 2.33 KB
/
speech-bubbles.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
/**
* @name ClearVision Add-on: Speech Bubbles
* @author Leozard
* @version 1.0.0
*/
/* OPTIONAL
:root {
--bubble-color: #fff;
--bubble-hover-color: #fff:
}
*/
.cozy_ec86aa .messageContent_ec86aa {
width: fit-content;
max-width: 80%;
background-color: var(--bubble-color,hsla(0, 0%, 100%, 0.1));
padding: 10px;
border-radius: 0 10px 10px 10px;
margin-top: 5px;
margin-left: 0px;
}
.markup_d6076c pre {
max-width: 100%;
}
/* EMBEDS */
.cozy_ec86aa:not(:has(.messageContent_ec86aa span)) .container_b558d0:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9)) {
max-width: fit-content;
}
.cozy_ec86aa .container_b558d0:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9)) {
padding: 10px;
}
.cozy_ec86aa .container_b558d0:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9)):before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: var(--bubble-color,hsla(0, 0%, 100%, 0.1));
border-radius: 0 10px 10px 10px;
padding: 10px;
}
.cozy_ec86aa .container_b558d0:has(.reactions_ec6b19):before {
height: calc(100% - 63px);
}
.cozy_ec86aa .container_b558d0:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9)) .reactions_ec6b19 {
margin-top: 20px;
}
/* TEXT + EMBEDS */
.cozy_ec86aa .contents_ec86aa:has(+ .container_b558d0 :is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9)) .messageContent_ec86aa {
width: 60%;
padding-bottom: 0;
border-radius: 0 10px 0px 0px;
}
.cozy_ec86aa:has(.messageContent_ec86aa span) .container_b558d0 :is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9) {
width: 60%;
}
.cozy_ec86aa:has(.messageContent_ec86aa span) .container_b558d0:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b558d0, .invite_cdcad9))::before {
width: 60%;
border-radius: 0 0 10px 10px;
}
/* REPLYING TO MESSAGE */
.repliedTextPreview_ec86aa {
max-height: unset;
}
.cozy_ec86aa .repliedTextContent_ec86aa.messageContent_ec86aa {
max-width: fit-content;
max-height: fit-content;
border-radius: 10px;
padding: 5px;
}
/* HOVER */
.cozy_ec86aa:hover .messageContent_ec86aa,
.cozy_ec86aa:hover .container_b558d0::before {
background-color: var(--bubble-hover-color, hsla(0, 0%, 100%, 0.15));
}