blob: 8a6b6ad9a675fe9425c3ac6bb23d52487745d199 [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
Adrià Vilanova Martínezdb57f362022-01-13 23:46:24 +0100378ec-question .alert material-button {
379 color: var(--TWPT-link)!important;
380}
381
avm999630bc113a2020-09-07 13:02:11 +0200382ec-question .title {
383 color: var(--TWPT-primary-text-alt)!important;
384}
385
avm99963b2329632021-02-06 20:05:34 +0100386ec-user-link .name-text {
387 color: var(--TWPT-link)!important;
388}
389
390ec-message-header ec-avatar svg, ec-message-header .role,
391 ec-message .footer .role {
avm999630bc113a2020-09-07 13:02:11 +0200392 filter: brightness(1.5);
393}
394
395ec-question .body, ec-message .body {
396 color: var(--TWPT-primary-text)!important;
397}
398
399ec-question .thread-insert {
400 background: none!important;
401}
402
403ec-question .details-heading {
404 color: var(--TWPT-primary-text-alt) !important;
405}
406
Adrià Vilanova Martínez0ab61ea2021-06-03 20:25:18 +0200407ec-question .state-chips material-chip {
408 background-color: var(--TWPT-button-background)!important;
409 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
410 0 1px 1px 0 rgba(0, 0, 0, 0.14),
411 0 1px 3px 0 rgba(0, 0, 0, 0.12);
412}
413
414ec-question .state-chips material-chip .content {
415 color: var(--TWPT-primary-text)!important;
416}
417
avm9996348c87d12021-04-09 13:00:21 +0200418ec-question .footer,
419 ec-ask-flow .content-disclaimer {
avm999630bc113a2020-09-07 13:02:11 +0200420 color: var(--TWPT-primary-text)!important;
421 background-color: var(--TWPT-active-background)!important;
422 border-top-color: var(--TWPT-card-border)!important;
423}
424
425.heading {
426 color: var(--TWPT-primary-text)!important;
427}
428
429.heading + .group,
430 .load-more-bar,
431 ec-message:not(:first-child),
432 .load-more-bar .load-more-button,
433 .load-more-bar .load-all-button {
434 border-color: var(--TWPT-card-border)!important;
435}
436
avm9996395da0772020-09-09 01:07:36 +0200437ec-message .type {
438 color: var(--TWPT-primary-text)!important;
439}
440
avm999630bc113a2020-09-07 13:02:11 +0200441ec-message .footer ec-relative-time,
442 ec-message .footer ec-safe-html {
443 color: var(--TWPT-secondary-text)!important;
444}
445
446ec-message .helpful-prompt {
447 color: var(--TWPT-primary-text)!important;
448}
449
450ec-question .me-too-button,
451 ec-question .subscribe-button,
452 ec-message .upvote-button,
453 ec-message .downvote-button {
454 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100455 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200456}
457
avm99963223416c2021-04-21 22:13:14 +0200458ec-message .alert {
459 color: var(--TWPT-secondary-text)!important;
460}
461
avm999630bc113a2020-09-07 13:02:11 +0200462ec-question .me-too-button.selected,
463 ec-question .subscribe-button.selected,
464 ec-message .upvote-button.selected,
465 ec-message .downvote-button.selected {
466 color: #4285f4!important;
467}
468
469.load-more-bar .load-more-button, .load-more-bar .load-all-button {
470 background-color: var(--TWPT-secondary-background)!important;
471}
472
473.locked-alert {
474 background-color: var(--TWPT-active-background)!important;
475 border: var(--TWPT-card-border)!important;
476}
477
478.locked-alert material-icon {
479 color: rgba(255, 255, 255, .38)!important;
480}
481
avm99963b2329632021-02-06 20:05:34 +0100482ec-thread button.reply.collapsed {
483 color: var(--TWPT-secondary-text)!important;
484}
485
avm999630bc113a2020-09-07 13:02:11 +0200486ec-thread .finished-question {
487 background-color: var(--TWPT-active-background)!important;
488 border: var(--TWPT-card-border)!important;
489}
490
avm99963ea9b23f2021-04-22 14:06:03 +0200491ec-thread .finished-question .next-question {
492 color: var(--TWPT-link)!important;
493 border-color: var(--TWPT-link)!important;
494}
495
avm999630bc113a2020-09-07 13:02:11 +0200496.material-content .action-bar material-button.has-activity {
497 color: #1a73e8!important;
498}
499
500.material-content .action-bar material-button.showing-sidebar {
501 background-color: var(--TWPT-active-background)!important;
502}
503
504ec-activity-panel .title-bar h3 {
505 color: #e8eaf2!important;
506}
507
508ec-activity-panel ec-activity {
509 color: var(--TWPT-secondary-text)!important;
510 border-color: var(--TWPT-card-border)!important;
511}
512
513ec-activity-panel ec-activity .message {
514 color: var(--TWPT-primary-text-alt)!important;
515}
516
517ec-activity-panel ec-activity .thread-title {
518 color: #c3bfbc!important;
519}
520
521/* Recommended answers - show in green where we've overwritten the colors */
522.recommended-answers {
523 color: #34a853!important;
524}
525
avm99963fb7107c2021-04-14 19:39:05 +0200526/* Suggested answers - show brighter blue */
527.suggested-icon {
528 color: var(--TWPT-blue-A100)!important;
529}
530
531/* Help button (shown in the suggested answers header) */
532.explanation-icon material-icon {
533 color: rgba(255, 255, 255, .54)!important;
534}
535
536/* Help button tooltip */
537.popup .paper-container {
538 background: var(--TWPT-drawer-background)!important;
539}
540
541.explanation-icon material-icon:hover {
542 color: var(--TWPT-blue-A100)!important;
543}
544
avm99963223416c2021-04-21 22:13:14 +0200545/* New thread and edit message views */
546material-stepper {
547 border-top-color: var(--TWPT-card-border)!important;
548}
549
avm999630bc113a2020-09-07 13:02:11 +0200550material-stepper .stepper-step-name,
551 material-stepper .purpose-title {
552 color: var(--TWPT-primary-text)!important;
553}
554
555ec-ask-flow .display-name-label,
avm99963223416c2021-04-21 22:13:14 +0200556 material-stepper .additional-details-label,
557 material-stepper .detail-label {
avm999630bc113a2020-09-07 13:02:11 +0200558 color: var(--TWPT-secondary-text)!important;
559}
560
avm99963223416c2021-04-21 22:13:14 +0200561material-stepper .stepper-step[selectable=true]:focus {
562 background-color: rgba(60, 64, 67, .24)!important;
563}
564
avm9996301818912021-05-24 11:53:18 +0200565/* Compose thread view */
566ec-thread-composer .main-content .title-label,
567 ec-thread-composer .main-content .post-label {
568 color: var(--TWPT-primary-text-alt)!important;
569}
570
571ec-thread-composer .main-content .title-input,
572 ec-thread-composer .main-content ec-rich-text-editor {
573 border-color: var(--TWPT-card-border)!important;
574}
575
576ec-thread-composer .main-content .title-alert {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200577 color: var(--TWPT-bad-text)!important;
avm9996301818912021-05-24 11:53:18 +0200578}
579
580ec-thread-composer material-drawer {
581 background-color: inherit!important;
582}
583
584ec-thread-composer material-drawer .right-panel {
585 border-left-color: var(--TWPT-card-border)!important;
586}
587
588ec-thread-composer material-drawer .panel-section-title {
589 color: var(--TWPT-primary-text)!important;
590}
591
592ec-thread-composer material-drawer .panel-section-divider {
593 border-color: var(--TWPT-card-border)!important;
594}
595
596ec-thread-composer material-drawer material-radio .radio-label {
597 color: var(--TWPT-primary-text-alt)!important;
598}
599
600ec-thread-composer material-drawer material-radio .radio-description,
601 ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
602 color: var(--TWPT-secondary-text)!important;
603}
604
avm9996348c87d12021-04-09 13:00:21 +0200605/* Note: see thread view section. There is a rule for the thread creation
606 * footer.
607 **/
608
Adrià Vilanova Martínez531cd072021-12-05 20:15:43 +0100609/* Chart in the profile view */
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200610ec-user bar-chart .axis text,
611 ec-unified-user sc-tailwind-shared-activity-chart .axis text {
avm999630bc113a2020-09-07 13:02:11 +0200612 fill: rgba(255, 255, 255, .54)!important;
613}
614
615ec-user bar-chart .axis path,
616 ec-user bar-chart .axis .gridline,
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200617 ec-user bar-chart .axis line,
618 ec-unified-user sc-tailwind-shared-activity-chart .axis path,
619 ec-unified-user sc-tailwind-shared-activity-chart .axis .gridline,
620 ec-unified-user sc-tailwind-shared-activity-chart .axis line {
avm999630bc113a2020-09-07 13:02:11 +0200621 stroke: rgba(255, 255, 255, .12)!important;
622}
623
624ec-user bar-chart .axis line.axis-zero-tick,
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200625 ec-user bar-chart .axis.x .tick-mark,
626 ec-unified-user sc-tailwind-shared-activity-chart .axis line.axis-zero-tick,
627 ec-unified-user sc-tailwind-shared-activity-chart .axis.x .tick-mark {
avm999630bc113a2020-09-07 13:02:11 +0200628 stroke: rgba(255, 255, 255, .38)!important;
629}
630
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200631ec-user bar-chart .aplos-legend-entry,
632 ec-unified-user sc-tailwind-shared-activity-chart .aplos-legend-entry {
avm999630bc113a2020-09-07 13:02:11 +0200633 color: var(--TWPT-secondary-text)!important;
634}
635
636.aplos-hovercard {
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200637 color: var(--TWPT-interop-secondary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200638 background: var(--TWPT-secondary-background)!important;
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200639 border: none!important;
avm999630bc113a2020-09-07 13:02:11 +0200640}
641
642.aplos-hovercard .title {
643 color: var(--TWPT-primary-text)!important;
644}
645
646.aplos-hovercard .subtitle,
647 .aplos-donut-center .subtitle,
648 .aplos-hovercard .series,
649 .aplos-donut-center .series,
650 .aplos-hovercard .value,
651 .aplos-donut-center .value {
652 color: var(--TWPT-secondary-text)!important;
653}
654
Adrià Vilanova Martínezd20e57e2021-10-13 23:12:13 +0200655/*
656 * IMPORTANT NOTICE:
657 * Note: the following styles (for interop components) have been written by
658 * Googlers and thus are not included as part of the MIT license. This also
659 * applies to the styles of the unified profiles.
660 **/
661
662/* Common styles for interop components */
663.scSharedCalloutroot {
664 color: var(--TWPT-interop-primary-text)!important;
665}
666
667.scSharedCallouterror {
668 background-color: #523a3b!important;
669 border-color: #f9dedc!important;
670}
671
672.scSharedCallouterror sc-shared-material-icon {
673 color: #f9dedc!important;
674}
675
676.scSharedCallouterror>.scSharedCalloutsecondary-button button {
677 color: #ec928e!important;
678}
679
680.scSharedCalloutcaution {
681 background-color: #554c33!important;
682 border-color: #ffdf99!important;
683}
684
685.scSharedCalloutcaution sc-shared-material-icon {
686 color: #ffdf99!important;
687}
688
689.scSharedCalloutcaution>.scSharedCalloutsecondary-button button {
690 color: #f09d00!important;
691}
692
693.scSharedCalloutinformational {
694 background-color: #394457!important;
695 border-color: #d3e3fd!important;
696}
697
698.scSharedCalloutinformational sc-shared-material-icon {
699 color: #d3e3fd!important;
700}
701
702.scSharedCalloutinformational>.scSharedCalloutsecondary-button button {
703 color: #7cacf8!important;
704}
705
706.scSharedCalloutsuccess {
707 background-color: #37493f!important;
708 border-color: #c4eed0!important;
709}
710
711.scSharedCalloutsuccess sc-shared-material-icon {
712 color: #c4eed0!important;
713}
714
715.scSharedCalloutsuccess>.scSharedCalloutsecondary-button button {
716 color: #37be5f!important;
717}
718
719.scSharedMaterialbuttonroot:disabled {
720 color: rgba(227, 227, 227, 0.369)!important;
721}
722
723.scSharedMaterialbuttontext {
724 color: #7cacf8!important;
725}
726
727.scSharedMaterialbuttoncolor-label {
728 color: var(--TWPT-interop-secondary-text)!important;
729}
730
731.scSharedMaterialbuttoncolor-hint {
732 color: var(--TWPT-interop-secondary-text)!important;
733}
734
735.scSharedMaterialbuttonnavigational {
736 color: var(--TWPT-interop-primary-text)!important;
737}
738
739.scSharedMaterialbuttonnavigational-alt {
740 color: var(--TWPT-interop-secondary-text)!important;
741}
742
743.scSharedMaterialbuttonhairline {
744 border-color: var(--TWPT-interop-subtle-border)!important;
745 color: #7cacf8!important;
746}
747
748.scSharedMaterialbuttonhairline:disabled {
749 border-color: rgba(227, 227, 227, 0.369)!important;
750}
751
752.scSharedMaterialbuttonhairline:hover,
753 .scSharedMaterialbuttonhairline:focus {
754 border-color: rgba(124, 172, 248, 0.239)!important;
755}
756
757.scSharedMaterialbuttonhairline:active {
758 box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
759}
760
761.scSharedMaterialbuttontonal {
762 color: #7cacf8!important;
763 background: #394457!important;
764}
765
766.scSharedMaterialbuttontonal:hover {
767 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
768}
769
770.scSharedMaterialbuttontonal:active {
771 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
772}
773
774.scSharedMaterialbuttontonal:disabled {
775 background: rgba(227, 227, 227, 0.122)!important;
776}
777
778.scSharedMaterialbuttonfilled {
779 background: #7cacf8!important;
780 color: #1f1f1f!important;
781}
782
783.scSharedMaterialbuttonfilled:disabled {
784 background: rgba(227, 227, 227, 0.122)!important;
785}
786
787.scSharedMaterialbuttonfilled:hover,
788 .scSharedMaterialbuttonfilled:focus {
789 box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
790}
791
792.scSharedMaterialbuttonfilled:active {
793 box-shadow: 0 1px 3px 0 rgba(124, 172, 248, 0.302), 0 4px 8px 3px rgba(124, 172, 248, 0.149)!important;
794}
795
796.scSharedMaterialbuttonprotected {
797 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
798 background: #1f1f1f!important;
799 color: #7cacf8!important;
800}
801
802.scSharedMaterialbuttonprotected:disabled {
803 background: rgba(227, 227, 227, 0.122)!important;
804}
805
806.scSharedMaterialbuttonprotected:hover {
807 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
808}
809
810.scSharedMaterialbuttonprotected:focus {
811 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
812}
813
814.scSharedMaterialbuttonprotected:active {
815 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149)!important;
816}
817
818.scSharedExpandabletextexpander {
819 color: #7cacf8!important;
820}
821
822.scSharedMaterialborderfilled {
823 background: #313235!important;
824 border-bottom: 1px solid var(--TWPT-interop-secondary-text)!important;
825}
826
827.scSharedMaterialborderfilled-error {
828 border-bottom-color: #ec928e!important;
829}
830
831.scSharedMaterialborderfilled-bottom {
832 background-color: #7cacf8!important;
833}
834
835.scSharedMaterialborderfilled-label {
836 color: var(--TWPT-interop-secondary-text)!important;
837}
838
839.scSharedMaterialborderfilled-label-focused {
840 color: #7cacf8!important;
841}
842
843.scSharedMaterialborderlabel {
844 color: var(--TWPT-interop-secondary-text)!important;
845}
846
847.scSharedMaterialborderleft {
848 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
849 border-left-color: var(--TWPT-interop-secondary-text)!important;
850 border-top-color: var(--TWPT-interop-secondary-text)!important;
851}
852
853.scSharedMaterialborderleft-error {
854 border-bottom-color: #ec928e!important;
855 border-left-color: #ec928e!important;
856 border-top-color: #ec928e!important;
857}
858
859.scSharedMaterialbordermid {
860 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
861 border-top-color: var(--TWPT-interop-secondary-text)!important;
862}
863
864.scSharedMaterialbordermid-error {
865 border-bottom-color: #ec928e!important;
866 border-top-color: #ec928e!important;
867}
868
869.scSharedMaterialborderright {
870 border-bottom-color: var(--TWPT-interop-secondary-text)!important;
871 border-right-color: var(--TWPT-interop-secondary-text)!important;
872 border-top-color: var(--TWPT-interop-secondary-text)!important;
873}
874
875.scSharedMaterialborderright-error {
876 border-bottom-color: #ec928e!important;
877 border-right-color: #ec928e!important;
878 border-top-color: #ec928e!important;
879}
880
881.scSharedMaterialborderfocused {
882 border-color: #7cacf8!important;
883}
884
885.scSharedMaterialborderdisabled {
886 border-color: var(--TWPT-interop-subtle-border)!important;
887}
888
889.scSharedMaterialborderlabel-focused {
890 color: #7cacf8!important;
891}
892
893.scSharedMaterialborderlabel-disabled {
894 color: rgba(255, 255, 255, 0.239)!important;
895}
896
897.scSharedMaterialborderlabel-error {
898 color: #ec928e!important;
899}
900
901.scSharedMaterialcheckboxcheckbox {
902 color: #7cacf8!important;
903}
904
905.scSharedMaterialcheckboxbox {
906 border-color: var(--TWPT-interop-secondary-text)!important;
907}
908
909.scSharedMaterialcheckboxcheckmark-path {
910 stroke: #1f1f1f!important;
911}
912
913.scSharedMaterialcheckboxmixedmark {
914 border-color: #1f1f1f!important;
915}
916
917.scSharedMaterial_dialogDialogcontentloading-overlay {
918 background: rgba(227, 227, 227, 0.122)!important;
919}
920
921.scSharedMaterialpopupbackground {
922 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
923 background: #2a2b2f!important;
924 border: 1px solid var(--TWPT-interop-subtle-border)!important;
925}
926
927.scSharedMaterialmenuroot {
928 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
929 background: #2a2b2f!important;
930}
931
932.scSharedMaterialmenuitem {
933 color: var(--TWPT-interop-primary-text)!important;
934}
935
936.scSharedMaterialmenuitem-separator {
937 border-top-color: var(--TWPT-interop-subtle-border)!important;
938}
939
940.scSharedMaterialmenuhighlight:focus,
941 .scSharedMaterialmenuhighlight:hover {
942 background-color: #394457!important;
943}
944
945.scSharedMaterialmenuhighlight:focus {
946 outline: auto #7cacf8 1px!important;
947}
948
949.scSharedMaterialsnackbarsnackbar {
950 background: var(--TWPT-interop-primary-text)!important;
951 color: #1f1f1f!important;
952}
953
954.scSharedMaterialsnackbaraction button {
955 color: #0b57d0!important;
956}
957
958.scSharedMaterialtabbartab {
959 color: var(--TWPT-interop-primary-text)!important;
960}
961
962.scSharedMaterialtabbartab:hover,
963 .scSharedMaterialtabbartab:focus {
964 background-color: #313235!important;
965}
966
967.scSharedMaterialtabbarselected {
968 border-bottom-color: #7cacf8!important;
969 color: #7cacf8!important;
970}
971
972.scSharedMaterialtextfieldlabel {
973 color: var(--TWPT-interop-primary-text)!important;
974}
975
976.scSharedMaterialtextfieldnative-control {
977 caret-color: #7cacf8!important;
978 color: var(--TWPT-interop-primary-text)!important;
979}
980
981.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldnative-control {
982 caret-color: #ec928e!important;
983}
984
985.scSharedMaterialtextfieldnative-control:disabled {
986 color: var(--TWPT-interop-secondary-text)!important;
987}
988
989.scSharedMaterialtextfieldfocused .scSharedMaterialtextfieldlabel {
990 color: #7cacf8!important;
991}
992
993.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldlabel {
994 color: #ec928e!important;
995}
996
997.scSharedMaterialtextfielddisabled .scSharedMaterialtextfieldlabel {
998 color: var(--TWPT-interop-secondary-text)!important;
999}
1000
1001.scSharedMaterialtextfieldhelper-text {
1002 color: var(--TWPT-interop-secondary-text)!important;
1003}
1004
1005.scSharedMaterialtextfieldhelper-text-invalid {
1006 color: #ec928e!important;
1007}
1008
1009.scSharedMaterialtextfieldhelper-text-disabled {
1010 color: var(--TWPT-interop-secondary-text)!important;
1011}
1012
1013.scTailwindSharedActivitychartroot {
1014 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1015}
1016
1017.scTailwindSharedAvataravatar-loading {
1018 background: #1f1f1f!important;
1019}
1020
1021.scTailwindSharedReportabusedialogcontent .abuse-link {
1022 color: #7cacf8!important;
1023}
1024
1025/* Unified profile view */
1026.scTailwindUser_profileAchievementsempty a,
1027 .scTailwindUser_profileAchievementsempty a:visited,
1028 sc-tailwind-user_profile-user-profile .link-icon {
1029 color: #7cacf8!important;
1030}
1031
1032.scTailwindUser_profileBiosectionsection-heading {
1033 color: var(--TWPT-interop-secondary-text)!important;
1034}
1035
1036.scTailwindUser_profileBiosectionbio {
1037 color: var(--TWPT-interop-primary-text)!important;
1038}
1039
1040.scTailwindUser_profileBiosectionlinks,
1041 .scTailwindUser_profileBiosectionlink {
1042 color: #7cacf8!important;
1043}
1044
1045.scTailwindUser_profileBiosectioninput-label {
1046 color: var(--TWPT-interop-secondary-text)!important;
1047}
1048
1049.scTailwindUser_profileEmaildisplayemail-display {
1050 color: var(--TWPT-interop-secondary-text)!important;
1051}
1052
1053.scTailwindUser_profileEmaildisplayshow-email {
1054 color: #7cacf8!important;
1055}
1056
1057.scTailwindUser_profileMessagecardthread-link {
1058 color: var(--TWPT-interop-secondary-text)!important;
1059}
1060
1061.scTailwindUser_profileMessagecardlabel {
1062 color: var(--TWPT-interop-secondary-text)!important;
1063}
1064
1065.scTailwindUser_profileMessagecardcontent {
1066 border-left: 2px solid var(--TWPT-interop-subtle-border)!important;
1067 color: var(--TWPT-interop-primary-text)!important;
1068}
1069
1070.scTailwindUser_profileMessagecardcount {
1071 color: var(--TWPT-interop-secondary-text)!important;
1072}
1073
1074.scTailwindUser_profileMessagecardrecommended-answer {
1075 color: #6dd58c!important;
1076}
1077
1078.scTailwindUser_profileMessagecardrecommended-answer .icon {
1079 background-color: #6dd58c!important;
1080 color: #1f1f1f!important;
1081}
1082
1083sc-tailwind-user_profile-user-profile .notificationIcon {
1084 color: var(--TWPT-interop-secondary-text)!important;
1085}
1086
1087sc-tailwind-user_profile-user-profile .deleteIcon,
1088 sc-tailwind-user_profile-user-profile .reportAbuseIcon,
1089 sc-tailwind-user_profile-user-profile .reactivateIcon {
1090 color: var(--TWPT-interop-secondary-text)!important;
1091}
1092
1093.scTailwindUser_profilePosthistorysection+.scTailwindUser_profilePosthistorysection {
1094 border-top-color: var(--TWPT-interop-subtle-border)!important;
1095}
1096
1097.scTailwindUser_profilePosthistorycontent,
1098 .scTailwindUser_profilePosthistoryheader,
1099 .scTailwindUser_profilePosthistoryerror {
1100 border-color: var(--TWPT-interop-subtle-border)!important;
1101}
1102
1103.scTailwindUser_profileThreadcardtitle {
1104 color: var(--TWPT-interop-primary-text)!important;
1105}
1106
1107.scTailwindUser_profileThreadcardlabel {
1108 color: var(--TWPT-interop-secondary-text)!important;
1109}
1110
1111.scTailwindUser_profileThreadcardcontent {
1112 color: var(--TWPT-interop-primary-text)!important;
1113}
1114
1115.scTailwindUser_profileThreadcardcount {
1116 color: var(--TWPT-interop-secondary-text)!important;
1117}
1118
1119.scTailwindUser_profileThreadcardreply .icon {
1120 color: var(--TWPT-interop-secondary-text)!important;
1121}
1122
1123.scTailwindUser_profileThreadcardrecommended-answer {
1124 color: #6dd58c!important;
1125}
1126
1127.scTailwindUser_profileThreadcardrecommended-answer .icon {
1128 background-color: #6dd58c!important;
1129 color: #1f1f1f!important;
1130}
1131
1132.scTailwindUser_profileUsercardroot {
1133 border: 1px solid var(--TWPT-interop-subtle-border)!important;
1134}
1135
1136.scTailwindUser_profileUsercardinput-label {
1137 color: var(--TWPT-interop-secondary-text)!important;
1138}
1139
1140.scTailwindUser_profileUsercardheadline {
1141 color: var(--TWPT-interop-primary-text)!important;
1142}
1143
1144.scTailwindUser_profileUsercarddetails {
1145 color: var(--TWPT-interop-secondary-text)!important;
1146}
1147
1148.scTailwindUser_profileUsercardlinks,
1149 .scTailwindUser_profileUsercardlink {
1150 color: #7cacf8!important;
1151}
1152
1153.scTailwindUser_profileUsercardhorizontal-separator {
1154 background-color: var(--TWPT-interop-subtle-border)!important;
1155 color: var(--TWPT-interop-subtle-border)!important;
1156}
1157
1158.scTailwindUser_profileUsercardsection-heading {
1159 color: var(--TWPT-interop-secondary-text)!important;
1160}
1161
avm999630bc113a2020-09-07 13:02:11 +02001162/* Duplicate thread feature */
1163.search-results ec-thread-option material-expansionpanel .panel {
1164 background-color: var(--TWPT-primary-background)!important;
1165}
1166
1167.search-results ec-thread-option material-expansionpanel.selected .panel,
1168 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
1169 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
1170 background-color: #17191c!important;
1171}
1172
1173/* Disabled buttons */
1174material-button[disabled] {
1175 color: rgba(255, 255, 255, .26)!important;
1176}
1177
1178/* Material icons */
1179ec-filter-drawer-item material-icon,
1180 ec-filter-drawer-item ec-icon,
1181 material-drawer .drawer-section material-icon,
1182 material-drawer .drawer-section ec-icon,
1183 material-list material-icon,
1184 ec-query-builder material-icon,
avm999630bc113a2020-09-07 13:02:11 +02001185 ec-thread-summary material-expansionpanel .title material-icon,
1186 .search-results ec-thread-option material-icon,
1187 .search-results ec-thread-option ec-icon,
1188 ec-rich-text-editor material-icon,
1189 ec-editor-command material-icon,
avm99963223416c2021-04-21 22:13:14 +02001190 ec-canned-responses ec-canned-response-row material-icon,
1191 ec-ask-flow > .header material-button {
avm999630bc113a2020-09-07 13:02:11 +02001192 color: rgba(255, 255, 255, .87)!important;
1193}
1194
1195material-drawer ec-icon,
avm99963223416c2021-04-21 22:13:14 +02001196 .search-results ec-thread-option ec-icon,
avm9996315b23d72021-04-26 18:07:15 +02001197 ec-thread-summary material-expansionpanel .title ec-icon,
1198 ec-announcements-menu-item ec-icon {
avm999630bc113a2020-09-07 13:02:11 +02001199 fill: rgba(255, 255, 255, .87)!important;
1200}
1201
1202/* Dialogs */
1203material-dialog, material-dialog .dialog-header {
1204 background-color: var(--TWPT-primary-background)!important;
1205}
1206
1207ec-movable-dialog[showminimize] material-dialog .dialog-header {
1208 background-color: #d2e3fc!important;
1209}
1210
1211material-dialog .title {
1212 color: var(--TWPT-primary-text-alt)!important;
1213}
1214
1215ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
1216 color: var(--TWPT-primary-background)!important;
1217}
1218
1219ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
1220 background-color: #170f01!important;
1221}
1222
avm99963223416c2021-04-21 22:13:14 +02001223ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
1224 color: var(--TWPT-blue-A100)!important;
1225}
1226
avm999630bc113a2020-09-07 13:02:11 +02001227material-dialog .section-title,
1228 material-dialog .select-label,
1229 material-dialog .input-label,
1230 material-dialog .btn-no,
1231 ec-display-name-editor,
1232 .forum-selection-label {
1233 color: var(--TWPT-secondary-text)!important;
1234}
1235
avm9996301818912021-05-24 11:53:18 +02001236material-dialog main > .user {
1237 border-bottom-color: var(--TWPT-card-border)!important;
1238}
1239
avm999630bc113a2020-09-07 13:02:11 +02001240ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
1241 color: var(--TWPT-secondary-text)!important;
1242 background-color: var(--TWPT-active-background)!important;
1243 border-top-color: #25231f!important;
1244}
1245
avm9996301818912021-05-24 11:53:18 +02001246ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
1247 color: var(--TWPT-link)!important;
1248}
1249
avm999630bc113a2020-09-07 13:02:11 +02001250/* Keyboard shortcuts dialog */
Adrià Vilanova Martínezd28af562021-09-19 22:27:55 +02001251material-dialog .main.with-scroll-strokes table th {
avm999630bc113a2020-09-07 13:02:11 +02001252 color: var(--TWPT-primary-text)!important;
1253}
1254
Adrià Vilanova Martínezd28af562021-09-19 22:27:55 +02001255material-dialog .main.with-scroll-strokes table td {
1256 color: var(--TWPT-primary-text-alt)!important;
1257}
1258
1259material-dialog .main.with-scroll-strokes table tr,
1260 material-dialog .main.with-scroll-strokes .shortcut {
1261 border-color: var(--TWPT-card-border)!important;
1262}
1263
1264material-dialog .main.with-scroll-strokes.bottom-scroll-stroke {
1265 border-bottom-color: var(--TWPT-card-border)!important;
1266}
1267
1268material-dialog .main.with-scroll-strokes.top-scroll-stroke {
1269 border-top-color: var(--TWPT-card-border)!important;
1270}
1271
avm999630bc113a2020-09-07 13:02:11 +02001272/* Rich text editor */
1273ec-editor-command material-button,
1274 ec-formatting-popup material-button {
1275 box-shadow: none!important;
1276}
1277
1278ec-editor-command material-button.is-active {
1279 background: var(--TWPT-active-background)!important;
1280}
1281
1282ec-rich-text-editor .placeholder {
1283 color: rgba(255, 255, 255, .38)!important;
1284}
1285
avm9996301818912021-05-24 11:53:18 +02001286ec-rich-text-editor .input-wrapper,
1287 ec-rich-text-editor .spacer {
1288 border-color: var(--TWPT-card-border)!important;
1289}
1290
1291ec-rich-text-editor .input-wrapper.input-wrapper--focused {
1292 border-color: var(--TWPT-blue-A100)!important;
1293}
1294
avm999630bc113a2020-09-07 13:02:11 +02001295ec-rich-text-editor .input {
1296 color: var(--TWPT-primary-text)!important;
1297}
1298
1299ec-rich-text-editor .hint {
1300 color: rgba(255, 255, 255, .54)!important;
1301}
1302
1303material-select-searchbox + material-list material-list-item {
1304 color: rgba(255, 255, 255, .87)!important;
1305}
1306
1307ec-attachment .filename {
1308 color: var(--TWPT-primary-text)!important;
1309}
1310
1311/* Thread insert */
1312ec-thread-insert .title {
1313 color: var(--TWPT-primary-text)!important;
1314}
1315
1316ec-thread-insert ec-thread-counts,
1317 ec-thread-insert .details,
1318 ec-thread-insert ec-relative-time {
1319 color: rgba(255, 255, 255, .54)!important;
1320}
1321
1322/* Text input */
1323material-input input {
1324 color: var(--TWPT-primary-text)!important;
1325}
1326
1327material-input .label-text,
1328 material-input .hint-text,
1329 material-input .counter {
1330 color: rgba(255, 255, 255, .54)!important;
1331}
1332
1333material-input .underline .unfocused-underline {
avm99963223416c2021-04-21 22:13:14 +02001334 background-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +02001335}
1336
avm9996301818912021-05-24 11:53:18 +02001337material-input .underline .focused-underline {
1338 background-color: var(--TWPT-blue-A100)!important;
1339}
1340
avm999630bc113a2020-09-07 13:02:11 +02001341label .label {
1342 color: var(--TWPT-primary-text)!important;
1343}
1344
1345/* Input underline */
1346material-input .underline .unfocused-underline,
1347 material-dropdown-select dropdown-button [buttondecorator] {
avm9996301818912021-05-24 11:53:18 +02001348 border-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +02001349}
1350
Adrià Vilanova Martínez9605cb82021-09-07 13:04:10 +02001351/* Checkbox input (except for forum checkboxes in the drawer) */
Adrià Vilanova Martínezdd8075f2021-09-08 21:57:32 +02001352material-checkbox material-icon:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon),
1353 material-checkbox .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
avm999630bc113a2020-09-07 13:02:11 +02001354 color: var(--TWPT-secondary-text)!important;
1355}
1356
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +02001357/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
Adrià Vilanova Martínezdd8075f2021-09-08 21:57:32 +02001358material-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 +02001359 color: var(--TWPT-blue-A100)!important;
1360}
1361
1362material-checkbox:focus:not(.disabled).gm-icons .icon,
1363 .gm-icons material-checkbox:focus:not(.disabled) .icon,
1364 material-checkbox:hover:not(.disabled).gm-icons .icon,
1365 .gm-icons material-checkbox:hover:not(.disabled) .icon {
1366 color: #cfd2d8!important; /* custom value */
1367}
1368
1369material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
1370 .gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
1371 material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
1372 .gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
1373 color: var(--TWPT-blue-100)!important;
1374}
1375
1376.gm-icons material-checkbox .icon-container::before{
1377 background-color: #dfdedb!important; /* custom value */
1378}
1379
1380/* Radio input */
1381material-radio .icon-container:not(.checked) material-icon {
1382 color: var(--TWPT-secondary-text)!important;
1383}
1384
1385material-radio .icon-container.checked material-icon {
1386 color: var(--TWPT-blue-A100)!important;
1387}
1388
1389/* Material switch */
1390.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
1391 background-color: #7d7d7d!important; /* custom value */
1392}
1393
1394.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
1395 border-color: #fff!important; /* custom value */
1396}
1397
1398.mdc-switch.mdc-switch--checked .mdc-switch__track {
1399 background-color: var(--TWPT-blue-A100)!important;
1400}
1401
1402.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
1403 border-color: var(--TWPT-blue-A100)!important;
1404}
1405
avm999630bc113a2020-09-07 13:02:11 +02001406/* Material menu button and dropdown select */
1407material-menu material-button, material-dropdown-select dropdown-button {
avm99963223416c2021-04-21 22:13:14 +02001408 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +02001409}
1410
avm9996348c87d12021-04-09 13:00:21 +02001411material-dropdown-select dropdown-button .button.is-disabled .button-text,
1412 material-dropdown-select dropdown-button .button.is-disabled material-icon {
1413 color: rgba(255, 255, 255, .32)!important;
avm999630bc113a2020-09-07 13:02:11 +02001414}
1415
1416/* Announcements content */
avm99963223416c2021-04-21 22:13:14 +02001417ec-announcements-content .header,
1418 ec-announcements-content .no-announcements,
1419 ec-announcements-content .announcement {
1420 border-bottom-color: var(--TWPT-card-border)!important;
1421}
1422
avm999630bc113a2020-09-07 13:02:11 +02001423ec-announcements-content .header .title, ec-announcements-content .announcement-title {
1424 color: var(--TWPT-primary-text-alt)!important;
1425}
1426
avm9996315b23d72021-04-26 18:07:15 +02001427ec-announcements-content .announcement-date {
1428 color: var(--TWPT-secondary-text)!important;
1429}
1430
avm999630bc113a2020-09-07 13:02:11 +02001431ec-announcements-content .no-announcements-message {
1432 color: #c3bfbc!important;
1433}
1434
avm9996315b23d72021-04-26 18:07:15 +02001435ec-announcements-content .view-all-link,
1436 ec-announcements-content .read-more-button {
avm99963223416c2021-04-21 22:13:14 +02001437 color: var(--TWPT-link)!important;
1438}
1439
avm9996315b23d72021-04-26 18:07:15 +02001440ec-announcements-content ::-webkit-scrollbar-thumb {
1441 background-color: rgba(255, 255, 255, .26)!important;
1442}
1443
1444ec-announcements-content ::-webkit-scrollbar-thumb:hover {
1445 background-color: #4285f4!important;
1446}
1447
avm99963b2329632021-02-06 20:05:34 +01001448/* Generic popup (for notification bell, account selector, etc.) */
1449.popup-wrapper .header-text {
1450 color: var(--TWPT-primary-text)!important;
1451}
1452
avm9996348c87d12021-04-09 13:00:21 +02001453/* Notifications bell popup/panel */
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +02001454.notification-panel .header {
1455 border-bottom-color: var(--TWPT-card-border)!important;
1456}
1457
avm9996348c87d12021-04-09 13:00:21 +02001458.notification-panel .header material-button {
1459 color: var(--TWPT-secondary-text)!important;
1460}
1461
1462.notification-panel .cards-container .promo-message {
1463 color: var(--TWPT-secondary-text)!important;
1464}
1465
1466.notification-panel .cards-container .promo-message .header-text {
1467 color: var(--TWPT-primary-text)!important;
1468}
1469
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +02001470.notification-panel .cards-container ec-notification-card-content {
1471 border-bottom-color: var(--TWPT-card-border)!important;
1472}
1473
1474.notification-panel .cards-container ec-notification-card-content .text {
1475 color: var(--TWPT-primary-text)!important;
1476}
1477
1478.notification-panel .cards-container ec-notification-card-content .time,
1479 .notification-panel .cards-container ec-notification-card-content .close material-button {
1480 color: var(--TWPT-secondary-text)!important;
1481}
1482
avm999630bc113a2020-09-07 13:02:11 +02001483/* Account selector */
1484.popup-wrapper .profile .email {
1485 color: rgba(255, 255, 255, .54)!important;
1486}
1487
1488material-gaia-picker-footer {
1489 color: rgba(255, 255, 255, .54)!important;
1490 background-color: var(--TWPT-active-background)!important;
1491}
1492
avm9996348c87d12021-04-09 13:00:21 +02001493material-gaia-picker-footer material-button {
1494 color: var(--TWPT-secondary-text)!important;
1495}
1496
avm999630bc113a2020-09-07 13:02:11 +02001497/* Canned responses */
1498ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +01001499 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +02001500 color: var(--TWPT-primary-text)!important;
1501}
1502
avm9996325a0d602020-11-25 19:24:16 +01001503ec-canned-responses .label-row,
1504 ec-canned-responses ec-canned-response-row .snippet,
1505 ec-canned-responses ec-canned-response-row .tag {
1506 color: var(--TWPT-secondary-text)!important;
1507}
1508
avm999630bc113a2020-09-07 13:02:11 +02001509ec-canned-responses ec-canned-response-row .header.closed:hover,
1510 ec-canned-responses ec-canned-response-row .header.closed:focus,
1511 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
1512 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
1513 background-color: var(--TWPT-active-background)!important;
1514}
1515
avm9996325a0d602020-11-25 19:24:16 +01001516ec-canned-responses .filter-row,
1517 ec-canned-responses .label-row,
1518 ec-canned-responses ec-canned-response-row material-expansionpanel {
1519 border-bottom-color: var(--TWPT-subtle-border)!important;
1520}
1521
avm999630bc113a2020-09-07 13:02:11 +02001522/* Reply button */
Adrià Vilanova Martínez1d44d3d2021-07-26 15:34:19 +02001523material-fab.reply-button,
1524 material-fab.reply-fab {
avm999630bc113a2020-09-07 13:02:11 +02001525 background-color: var(--TWPT-link)!important;
1526 color: var(--TWPT-primary-background)!important;
1527}
1528
avm99963223416c2021-04-21 22:13:14 +02001529/* Settings view */
1530ec-settings .forum-language-container {
1531 border-bottom-color: var(--TWPT-subtle-border)!important;
1532}
1533
1534ec-settings .forum-language-container material-button {
1535 color: var(--TWPT-secondary-text)!important;
1536}
1537
Adrià Vilanova Martínez3356df72021-07-09 19:27:04 +02001538/* Loading spinner */
1539material-spinner {
1540 border-color: var(--TWPT-blue-A100)!important;
1541}
1542
avm99963f5923962020-12-07 16:44:37 +01001543/* Custom injected components */
1544.TWPT-log {
1545 background-color: #424242!important;
1546}
1547
1548.TWPT-log-entry.TWPT-log-entry--error {
1549 color: #ff8A80!important;
1550}