blob: e7fa12f3f7600e313a4479eb62d4590eeeba4550 [file] [log] [blame]
avm999630bc113a2020-09-07 13:02:11 +02001:root {
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01002 color-scheme: dark;
3
avm999630bc113a2020-09-07 13:02:11 +02004 --TWPT-primary-text: #e8eaed;
5 --TWPT-primary-text-alt: var(--TWPT-primary-text);
6 --TWPT-secondary-text: #9aa0a6;
7 --TWPT-primary-background: #202124;
8 --TWPT-secondary-background: #28292c;
9 --TWPT-active-background: #3c4043;
10 --TWPT-card-border: #5f6368;
11 --TWPT-subtle-border: #383735;
12 --TWPT-link: #8ab4f8;
avm99963744d0cf2021-03-23 22:05:57 +010013 --TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
14 --TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
avm999630bc113a2020-09-07 13:02:11 +020015 --TWPT-drawer-background: #2d2e30;
avm99963a51c7612020-11-25 23:58:56 +010016 --TWPT-button-background: #3c3e42;
avm99963223416c2021-04-21 22:13:14 +020017 --TWPT-input-underline: rgba(255, 255, 255, .28);
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +020018 --TWPT-blue-100: #BBDEFB;
avm99963fb7107c2021-04-14 19:39:05 +020019 --TWPT-blue-A100: #82B1FF;
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +020020 --TWPT-bad-text: #f6aea9;
21 --TWPT-good-text: #34a853;
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +020022 --TWPT-interop-primary-text: var(--TWPT-primary-text);
23 --TWPT-interop-secondary-text: #c4c7c5;
24 --TWPT-interop-subtle-border: #474747;
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +010025 --TWPT-interop-success: #37be5f;
avm999630bc113a2020-09-07 13:02:11 +020026}
27
28body {
29 color: var(--TWPT-primary-text);
30 background-color: var(--TWPT-primary-background)!important;
31}
32
33p {
34 color: var(--TWPT-primary-text);
35}
36
Adrià Vilanova Martínez1e10d192021-12-31 16:01:13 +010037body.ec a:not(.mdc-list-item) {
avm999630bc113a2020-09-07 13:02:11 +020038 color: var(--TWPT-link);
39}
40
41/* Header */
42.material-content > header {
43 background-color: var(--TWPT-primary-background)!important;
44}
45
avm9996315b23d72021-04-26 18:07:15 +020046.material-content > header .app-title-button,
47 .material-content > header .app-title-text {
48 color: var(--TWPT-secondary-text)!important;
avm99963ea9b23f2021-04-22 14:06:03 +020049}
50
avm9996348c87d12021-04-09 13:00:21 +020051.material-content > header material-button,
avm9996315b23d72021-04-26 18:07:15 +020052 .material-content > header material-button material-icon,
avm9996348c87d12021-04-09 13:00:21 +020053 .material-content > header notification-bell material-icon {
avm999630bc113a2020-09-07 13:02:11 +020054 color: rgba(255, 255, 255, .87)!important;
55}
56
57.search-box {
58 background-color: #313235!important;
59}
60
61.search-box .clear-icon {
62 opacity: 0.8;
63 color: rgba(255, 255, 255, .87)!important;
64}
65
66.material-content > header .bell.mixin {
67 fill: rgba(255, 255, 255, .87)!important;
68}
69
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +020070/* Notification bell */
71notification-bell:focus {
72 background-color: rgba(255, 255, 255, .10)!important;
73}
74
avm999630bc113a2020-09-07 13:02:11 +020075/* Drawer */
76material-drawer, material-drawer .panel, material-list-item {
77 background-color: var(--TWPT-drawer-background)!important;
78}
79
avm9996324ef6522020-11-25 19:45:43 +010080material-list-item:hover, material-list-item:focus, material-list-item.item--active {
avm999630bc113a2020-09-07 13:02:11 +020081 background-color: var(--TWPT-active-background)!important;
82}
83
84material-drawer .panel {
85 border-bottom-color: #25231f!important;
86}
87
88material-drawer .drawer-section-title, material-drawer .header > material-icon {
89 color: var(--TWPT-secondary-text)!important;
90}
91
avm9996315b23d72021-04-26 18:07:15 +020092material-drawer material-list-item,
93 material-drawer material-list-item .title {
avm999630bc113a2020-09-07 13:02:11 +020094 color: #d2cecb!important;
95}
96
97material-drawer ec-forum-drawer-item material-checkbox material-icon {
98 filter: brightness(1.5);
99}
100
avm9996315b23d72021-04-26 18:07:15 +0200101/* Header menus */
102.popup material-list-item {
103 color: #d2cecb!important;
104}
105
avm99963223416c2021-04-21 22:13:14 +0200106/* Filters (ec-query-builder) */
107material-condition-builder .compound-condition-operator {
108 color: var(--TWPT-secondary-text)!important;
109}
110
111material-condition-builder .compound-condition-operator::before,
112 material-condition-builder .compound-condition-operator::after {
113 border-left-color: rgba(255, 255, 255, .20)!important;
114}
115
avm999630bc113a2020-09-07 13:02:11 +0200116/* Selector */
avm99963a51c7612020-11-25 23:58:56 +0100117
118/*
119 * This applies not only to the selector but also to the ec-work-state-picker.
120 */
avm99963a091be12021-02-18 17:03:28 +0100121.popup-wrapper, material-list, .popup .item-group-list {
avm999630bc113a2020-09-07 13:02:11 +0200122 background-color: var(--TWPT-drawer-background)!important;
123}
124
avm99963a091be12021-02-18 17:03:28 +0100125material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
126 .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
avm999630bc113a2020-09-07 13:02:11 +0200127 box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
128 border-top-color: #1f1f1f!important;
129}
130
131material-list material-select-item:hover,
132 material-list material-select-item:focus,
133 material-list material-select-dropdown-item:hover,
134 material-list material-select-dropdown-item:focus,
135 material-list material-select-dropdown-item.active,
avm99963a091be12021-02-18 17:03:28 +0100136 material-list material-select-dropdown-item:not(.multiselect).selected,
avm999634298b432021-08-16 16:38:00 +0200137 material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
avm99963a091be12021-02-18 17:03:28 +0100138 .popup .item-group-list material-select-item:hover,
139 .popup .item-group-list material-select-item:focus,
avm99963744d0cf2021-03-23 22:05:57 +0100140 .popup .item-group-list material-select-item.active,
avm99963a091be12021-02-18 17:03:28 +0100141 .popup .item-group-list material-select-dropdown-item:hover,
142 .popup .item-group-list material-select-dropdown-item:focus,
143 .popup .item-group-list material-select-dropdown-item.active,
144 .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
avm99963744d0cf2021-03-23 22:05:57 +0100145 background-color: var(--TWPT-highlighted-item-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200146}
147
avm999634298b432021-08-16 16:38:00 +0200148material-list .single-select-item,
149 material-list .menu-item-label,
avm99963a091be12021-02-18 17:03:28 +0100150 material-list .label,
151 material-list .text-segment,
avm9996355acfae2021-08-19 18:06:56 +0200152 menu-item-groups .single-select-item,
153 menu-item-groups .menu-item-label,
154 menu-item-groups .label,
155 menu-item-groups .text-segment {
avm999630bc113a2020-09-07 13:02:11 +0200156 color: rgba(255, 255, 255, .87)!important;
157}
158
avm99963a091be12021-02-18 17:03:28 +0100159.popup .item-group-list material-icon {
160 color: rgba(255, 255, 255, .7)!important;
161}
162
avm999630bc113a2020-09-07 13:02:11 +0200163material-list [group] > [label] {
164 color: #8a8a8a!important;
165}
166
avm9996348c87d12021-04-09 13:00:21 +0200167/* This is shown in the new thread view */
168ec-forum-language-picker .labeled-select .select-label {
169 color: var(--TWPT-secondary-text)!important;
170}
171
avm999630bc113a2020-09-07 13:02:11 +0200172/* Main */
173.main {
174 color: var(--TWPT-primary-text)!important;
175}
176
avm9996325a0d602020-11-25 19:24:16 +0100177/* Border color for the page title bar (most pages use .title-bar although
178 * some use .page-header).
179 */
180main .title-bar, main .page-header {
avm999630bc113a2020-09-07 13:02:11 +0200181 border-bottom-color: var(--TWPT-subtle-border)!important;
182}
183
184main .title-bar .title, main .page-header h1, main .header h1 {
185 color: var(--TWPT-primary-text)!important;
186}
187
188.card {
189 background-color: var(--TWPT-secondary-background)!important;
190 color: var(--TWPT-primary-text)!important;
191 border-color: var(--TWPT-card-border)!important;
192}
193
194.card .card-title, .card, .card-section-title {
195 color: var(--TWPT-primary-text)!important;
196}
197
avm99963223416c2021-04-21 22:13:14 +0200198.card .card-section-hint, .card .card-section-checkbox-hint {
avm999630bc113a2020-09-07 13:02:11 +0200199 color: var(--TWPT-secondary-text)!important;
200}
201
202/* Action bar */
203.material-content .action-bar material-button,
204 ec-bulk-actions material-button,
avm99963b2329632021-02-06 20:05:34 +0100205 ec-back-button material-button,
avm9996348c87d12021-04-09 13:00:21 +0200206 .sort-options material-button {
avm999630bc113a2020-09-07 13:02:11 +0200207 color: rgba(255, 255, 255, .54)!important;
208}
209
avm99963ea9b23f2021-04-22 14:06:03 +0200210.material-content .action-bar .review-button.reviewing {
211 color: #1a73e8!important;
212 background: #dae7ff!important;
213}
214
avm999630bc113a2020-09-07 13:02:11 +0200215.material-content .action-bar material-button.starred {
216 color: #fbbc04!important;
217}
218
Adrià Vilanova Martínez2c8913b2021-07-22 23:33:37 +0200219/* ec-work-state-picker and ec-symptom-picker */
220ec-work-state-picker > button,
221 ec-symptom-picker > button {
avm99963a51c7612020-11-25 23:58:56 +0100222 color: var(--TWPT-secondary-text)!important;
223 background-color: var(--TWPT-button-background)!important;
224 border-color: var(--TWPT-subtle-border)!important;
225}
226
227.material-popup-content .popup-content .title {
228 color: var(--TWPT-primary-text)!important;
229}
230
avm999630bc113a2020-09-07 13:02:11 +0200231/* Thread list */
232ec-thread-list ul.thread-group {
233 background-color: var(--TWPT-primary-background)!important;
234}
235
236ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
237 border-bottom-color: var(--TWPT-subtle-border)!important;
238}
239
avm99963a2a06442020-11-25 21:11:10 +0100240ec-thread-summary material-expansionpanel.read:not(.checked) {
avm999630bc113a2020-09-07 13:02:11 +0200241 background-color: var(--TWPT-thread-read-background)!important;
242}
243
avm99963e65bec42020-11-25 18:26:29 +0100244ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200245 opacity: 0.8;
246}
247
avm99963e65bec42020-11-25 18:26:29 +0100248ec-thread-summary material-expansionpanel.read .title .icon {
249 opacity: 0.48!important;
250}
251
avm999630bc113a2020-09-07 13:02:11 +0200252ec-thread-summary material-expansionpanel.checked {
avm99963a2a06442020-11-25 21:11:10 +0100253 background-color: #2c4b77!important;
avm999630bc113a2020-09-07 13:02:11 +0200254}
255
256ec-thread-summary material-expansionpanel .title {
257 color: var(--TWPT-primary-text)!important;
258}
259
260ec-thread-summary material-expansionpanel ec-second-summary-line,
261 material-expansionpanel .header-content,
avm9996348c87d12021-04-09 13:00:21 +0200262 material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
263 material-expansionpanel .duplicate-label {
avm999630bc113a2020-09-07 13:02:11 +0200264 color: #928e89!important;
265}
266
avm9996348c87d12021-04-09 13:00:21 +0200267material-expansionpanel .removed-label {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200268 color: var(--TWPT-bad-text)!important;
avm9996348c87d12021-04-09 13:00:21 +0200269}
270
avm999631558e6c2020-12-08 13:42:40 +0100271ec-thread-summary material-expansionpanel ec-safe-html.body,
272 material-expansionpanel .issue-tracking-work-state {
avm999630bc113a2020-09-07 13:02:11 +0200273 color: var(--TWPT-primary-text)!important;
274}
275
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200276/*
277 * The following section changes the styles of the checkboxes in thread lists,
278 * based in the styles defined in the "Checkbox input" section.
279 **/
Adrià Vilanova Martínezfb2169a2021-07-09 00:26:37 +0200280ec-thread-summary material-expansionpanel .action material-button,
281 ec-thread-list material-checkbox material-icon,
282 ec-thread-summary material-expansionpanel .star-button:not(.starred) {
283 color: #696867!important; /* Custom value to match previous behavior */
284 opacity: 1!important;
285}
286
287ec-thread-list material-checkbox material-icon.filled {
288 color: #62a5ff!important; /* Custom value to contrast well with the background */
289}
290
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200291/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
Adrià Vilanova Martínezfb2169a2021-07-09 00:26:37 +0200292ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon,
293 .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon,
294 ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon,
295 .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon {
296 color: #807d7c!important; /* custom value */
297}
298
299ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
300 .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon.filled,
301 ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
302 .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon.filled {
303 color: #92c1ff!important; /* custom value */
304}
305
avm99963b2329632021-02-06 20:05:34 +0100306/* Thread view (including review/live review components) */
avm999630bc113a2020-09-07 13:02:11 +0200307ec-question, .heading + .group, ec-message {
308 background-color: var(--TWPT-secondary-background)!important;
309}
310
avm99963b2329632021-02-06 20:05:34 +0100311ec-thread .no-review-needed {
312 background-color: #155829!important;
313 border-color: var(--TWPT-subtle-border)!important;
314}
315
316/* Review bar shown above the main message or replies */
317ec-review-bar {
avm999630bc113a2020-09-07 13:02:11 +0200318 background-color: var(--TWPT-active-background)!important;
319}
320
avm99963b2329632021-02-06 20:05:34 +0100321ec-review-bar material-chip {
322 background-color: var(--TWPT-button-background)!important;
323}
324
325ec-review-bar material-chip:not(.relevant-active):not(.active) {
avm99963b2329632021-02-06 20:05:34 +0100326 border-color: var(--TWPT-card-border)!important;
327}
328
329ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
330 color: var(--TWPT-primary-text)!important;
331 fill: var(--TWPT-primary-text)!important;
332}
333
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200334ec-review-bar material-chip:not(.relevant-active):not(.active) .content {
335 color: var(--TWPT-primary-text)!important;
336}
337
avm99963b2329632021-02-06 20:05:34 +0100338ec-review-bar material-chip.relevant-active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200339 border-color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100340}
341
342ec-review-bar material-chip.relevant-active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200343 color: var(--TWPT-good-text)!important;
344 fill: var(--TWPT-good-text)!important;
345}
346
347ec-review-bar material-chip.relevant-active .content {
348 color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100349}
350
351ec-review-bar material-chip.active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200352 border-color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100353}
354
355ec-review-bar material-chip.active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200356 color: var(--TWPT-bad-text)!important;
357 fill: var(--TWPT-bad-text)!important;
358}
359
360ec-review-bar material-chip.active .content {
361 color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100362}
363
avm999630bc113a2020-09-07 13:02:11 +0200364ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
365 color: var(--TWPT-secondary-text)!important;
366}
367
avm9996395da0772020-09-09 01:07:36 +0200368ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200369 background-color: var(--TWPT-active-background)!important;
370}
371
avm9996395da0772020-09-09 01:07:36 +0200372ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200373 color: var(--TWPT-primary-text)!important;
374}
375
avm9996395da0772020-09-09 01:07:36 +0200376ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200377 color: var(--TWPT-primary-text)!important;
378 fill: var(--TWPT-primary-text)!important;
379}
380
Adrià Vilanova Martínezdb57f362022-01-13 23:46:24 +0100381ec-question .alert material-button {
382 color: var(--TWPT-link)!important;
383}
384
avm999630bc113a2020-09-07 13:02:11 +0200385ec-question .title {
386 color: var(--TWPT-primary-text-alt)!important;
387}
388
avm99963b2329632021-02-06 20:05:34 +0100389ec-user-link .name-text {
390 color: var(--TWPT-link)!important;
391}
392
393ec-message-header ec-avatar svg, ec-message-header .role,
394 ec-message .footer .role {
avm999630bc113a2020-09-07 13:02:11 +0200395 filter: brightness(1.5);
396}
397
398ec-question .body, ec-message .body {
399 color: var(--TWPT-primary-text)!important;
400}
401
402ec-question .thread-insert {
403 background: none!important;
404}
405
406ec-question .details-heading {
407 color: var(--TWPT-primary-text-alt) !important;
408}
409
Adrià Vilanova Martínez0ab61ea2021-06-03 20:25:18 +0200410ec-question .state-chips material-chip {
411 background-color: var(--TWPT-button-background)!important;
412 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
413 0 1px 1px 0 rgba(0, 0, 0, 0.14),
414 0 1px 3px 0 rgba(0, 0, 0, 0.12);
415}
416
417ec-question .state-chips material-chip .content {
418 color: var(--TWPT-primary-text)!important;
419}
420
avm9996348c87d12021-04-09 13:00:21 +0200421ec-question .footer,
422 ec-ask-flow .content-disclaimer {
avm999630bc113a2020-09-07 13:02:11 +0200423 color: var(--TWPT-primary-text)!important;
424 background-color: var(--TWPT-active-background)!important;
425 border-top-color: var(--TWPT-card-border)!important;
426}
427
428.heading {
429 color: var(--TWPT-primary-text)!important;
430}
431
432.heading + .group,
433 .load-more-bar,
434 ec-message:not(:first-child),
435 .load-more-bar .load-more-button,
436 .load-more-bar .load-all-button {
437 border-color: var(--TWPT-card-border)!important;
438}
439
avm9996395da0772020-09-09 01:07:36 +0200440ec-message .type {
441 color: var(--TWPT-primary-text)!important;
442}
443
avm999630bc113a2020-09-07 13:02:11 +0200444ec-message .footer ec-relative-time,
445 ec-message .footer ec-safe-html {
446 color: var(--TWPT-secondary-text)!important;
447}
448
449ec-message .helpful-prompt {
450 color: var(--TWPT-primary-text)!important;
451}
452
453ec-question .me-too-button,
454 ec-question .subscribe-button,
455 ec-message .upvote-button,
456 ec-message .downvote-button {
457 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100458 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200459}
460
avm99963223416c2021-04-21 22:13:14 +0200461ec-message .alert {
462 color: var(--TWPT-secondary-text)!important;
463}
464
avm999630bc113a2020-09-07 13:02:11 +0200465ec-question .me-too-button.selected,
466 ec-question .subscribe-button.selected,
467 ec-message .upvote-button.selected,
468 ec-message .downvote-button.selected {
469 color: #4285f4!important;
470}
471
472.load-more-bar .load-more-button, .load-more-bar .load-all-button {
473 background-color: var(--TWPT-secondary-background)!important;
474}
475
476.locked-alert {
477 background-color: var(--TWPT-active-background)!important;
478 border: var(--TWPT-card-border)!important;
479}
480
481.locked-alert material-icon {
482 color: rgba(255, 255, 255, .38)!important;
483}
484
avm99963b2329632021-02-06 20:05:34 +0100485ec-thread button.reply.collapsed {
486 color: var(--TWPT-secondary-text)!important;
487}
488
avm999630bc113a2020-09-07 13:02:11 +0200489ec-thread .finished-question {
490 background-color: var(--TWPT-active-background)!important;
491 border: var(--TWPT-card-border)!important;
492}
493
avm99963ea9b23f2021-04-22 14:06:03 +0200494ec-thread .finished-question .next-question {
495 color: var(--TWPT-link)!important;
496 border-color: var(--TWPT-link)!important;
497}
498
avm999630bc113a2020-09-07 13:02:11 +0200499.material-content .action-bar material-button.has-activity {
500 color: #1a73e8!important;
501}
502
503.material-content .action-bar material-button.showing-sidebar {
504 background-color: var(--TWPT-active-background)!important;
505}
506
507ec-activity-panel .title-bar h3 {
508 color: #e8eaf2!important;
509}
510
511ec-activity-panel ec-activity {
512 color: var(--TWPT-secondary-text)!important;
513 border-color: var(--TWPT-card-border)!important;
514}
515
516ec-activity-panel ec-activity .message {
517 color: var(--TWPT-primary-text-alt)!important;
518}
519
520ec-activity-panel ec-activity .thread-title {
521 color: #c3bfbc!important;
522}
523
524/* Recommended answers - show in green where we've overwritten the colors */
525.recommended-answers {
526 color: #34a853!important;
527}
528
avm99963fb7107c2021-04-14 19:39:05 +0200529/* Suggested answers - show brighter blue */
530.suggested-icon {
531 color: var(--TWPT-blue-A100)!important;
532}
533
534/* Help button (shown in the suggested answers header) */
535.explanation-icon material-icon {
536 color: rgba(255, 255, 255, .54)!important;
537}
538
539/* Help button tooltip */
540.popup .paper-container {
541 background: var(--TWPT-drawer-background)!important;
542}
543
544.explanation-icon material-icon:hover {
545 color: var(--TWPT-blue-A100)!important;
546}
547
avm99963223416c2021-04-21 22:13:14 +0200548/* New thread and edit message views */
549material-stepper {
550 border-top-color: var(--TWPT-card-border)!important;
551}
552
avm999630bc113a2020-09-07 13:02:11 +0200553material-stepper .stepper-step-name,
554 material-stepper .purpose-title {
555 color: var(--TWPT-primary-text)!important;
556}
557
558ec-ask-flow .display-name-label,
avm99963223416c2021-04-21 22:13:14 +0200559 material-stepper .additional-details-label,
560 material-stepper .detail-label {
avm999630bc113a2020-09-07 13:02:11 +0200561 color: var(--TWPT-secondary-text)!important;
562}
563
avm99963223416c2021-04-21 22:13:14 +0200564material-stepper .stepper-step[selectable=true]:focus {
565 background-color: rgba(60, 64, 67, .24)!important;
566}
567
avm9996301818912021-05-24 11:53:18 +0200568/* Compose thread view */
569ec-thread-composer .main-content .title-label,
570 ec-thread-composer .main-content .post-label {
571 color: var(--TWPT-primary-text-alt)!important;
572}
573
574ec-thread-composer .main-content .title-input,
575 ec-thread-composer .main-content ec-rich-text-editor {
576 border-color: var(--TWPT-card-border)!important;
577}
578
579ec-thread-composer .main-content .title-alert {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200580 color: var(--TWPT-bad-text)!important;
avm9996301818912021-05-24 11:53:18 +0200581}
582
583ec-thread-composer material-drawer {
584 background-color: inherit!important;
585}
586
587ec-thread-composer material-drawer .right-panel {
588 border-left-color: var(--TWPT-card-border)!important;
589}
590
591ec-thread-composer material-drawer .panel-section-title {
592 color: var(--TWPT-primary-text)!important;
593}
594
595ec-thread-composer material-drawer .panel-section-divider {
596 border-color: var(--TWPT-card-border)!important;
597}
598
599ec-thread-composer material-drawer material-radio .radio-label {
600 color: var(--TWPT-primary-text-alt)!important;
601}
602
603ec-thread-composer material-drawer material-radio .radio-description,
604 ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
605 color: var(--TWPT-secondary-text)!important;
606}
607
avm9996348c87d12021-04-09 13:00:21 +0200608/* Note: see thread view section. There is a rule for the thread creation
609 * footer.
610 **/
611
Adrià Vilanova Martínez531cd072021-12-05 20:15:43 +0100612/* Chart in the profile view */
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200613ec-user bar-chart .axis text,
614 ec-unified-user sc-tailwind-shared-activity-chart .axis text {
avm999630bc113a2020-09-07 13:02:11 +0200615 fill: rgba(255, 255, 255, .54)!important;
616}
617
618ec-user bar-chart .axis path,
619 ec-user bar-chart .axis .gridline,
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200620 ec-user bar-chart .axis line,
621 ec-unified-user sc-tailwind-shared-activity-chart .axis path,
622 ec-unified-user sc-tailwind-shared-activity-chart .axis .gridline,
623 ec-unified-user sc-tailwind-shared-activity-chart .axis line {
avm999630bc113a2020-09-07 13:02:11 +0200624 stroke: rgba(255, 255, 255, .12)!important;
625}
626
627ec-user bar-chart .axis line.axis-zero-tick,
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200628 ec-user bar-chart .axis.x .tick-mark,
629 ec-unified-user sc-tailwind-shared-activity-chart .axis line.axis-zero-tick,
630 ec-unified-user sc-tailwind-shared-activity-chart .axis.x .tick-mark {
avm999630bc113a2020-09-07 13:02:11 +0200631 stroke: rgba(255, 255, 255, .38)!important;
632}
633
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200634ec-user bar-chart .aplos-legend-entry,
635 ec-unified-user sc-tailwind-shared-activity-chart .aplos-legend-entry {
avm999630bc113a2020-09-07 13:02:11 +0200636 color: var(--TWPT-secondary-text)!important;
637}
638
639.aplos-hovercard {
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200640 color: var(--TWPT-interop-secondary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200641 background: var(--TWPT-secondary-background)!important;
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200642 border: none!important;
avm999630bc113a2020-09-07 13:02:11 +0200643}
644
645.aplos-hovercard .title {
646 color: var(--TWPT-primary-text)!important;
647}
648
649.aplos-hovercard .subtitle,
650 .aplos-donut-center .subtitle,
651 .aplos-hovercard .series,
652 .aplos-donut-center .series,
653 .aplos-hovercard .value,
654 .aplos-donut-center .value {
655 color: var(--TWPT-secondary-text)!important;
656}
657
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200658/*
659 * IMPORTANT NOTICE:
660 * Note: the following styles (for interop components) have been written by
661 * Googlers and thus are not included as part of the MIT license. This also
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +0100662 * applies to the styles of the unified profiles and the interop thread view.
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200663 **/
664
665/* Common styles for interop components */
666.scSharedCalloutroot {
667 color: var(--TWPT-interop-primary-text)!important;
668}
669
670.scSharedCallouterror {
671 background-color: #523a3b!important;
672 border-color: #f9dedc!important;
673}
674
675.scSharedCallouterror sc-shared-material-icon {
676 color: #f9dedc!important;
677}
678
679.scSharedCallouterror>.scSharedCalloutsecondary-button button {
680 color: #ec928e!important;
681}
682
683.scSharedCalloutcaution {
684 background-color: #554c33!important;
685 border-color: #ffdf99!important;
686}
687
688.scSharedCalloutcaution sc-shared-material-icon {
689 color: #ffdf99!important;
690}
691
692.scSharedCalloutcaution>.scSharedCalloutsecondary-button button {
693 color: #f09d00!important;
694}
695
696.scSharedCalloutinformational {
697 background-color: #394457!important;
698 border-color: #d3e3fd!important;
699}
700
701.scSharedCalloutinformational sc-shared-material-icon {
702 color: #d3e3fd!important;
703}
704
705.scSharedCalloutinformational>.scSharedCalloutsecondary-button button {
706 color: #7cacf8!important;
707}
708
709.scSharedCalloutsuccess {
710 background-color: #37493f!important;
711 border-color: #c4eed0!important;
712}
713
714.scSharedCalloutsuccess sc-shared-material-icon {
715 color: #c4eed0!important;
716}
717
718.scSharedCalloutsuccess>.scSharedCalloutsecondary-button button {
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +0100719 color: var(--TWPT-interop-success)!important;
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200720}
721
722.scSharedMaterialbuttonroot:disabled {
723 color: rgba(227, 227, 227, 0.369)!important;
724}
725
726.scSharedMaterialbuttontext {
727 color: #7cacf8!important;
728}
729
730.scSharedMaterialbuttoncolor-label {
731 color: var(--TWPT-interop-secondary-text)!important;
732}
733
734.scSharedMaterialbuttoncolor-hint {
735 color: var(--TWPT-interop-secondary-text)!important;
736}
737
738.scSharedMaterialbuttonnavigational {
739 color: var(--TWPT-interop-primary-text)!important;
740}
741
742.scSharedMaterialbuttonnavigational-alt {
743 color: var(--TWPT-interop-secondary-text)!important;
744}
745
746.scSharedMaterialbuttonhairline {
747 border-color: var(--TWPT-interop-subtle-border)!important;
748 color: #7cacf8!important;
749}
750
751.scSharedMaterialbuttonhairline:disabled {
752 border-color: rgba(227, 227, 227, 0.369)!important;
753}
754
755.scSharedMaterialbuttonhairline:hover,
756 .scSharedMaterialbuttonhairline:focus {
757 border-color: rgba(124, 172, 248, 0.239)!important;
758}
759
760.scSharedMaterialbuttonhairline:active {
761 box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
762}
763
764.scSharedMaterialbuttontonal {
765 color: #7cacf8!important;
766 background: #394457!important;
767}
768
769.scSharedMaterialbuttontonal:hover {
770 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
771}
772
773.scSharedMaterialbuttontonal:active {
774 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
775}
776
777.scSharedMaterialbuttontonal:disabled {
778 background: rgba(227, 227, 227, 0.122)!important;
779}
780
781.scSharedMaterialbuttonfilled {
782 background: #7cacf8!important;
783 color: #1f1f1f!important;
784}
785
786.scSharedMaterialbuttonfilled:disabled {
787 background: rgba(227, 227, 227, 0.122)!important;
788}
789
790.scSharedMaterialbuttonfilled:hover,
791 .scSharedMaterialbuttonfilled:focus {
792 box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
793}
794
795.scSharedMaterialbuttonfilled:active {
796 box-shadow: 0 1px 3px 0 rgba(124, 172, 248, 0.302), 0 4px 8px 3px rgba(124, 172, 248, 0.149)!important;
797}
798
799.scSharedMaterialbuttonprotected {
800 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
801 background: #1f1f1f!important;
802 color: #7cacf8!important;
803}
804
805.scSharedMaterialbuttonprotected:disabled {
806 background: rgba(227, 227, 227, 0.122)!important;
807}
808
809.scSharedMaterialbuttonprotected:hover {
810 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
811}
812
813.scSharedMaterialbuttonprotected:focus {
814 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
815}
816
817.scSharedMaterialbuttonprotected:active {
818 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149)!important;
819}
820
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +0100821.scSharedMaterialbuttonsuccess {
822 --m-btn-text-color: var(--TWPT-interop-success);
823 --m-btn-outline-color: var(--TWPT-interop-success);
824}
825
826.scSharedMaterialbuttonsuccess.scSharedMaterialbuttonfilled {
827 --m-btn-text-color: #1f1f1f;
828 --m-btn-background-color: var(--TWPT-interop-success);
829}
830
831.scSharedMaterialbuttonsuccess.scSharedMaterialbuttontonal {
832 --m-btn-background-color: #0f5223
833}
834
835@media (forced-colors:active) {
836 .scSharedMaterialbuttonroot:focus {
837 outline: 2px solid #e3e3e3;
838 }
839}
840
841@media (prefers-contrast:more) {
842 .scSharedMaterialbuttonroot:focus {
843 outline: 2px solid #e3e3e3;
844 }
845}
846
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200847.scSharedExpandabletextexpander {
848 color: #7cacf8!important;
849}
850
851.scSharedMaterialborderfilled {
852 background: #313235!important;
853 border-bottom: 1px solid var(--TWPT-interop-secondary-text)!important;
854}
855
856.scSharedMaterialborderfilled-error {
857 border-bottom-color: #ec928e!important;
858}
859
860.scSharedMaterialborderfilled-bottom {
861 background-color: #7cacf8!important;
862}
863
864.scSharedMaterialborderfilled-label {
865 color: var(--TWPT-interop-secondary-text)!important;
866}
867
868.scSharedMaterialborderfilled-label-focused {
869 color: #7cacf8!important;
870}
871
872.scSharedMaterialborderlabel {
873 color: var(--TWPT-interop-secondary-text)!important;
874}
875
876.scSharedMaterialborderleft {
877 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
878 border-left-color: var(--TWPT-interop-secondary-text)!important;
879 border-top-color: var(--TWPT-interop-secondary-text)!important;
880}
881
882.scSharedMaterialborderleft-error {
883 border-bottom-color: #ec928e!important;
884 border-left-color: #ec928e!important;
885 border-top-color: #ec928e!important;
886}
887
888.scSharedMaterialbordermid {
889 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
890 border-top-color: var(--TWPT-interop-secondary-text)!important;
891}
892
893.scSharedMaterialbordermid-error {
894 border-bottom-color: #ec928e!important;
895 border-top-color: #ec928e!important;
896}
897
898.scSharedMaterialborderright {
899 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
900 border-right-color: var(--TWPT-interop-secondary-text)!important;
901 border-top-color: var(--TWPT-interop-secondary-text)!important;
902}
903
904.scSharedMaterialborderright-error {
905 border-bottom-color: #ec928e!important;
906 border-right-color: #ec928e!important;
907 border-top-color: #ec928e!important;
908}
909
910.scSharedMaterialborderfocused {
911 border-color: #7cacf8!important;
912}
913
914.scSharedMaterialborderdisabled {
915 border-color: var(--TWPT-interop-subtle-border)!important;
916}
917
918.scSharedMaterialborderlabel-focused {
919 color: #7cacf8!important;
920}
921
922.scSharedMaterialborderlabel-disabled {
923 color: rgba(255, 255, 255, 0.239)!important;
924}
925
926.scSharedMaterialborderlabel-error {
927 color: #ec928e!important;
928}
929
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +0100930.scSharedMaterialcardroot {
931 background: #1f1f1f;
932 border: 1px solid var(--TWPT-interop-subtle-border);
933}
934
935.scSharedMaterialcardelevation-1 {
936 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
937 background: #2a2b2f;
938}
939
940.scSharedMaterialcardelevation-2 {
941 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149);
942 background: #303135;
943}
944
945.scSharedMaterialcardelevation-3 {
946 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149);
947 background: #36383a;
948}
949
950.scSharedMaterialcardelevation-4 {
951 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.302), 0 6px 10px 4px rgba(0, 0, 0, 0.149);
952 background: #39393c;
953}
954
955.scSharedMaterialcardelevation-5 {
956 box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.302), 0 8px 12px 6px rgba(0, 0, 0, 0.149);
957 background: #3c3e40;
958}
959
960@media (forced-colors:active) {
961 .scsharedmaterialcardroot {
962 border-color: #e3e3e3;
963 }
964}
965
966@media (prefers-contrast:more) {
967 .scsharedmaterialcardroot {
968 border-color: #e3e3e3;
969 }
970}
971
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200972.scSharedMaterialcheckboxcheckbox {
973 color: #7cacf8!important;
974}
975
976.scSharedMaterialcheckboxbox {
977 border-color: var(--TWPT-interop-secondary-text)!important;
978}
979
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +0100980.scSharedMaterialcheckboxnative-control:checked:disabled+.scSharedMaterialcheckboxbox,
981.scSharedMaterialcheckboxnative-control:indeterminate:disabled+.scSharedMaterialcheckboxbox {
982 background: rgba(0, 0, 0, .26);
983 border-color: transparent;
984}
985
986.scSharedMaterialcheckboxnative-control:disabled+.scSharedMaterialcheckboxbox {
987 border-color: rgba(0, 0, 0, .26);
988}
989
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200990.scSharedMaterialcheckboxcheckmark-path {
991 stroke: #1f1f1f!important;
992}
993
994.scSharedMaterialcheckboxmixedmark {
995 border-color: #1f1f1f!important;
996}
997
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +0100998.scSharedMaterialfabroot {
999 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149);
1000 background: #303135;
1001 color: #7cacf8;
1002}
1003
1004@media (forced-colors:active) {
1005 .scSharedMaterialfabroot {
1006 outline: 3px solid #7cacf8;
1007 }
1008}
1009
1010.scSharedMaterialfabroot.scSharedMaterialfabgrey {
1011 color: var(--TWPT-interop-secondary-text);
1012}
1013
1014.scSharedMaterialfabroot:.scSharedMaterialfabfake-focus,
1015.scSharedMaterialfabroot:hover,
1016.scSharedMaterialfabroot:focus {
1017 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.302), 0 6px 10px 4px rgba(0, 0, 0, 0.149);
1018}
1019
1020.scSharedMaterialfabroot:active {
1021 box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.302), 0 8px 12px 6px rgba(0, 0, 0, 0.149);
1022}
1023
1024.scSharedMaterialfablowered {
1025 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
1026}
1027
1028.scSharedMaterialfablowered.scSharedMaterialfabfake-focus,
1029.scSharedMaterialfablowered:hover,
1030.scSharedMaterialfablowered:focus {
1031 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149);
1032}
1033
1034.scSharedMaterialfablowered:active {
1035 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149);
1036}
1037
1038.scSharedMaterialfabfilled {
1039 background: #7cacf8;
1040 color: #1f1f1f;
1041}
1042
1043.scSharedMaterialfabfilled.scSharedMaterialfabgrey {
1044 background: var(--TWPT-interop-secondary-text);
1045 color: #1f1f1f;
1046}
1047
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001048.scSharedMaterial_dialogDialogcontentloading-overlay {
1049 background: rgba(227, 227, 227, 0.122)!important;
1050}
1051
1052.scSharedMaterialpopupbackground {
1053 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
1054 background: #2a2b2f!important;
1055 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1056}
1057
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001058@media (forced-colors:active) {
1059 .scSharedMaterialpopupbackground {
1060 border-color: #e3e3e3;
1061 }
1062}
1063
1064@media (prefers-contrast:more) {
1065 .scSharedMaterialpopupbackground {
1066 border-color: #e3e3e3;
1067 }
1068}
1069
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001070.scSharedMaterialmenuroot {
1071 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
1072 background: #2a2b2f!important;
1073}
1074
1075.scSharedMaterialmenuitem {
1076 color: var(--TWPT-interop-primary-text)!important;
1077}
1078
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001079.scSharedMaterialmenuitem[disabled] {
1080 color: var(--TWPT-interop-subtle-border);
1081}
1082
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001083.scSharedMaterialmenuitem-separator {
1084 border-top-color: var(--TWPT-interop-subtle-border)!important;
1085}
1086
1087.scSharedMaterialmenuhighlight:focus,
1088 .scSharedMaterialmenuhighlight:hover {
1089 background-color: #394457!important;
1090}
1091
1092.scSharedMaterialmenuhighlight:focus {
1093 outline: auto #7cacf8 1px!important;
1094}
1095
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001096.scSharedMaterialtooltipcontainer {
1097 background-color: #e3e3e3;
1098 color: #1f1f1f;
1099}
1100
1101.scSharedMaterialradioradio {
1102 color: #7cacf8;
1103}
1104
1105.scSharedMaterialradioring {
1106 border: 2px solid var(--TWPT-interop-secondary-text);
1107}
1108
1109.scSharedMaterialradionative-control:disabled~.scSharedMaterialradioring {
1110 border-color: rgba(0, 0, 0, .26);
1111}
1112
1113.scSharedMaterialradionative-control:disabled~.scSharedMaterialradiodot {
1114 background: rgba(0, 0, 0, .26);
1115}
1116
1117.scSharedMaterialrichtooltipcontainer {
1118 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
1119}
1120
1121.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-normal .scSharedMaterialrichtooltipcontainer {
1122 background: #2a2b2f;
1123}
1124
1125.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-accented .scSharedMaterialrichtooltipcontainer {
1126 background: #7cacf8;
1127 color: #1f1f1f;
1128}
1129
1130.scSharedMaterialrichtooltipcaret {
1131 box-shadow: 1.5px 1.5px 1px -1px rgba(0, 0, 0, 0.2), .75px .75px 1px 0 rgba(0, 0, 0, 0.141), .75px .75px 3px 0 rgba(0, 0, 0, 0.122);
1132 background: #2a2b2f;
1133}
1134
1135.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-normal .scSharedMaterialrichtooltipcaret {
1136 background: #2a2b2f;
1137}
1138
1139.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-accented .scSharedMaterialrichtooltipcaret {
1140 background: #7cacf8;
1141}
1142
1143.scSharedMaterialselectlabel {
1144 color: #e3e3e3;
1145}
1146
1147.scSharedMaterialselectarrow {
1148 color: var(--TWPT-interop-secondary-text);
1149}
1150
1151.scSharedMaterialselectactive .scSharedMaterialselectarrow {
1152 color: #7cacf8;
1153}
1154
1155.scSharedMaterialselectdisabled .scSharedMaterialselectselection,
1156.scSharedMaterialselectdisabled .scSharedMaterialselectarrow {
1157 color: rgba(255, 255, 255, 0.239);
1158}
1159
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001160.scSharedMaterialsnackbarsnackbar {
1161 background: var(--TWPT-interop-primary-text)!important;
1162 color: #1f1f1f!important;
1163}
1164
1165.scSharedMaterialsnackbaraction button {
1166 color: #0b57d0!important;
1167}
1168
1169.scSharedMaterialtabbartab {
1170 color: var(--TWPT-interop-primary-text)!important;
1171}
1172
1173.scSharedMaterialtabbartab:hover,
1174 .scSharedMaterialtabbartab:focus {
1175 background-color: #313235!important;
1176}
1177
1178.scSharedMaterialtabbarselected {
1179 border-bottom-color: #7cacf8!important;
1180 color: #7cacf8!important;
1181}
1182
1183.scSharedMaterialtextfieldlabel {
1184 color: var(--TWPT-interop-primary-text)!important;
1185}
1186
1187.scSharedMaterialtextfieldnative-control {
1188 caret-color: #7cacf8!important;
1189 color: var(--TWPT-interop-primary-text)!important;
1190}
1191
1192.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldnative-control {
1193 caret-color: #ec928e!important;
1194}
1195
1196.scSharedMaterialtextfieldnative-control:disabled {
1197 color: var(--TWPT-interop-secondary-text)!important;
1198}
1199
1200.scSharedMaterialtextfieldfocused .scSharedMaterialtextfieldlabel {
1201 color: #7cacf8!important;
1202}
1203
1204.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldlabel {
1205 color: #ec928e!important;
1206}
1207
1208.scSharedMaterialtextfielddisabled .scSharedMaterialtextfieldlabel {
1209 color: var(--TWPT-interop-secondary-text)!important;
1210}
1211
1212.scSharedMaterialtextfieldhelper-text {
1213 color: var(--TWPT-interop-secondary-text)!important;
1214}
1215
1216.scSharedMaterialtextfieldhelper-text-invalid {
1217 color: #ec928e!important;
1218}
1219
1220.scSharedMaterialtextfieldhelper-text-disabled {
1221 color: var(--TWPT-interop-secondary-text)!important;
1222}
1223
1224.scTailwindSharedActivitychartroot {
1225 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1226}
1227
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001228.scTailwindSharedAvatarroot {
1229 background-color: #f1f3f4;
1230 border: .375rem solid #f1f3f4;
1231}
1232
1233.scTailwindSharedAvatarroot.scTailwindSharedAvatarmedium.scTailwindSharedAvatarat-least-silver,
1234.scTailwindSharedAvatarroot.scTailwindSharedAvatarsmall.scTailwindSharedAvatarat-least-silver {
1235 border: .125rem solid #f1f3f4;
1236}
1237
1238.scTailwindSharedAvatarsilhouette {
1239 background-color: #fff;
1240}
1241
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001242.scTailwindSharedAvataravatar-loading {
1243 background: #1f1f1f!important;
1244}
1245
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001246.scTailwindSharedAvataruploadedit-button {
1247 background-color: rgba(0, 0, 0, 0.4);
1248 color: #fff;
1249}
1250
1251.scTailwindSharedAvataruploadroot:focus .scTailwindSharedAvataruploadedit-button,
1252.scTailwindSharedAvataruploadroot:focus-within .scTailwindSharedAvataruploadedit-button,
1253.scTailwindSharedAvataruploadroot:hover .scTailwindSharedAvataruploadedit-button {
1254 background-color: rgba(0, 0, 0, 0.54);
1255}
1256
1257.scTailwindSharedDisplay_name_editorDisplaynameeditorlabel {
1258 color: var(--TWPT-interop-secondary-text);
1259}
1260
1261.scTailwindSharedPiidialogfinding {
1262 color: var(--TWPT-interop-secondary-text);
1263}
1264
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001265.scTailwindSharedReportabusedialogcontent .abuse-link {
1266 color: #7cacf8!important;
1267}
1268
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001269.scTailwindSharedRich_text_editorAttachmentFailedoverlayroot {
1270 background: rgba(0, 0, 0, 0.902);
1271 color: #ec928e;
1272}
1273
1274.scTailwindSharedRich_text_editorAttachmentLoadingoverlayroot {
1275 background: rgba(227, 227, 227, 0.369);
1276}
1277
1278.scTailwindSharedRich_text_editorAttachmentRemovebuttonremove-button {
1279 background: #1f1f1f;
1280 border: 1px solid #27282b;
1281 color: var(--TWPT-interop-secondary-text);
1282}
1283
1284.scTailwindSharedRich_text_editorAttachmentRemovebuttonremove-button:hover,
1285.scTailwindSharedRich_text_editorAttachmentRemovebuttonremove-button:focus {
1286 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
1287}
1288
1289.scTailwindSharedRich_text_editorAttachmentNoninlinedattachmentroot {
1290 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
1291 background: #36373a;
1292}
1293
1294.scTailwindSharedRich_text_editorAttachmentNoninlinedattachmentfilename {
1295 color: #e3e3e3;
1296}
1297
1298.scTailwindSharedRich_text_editorAttachmentNoninlinedattachmentextension {
1299 color: var(--TWPT-interop-secondary-text);
1300}
1301
1302.scTailwindSharedRich_text_editorLinktooltiproot button {
1303 color: #7cacf8;
1304}
1305
1306.scTailwindSharedRichtexteditoreditor {
1307 background: #1f1f1f;
1308 color: #e3e3e3;
1309}
1310
1311.scTailwindSharedRichtexteditorplaceholder {
1312 color: var(--TWPT-interop-secondary-text);
1313}
1314
1315.scTailwindSharedRichtexteditorhas-bottom-panel {
1316 border-bottom: 1px solid var(--TWPT-interop-subtle-border);
1317}
1318
1319.scTailwindSharedRichtexteditorhint {
1320 color: var(--TWPT-interop-secondary-text);
1321}
1322
1323.scTailwindSharedRich_text_editorToolbarcontrolroot {
1324 color: var(--TWPT-interop-secondary-text);
1325}
1326
1327.scTailwindSharedRich_text_editorToolbarcontrolroot:hover {
1328 color: #e3e3e3;
1329}
1330
1331.scTailwindSharedRich_text_editorToolbarcontrolroot:focus {
1332 border: .125rem solid #7cacf8;
1333}
1334
1335.scTailwindSharedRich_text_editorToolbarcontrolactive {
1336 background: rgba(227, 227, 227, 0.122);
1337}
1338
1339.scTailwindSharedRich_text_editorToolbarMobiletoolbarattachment,
1340.scTailwindSharedRich_text_editorToolbarMobiletoolbartext-format {
1341 border-right: 1px solid var(--TWPT-interop-subtle-border);
1342}
1343
1344.scTailwindSharedRich_text_editorToolbarMobiletoolbartext-format-button {
1345 color: var(--TWPT-interop-secondary-text);
1346}
1347
1348.scTailwindSharedRich_text_editorToolbarMobiletoolbargroup {
1349 border-right: 1px solid var(--TWPT-interop-subtle-border);
1350}
1351
1352.scTailwindSharedRich_text_editorToolbargroup:not(:first-child) {
1353 border-left: 1px solid var(--TWPT-interop-subtle-border);
1354}
1355
1356.scTailwindSharedTitlefieldhelper-text {
1357 color: var(--TWPT-interop-secondary-text);
1358}
1359
1360.sc-select {
1361 border: .0625rem solid var(--TWPT-interop-secondary-text);
1362 color: #e3e3e3;
1363}
1364
1365.sc-select.keyboard-focus {
1366 border-color: transparent;
1367 box-shadow: 0 0 0 .125rem #a8c7fa;
1368}
1369
1370.sc-select svg {
1371 fill: var(--TWPT-interop-secondary-text);
1372}
1373
1374.sc-select ol {
1375 background: #272727;
1376 box-shadow: 0 .1875rem .3125rem -.0625rem rgba(0, 0, 0, 0.4), 0 .375rem .625rem 0 rgba(0, 0, 0, 0.28), 0 .0625rem 1.125rem 0 rgba(0, 0, 0, 0.24);
1377}
1378
1379.sc-select .sc-select-highlight {
1380 background-color: #5ab3f0;
1381 color: #1f1f1f;
1382}
1383
1384/* Unified profile view (see the "IMPORTANT NOTICE" comment above) */
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +02001385.scTailwindUser_profileAchievementsempty a,
1386 .scTailwindUser_profileAchievementsempty a:visited,
1387 sc-tailwind-user_profile-user-profile .link-icon {
1388 color: #7cacf8!important;
1389}
1390
1391.scTailwindUser_profileBiosectionsection-heading {
1392 color: var(--TWPT-interop-secondary-text)!important;
1393}
1394
1395.scTailwindUser_profileBiosectionbio {
1396 color: var(--TWPT-interop-primary-text)!important;
1397}
1398
1399.scTailwindUser_profileBiosectionlinks,
1400 .scTailwindUser_profileBiosectionlink {
1401 color: #7cacf8!important;
1402}
1403
1404.scTailwindUser_profileBiosectioninput-label {
1405 color: var(--TWPT-interop-secondary-text)!important;
1406}
1407
1408.scTailwindUser_profileEmaildisplayemail-display {
1409 color: var(--TWPT-interop-secondary-text)!important;
1410}
1411
1412.scTailwindUser_profileEmaildisplayshow-email {
1413 color: #7cacf8!important;
1414}
1415
1416.scTailwindUser_profileMessagecardthread-link {
1417 color: var(--TWPT-interop-secondary-text)!important;
1418}
1419
1420.scTailwindUser_profileMessagecardlabel {
1421 color: var(--TWPT-interop-secondary-text)!important;
1422}
1423
1424.scTailwindUser_profileMessagecardcontent {
1425 border-left: 2px solid var(--TWPT-interop-subtle-border)!important;
1426 color: var(--TWPT-interop-primary-text)!important;
1427}
1428
1429.scTailwindUser_profileMessagecardcount {
1430 color: var(--TWPT-interop-secondary-text)!important;
1431}
1432
1433.scTailwindUser_profileMessagecardrecommended-answer {
1434 color: #6dd58c!important;
1435}
1436
1437.scTailwindUser_profileMessagecardrecommended-answer .icon {
1438 background-color: #6dd58c!important;
1439 color: #1f1f1f!important;
1440}
1441
1442sc-tailwind-user_profile-user-profile .notificationIcon {
1443 color: var(--TWPT-interop-secondary-text)!important;
1444}
1445
1446sc-tailwind-user_profile-user-profile .deleteIcon,
1447 sc-tailwind-user_profile-user-profile .reportAbuseIcon,
1448 sc-tailwind-user_profile-user-profile .reactivateIcon {
1449 color: var(--TWPT-interop-secondary-text)!important;
1450}
1451
1452.scTailwindUser_profilePosthistorysection+.scTailwindUser_profilePosthistorysection {
1453 border-top-color: var(--TWPT-interop-subtle-border)!important;
1454}
1455
1456.scTailwindUser_profilePosthistorycontent,
1457 .scTailwindUser_profilePosthistoryheader,
1458 .scTailwindUser_profilePosthistoryerror {
1459 border-color: var(--TWPT-interop-subtle-border)!important;
1460}
1461
1462.scTailwindUser_profileThreadcardtitle {
1463 color: var(--TWPT-interop-primary-text)!important;
1464}
1465
1466.scTailwindUser_profileThreadcardlabel {
1467 color: var(--TWPT-interop-secondary-text)!important;
1468}
1469
1470.scTailwindUser_profileThreadcardcontent {
1471 color: var(--TWPT-interop-primary-text)!important;
1472}
1473
1474.scTailwindUser_profileThreadcardcount {
1475 color: var(--TWPT-interop-secondary-text)!important;
1476}
1477
1478.scTailwindUser_profileThreadcardreply .icon {
1479 color: var(--TWPT-interop-secondary-text)!important;
1480}
1481
1482.scTailwindUser_profileThreadcardrecommended-answer {
1483 color: #6dd58c!important;
1484}
1485
1486.scTailwindUser_profileThreadcardrecommended-answer .icon {
1487 background-color: #6dd58c!important;
1488 color: #1f1f1f!important;
1489}
1490
1491.scTailwindUser_profileUsercardroot {
1492 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1493}
1494
1495.scTailwindUser_profileUsercardinput-label {
1496 color: var(--TWPT-interop-secondary-text)!important;
1497}
1498
1499.scTailwindUser_profileUsercardheadline {
1500 color: var(--TWPT-interop-primary-text)!important;
1501}
1502
1503.scTailwindUser_profileUsercarddetails {
1504 color: var(--TWPT-interop-secondary-text)!important;
1505}
1506
1507.scTailwindUser_profileUsercardlinks,
1508 .scTailwindUser_profileUsercardlink {
1509 color: #7cacf8!important;
1510}
1511
1512.scTailwindUser_profileUsercardhorizontal-separator {
1513 background-color: var(--TWPT-interop-subtle-border)!important;
1514 color: var(--TWPT-interop-subtle-border)!important;
1515}
1516
1517.scTailwindUser_profileUsercardsection-heading {
1518 color: var(--TWPT-interop-secondary-text)!important;
1519}
1520
Adrià Vilanova Martínez91c444f2022-01-28 14:51:31 +01001521/* Interop thread view (see the "IMPORTANT NOTICE" comment above) */
1522.scTailwindThreadEditquestiondialogroot.scTailwindThreadEditquestiondialogscrollable {
1523 -webkit-box-shadow: inset 0 -11px 5px -11px #000;
1524 box-shadow: inset 0 -11px 5px -11px #000;
1525}
1526
1527.scTailwindThreadEditquestiondialogerror {
1528 color: #ec928e;
1529}
1530
1531.scTailwindThreadGetlinkdialoglink-container {
1532 border-bottom: 2px solid #a8c7fa;
1533}
1534
1535h4.scTailwindThreadMessageHelpfulnessbuttonslabel {
1536 color: #e3e3e3;
1537}
1538
1539.scTailwindThreadMessageMessagecardsub-content {
1540 background: #3c4043;
1541 border-top: 1px solid var(--TWPT-interop-subtle-border);
1542}
1543
1544.scTailwindThreadMessageMessagecardnested-reply:not(:first-child) {
1545 border-top: 1px solid var(--TWPT-interop-subtle-border);
1546}
1547
1548.scTailwindThreadMessageMessagecardtargeted {
1549 border-left: .125rem solid #7cacf8;
1550}
1551
1552.scTailwindThreadMessageMessagecardcalloutroot.scTailwindThreadMessageMessagecardcalloutrecommended {
1553 background: #0f5223;
1554 border-color: #6dd58c;
1555}
1556
1557.scTailwindThreadMessageMessagecardcalloutroot.scTailwindThreadMessageMessagecardcalloutrelevant {
1558 background: #394457;
1559 border-color: #7cacf8;
1560}
1561
1562.scTailwindThreadMessageMessagetagrecommended.scTailwindThreadMessageMessagetagnormal {
1563 color: #6dd58c;
1564}
1565
1566.scTailwindThreadMessageMessagetagrecommended.scTailwindThreadMessageMessagetagstrong {
1567 color: #6dd58c;
1568}
1569
1570.scTailwindThreadMessageMessagetagrelevant.scTailwindThreadMessageMessagetagnormal {
1571 color: #7cacf8;
1572}
1573
1574.scTailwindThreadMessageMessagetagrelevant.scTailwindThreadMessageMessagetagstrong {
1575 color: #7cacf8;
1576}
1577
1578.scTailwindThreadMessageMessageinteractionsinteraction {
1579 color: var(--TWPT-interop-secondary-text);
1580}
1581
1582p.scTailwindThreadMessageMessagetombstoneroot {
1583 color: var(--TWPT-interop-secondary-text);
1584}
1585
1586p.scTailwindThreadMessageMessagetombstoneroot .scTailwindThreadMessageMessagetombstoneclickable {
1587 color: var(--TWPT-interop-secondary-text);
1588}
1589
1590.scTailwindThreadPostcontentroot {
1591 color: #e3e3e3;
1592}
1593
1594.scTailwindThreadPostcontentroot a {
1595 color: #7cacf8;
1596}
1597
1598.scTailwindThreadPost_headerOverflowmenuicon {
1599 color: var(--TWPT-interop-secondary-text);
1600}
1601
1602.scTailwindThreadPost_headerPostdateroot {
1603 color: var(--TWPT-interop-secondary-text);
1604}
1605
1606.scTailwindThreadPost_headerUserinfoname a {
1607 color: #7cacf8;
1608}
1609
1610.scTailwindThreadPost_headerUserinfotag {
1611 color: var(--color, #e3e3e3);
1612}
1613
1614.scTailwindThreadPost_headerUserinfoheadline {
1615 color: var(--TWPT-interop-secondary-text);
1616}
1617
1618.scTailwindThreadReplydialogroot {
1619 background: #2a2b2f;
1620}
1621
1622.scTailwindThreadReplydialogheader {
1623 background: #7cacf8;
1624}
1625
1626.scTailwindThreadReplydialogheader h1.scTailwindThreadReplydialogheading {
1627 color: #1f1f1f;
1628}
1629
1630.scTailwindThreadReplydialogheading-button {
1631 color: #1f1f1f;
1632}
1633
1634.scTailwindThreadReplydialogtop-row {
1635 border-bottom: 1px solid var(--TWPT-interop-subtle-border);
1636}
1637
1638.scTailwindThreadReplydialogfooter {
1639 background: #36373a;
1640}
1641
1642.scTailwindThreadReplydialogfooter a {
1643 color: #7cacf8;
1644}
1645
1646.scTailwindThreadReplydialogminimized .scTailwindThreadReplydialogheader {
1647 background: #e3e3e3;
1648 color: #1f1f1f;
1649}
1650
1651.scTailwindThreadReplydialogroot .scTailwindThreadReplydialogerror {
1652 color: #ec928e;
1653}
1654
1655@media (min-width:48.125rem) {
1656 .scTailwindThreadReplydialogroot {
1657 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149);
1658 }
1659}
1660
1661.scTailwindThreadMessageMessagelisthelp-icon {
1662 color: var(--TWPT-interop-secondary-text);
1663}
1664
1665.scTailwindThreadMessageMessagelistrecommended-icon {
1666 color: #c4eed0;
1667}
1668
1669.scTailwindThreadMessageMessagelistrelevant-icon {
1670 color: #7cacf8;
1671}
1672
1673.scTailwindThreadMorebuttondivider {
1674 background: var(--TWPT-interop-subtle-border);
1675}
1676
1677.scTailwindThreadMorebuttonbutton {
1678 background: #1f1f1f;
1679 border: 1px solid var(--TWPT-interop-subtle-border);
1680 color: var(--TWPT-interop-secondary-text);
1681}
1682
1683.scTailwindThreadPesignupdialogclose-button-row button {
1684 color: #fff;
1685}
1686
1687.scTailwindThreadPesignupdialogdialog-body p {
1688 color: #e3e3e3;
1689}
1690
1691.scTailwindThreadPesignupdialogpe-dialog-container {
1692 background-color: #1f1f1f;
1693 -webkit-box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
1694 box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
1695}
1696
1697.scTailwindThreadPostconfirmationdialogclose-button-row button {
1698 color: #e3e3e3;
1699}
1700
1701.scTailwindThreadPostconfirmationdialogdialog-body p {
1702 color: #e3e3e3;
1703}
1704
1705.scTailwindThreadPostconfirmationdialogdialog-container {
1706 background-color: #1f1f1f;
1707 -webkit-box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
1708 box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
1709}
1710
1711.scTailwindThreadQuestionQuestioncardsub-content {
1712 background: #3c4043;
1713 border-top: 1px solid var(--TWPT-interop-subtle-border);
1714}
1715
1716.scTailwindThreadQuestionQuestioncardtitle {
1717 color: #e3e3e3;
1718}
1719
1720.scTailwindThreadQuestionQuestioncardbody {
1721 color: #e3e3e3;
1722}
1723
1724.scTailwindThreadQuestionQuestioncardbody a {
1725 color: #7cacf8;
1726}
1727
1728.scTailwindThreadQuestionQuestioncarddisclaimer,
1729.scTailwindThreadQuestionQuestioncardedited {
1730 color: var(--TWPT-interop-secondary-text);
1731}
1732
1733.scTailwindThreadQuestionQuestioncarddisclaimer a,
1734.scTailwindThreadQuestionQuestioncardedited a {
1735 color: #7cacf8;
1736}
1737
1738.scTailwindThreadQuestionQuestiondetailsdetail-link {
1739 color: #7cacf8;
1740}
1741
1742.scTailwindThreadQuestionQuestionpurposetag {
1743 background: #394457;
1744 color: #7cacf8;
1745}
1746
1747.scTailwindThreadQuestionStatechipschip {
1748 border: 1px solid var(--TWPT-interop-subtle-border);
1749 color: var(--TWPT-interop-secondary-text);
1750}
1751
1752.scTailwindThreadThreaddeleted-icon {
1753 color: var(--TWPT-interop-secondary-text);
1754}
1755
avm999630bc113a2020-09-07 13:02:11 +02001756/* Duplicate thread feature */
1757.search-results ec-thread-option material-expansionpanel .panel {
1758 background-color: var(--TWPT-primary-background)!important;
1759}
1760
1761.search-results ec-thread-option material-expansionpanel.selected .panel,
1762 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
1763 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
1764 background-color: #17191c!important;
1765}
1766
1767/* Disabled buttons */
1768material-button[disabled] {
1769 color: rgba(255, 255, 255, .26)!important;
1770}
1771
1772/* Material icons */
1773ec-filter-drawer-item material-icon,
1774 ec-filter-drawer-item ec-icon,
1775 material-drawer .drawer-section material-icon,
1776 material-drawer .drawer-section ec-icon,
1777 material-list material-icon,
1778 ec-query-builder material-icon,
avm999630bc113a2020-09-07 13:02:11 +02001779 ec-thread-summary material-expansionpanel .title material-icon,
1780 .search-results ec-thread-option material-icon,
1781 .search-results ec-thread-option ec-icon,
1782 ec-rich-text-editor material-icon,
1783 ec-editor-command material-icon,
avm99963223416c2021-04-21 22:13:14 +02001784 ec-canned-responses ec-canned-response-row material-icon,
1785 ec-ask-flow > .header material-button {
avm999630bc113a2020-09-07 13:02:11 +02001786 color: rgba(255, 255, 255, .87)!important;
1787}
1788
1789material-drawer ec-icon,
avm99963223416c2021-04-21 22:13:14 +02001790 .search-results ec-thread-option ec-icon,
avm9996315b23d72021-04-26 18:07:15 +02001791 ec-thread-summary material-expansionpanel .title ec-icon,
1792 ec-announcements-menu-item ec-icon {
avm999630bc113a2020-09-07 13:02:11 +02001793 fill: rgba(255, 255, 255, .87)!important;
1794}
1795
1796/* Dialogs */
1797material-dialog, material-dialog .dialog-header {
1798 background-color: var(--TWPT-primary-background)!important;
1799}
1800
1801ec-movable-dialog[showminimize] material-dialog .dialog-header {
1802 background-color: #d2e3fc!important;
1803}
1804
1805material-dialog .title {
1806 color: var(--TWPT-primary-text-alt)!important;
1807}
1808
1809ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
1810 color: var(--TWPT-primary-background)!important;
1811}
1812
1813ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
1814 background-color: #170f01!important;
1815}
1816
avm99963223416c2021-04-21 22:13:14 +02001817ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
1818 color: var(--TWPT-blue-A100)!important;
1819}
1820
avm999630bc113a2020-09-07 13:02:11 +02001821material-dialog .section-title,
1822 material-dialog .select-label,
1823 material-dialog .input-label,
1824 material-dialog .btn-no,
1825 ec-display-name-editor,
1826 .forum-selection-label {
1827 color: var(--TWPT-secondary-text)!important;
1828}
1829
avm9996301818912021-05-24 11:53:18 +02001830material-dialog main > .user {
1831 border-bottom-color: var(--TWPT-card-border)!important;
1832}
1833
avm999630bc113a2020-09-07 13:02:11 +02001834ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
1835 color: var(--TWPT-secondary-text)!important;
1836 background-color: var(--TWPT-active-background)!important;
1837 border-top-color: #25231f!important;
1838}
1839
avm9996301818912021-05-24 11:53:18 +02001840ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
1841 color: var(--TWPT-link)!important;
1842}
1843
avm999630bc113a2020-09-07 13:02:11 +02001844/* Keyboard shortcuts dialog */
Adrià Vilanova Martínezd28af562021-09-19 22:27:55 +02001845material-dialog .main.with-scroll-strokes table th {
avm999630bc113a2020-09-07 13:02:11 +02001846 color: var(--TWPT-primary-text)!important;
1847}
1848
Adrià Vilanova Martínezd28af562021-09-19 22:27:55 +02001849material-dialog .main.with-scroll-strokes table td {
1850 color: var(--TWPT-primary-text-alt)!important;
1851}
1852
1853material-dialog .main.with-scroll-strokes table tr,
1854 material-dialog .main.with-scroll-strokes .shortcut {
1855 border-color: var(--TWPT-card-border)!important;
1856}
1857
1858material-dialog .main.with-scroll-strokes.bottom-scroll-stroke {
1859 border-bottom-color: var(--TWPT-card-border)!important;
1860}
1861
1862material-dialog .main.with-scroll-strokes.top-scroll-stroke {
1863 border-top-color: var(--TWPT-card-border)!important;
1864}
1865
avm999630bc113a2020-09-07 13:02:11 +02001866/* Rich text editor */
1867ec-editor-command material-button,
1868 ec-formatting-popup material-button {
1869 box-shadow: none!important;
1870}
1871
1872ec-editor-command material-button.is-active {
1873 background: var(--TWPT-active-background)!important;
1874}
1875
1876ec-rich-text-editor .placeholder {
1877 color: rgba(255, 255, 255, .38)!important;
1878}
1879
avm9996301818912021-05-24 11:53:18 +02001880ec-rich-text-editor .input-wrapper,
1881 ec-rich-text-editor .spacer {
1882 border-color: var(--TWPT-card-border)!important;
1883}
1884
1885ec-rich-text-editor .input-wrapper.input-wrapper--focused {
1886 border-color: var(--TWPT-blue-A100)!important;
1887}
1888
avm999630bc113a2020-09-07 13:02:11 +02001889ec-rich-text-editor .input {
1890 color: var(--TWPT-primary-text)!important;
1891}
1892
1893ec-rich-text-editor .hint {
1894 color: rgba(255, 255, 255, .54)!important;
1895}
1896
1897material-select-searchbox + material-list material-list-item {
1898 color: rgba(255, 255, 255, .87)!important;
1899}
1900
1901ec-attachment .filename {
1902 color: var(--TWPT-primary-text)!important;
1903}
1904
1905/* Thread insert */
1906ec-thread-insert .title {
1907 color: var(--TWPT-primary-text)!important;
1908}
1909
1910ec-thread-insert ec-thread-counts,
1911 ec-thread-insert .details,
1912 ec-thread-insert ec-relative-time {
1913 color: rgba(255, 255, 255, .54)!important;
1914}
1915
1916/* Text input */
1917material-input input {
1918 color: var(--TWPT-primary-text)!important;
1919}
1920
1921material-input .label-text,
1922 material-input .hint-text,
1923 material-input .counter {
1924 color: rgba(255, 255, 255, .54)!important;
1925}
1926
1927material-input .underline .unfocused-underline {
avm99963223416c2021-04-21 22:13:14 +02001928 background-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +02001929}
1930
avm9996301818912021-05-24 11:53:18 +02001931material-input .underline .focused-underline {
1932 background-color: var(--TWPT-blue-A100)!important;
1933}
1934
avm999630bc113a2020-09-07 13:02:11 +02001935label .label {
1936 color: var(--TWPT-primary-text)!important;
1937}
1938
1939/* Input underline */
1940material-input .underline .unfocused-underline,
1941 material-dropdown-select dropdown-button [buttondecorator] {
avm9996301818912021-05-24 11:53:18 +02001942 border-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +02001943}
1944
Adrià Vilanova Martínez9605cb82021-09-07 13:04:10 +02001945/* Checkbox input (except for forum checkboxes in the drawer) */
Adrià Vilanova Martínezdd8075f2021-09-08 21:57:32 +02001946material-checkbox material-icon:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon),
1947 material-checkbox .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
avm999630bc113a2020-09-07 13:02:11 +02001948 color: var(--TWPT-secondary-text)!important;
1949}
1950
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +02001951/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
Adrià Vilanova Martínezdd8075f2021-09-08 21:57:32 +02001952material-checkbox material-icon.filled:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +02001953 color: var(--TWPT-blue-A100)!important;
1954}
1955
1956material-checkbox:focus:not(.disabled).gm-icons .icon,
1957 .gm-icons material-checkbox:focus:not(.disabled) .icon,
1958 material-checkbox:hover:not(.disabled).gm-icons .icon,
1959 .gm-icons material-checkbox:hover:not(.disabled) .icon {
1960 color: #cfd2d8!important; /* custom value */
1961}
1962
1963material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
1964 .gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
1965 material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
1966 .gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
1967 color: var(--TWPT-blue-100)!important;
1968}
1969
1970.gm-icons material-checkbox .icon-container::before{
1971 background-color: #dfdedb!important; /* custom value */
1972}
1973
1974/* Radio input */
1975material-radio .icon-container:not(.checked) material-icon {
1976 color: var(--TWPT-secondary-text)!important;
1977}
1978
1979material-radio .icon-container.checked material-icon {
1980 color: var(--TWPT-blue-A100)!important;
1981}
1982
1983/* Material switch */
1984.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
1985 background-color: #7d7d7d!important; /* custom value */
1986}
1987
1988.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
1989 border-color: #fff!important; /* custom value */
1990}
1991
1992.mdc-switch.mdc-switch--checked .mdc-switch__track {
1993 background-color: var(--TWPT-blue-A100)!important;
1994}
1995
1996.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
1997 border-color: var(--TWPT-blue-A100)!important;
1998}
1999
avm999630bc113a2020-09-07 13:02:11 +02002000/* Material menu button and dropdown select */
2001material-menu material-button, material-dropdown-select dropdown-button {
avm99963223416c2021-04-21 22:13:14 +02002002 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +02002003}
2004
avm9996348c87d12021-04-09 13:00:21 +02002005material-dropdown-select dropdown-button .button.is-disabled .button-text,
2006 material-dropdown-select dropdown-button .button.is-disabled material-icon {
2007 color: rgba(255, 255, 255, .32)!important;
avm999630bc113a2020-09-07 13:02:11 +02002008}
2009
2010/* Announcements content */
avm99963223416c2021-04-21 22:13:14 +02002011ec-announcements-content .header,
2012 ec-announcements-content .no-announcements,
2013 ec-announcements-content .announcement {
2014 border-bottom-color: var(--TWPT-card-border)!important;
2015}
2016
avm999630bc113a2020-09-07 13:02:11 +02002017ec-announcements-content .header .title, ec-announcements-content .announcement-title {
2018 color: var(--TWPT-primary-text-alt)!important;
2019}
2020
avm9996315b23d72021-04-26 18:07:15 +02002021ec-announcements-content .announcement-date {
2022 color: var(--TWPT-secondary-text)!important;
2023}
2024
avm999630bc113a2020-09-07 13:02:11 +02002025ec-announcements-content .no-announcements-message {
2026 color: #c3bfbc!important;
2027}
2028
avm9996315b23d72021-04-26 18:07:15 +02002029ec-announcements-content .view-all-link,
2030 ec-announcements-content .read-more-button {
avm99963223416c2021-04-21 22:13:14 +02002031 color: var(--TWPT-link)!important;
2032}
2033
avm9996315b23d72021-04-26 18:07:15 +02002034ec-announcements-content ::-webkit-scrollbar-thumb {
2035 background-color: rgba(255, 255, 255, .26)!important;
2036}
2037
2038ec-announcements-content ::-webkit-scrollbar-thumb:hover {
2039 background-color: #4285f4!important;
2040}
2041
avm99963b2329632021-02-06 20:05:34 +01002042/* Generic popup (for notification bell, account selector, etc.) */
2043.popup-wrapper .header-text {
2044 color: var(--TWPT-primary-text)!important;
2045}
2046
avm9996348c87d12021-04-09 13:00:21 +02002047/* Notifications bell popup/panel */
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +02002048.notification-panel .header {
2049 border-bottom-color: var(--TWPT-card-border)!important;
2050}
2051
avm9996348c87d12021-04-09 13:00:21 +02002052.notification-panel .header material-button {
2053 color: var(--TWPT-secondary-text)!important;
2054}
2055
2056.notification-panel .cards-container .promo-message {
2057 color: var(--TWPT-secondary-text)!important;
2058}
2059
2060.notification-panel .cards-container .promo-message .header-text {
2061 color: var(--TWPT-primary-text)!important;
2062}
2063
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +02002064.notification-panel .cards-container ec-notification-card-content {
2065 border-bottom-color: var(--TWPT-card-border)!important;
2066}
2067
2068.notification-panel .cards-container ec-notification-card-content .text {
2069 color: var(--TWPT-primary-text)!important;
2070}
2071
2072.notification-panel .cards-container ec-notification-card-content .time,
2073 .notification-panel .cards-container ec-notification-card-content .close material-button {
2074 color: var(--TWPT-secondary-text)!important;
2075}
2076
avm999630bc113a2020-09-07 13:02:11 +02002077/* Account selector */
2078.popup-wrapper .profile .email {
2079 color: rgba(255, 255, 255, .54)!important;
2080}
2081
2082material-gaia-picker-footer {
2083 color: rgba(255, 255, 255, .54)!important;
2084 background-color: var(--TWPT-active-background)!important;
2085}
2086
avm9996348c87d12021-04-09 13:00:21 +02002087material-gaia-picker-footer material-button {
2088 color: var(--TWPT-secondary-text)!important;
2089}
2090
avm999630bc113a2020-09-07 13:02:11 +02002091/* Canned responses */
2092ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +01002093 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +02002094 color: var(--TWPT-primary-text)!important;
2095}
2096
avm9996325a0d602020-11-25 19:24:16 +01002097ec-canned-responses .label-row,
2098 ec-canned-responses ec-canned-response-row .snippet,
Adrià Vilanova Martínez74a25202022-01-23 23:36:58 +01002099 ec-canned-responses ec-canned-response-row .tag .content,
2100 ec-canned-responses ec-canned-response-row .TWPT-tag .TWPT-content {
avm9996325a0d602020-11-25 19:24:16 +01002101 color: var(--TWPT-secondary-text)!important;
2102}
2103
avm999630bc113a2020-09-07 13:02:11 +02002104ec-canned-responses ec-canned-response-row .header.closed:hover,
2105 ec-canned-responses ec-canned-response-row .header.closed:focus,
2106 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
2107 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
2108 background-color: var(--TWPT-active-background)!important;
2109}
2110
avm9996325a0d602020-11-25 19:24:16 +01002111ec-canned-responses .filter-row,
2112 ec-canned-responses .label-row,
2113 ec-canned-responses ec-canned-response-row material-expansionpanel {
2114 border-bottom-color: var(--TWPT-subtle-border)!important;
2115}
2116
avm999630bc113a2020-09-07 13:02:11 +02002117/* Reply button */
Adrià Vilanova Martínez1d44d3d2021-07-26 15:34:19 +02002118material-fab.reply-button,
2119 material-fab.reply-fab {
avm999630bc113a2020-09-07 13:02:11 +02002120 background-color: var(--TWPT-link)!important;
2121 color: var(--TWPT-primary-background)!important;
2122}
2123
avm99963223416c2021-04-21 22:13:14 +02002124/* Settings view */
2125ec-settings .forum-language-container {
2126 border-bottom-color: var(--TWPT-subtle-border)!important;
2127}
2128
2129ec-settings .forum-language-container material-button {
2130 color: var(--TWPT-secondary-text)!important;
2131}
2132
Adrià Vilanova Martínez3356df72021-07-09 19:27:04 +02002133/* Loading spinner */
2134material-spinner {
2135 border-color: var(--TWPT-blue-A100)!important;
2136}
2137
avm99963f5923962020-12-07 16:44:37 +01002138/* Custom injected components */
2139.TWPT-log {
2140 background-color: #424242!important;
2141}
2142
2143.TWPT-log-entry.TWPT-log-entry--error {
2144 color: #ff8A80!important;
2145}