blob: d61be888b6daa78c24b5d63d58dba4f3f1d4db1d [file] [log] [blame]
avm999630bc113a2020-09-07 13:02:11 +02001:root {
2 --TWPT-primary-text: #e8eaed;
3 --TWPT-primary-text-alt: var(--TWPT-primary-text);
4 --TWPT-secondary-text: #9aa0a6;
5 --TWPT-primary-background: #202124;
6 --TWPT-secondary-background: #28292c;
7 --TWPT-active-background: #3c4043;
8 --TWPT-card-border: #5f6368;
9 --TWPT-subtle-border: #383735;
10 --TWPT-link: #8ab4f8;
avm99963744d0cf2021-03-23 22:05:57 +010011 --TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
12 --TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
avm999630bc113a2020-09-07 13:02:11 +020013 --TWPT-drawer-background: #2d2e30;
avm99963a51c7612020-11-25 23:58:56 +010014 --TWPT-button-background: #3c3e42;
avm99963223416c2021-04-21 22:13:14 +020015 --TWPT-input-underline: rgba(255, 255, 255, .28);
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +020016 --TWPT-blue-100: #BBDEFB;
avm99963fb7107c2021-04-14 19:39:05 +020017 --TWPT-blue-A100: #82B1FF;
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +020018 --TWPT-bad-text: #f6aea9;
19 --TWPT-good-text: #34a853;
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +020020 --TWPT-interop-primary-text: var(--TWPT-primary-text);
21 --TWPT-interop-secondary-text: #c4c7c5;
22 --TWPT-interop-subtle-border: #474747;
avm999630bc113a2020-09-07 13:02:11 +020023}
24
25body {
26 color: var(--TWPT-primary-text);
27 background-color: var(--TWPT-primary-background)!important;
28}
29
30p {
31 color: var(--TWPT-primary-text);
32}
33
34body.ec a {
35 color: var(--TWPT-link);
36}
37
38/* Header */
39.material-content > header {
40 background-color: var(--TWPT-primary-background)!important;
41}
42
avm9996315b23d72021-04-26 18:07:15 +020043.material-content > header .app-title-button,
44 .material-content > header .app-title-text {
45 color: var(--TWPT-secondary-text)!important;
avm99963ea9b23f2021-04-22 14:06:03 +020046}
47
avm9996348c87d12021-04-09 13:00:21 +020048.material-content > header material-button,
avm9996315b23d72021-04-26 18:07:15 +020049 .material-content > header material-button material-icon,
avm9996348c87d12021-04-09 13:00:21 +020050 .material-content > header notification-bell material-icon {
avm999630bc113a2020-09-07 13:02:11 +020051 color: rgba(255, 255, 255, .87)!important;
52}
53
54.search-box {
55 background-color: #313235!important;
56}
57
58.search-box .clear-icon {
59 opacity: 0.8;
60 color: rgba(255, 255, 255, .87)!important;
61}
62
63.material-content > header .bell.mixin {
64 fill: rgba(255, 255, 255, .87)!important;
65}
66
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +020067/* Notification bell */
68notification-bell:focus {
69 background-color: rgba(255, 255, 255, .10)!important;
70}
71
avm999630bc113a2020-09-07 13:02:11 +020072/* Drawer */
73material-drawer, material-drawer .panel, material-list-item {
74 background-color: var(--TWPT-drawer-background)!important;
75}
76
avm9996324ef6522020-11-25 19:45:43 +010077material-list-item:hover, material-list-item:focus, material-list-item.item--active {
avm999630bc113a2020-09-07 13:02:11 +020078 background-color: var(--TWPT-active-background)!important;
79}
80
81material-drawer .panel {
82 border-bottom-color: #25231f!important;
83}
84
85material-drawer .drawer-section-title, material-drawer .header > material-icon {
86 color: var(--TWPT-secondary-text)!important;
87}
88
avm9996315b23d72021-04-26 18:07:15 +020089material-drawer material-list-item,
90 material-drawer material-list-item .title {
avm999630bc113a2020-09-07 13:02:11 +020091 color: #d2cecb!important;
92}
93
94material-drawer ec-forum-drawer-item material-checkbox material-icon {
95 filter: brightness(1.5);
96}
97
avm9996315b23d72021-04-26 18:07:15 +020098/* Header menus */
99.popup material-list-item {
100 color: #d2cecb!important;
101}
102
avm99963223416c2021-04-21 22:13:14 +0200103/* Filters (ec-query-builder) */
104material-condition-builder .compound-condition-operator {
105 color: var(--TWPT-secondary-text)!important;
106}
107
108material-condition-builder .compound-condition-operator::before,
109 material-condition-builder .compound-condition-operator::after {
110 border-left-color: rgba(255, 255, 255, .20)!important;
111}
112
avm999630bc113a2020-09-07 13:02:11 +0200113/* Selector */
avm99963a51c7612020-11-25 23:58:56 +0100114
115/*
116 * This applies not only to the selector but also to the ec-work-state-picker.
117 */
avm99963a091be12021-02-18 17:03:28 +0100118.popup-wrapper, material-list, .popup .item-group-list {
avm999630bc113a2020-09-07 13:02:11 +0200119 background-color: var(--TWPT-drawer-background)!important;
120}
121
avm99963a091be12021-02-18 17:03:28 +0100122material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
123 .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
avm999630bc113a2020-09-07 13:02:11 +0200124 box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
125 border-top-color: #1f1f1f!important;
126}
127
128material-list material-select-item:hover,
129 material-list material-select-item:focus,
130 material-list material-select-dropdown-item:hover,
131 material-list material-select-dropdown-item:focus,
132 material-list material-select-dropdown-item.active,
avm99963a091be12021-02-18 17:03:28 +0100133 material-list material-select-dropdown-item:not(.multiselect).selected,
avm999634298b432021-08-16 16:38:00 +0200134 material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
avm99963a091be12021-02-18 17:03:28 +0100135 .popup .item-group-list material-select-item:hover,
136 .popup .item-group-list material-select-item:focus,
avm99963744d0cf2021-03-23 22:05:57 +0100137 .popup .item-group-list material-select-item.active,
avm99963a091be12021-02-18 17:03:28 +0100138 .popup .item-group-list material-select-dropdown-item:hover,
139 .popup .item-group-list material-select-dropdown-item:focus,
140 .popup .item-group-list material-select-dropdown-item.active,
141 .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
avm99963744d0cf2021-03-23 22:05:57 +0100142 background-color: var(--TWPT-highlighted-item-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200143}
144
avm999634298b432021-08-16 16:38:00 +0200145material-list .single-select-item,
146 material-list .menu-item-label,
avm99963a091be12021-02-18 17:03:28 +0100147 material-list .label,
148 material-list .text-segment,
avm9996355acfae2021-08-19 18:06:56 +0200149 menu-item-groups .single-select-item,
150 menu-item-groups .menu-item-label,
151 menu-item-groups .label,
152 menu-item-groups .text-segment {
avm999630bc113a2020-09-07 13:02:11 +0200153 color: rgba(255, 255, 255, .87)!important;
154}
155
avm99963a091be12021-02-18 17:03:28 +0100156.popup .item-group-list material-icon {
157 color: rgba(255, 255, 255, .7)!important;
158}
159
avm999630bc113a2020-09-07 13:02:11 +0200160material-list [group] > [label] {
161 color: #8a8a8a!important;
162}
163
avm9996348c87d12021-04-09 13:00:21 +0200164/* This is shown in the new thread view */
165ec-forum-language-picker .labeled-select .select-label {
166 color: var(--TWPT-secondary-text)!important;
167}
168
avm999630bc113a2020-09-07 13:02:11 +0200169/* Main */
170.main {
171 color: var(--TWPT-primary-text)!important;
172}
173
avm9996325a0d602020-11-25 19:24:16 +0100174/* Border color for the page title bar (most pages use .title-bar although
175 * some use .page-header).
176 */
177main .title-bar, main .page-header {
avm999630bc113a2020-09-07 13:02:11 +0200178 border-bottom-color: var(--TWPT-subtle-border)!important;
179}
180
181main .title-bar .title, main .page-header h1, main .header h1 {
182 color: var(--TWPT-primary-text)!important;
183}
184
185.card {
186 background-color: var(--TWPT-secondary-background)!important;
187 color: var(--TWPT-primary-text)!important;
188 border-color: var(--TWPT-card-border)!important;
189}
190
191.card .card-title, .card, .card-section-title {
192 color: var(--TWPT-primary-text)!important;
193}
194
avm99963223416c2021-04-21 22:13:14 +0200195.card .card-section-hint, .card .card-section-checkbox-hint {
avm999630bc113a2020-09-07 13:02:11 +0200196 color: var(--TWPT-secondary-text)!important;
197}
198
199/* Action bar */
200.material-content .action-bar material-button,
201 ec-bulk-actions material-button,
avm99963b2329632021-02-06 20:05:34 +0100202 ec-back-button material-button,
avm9996348c87d12021-04-09 13:00:21 +0200203 .sort-options material-button {
avm999630bc113a2020-09-07 13:02:11 +0200204 color: rgba(255, 255, 255, .54)!important;
205}
206
avm99963ea9b23f2021-04-22 14:06:03 +0200207.material-content .action-bar .review-button.reviewing {
208 color: #1a73e8!important;
209 background: #dae7ff!important;
210}
211
avm999630bc113a2020-09-07 13:02:11 +0200212.material-content .action-bar material-button.starred {
213 color: #fbbc04!important;
214}
215
Adrià Vilanova Martínez2c8913b2021-07-22 23:33:37 +0200216/* ec-work-state-picker and ec-symptom-picker */
217ec-work-state-picker > button,
218 ec-symptom-picker > button {
avm99963a51c7612020-11-25 23:58:56 +0100219 color: var(--TWPT-secondary-text)!important;
220 background-color: var(--TWPT-button-background)!important;
221 border-color: var(--TWPT-subtle-border)!important;
222}
223
224.material-popup-content .popup-content .title {
225 color: var(--TWPT-primary-text)!important;
226}
227
avm999630bc113a2020-09-07 13:02:11 +0200228/* Thread list */
229ec-thread-list ul.thread-group {
230 background-color: var(--TWPT-primary-background)!important;
231}
232
233ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
234 border-bottom-color: var(--TWPT-subtle-border)!important;
235}
236
avm99963a2a06442020-11-25 21:11:10 +0100237ec-thread-summary material-expansionpanel.read:not(.checked) {
avm999630bc113a2020-09-07 13:02:11 +0200238 background-color: var(--TWPT-thread-read-background)!important;
239}
240
avm99963e65bec42020-11-25 18:26:29 +0100241ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200242 opacity: 0.8;
243}
244
avm99963e65bec42020-11-25 18:26:29 +0100245ec-thread-summary material-expansionpanel.read .title .icon {
246 opacity: 0.48!important;
247}
248
avm999630bc113a2020-09-07 13:02:11 +0200249ec-thread-summary material-expansionpanel.checked {
avm99963a2a06442020-11-25 21:11:10 +0100250 background-color: #2c4b77!important;
avm999630bc113a2020-09-07 13:02:11 +0200251}
252
253ec-thread-summary material-expansionpanel .title {
254 color: var(--TWPT-primary-text)!important;
255}
256
257ec-thread-summary material-expansionpanel ec-second-summary-line,
258 material-expansionpanel .header-content,
avm9996348c87d12021-04-09 13:00:21 +0200259 material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
260 material-expansionpanel .duplicate-label {
avm999630bc113a2020-09-07 13:02:11 +0200261 color: #928e89!important;
262}
263
avm9996348c87d12021-04-09 13:00:21 +0200264material-expansionpanel .removed-label {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200265 color: var(--TWPT-bad-text)!important;
avm9996348c87d12021-04-09 13:00:21 +0200266}
267
avm999631558e6c2020-12-08 13:42:40 +0100268ec-thread-summary material-expansionpanel ec-safe-html.body,
269 material-expansionpanel .issue-tracking-work-state {
avm999630bc113a2020-09-07 13:02:11 +0200270 color: var(--TWPT-primary-text)!important;
271}
272
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200273/*
274 * The following section changes the styles of the checkboxes in thread lists,
275 * based in the styles defined in the "Checkbox input" section.
276 **/
Adrià Vilanova Martínezfb2169a2021-07-09 00:26:37 +0200277ec-thread-summary material-expansionpanel .action material-button,
278 ec-thread-list material-checkbox material-icon,
279 ec-thread-summary material-expansionpanel .star-button:not(.starred) {
280 color: #696867!important; /* Custom value to match previous behavior */
281 opacity: 1!important;
282}
283
284ec-thread-list material-checkbox material-icon.filled {
285 color: #62a5ff!important; /* Custom value to contrast well with the background */
286}
287
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200288/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
Adrià Vilanova Martínezfb2169a2021-07-09 00:26:37 +0200289ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon,
290 .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon,
291 ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon,
292 .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon {
293 color: #807d7c!important; /* custom value */
294}
295
296ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
297 .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon.filled,
298 ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
299 .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon.filled {
300 color: #92c1ff!important; /* custom value */
301}
302
avm99963b2329632021-02-06 20:05:34 +0100303/* Thread view (including review/live review components) */
avm999630bc113a2020-09-07 13:02:11 +0200304ec-question, .heading + .group, ec-message {
305 background-color: var(--TWPT-secondary-background)!important;
306}
307
avm99963b2329632021-02-06 20:05:34 +0100308ec-thread .no-review-needed {
309 background-color: #155829!important;
310 border-color: var(--TWPT-subtle-border)!important;
311}
312
313/* Review bar shown above the main message or replies */
314ec-review-bar {
avm999630bc113a2020-09-07 13:02:11 +0200315 background-color: var(--TWPT-active-background)!important;
316}
317
avm99963b2329632021-02-06 20:05:34 +0100318ec-review-bar material-chip {
319 background-color: var(--TWPT-button-background)!important;
320}
321
322ec-review-bar material-chip:not(.relevant-active):not(.active) {
avm99963b2329632021-02-06 20:05:34 +0100323 border-color: var(--TWPT-card-border)!important;
324}
325
326ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
327 color: var(--TWPT-primary-text)!important;
328 fill: var(--TWPT-primary-text)!important;
329}
330
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200331ec-review-bar material-chip:not(.relevant-active):not(.active) .content {
332 color: var(--TWPT-primary-text)!important;
333}
334
avm99963b2329632021-02-06 20:05:34 +0100335ec-review-bar material-chip.relevant-active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200336 border-color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100337}
338
339ec-review-bar material-chip.relevant-active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200340 color: var(--TWPT-good-text)!important;
341 fill: var(--TWPT-good-text)!important;
342}
343
344ec-review-bar material-chip.relevant-active .content {
345 color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100346}
347
348ec-review-bar material-chip.active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200349 border-color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100350}
351
352ec-review-bar material-chip.active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200353 color: var(--TWPT-bad-text)!important;
354 fill: var(--TWPT-bad-text)!important;
355}
356
357ec-review-bar material-chip.active .content {
358 color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100359}
360
avm999630bc113a2020-09-07 13:02:11 +0200361ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
362 color: var(--TWPT-secondary-text)!important;
363}
364
avm9996395da0772020-09-09 01:07:36 +0200365ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200366 background-color: var(--TWPT-active-background)!important;
367}
368
avm9996395da0772020-09-09 01:07:36 +0200369ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200370 color: var(--TWPT-primary-text)!important;
371}
372
avm9996395da0772020-09-09 01:07:36 +0200373ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200374 color: var(--TWPT-primary-text)!important;
375 fill: var(--TWPT-primary-text)!important;
376}
377
378ec-question .title {
379 color: var(--TWPT-primary-text-alt)!important;
380}
381
avm99963b2329632021-02-06 20:05:34 +0100382ec-user-link .name-text {
383 color: var(--TWPT-link)!important;
384}
385
386ec-message-header ec-avatar svg, ec-message-header .role,
387 ec-message .footer .role {
avm999630bc113a2020-09-07 13:02:11 +0200388 filter: brightness(1.5);
389}
390
391ec-question .body, ec-message .body {
392 color: var(--TWPT-primary-text)!important;
393}
394
395ec-question .thread-insert {
396 background: none!important;
397}
398
399ec-question .details-heading {
400 color: var(--TWPT-primary-text-alt) !important;
401}
402
Adrià Vilanova Martínez0ab61ea2021-06-03 20:25:18 +0200403ec-question .state-chips material-chip {
404 background-color: var(--TWPT-button-background)!important;
405 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
406 0 1px 1px 0 rgba(0, 0, 0, 0.14),
407 0 1px 3px 0 rgba(0, 0, 0, 0.12);
408}
409
410ec-question .state-chips material-chip .content {
411 color: var(--TWPT-primary-text)!important;
412}
413
avm9996348c87d12021-04-09 13:00:21 +0200414ec-question .footer,
415 ec-ask-flow .content-disclaimer {
avm999630bc113a2020-09-07 13:02:11 +0200416 color: var(--TWPT-primary-text)!important;
417 background-color: var(--TWPT-active-background)!important;
418 border-top-color: var(--TWPT-card-border)!important;
419}
420
421.heading {
422 color: var(--TWPT-primary-text)!important;
423}
424
425.heading + .group,
426 .load-more-bar,
427 ec-message:not(:first-child),
428 .load-more-bar .load-more-button,
429 .load-more-bar .load-all-button {
430 border-color: var(--TWPT-card-border)!important;
431}
432
avm9996395da0772020-09-09 01:07:36 +0200433ec-message .type {
434 color: var(--TWPT-primary-text)!important;
435}
436
avm999630bc113a2020-09-07 13:02:11 +0200437ec-message .footer ec-relative-time,
438 ec-message .footer ec-safe-html {
439 color: var(--TWPT-secondary-text)!important;
440}
441
442ec-message .helpful-prompt {
443 color: var(--TWPT-primary-text)!important;
444}
445
446ec-question .me-too-button,
447 ec-question .subscribe-button,
448 ec-message .upvote-button,
449 ec-message .downvote-button {
450 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100451 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200452}
453
avm99963223416c2021-04-21 22:13:14 +0200454ec-message .alert {
455 color: var(--TWPT-secondary-text)!important;
456}
457
avm999630bc113a2020-09-07 13:02:11 +0200458ec-question .me-too-button.selected,
459 ec-question .subscribe-button.selected,
460 ec-message .upvote-button.selected,
461 ec-message .downvote-button.selected {
462 color: #4285f4!important;
463}
464
465.load-more-bar .load-more-button, .load-more-bar .load-all-button {
466 background-color: var(--TWPT-secondary-background)!important;
467}
468
469.locked-alert {
470 background-color: var(--TWPT-active-background)!important;
471 border: var(--TWPT-card-border)!important;
472}
473
474.locked-alert material-icon {
475 color: rgba(255, 255, 255, .38)!important;
476}
477
avm99963b2329632021-02-06 20:05:34 +0100478ec-thread button.reply.collapsed {
479 color: var(--TWPT-secondary-text)!important;
480}
481
avm999630bc113a2020-09-07 13:02:11 +0200482ec-thread .finished-question {
483 background-color: var(--TWPT-active-background)!important;
484 border: var(--TWPT-card-border)!important;
485}
486
avm99963ea9b23f2021-04-22 14:06:03 +0200487ec-thread .finished-question .next-question {
488 color: var(--TWPT-link)!important;
489 border-color: var(--TWPT-link)!important;
490}
491
avm999630bc113a2020-09-07 13:02:11 +0200492.material-content .action-bar material-button.has-activity {
493 color: #1a73e8!important;
494}
495
496.material-content .action-bar material-button.showing-sidebar {
497 background-color: var(--TWPT-active-background)!important;
498}
499
500ec-activity-panel .title-bar h3 {
501 color: #e8eaf2!important;
502}
503
504ec-activity-panel ec-activity {
505 color: var(--TWPT-secondary-text)!important;
506 border-color: var(--TWPT-card-border)!important;
507}
508
509ec-activity-panel ec-activity .message {
510 color: var(--TWPT-primary-text-alt)!important;
511}
512
513ec-activity-panel ec-activity .thread-title {
514 color: #c3bfbc!important;
515}
516
517/* Recommended answers - show in green where we've overwritten the colors */
518.recommended-answers {
519 color: #34a853!important;
520}
521
avm99963fb7107c2021-04-14 19:39:05 +0200522/* Suggested answers - show brighter blue */
523.suggested-icon {
524 color: var(--TWPT-blue-A100)!important;
525}
526
527/* Help button (shown in the suggested answers header) */
528.explanation-icon material-icon {
529 color: rgba(255, 255, 255, .54)!important;
530}
531
532/* Help button tooltip */
533.popup .paper-container {
534 background: var(--TWPT-drawer-background)!important;
535}
536
537.explanation-icon material-icon:hover {
538 color: var(--TWPT-blue-A100)!important;
539}
540
avm99963223416c2021-04-21 22:13:14 +0200541/* New thread and edit message views */
542material-stepper {
543 border-top-color: var(--TWPT-card-border)!important;
544}
545
avm999630bc113a2020-09-07 13:02:11 +0200546material-stepper .stepper-step-name,
547 material-stepper .purpose-title {
548 color: var(--TWPT-primary-text)!important;
549}
550
551ec-ask-flow .display-name-label,
avm99963223416c2021-04-21 22:13:14 +0200552 material-stepper .additional-details-label,
553 material-stepper .detail-label {
avm999630bc113a2020-09-07 13:02:11 +0200554 color: var(--TWPT-secondary-text)!important;
555}
556
avm99963223416c2021-04-21 22:13:14 +0200557material-stepper .stepper-step[selectable=true]:focus {
558 background-color: rgba(60, 64, 67, .24)!important;
559}
560
avm9996301818912021-05-24 11:53:18 +0200561/* Compose thread view */
562ec-thread-composer .main-content .title-label,
563 ec-thread-composer .main-content .post-label {
564 color: var(--TWPT-primary-text-alt)!important;
565}
566
567ec-thread-composer .main-content .title-input,
568 ec-thread-composer .main-content ec-rich-text-editor {
569 border-color: var(--TWPT-card-border)!important;
570}
571
572ec-thread-composer .main-content .title-alert {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200573 color: var(--TWPT-bad-text)!important;
avm9996301818912021-05-24 11:53:18 +0200574}
575
576ec-thread-composer material-drawer {
577 background-color: inherit!important;
578}
579
580ec-thread-composer material-drawer .right-panel {
581 border-left-color: var(--TWPT-card-border)!important;
582}
583
584ec-thread-composer material-drawer .panel-section-title {
585 color: var(--TWPT-primary-text)!important;
586}
587
588ec-thread-composer material-drawer .panel-section-divider {
589 border-color: var(--TWPT-card-border)!important;
590}
591
592ec-thread-composer material-drawer material-radio .radio-label {
593 color: var(--TWPT-primary-text-alt)!important;
594}
595
596ec-thread-composer material-drawer material-radio .radio-description,
597 ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
598 color: var(--TWPT-secondary-text)!important;
599}
600
avm9996348c87d12021-04-09 13:00:21 +0200601/* Note: see thread view section. There is a rule for the thread creation
602 * footer.
603 **/
604
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200605/* Old profile view */
606/* TODO(b/twpowertools/80): Remove this code. */
avm9996348c87d12021-04-09 13:00:21 +0200607ec-user .main-card {
avm999630bc113a2020-09-07 13:02:11 +0200608 background-color: var(--TWPT-secondary-background)!important;
avm9996348c87d12021-04-09 13:00:21 +0200609}
610
611ec-user .abuse-alert-container {
612 background-color: var(--TWPT-active-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200613 border-top-right-radius: 8px!important;
avm9996348c87d12021-04-09 13:00:21 +0200614}
615
616ec-user .abuse-alert-container .abuse-alert {
617 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200618}
619
avm99963c4cb8f32020-09-07 23:52:28 +0200620ec-user ec-display-name-editor, ec-user .header .name {
avm999630bc113a2020-09-07 13:02:11 +0200621 color: var(--TWPT-primary-text)!important;
622}
623
avm9996395da0772020-09-09 01:07:36 +0200624ec-user .role {
625 filter: brightness(1.5);
626}
627
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200628/* Chart in both old and new profile view */
629ec-user bar-chart .axis text,
630 ec-unified-user sc-tailwind-shared-activity-chart .axis text {
avm999630bc113a2020-09-07 13:02:11 +0200631 fill: rgba(255, 255, 255, .54)!important;
632}
633
634ec-user bar-chart .axis path,
635 ec-user bar-chart .axis .gridline,
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200636 ec-user bar-chart .axis line,
637 ec-unified-user sc-tailwind-shared-activity-chart .axis path,
638 ec-unified-user sc-tailwind-shared-activity-chart .axis .gridline,
639 ec-unified-user sc-tailwind-shared-activity-chart .axis line {
avm999630bc113a2020-09-07 13:02:11 +0200640 stroke: rgba(255, 255, 255, .12)!important;
641}
642
643ec-user bar-chart .axis line.axis-zero-tick,
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200644 ec-user bar-chart .axis.x .tick-mark,
645 ec-unified-user sc-tailwind-shared-activity-chart .axis line.axis-zero-tick,
646 ec-unified-user sc-tailwind-shared-activity-chart .axis.x .tick-mark {
avm999630bc113a2020-09-07 13:02:11 +0200647 stroke: rgba(255, 255, 255, .38)!important;
648}
649
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200650ec-user bar-chart .aplos-legend-entry,
651 ec-unified-user sc-tailwind-shared-activity-chart .aplos-legend-entry {
avm999630bc113a2020-09-07 13:02:11 +0200652 color: var(--TWPT-secondary-text)!important;
653}
654
655.aplos-hovercard {
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200656 color: var(--TWPT-interop-secondary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200657 background: var(--TWPT-secondary-background)!important;
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200658 border: none!important;
avm999630bc113a2020-09-07 13:02:11 +0200659}
660
661.aplos-hovercard .title {
662 color: var(--TWPT-primary-text)!important;
663}
664
665.aplos-hovercard .subtitle,
666 .aplos-donut-center .subtitle,
667 .aplos-hovercard .series,
668 .aplos-donut-center .series,
669 .aplos-hovercard .value,
670 .aplos-donut-center .value {
671 color: var(--TWPT-secondary-text)!important;
672}
673
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200674/*
675 * IMPORTANT NOTICE:
676 * Note: the following styles (for interop components) have been written by
677 * Googlers and thus are not included as part of the MIT license. This also
678 * applies to the styles of the unified profiles.
679 **/
680
681/* Common styles for interop components */
682.scSharedCalloutroot {
683 color: var(--TWPT-interop-primary-text)!important;
684}
685
686.scSharedCallouterror {
687 background-color: #523a3b!important;
688 border-color: #f9dedc!important;
689}
690
691.scSharedCallouterror sc-shared-material-icon {
692 color: #f9dedc!important;
693}
694
695.scSharedCallouterror>.scSharedCalloutsecondary-button button {
696 color: #ec928e!important;
697}
698
699.scSharedCalloutcaution {
700 background-color: #554c33!important;
701 border-color: #ffdf99!important;
702}
703
704.scSharedCalloutcaution sc-shared-material-icon {
705 color: #ffdf99!important;
706}
707
708.scSharedCalloutcaution>.scSharedCalloutsecondary-button button {
709 color: #f09d00!important;
710}
711
712.scSharedCalloutinformational {
713 background-color: #394457!important;
714 border-color: #d3e3fd!important;
715}
716
717.scSharedCalloutinformational sc-shared-material-icon {
718 color: #d3e3fd!important;
719}
720
721.scSharedCalloutinformational>.scSharedCalloutsecondary-button button {
722 color: #7cacf8!important;
723}
724
725.scSharedCalloutsuccess {
726 background-color: #37493f!important;
727 border-color: #c4eed0!important;
728}
729
730.scSharedCalloutsuccess sc-shared-material-icon {
731 color: #c4eed0!important;
732}
733
734.scSharedCalloutsuccess>.scSharedCalloutsecondary-button button {
735 color: #37be5f!important;
736}
737
738.scSharedMaterialbuttonroot:disabled {
739 color: rgba(227, 227, 227, 0.369)!important;
740}
741
742.scSharedMaterialbuttontext {
743 color: #7cacf8!important;
744}
745
746.scSharedMaterialbuttoncolor-label {
747 color: var(--TWPT-interop-secondary-text)!important;
748}
749
750.scSharedMaterialbuttoncolor-hint {
751 color: var(--TWPT-interop-secondary-text)!important;
752}
753
754.scSharedMaterialbuttonnavigational {
755 color: var(--TWPT-interop-primary-text)!important;
756}
757
758.scSharedMaterialbuttonnavigational-alt {
759 color: var(--TWPT-interop-secondary-text)!important;
760}
761
762.scSharedMaterialbuttonhairline {
763 border-color: var(--TWPT-interop-subtle-border)!important;
764 color: #7cacf8!important;
765}
766
767.scSharedMaterialbuttonhairline:disabled {
768 border-color: rgba(227, 227, 227, 0.369)!important;
769}
770
771.scSharedMaterialbuttonhairline:hover,
772 .scSharedMaterialbuttonhairline:focus {
773 border-color: rgba(124, 172, 248, 0.239)!important;
774}
775
776.scSharedMaterialbuttonhairline:active {
777 box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
778}
779
780.scSharedMaterialbuttontonal {
781 color: #7cacf8!important;
782 background: #394457!important;
783}
784
785.scSharedMaterialbuttontonal:hover {
786 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
787}
788
789.scSharedMaterialbuttontonal:active {
790 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
791}
792
793.scSharedMaterialbuttontonal:disabled {
794 background: rgba(227, 227, 227, 0.122)!important;
795}
796
797.scSharedMaterialbuttonfilled {
798 background: #7cacf8!important;
799 color: #1f1f1f!important;
800}
801
802.scSharedMaterialbuttonfilled:disabled {
803 background: rgba(227, 227, 227, 0.122)!important;
804}
805
806.scSharedMaterialbuttonfilled:hover,
807 .scSharedMaterialbuttonfilled:focus {
808 box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
809}
810
811.scSharedMaterialbuttonfilled:active {
812 box-shadow: 0 1px 3px 0 rgba(124, 172, 248, 0.302), 0 4px 8px 3px rgba(124, 172, 248, 0.149)!important;
813}
814
815.scSharedMaterialbuttonprotected {
816 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
817 background: #1f1f1f!important;
818 color: #7cacf8!important;
819}
820
821.scSharedMaterialbuttonprotected:disabled {
822 background: rgba(227, 227, 227, 0.122)!important;
823}
824
825.scSharedMaterialbuttonprotected:hover {
826 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
827}
828
829.scSharedMaterialbuttonprotected:focus {
830 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
831}
832
833.scSharedMaterialbuttonprotected:active {
834 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149)!important;
835}
836
837.scSharedExpandabletextexpander {
838 color: #7cacf8!important;
839}
840
841.scSharedMaterialborderfilled {
842 background: #313235!important;
843 border-bottom: 1px solid var(--TWPT-interop-secondary-text)!important;
844}
845
846.scSharedMaterialborderfilled-error {
847 border-bottom-color: #ec928e!important;
848}
849
850.scSharedMaterialborderfilled-bottom {
851 background-color: #7cacf8!important;
852}
853
854.scSharedMaterialborderfilled-label {
855 color: var(--TWPT-interop-secondary-text)!important;
856}
857
858.scSharedMaterialborderfilled-label-focused {
859 color: #7cacf8!important;
860}
861
862.scSharedMaterialborderlabel {
863 color: var(--TWPT-interop-secondary-text)!important;
864}
865
866.scSharedMaterialborderleft {
867 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
868 border-left-color: var(--TWPT-interop-secondary-text)!important;
869 border-top-color: var(--TWPT-interop-secondary-text)!important;
870}
871
872.scSharedMaterialborderleft-error {
873 border-bottom-color: #ec928e!important;
874 border-left-color: #ec928e!important;
875 border-top-color: #ec928e!important;
876}
877
878.scSharedMaterialbordermid {
879 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
880 border-top-color: var(--TWPT-interop-secondary-text)!important;
881}
882
883.scSharedMaterialbordermid-error {
884 border-bottom-color: #ec928e!important;
885 border-top-color: #ec928e!important;
886}
887
888.scSharedMaterialborderright {
889 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
890 border-right-color: var(--TWPT-interop-secondary-text)!important;
891 border-top-color: var(--TWPT-interop-secondary-text)!important;
892}
893
894.scSharedMaterialborderright-error {
895 border-bottom-color: #ec928e!important;
896 border-right-color: #ec928e!important;
897 border-top-color: #ec928e!important;
898}
899
900.scSharedMaterialborderfocused {
901 border-color: #7cacf8!important;
902}
903
904.scSharedMaterialborderdisabled {
905 border-color: var(--TWPT-interop-subtle-border)!important;
906}
907
908.scSharedMaterialborderlabel-focused {
909 color: #7cacf8!important;
910}
911
912.scSharedMaterialborderlabel-disabled {
913 color: rgba(255, 255, 255, 0.239)!important;
914}
915
916.scSharedMaterialborderlabel-error {
917 color: #ec928e!important;
918}
919
920.scSharedMaterialcheckboxcheckbox {
921 color: #7cacf8!important;
922}
923
924.scSharedMaterialcheckboxbox {
925 border-color: var(--TWPT-interop-secondary-text)!important;
926}
927
928.scSharedMaterialcheckboxcheckmark-path {
929 stroke: #1f1f1f!important;
930}
931
932.scSharedMaterialcheckboxmixedmark {
933 border-color: #1f1f1f!important;
934}
935
936.scSharedMaterial_dialogDialogcontentloading-overlay {
937 background: rgba(227, 227, 227, 0.122)!important;
938}
939
940.scSharedMaterialpopupbackground {
941 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
942 background: #2a2b2f!important;
943 border: 1px solid var(--TWPT-interop-subtle-border)!important;
944}
945
946.scSharedMaterialmenuroot {
947 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
948 background: #2a2b2f!important;
949}
950
951.scSharedMaterialmenuitem {
952 color: var(--TWPT-interop-primary-text)!important;
953}
954
955.scSharedMaterialmenuitem-separator {
956 border-top-color: var(--TWPT-interop-subtle-border)!important;
957}
958
959.scSharedMaterialmenuhighlight:focus,
960 .scSharedMaterialmenuhighlight:hover {
961 background-color: #394457!important;
962}
963
964.scSharedMaterialmenuhighlight:focus {
965 outline: auto #7cacf8 1px!important;
966}
967
968.scSharedMaterialsnackbarsnackbar {
969 background: var(--TWPT-interop-primary-text)!important;
970 color: #1f1f1f!important;
971}
972
973.scSharedMaterialsnackbaraction button {
974 color: #0b57d0!important;
975}
976
977.scSharedMaterialtabbartab {
978 color: var(--TWPT-interop-primary-text)!important;
979}
980
981.scSharedMaterialtabbartab:hover,
982 .scSharedMaterialtabbartab:focus {
983 background-color: #313235!important;
984}
985
986.scSharedMaterialtabbarselected {
987 border-bottom-color: #7cacf8!important;
988 color: #7cacf8!important;
989}
990
991.scSharedMaterialtextfieldlabel {
992 color: var(--TWPT-interop-primary-text)!important;
993}
994
995.scSharedMaterialtextfieldnative-control {
996 caret-color: #7cacf8!important;
997 color: var(--TWPT-interop-primary-text)!important;
998}
999
1000.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldnative-control {
1001 caret-color: #ec928e!important;
1002}
1003
1004.scSharedMaterialtextfieldnative-control:disabled {
1005 color: var(--TWPT-interop-secondary-text)!important;
1006}
1007
1008.scSharedMaterialtextfieldfocused .scSharedMaterialtextfieldlabel {
1009 color: #7cacf8!important;
1010}
1011
1012.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldlabel {
1013 color: #ec928e!important;
1014}
1015
1016.scSharedMaterialtextfielddisabled .scSharedMaterialtextfieldlabel {
1017 color: var(--TWPT-interop-secondary-text)!important;
1018}
1019
1020.scSharedMaterialtextfieldhelper-text {
1021 color: var(--TWPT-interop-secondary-text)!important;
1022}
1023
1024.scSharedMaterialtextfieldhelper-text-invalid {
1025 color: #ec928e!important;
1026}
1027
1028.scSharedMaterialtextfieldhelper-text-disabled {
1029 color: var(--TWPT-interop-secondary-text)!important;
1030}
1031
1032.scTailwindSharedActivitychartroot {
1033 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1034}
1035
1036.scTailwindSharedAvataravatar-loading {
1037 background: #1f1f1f!important;
1038}
1039
1040.scTailwindSharedReportabusedialogcontent .abuse-link {
1041 color: #7cacf8!important;
1042}
1043
1044/* Unified profile view */
1045.scTailwindUser_profileAchievementsempty a,
1046 .scTailwindUser_profileAchievementsempty a:visited,
1047 sc-tailwind-user_profile-user-profile .link-icon {
1048 color: #7cacf8!important;
1049}
1050
1051.scTailwindUser_profileBiosectionsection-heading {
1052 color: var(--TWPT-interop-secondary-text)!important;
1053}
1054
1055.scTailwindUser_profileBiosectionbio {
1056 color: var(--TWPT-interop-primary-text)!important;
1057}
1058
1059.scTailwindUser_profileBiosectionlinks,
1060 .scTailwindUser_profileBiosectionlink {
1061 color: #7cacf8!important;
1062}
1063
1064.scTailwindUser_profileBiosectioninput-label {
1065 color: var(--TWPT-interop-secondary-text)!important;
1066}
1067
1068.scTailwindUser_profileEmaildisplayemail-display {
1069 color: var(--TWPT-interop-secondary-text)!important;
1070}
1071
1072.scTailwindUser_profileEmaildisplayshow-email {
1073 color: #7cacf8!important;
1074}
1075
1076.scTailwindUser_profileMessagecardthread-link {
1077 color: var(--TWPT-interop-secondary-text)!important;
1078}
1079
1080.scTailwindUser_profileMessagecardlabel {
1081 color: var(--TWPT-interop-secondary-text)!important;
1082}
1083
1084.scTailwindUser_profileMessagecardcontent {
1085 border-left: 2px solid var(--TWPT-interop-subtle-border)!important;
1086 color: var(--TWPT-interop-primary-text)!important;
1087}
1088
1089.scTailwindUser_profileMessagecardcount {
1090 color: var(--TWPT-interop-secondary-text)!important;
1091}
1092
1093.scTailwindUser_profileMessagecardrecommended-answer {
1094 color: #6dd58c!important;
1095}
1096
1097.scTailwindUser_profileMessagecardrecommended-answer .icon {
1098 background-color: #6dd58c!important;
1099 color: #1f1f1f!important;
1100}
1101
1102sc-tailwind-user_profile-user-profile .notificationIcon {
1103 color: var(--TWPT-interop-secondary-text)!important;
1104}
1105
1106sc-tailwind-user_profile-user-profile .deleteIcon,
1107 sc-tailwind-user_profile-user-profile .reportAbuseIcon,
1108 sc-tailwind-user_profile-user-profile .reactivateIcon {
1109 color: var(--TWPT-interop-secondary-text)!important;
1110}
1111
1112.scTailwindUser_profilePosthistorysection+.scTailwindUser_profilePosthistorysection {
1113 border-top-color: var(--TWPT-interop-subtle-border)!important;
1114}
1115
1116.scTailwindUser_profilePosthistorycontent,
1117 .scTailwindUser_profilePosthistoryheader,
1118 .scTailwindUser_profilePosthistoryerror {
1119 border-color: var(--TWPT-interop-subtle-border)!important;
1120}
1121
1122.scTailwindUser_profileThreadcardtitle {
1123 color: var(--TWPT-interop-primary-text)!important;
1124}
1125
1126.scTailwindUser_profileThreadcardlabel {
1127 color: var(--TWPT-interop-secondary-text)!important;
1128}
1129
1130.scTailwindUser_profileThreadcardcontent {
1131 color: var(--TWPT-interop-primary-text)!important;
1132}
1133
1134.scTailwindUser_profileThreadcardcount {
1135 color: var(--TWPT-interop-secondary-text)!important;
1136}
1137
1138.scTailwindUser_profileThreadcardreply .icon {
1139 color: var(--TWPT-interop-secondary-text)!important;
1140}
1141
1142.scTailwindUser_profileThreadcardrecommended-answer {
1143 color: #6dd58c!important;
1144}
1145
1146.scTailwindUser_profileThreadcardrecommended-answer .icon {
1147 background-color: #6dd58c!important;
1148 color: #1f1f1f!important;
1149}
1150
1151.scTailwindUser_profileUsercardroot {
1152 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1153}
1154
1155.scTailwindUser_profileUsercardinput-label {
1156 color: var(--TWPT-interop-secondary-text)!important;
1157}
1158
1159.scTailwindUser_profileUsercardheadline {
1160 color: var(--TWPT-interop-primary-text)!important;
1161}
1162
1163.scTailwindUser_profileUsercarddetails {
1164 color: var(--TWPT-interop-secondary-text)!important;
1165}
1166
1167.scTailwindUser_profileUsercardlinks,
1168 .scTailwindUser_profileUsercardlink {
1169 color: #7cacf8!important;
1170}
1171
1172.scTailwindUser_profileUsercardhorizontal-separator {
1173 background-color: var(--TWPT-interop-subtle-border)!important;
1174 color: var(--TWPT-interop-subtle-border)!important;
1175}
1176
1177.scTailwindUser_profileUsercardsection-heading {
1178 color: var(--TWPT-interop-secondary-text)!important;
1179}
1180
avm999630bc113a2020-09-07 13:02:11 +02001181/* Duplicate thread feature */
1182.search-results ec-thread-option material-expansionpanel .panel {
1183 background-color: var(--TWPT-primary-background)!important;
1184}
1185
1186.search-results ec-thread-option material-expansionpanel.selected .panel,
1187 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
1188 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
1189 background-color: #17191c!important;
1190}
1191
1192/* Disabled buttons */
1193material-button[disabled] {
1194 color: rgba(255, 255, 255, .26)!important;
1195}
1196
1197/* Material icons */
1198ec-filter-drawer-item material-icon,
1199 ec-filter-drawer-item ec-icon,
1200 material-drawer .drawer-section material-icon,
1201 material-drawer .drawer-section ec-icon,
1202 material-list material-icon,
1203 ec-query-builder material-icon,
avm999630bc113a2020-09-07 13:02:11 +02001204 ec-thread-summary material-expansionpanel .title material-icon,
1205 .search-results ec-thread-option material-icon,
1206 .search-results ec-thread-option ec-icon,
1207 ec-rich-text-editor material-icon,
1208 ec-editor-command material-icon,
avm99963223416c2021-04-21 22:13:14 +02001209 ec-canned-responses ec-canned-response-row material-icon,
1210 ec-ask-flow > .header material-button {
avm999630bc113a2020-09-07 13:02:11 +02001211 color: rgba(255, 255, 255, .87)!important;
1212}
1213
1214material-drawer ec-icon,
avm99963223416c2021-04-21 22:13:14 +02001215 .search-results ec-thread-option ec-icon,
avm9996315b23d72021-04-26 18:07:15 +02001216 ec-thread-summary material-expansionpanel .title ec-icon,
1217 ec-announcements-menu-item ec-icon {
avm999630bc113a2020-09-07 13:02:11 +02001218 fill: rgba(255, 255, 255, .87)!important;
1219}
1220
1221/* Dialogs */
1222material-dialog, material-dialog .dialog-header {
1223 background-color: var(--TWPT-primary-background)!important;
1224}
1225
1226ec-movable-dialog[showminimize] material-dialog .dialog-header {
1227 background-color: #d2e3fc!important;
1228}
1229
1230material-dialog .title {
1231 color: var(--TWPT-primary-text-alt)!important;
1232}
1233
1234ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
1235 color: var(--TWPT-primary-background)!important;
1236}
1237
1238ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
1239 background-color: #170f01!important;
1240}
1241
avm99963223416c2021-04-21 22:13:14 +02001242ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
1243 color: var(--TWPT-blue-A100)!important;
1244}
1245
avm999630bc113a2020-09-07 13:02:11 +02001246material-dialog .section-title,
1247 material-dialog .select-label,
1248 material-dialog .input-label,
1249 material-dialog .btn-no,
1250 ec-display-name-editor,
1251 .forum-selection-label {
1252 color: var(--TWPT-secondary-text)!important;
1253}
1254
avm9996301818912021-05-24 11:53:18 +02001255material-dialog main > .user {
1256 border-bottom-color: var(--TWPT-card-border)!important;
1257}
1258
avm999630bc113a2020-09-07 13:02:11 +02001259ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
1260 color: var(--TWPT-secondary-text)!important;
1261 background-color: var(--TWPT-active-background)!important;
1262 border-top-color: #25231f!important;
1263}
1264
avm9996301818912021-05-24 11:53:18 +02001265ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
1266 color: var(--TWPT-link)!important;
1267}
1268
avm999630bc113a2020-09-07 13:02:11 +02001269/* Keyboard shortcuts dialog */
Adrià Vilanova Martínezd28af562021-09-19 22:27:55 +02001270material-dialog .main.with-scroll-strokes table th {
avm999630bc113a2020-09-07 13:02:11 +02001271 color: var(--TWPT-primary-text)!important;
1272}
1273
Adrià Vilanova Martínezd28af562021-09-19 22:27:55 +02001274material-dialog .main.with-scroll-strokes table td {
1275 color: var(--TWPT-primary-text-alt)!important;
1276}
1277
1278material-dialog .main.with-scroll-strokes table tr,
1279 material-dialog .main.with-scroll-strokes .shortcut {
1280 border-color: var(--TWPT-card-border)!important;
1281}
1282
1283material-dialog .main.with-scroll-strokes.bottom-scroll-stroke {
1284 border-bottom-color: var(--TWPT-card-border)!important;
1285}
1286
1287material-dialog .main.with-scroll-strokes.top-scroll-stroke {
1288 border-top-color: var(--TWPT-card-border)!important;
1289}
1290
avm999630bc113a2020-09-07 13:02:11 +02001291/* Rich text editor */
1292ec-editor-command material-button,
1293 ec-formatting-popup material-button {
1294 box-shadow: none!important;
1295}
1296
1297ec-editor-command material-button.is-active {
1298 background: var(--TWPT-active-background)!important;
1299}
1300
1301ec-rich-text-editor .placeholder {
1302 color: rgba(255, 255, 255, .38)!important;
1303}
1304
avm9996301818912021-05-24 11:53:18 +02001305ec-rich-text-editor .input-wrapper,
1306 ec-rich-text-editor .spacer {
1307 border-color: var(--TWPT-card-border)!important;
1308}
1309
1310ec-rich-text-editor .input-wrapper.input-wrapper--focused {
1311 border-color: var(--TWPT-blue-A100)!important;
1312}
1313
avm999630bc113a2020-09-07 13:02:11 +02001314ec-rich-text-editor .input {
1315 color: var(--TWPT-primary-text)!important;
1316}
1317
1318ec-rich-text-editor .hint {
1319 color: rgba(255, 255, 255, .54)!important;
1320}
1321
1322material-select-searchbox + material-list material-list-item {
1323 color: rgba(255, 255, 255, .87)!important;
1324}
1325
1326ec-attachment .filename {
1327 color: var(--TWPT-primary-text)!important;
1328}
1329
1330/* Thread insert */
1331ec-thread-insert .title {
1332 color: var(--TWPT-primary-text)!important;
1333}
1334
1335ec-thread-insert ec-thread-counts,
1336 ec-thread-insert .details,
1337 ec-thread-insert ec-relative-time {
1338 color: rgba(255, 255, 255, .54)!important;
1339}
1340
1341/* Text input */
1342material-input input {
1343 color: var(--TWPT-primary-text)!important;
1344}
1345
1346material-input .label-text,
1347 material-input .hint-text,
1348 material-input .counter {
1349 color: rgba(255, 255, 255, .54)!important;
1350}
1351
1352material-input .underline .unfocused-underline {
avm99963223416c2021-04-21 22:13:14 +02001353 background-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +02001354}
1355
avm9996301818912021-05-24 11:53:18 +02001356material-input .underline .focused-underline {
1357 background-color: var(--TWPT-blue-A100)!important;
1358}
1359
avm999630bc113a2020-09-07 13:02:11 +02001360label .label {
1361 color: var(--TWPT-primary-text)!important;
1362}
1363
1364/* Input underline */
1365material-input .underline .unfocused-underline,
1366 material-dropdown-select dropdown-button [buttondecorator] {
avm9996301818912021-05-24 11:53:18 +02001367 border-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +02001368}
1369
Adrià Vilanova Martínez9605cb82021-09-07 13:04:10 +02001370/* Checkbox input (except for forum checkboxes in the drawer) */
Adrià Vilanova Martínezdd8075f2021-09-08 21:57:32 +02001371material-checkbox material-icon:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon),
1372 material-checkbox .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
avm999630bc113a2020-09-07 13:02:11 +02001373 color: var(--TWPT-secondary-text)!important;
1374}
1375
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +02001376/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
Adrià Vilanova Martínezdd8075f2021-09-08 21:57:32 +02001377material-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 +02001378 color: var(--TWPT-blue-A100)!important;
1379}
1380
1381material-checkbox:focus:not(.disabled).gm-icons .icon,
1382 .gm-icons material-checkbox:focus:not(.disabled) .icon,
1383 material-checkbox:hover:not(.disabled).gm-icons .icon,
1384 .gm-icons material-checkbox:hover:not(.disabled) .icon {
1385 color: #cfd2d8!important; /* custom value */
1386}
1387
1388material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
1389 .gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
1390 material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
1391 .gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
1392 color: var(--TWPT-blue-100)!important;
1393}
1394
1395.gm-icons material-checkbox .icon-container::before{
1396 background-color: #dfdedb!important; /* custom value */
1397}
1398
1399/* Radio input */
1400material-radio .icon-container:not(.checked) material-icon {
1401 color: var(--TWPT-secondary-text)!important;
1402}
1403
1404material-radio .icon-container.checked material-icon {
1405 color: var(--TWPT-blue-A100)!important;
1406}
1407
1408/* Material switch */
1409.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
1410 background-color: #7d7d7d!important; /* custom value */
1411}
1412
1413.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
1414 border-color: #fff!important; /* custom value */
1415}
1416
1417.mdc-switch.mdc-switch--checked .mdc-switch__track {
1418 background-color: var(--TWPT-blue-A100)!important;
1419}
1420
1421.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
1422 border-color: var(--TWPT-blue-A100)!important;
1423}
1424
avm999630bc113a2020-09-07 13:02:11 +02001425/* Material menu button and dropdown select */
1426material-menu material-button, material-dropdown-select dropdown-button {
avm99963223416c2021-04-21 22:13:14 +02001427 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +02001428}
1429
avm9996348c87d12021-04-09 13:00:21 +02001430material-dropdown-select dropdown-button .button.is-disabled .button-text,
1431 material-dropdown-select dropdown-button .button.is-disabled material-icon {
1432 color: rgba(255, 255, 255, .32)!important;
avm999630bc113a2020-09-07 13:02:11 +02001433}
1434
1435/* Announcements content */
avm99963223416c2021-04-21 22:13:14 +02001436ec-announcements-content .header,
1437 ec-announcements-content .no-announcements,
1438 ec-announcements-content .announcement {
1439 border-bottom-color: var(--TWPT-card-border)!important;
1440}
1441
avm999630bc113a2020-09-07 13:02:11 +02001442ec-announcements-content .header .title, ec-announcements-content .announcement-title {
1443 color: var(--TWPT-primary-text-alt)!important;
1444}
1445
avm9996315b23d72021-04-26 18:07:15 +02001446ec-announcements-content .announcement-date {
1447 color: var(--TWPT-secondary-text)!important;
1448}
1449
avm999630bc113a2020-09-07 13:02:11 +02001450ec-announcements-content .no-announcements-message {
1451 color: #c3bfbc!important;
1452}
1453
avm9996315b23d72021-04-26 18:07:15 +02001454ec-announcements-content .view-all-link,
1455 ec-announcements-content .read-more-button {
avm99963223416c2021-04-21 22:13:14 +02001456 color: var(--TWPT-link)!important;
1457}
1458
avm9996315b23d72021-04-26 18:07:15 +02001459ec-announcements-content ::-webkit-scrollbar-thumb {
1460 background-color: rgba(255, 255, 255, .26)!important;
1461}
1462
1463ec-announcements-content ::-webkit-scrollbar-thumb:hover {
1464 background-color: #4285f4!important;
1465}
1466
avm99963b2329632021-02-06 20:05:34 +01001467/* Generic popup (for notification bell, account selector, etc.) */
1468.popup-wrapper .header-text {
1469 color: var(--TWPT-primary-text)!important;
1470}
1471
avm9996348c87d12021-04-09 13:00:21 +02001472/* Notifications bell popup/panel */
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +02001473.notification-panel .header {
1474 border-bottom-color: var(--TWPT-card-border)!important;
1475}
1476
avm9996348c87d12021-04-09 13:00:21 +02001477.notification-panel .header material-button {
1478 color: var(--TWPT-secondary-text)!important;
1479}
1480
1481.notification-panel .cards-container .promo-message {
1482 color: var(--TWPT-secondary-text)!important;
1483}
1484
1485.notification-panel .cards-container .promo-message .header-text {
1486 color: var(--TWPT-primary-text)!important;
1487}
1488
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +02001489.notification-panel .cards-container ec-notification-card-content {
1490 border-bottom-color: var(--TWPT-card-border)!important;
1491}
1492
1493.notification-panel .cards-container ec-notification-card-content .text {
1494 color: var(--TWPT-primary-text)!important;
1495}
1496
1497.notification-panel .cards-container ec-notification-card-content .time,
1498 .notification-panel .cards-container ec-notification-card-content .close material-button {
1499 color: var(--TWPT-secondary-text)!important;
1500}
1501
avm999630bc113a2020-09-07 13:02:11 +02001502/* Account selector */
1503.popup-wrapper .profile .email {
1504 color: rgba(255, 255, 255, .54)!important;
1505}
1506
1507material-gaia-picker-footer {
1508 color: rgba(255, 255, 255, .54)!important;
1509 background-color: var(--TWPT-active-background)!important;
1510}
1511
avm9996348c87d12021-04-09 13:00:21 +02001512material-gaia-picker-footer material-button {
1513 color: var(--TWPT-secondary-text)!important;
1514}
1515
avm999630bc113a2020-09-07 13:02:11 +02001516/* Canned responses */
1517ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +01001518 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +02001519 color: var(--TWPT-primary-text)!important;
1520}
1521
avm9996325a0d602020-11-25 19:24:16 +01001522ec-canned-responses .label-row,
1523 ec-canned-responses ec-canned-response-row .snippet,
1524 ec-canned-responses ec-canned-response-row .tag {
1525 color: var(--TWPT-secondary-text)!important;
1526}
1527
avm999630bc113a2020-09-07 13:02:11 +02001528ec-canned-responses ec-canned-response-row .header.closed:hover,
1529 ec-canned-responses ec-canned-response-row .header.closed:focus,
1530 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
1531 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
1532 background-color: var(--TWPT-active-background)!important;
1533}
1534
avm9996325a0d602020-11-25 19:24:16 +01001535ec-canned-responses .filter-row,
1536 ec-canned-responses .label-row,
1537 ec-canned-responses ec-canned-response-row material-expansionpanel {
1538 border-bottom-color: var(--TWPT-subtle-border)!important;
1539}
1540
avm999630bc113a2020-09-07 13:02:11 +02001541/* Reply button */
Adrià Vilanova Martínez1d44d3d2021-07-26 15:34:19 +02001542material-fab.reply-button,
1543 material-fab.reply-fab {
avm999630bc113a2020-09-07 13:02:11 +02001544 background-color: var(--TWPT-link)!important;
1545 color: var(--TWPT-primary-background)!important;
1546}
1547
avm99963223416c2021-04-21 22:13:14 +02001548/* Settings view */
1549ec-settings .forum-language-container {
1550 border-bottom-color: var(--TWPT-subtle-border)!important;
1551}
1552
1553ec-settings .forum-language-container material-button {
1554 color: var(--TWPT-secondary-text)!important;
1555}
1556
Adrià Vilanova Martínez3356df72021-07-09 19:27:04 +02001557/* Loading spinner */
1558material-spinner {
1559 border-color: var(--TWPT-blue-A100)!important;
1560}
1561
avm99963f5923962020-12-07 16:44:37 +01001562/* Custom injected components */
1563.TWPT-log {
1564 background-color: #424242!important;
1565}
1566
1567.TWPT-log-entry.TWPT-log-entry--error {
1568 color: #ff8A80!important;
1569}