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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
.app-talk .icon-user,
.modal-mask .icon-user,
.talk-sidebar-callview .icon-user,
#talk-panel .icon-user,
#talk-sidebar .icon-user,
#call-container .icon-user,
.talkChatTab .icon-user {
background-image: url(../img/icon-user-white.svg);
}
.app-talk .icon-public,
.modal-mask .icon-public,
.talk-sidebar-callview .icon-public,
#talk-panel .icon-public,
#talk-sidebar .icon-public,
#call-container .icon-public,
.talkChatTab .icon-public {
background-image: url(../img/icon-public-white.svg);
}
.app-talk .icon-contacts,
.modal-mask .icon-contacts,
.talk-sidebar-callview .icon-contacts,
#talk-panel .icon-contacts,
#talk-sidebar .icon-contacts,
#call-container .icon-contacts,
.talkChatTab .icon-contacts {
background-image: url(../img/icon-contacts-white.svg);
}
.app-talk .icon-phone,
.modal-mask .icon-phone,
.talk-sidebar-callview .icon-phone,
#talk-panel .icon-phone,
#talk-sidebar .icon-phone,
#call-container .icon-phone,
.talkChatTab .icon-phone {
background-image: url(../img/icon-phone-white.svg);
}
.app-talk .icon-password,
.modal-mask .icon-password,
.talk-sidebar-callview .icon-password,
#talk-panel .icon-password,
#talk-sidebar .icon-password,
#call-container .icon-password,
.talkChatTab .icon-password {
background-image: url(../img/icon-password-white.svg);
}
.app-talk .icon-file,
.modal-mask .icon-file,
.talk-sidebar-callview .icon-file,
#talk-panel .icon-file,
#talk-sidebar .icon-file,
#call-container .icon-file,
.talkChatTab .icon-file {
background-image: url(../img/icon-text-white.svg);
}
.app-talk .icon-mail,
.modal-mask .icon-mail,
.talk-sidebar-callview .icon-mail,
#talk-panel .icon-mail,
#talk-sidebar .icon-mail,
#call-container .icon-mail,
.talkChatTab .icon-mail {
background-image: url(../img/icon-mail-white.svg);
}
.app-talk .icon-team,
.modal-mask .icon-team,
.talk-sidebar-callview .icon-team,
#talk-panel .icon-team,
#talk-sidebar .icon-team,
#call-container .icon-team,
.talkChatTab .icon-team {
background-image: url(../img/icon-team-white.svg);
}
.app-talk .icon-changelog,
.modal-mask .icon-changelog,
.talk-sidebar-callview .icon-changelog,
#talk-panel .icon-changelog,
#talk-sidebar .icon-changelog,
#call-container .icon-changelog,
.talkChatTab .icon-changelog {
background-image: url(../img/changelog.svg);
}
/* The tribute panel is a direct child of the body, so it is not affected by
* .app-Talk rules above.
* "forced-white" needs to be included in the class name as the Avatar does
* not accept several classes. */
.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
.mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
background-color: #6B6B6B;
}
/* System default: dark theme */
@media (prefers-color-scheme: dark) {
body[data-theme-default] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
body[data-theme-default] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
body[data-theme-default] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
body[data-theme-default] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
body[data-theme-default] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
body[data-theme-default] .mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
background-color: #3B3B3B;
}
}
/* Manually set dark theme */
body[data-theme-dark] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
body[data-theme-dark] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
body[data-theme-dark] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
body[data-theme-dark] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
body[data-theme-dark] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
body[data-theme-dark] .mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
background-color: #3B3B3B;
}
.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
.mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
background-size: 75%;
}
.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
.autocomplete-result .icon-user-forced-white.autocomplete-result__icon-- {
background-size: 50% !important;
}
.user-bubble__avatar .icon-user-forced-white,
.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
.mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
background-image: url(../img/icon-user-white.svg);
}
.user-bubble__avatar .icon-group-forced-white,
.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
.mention-bubble .icon-group-forced-white.mention-bubble__icon-- {
background-image: url(../img/icon-contacts-white.svg);
}
/* Needed to use white color also in dark mode. */
.app-files .app-sidebar__close.forced-white {
color: #ffffff;
}
.dashboard-talk-icon {
background-image: url(../img/app-dark.svg);
filter: var(--background-invert-if-dark);
}
|
