blob: 55ca29c19a437e669c660d9e90cb45e6c56443cb [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);
avm99963fb7107c2021-04-14 19:39:05 +020016 --TWPT-blue-A100: #82B1FF;
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +020017 --TWPT-bad-text: #f6aea9;
18 --TWPT-good-text: #34a853;
avm999630bc113a2020-09-07 13:02:11 +020019}
20
21body {
22 color: var(--TWPT-primary-text);
23 background-color: var(--TWPT-primary-background)!important;
24}
25
26p {
27 color: var(--TWPT-primary-text);
28}
29
30body.ec a {
31 color: var(--TWPT-link);
32}
33
34/* Header */
35.material-content > header {
36 background-color: var(--TWPT-primary-background)!important;
37}
38
avm9996315b23d72021-04-26 18:07:15 +020039.material-content > header .app-title-button,
40 .material-content > header .app-title-text {
41 color: var(--TWPT-secondary-text)!important;
avm99963ea9b23f2021-04-22 14:06:03 +020042}
43
avm9996348c87d12021-04-09 13:00:21 +020044.material-content > header material-button,
avm9996315b23d72021-04-26 18:07:15 +020045 .material-content > header material-button material-icon,
avm9996348c87d12021-04-09 13:00:21 +020046 .material-content > header notification-bell material-icon {
avm999630bc113a2020-09-07 13:02:11 +020047 color: rgba(255, 255, 255, .87)!important;
48}
49
50.search-box {
51 background-color: #313235!important;
52}
53
54.search-box .clear-icon {
55 opacity: 0.8;
56 color: rgba(255, 255, 255, .87)!important;
57}
58
59.material-content > header .bell.mixin {
60 fill: rgba(255, 255, 255, .87)!important;
61}
62
63/* Drawer */
64material-drawer, material-drawer .panel, material-list-item {
65 background-color: var(--TWPT-drawer-background)!important;
66}
67
avm9996324ef6522020-11-25 19:45:43 +010068material-list-item:hover, material-list-item:focus, material-list-item.item--active {
avm999630bc113a2020-09-07 13:02:11 +020069 background-color: var(--TWPT-active-background)!important;
70}
71
72material-drawer .panel {
73 border-bottom-color: #25231f!important;
74}
75
76material-drawer .drawer-section-title, material-drawer .header > material-icon {
77 color: var(--TWPT-secondary-text)!important;
78}
79
avm9996315b23d72021-04-26 18:07:15 +020080material-drawer material-list-item,
81 material-drawer material-list-item .title {
avm999630bc113a2020-09-07 13:02:11 +020082 color: #d2cecb!important;
83}
84
85material-drawer ec-forum-drawer-item material-checkbox material-icon {
86 filter: brightness(1.5);
87}
88
avm9996315b23d72021-04-26 18:07:15 +020089/* Header menus */
90.popup material-list-item {
91 color: #d2cecb!important;
92}
93
avm99963223416c2021-04-21 22:13:14 +020094/* Filters (ec-query-builder) */
95material-condition-builder .compound-condition-operator {
96 color: var(--TWPT-secondary-text)!important;
97}
98
99material-condition-builder .compound-condition-operator::before,
100 material-condition-builder .compound-condition-operator::after {
101 border-left-color: rgba(255, 255, 255, .20)!important;
102}
103
avm999630bc113a2020-09-07 13:02:11 +0200104/* Selector */
avm99963a51c7612020-11-25 23:58:56 +0100105
106/*
107 * This applies not only to the selector but also to the ec-work-state-picker.
108 */
avm99963a091be12021-02-18 17:03:28 +0100109.popup-wrapper, material-list, .popup .item-group-list {
avm999630bc113a2020-09-07 13:02:11 +0200110 background-color: var(--TWPT-drawer-background)!important;
111}
112
avm99963a091be12021-02-18 17:03:28 +0100113material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
114 .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
avm999630bc113a2020-09-07 13:02:11 +0200115 box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
116 border-top-color: #1f1f1f!important;
117}
118
119material-list material-select-item:hover,
120 material-list material-select-item:focus,
121 material-list material-select-dropdown-item:hover,
122 material-list material-select-dropdown-item:focus,
123 material-list material-select-dropdown-item.active,
avm99963a091be12021-02-18 17:03:28 +0100124 material-list material-select-dropdown-item:not(.multiselect).selected,
125 .popup .item-group-list material-select-item:hover,
126 .popup .item-group-list material-select-item:focus,
avm99963744d0cf2021-03-23 22:05:57 +0100127 .popup .item-group-list material-select-item.active,
avm99963a091be12021-02-18 17:03:28 +0100128 .popup .item-group-list material-select-dropdown-item:hover,
129 .popup .item-group-list material-select-dropdown-item:focus,
130 .popup .item-group-list material-select-dropdown-item.active,
131 .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
avm99963744d0cf2021-03-23 22:05:57 +0100132 background-color: var(--TWPT-highlighted-item-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200133}
134
avm99963a091be12021-02-18 17:03:28 +0100135material-list .menu-item-label,
136 material-list .label,
137 material-list .text-segment,
138 .popup .item-group-list .menu-item-label,
139 .popup .item-group-list .label,
140 .popup .item-group-list .text-segment {
avm999630bc113a2020-09-07 13:02:11 +0200141 color: rgba(255, 255, 255, .87)!important;
142}
143
avm99963a091be12021-02-18 17:03:28 +0100144.popup .item-group-list material-icon {
145 color: rgba(255, 255, 255, .7)!important;
146}
147
avm999630bc113a2020-09-07 13:02:11 +0200148material-list [group] > [label] {
149 color: #8a8a8a!important;
150}
151
avm9996348c87d12021-04-09 13:00:21 +0200152/* This is shown in the new thread view */
153ec-forum-language-picker .labeled-select .select-label {
154 color: var(--TWPT-secondary-text)!important;
155}
156
avm999630bc113a2020-09-07 13:02:11 +0200157/* Main */
158.main {
159 color: var(--TWPT-primary-text)!important;
160}
161
avm9996325a0d602020-11-25 19:24:16 +0100162/* Border color for the page title bar (most pages use .title-bar although
163 * some use .page-header).
164 */
165main .title-bar, main .page-header {
avm999630bc113a2020-09-07 13:02:11 +0200166 border-bottom-color: var(--TWPT-subtle-border)!important;
167}
168
169main .title-bar .title, main .page-header h1, main .header h1 {
170 color: var(--TWPT-primary-text)!important;
171}
172
173.card {
174 background-color: var(--TWPT-secondary-background)!important;
175 color: var(--TWPT-primary-text)!important;
176 border-color: var(--TWPT-card-border)!important;
177}
178
179.card .card-title, .card, .card-section-title {
180 color: var(--TWPT-primary-text)!important;
181}
182
avm99963223416c2021-04-21 22:13:14 +0200183.card .card-section-hint, .card .card-section-checkbox-hint {
avm999630bc113a2020-09-07 13:02:11 +0200184 color: var(--TWPT-secondary-text)!important;
185}
186
187/* Action bar */
188.material-content .action-bar material-button,
189 ec-bulk-actions material-button,
avm99963b2329632021-02-06 20:05:34 +0100190 ec-back-button material-button,
avm9996348c87d12021-04-09 13:00:21 +0200191 .sort-options material-button {
avm999630bc113a2020-09-07 13:02:11 +0200192 color: rgba(255, 255, 255, .54)!important;
193}
194
avm99963ea9b23f2021-04-22 14:06:03 +0200195.material-content .action-bar .review-button.reviewing {
196 color: #1a73e8!important;
197 background: #dae7ff!important;
198}
199
avm999630bc113a2020-09-07 13:02:11 +0200200.material-content .action-bar material-button.starred {
201 color: #fbbc04!important;
202}
203
avm99963a51c7612020-11-25 23:58:56 +0100204/* ec-work-state-picker */
205ec-work-state-picker > button {
206 color: var(--TWPT-secondary-text)!important;
207 background-color: var(--TWPT-button-background)!important;
208 border-color: var(--TWPT-subtle-border)!important;
209}
210
211.material-popup-content .popup-content .title {
212 color: var(--TWPT-primary-text)!important;
213}
214
avm999630bc113a2020-09-07 13:02:11 +0200215/* Thread list */
216ec-thread-list ul.thread-group {
217 background-color: var(--TWPT-primary-background)!important;
218}
219
220ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
221 border-bottom-color: var(--TWPT-subtle-border)!important;
222}
223
avm99963a2a06442020-11-25 21:11:10 +0100224ec-thread-summary material-expansionpanel.read:not(.checked) {
avm999630bc113a2020-09-07 13:02:11 +0200225 background-color: var(--TWPT-thread-read-background)!important;
226}
227
avm99963e65bec42020-11-25 18:26:29 +0100228ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200229 opacity: 0.8;
230}
231
avm99963e65bec42020-11-25 18:26:29 +0100232ec-thread-summary material-expansionpanel.read .title .icon {
233 opacity: 0.48!important;
234}
235
avm999630bc113a2020-09-07 13:02:11 +0200236ec-thread-summary material-expansionpanel.checked {
avm99963a2a06442020-11-25 21:11:10 +0100237 background-color: #2c4b77!important;
avm999630bc113a2020-09-07 13:02:11 +0200238}
239
240ec-thread-summary material-expansionpanel .title {
241 color: var(--TWPT-primary-text)!important;
242}
243
244ec-thread-summary material-expansionpanel ec-second-summary-line,
245 material-expansionpanel .header-content,
avm9996348c87d12021-04-09 13:00:21 +0200246 material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
247 material-expansionpanel .duplicate-label {
avm999630bc113a2020-09-07 13:02:11 +0200248 color: #928e89!important;
249}
250
avm9996348c87d12021-04-09 13:00:21 +0200251material-expansionpanel .removed-label {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200252 color: var(--TWPT-bad-text)!important;
avm9996348c87d12021-04-09 13:00:21 +0200253}
254
avm999631558e6c2020-12-08 13:42:40 +0100255ec-thread-summary material-expansionpanel ec-safe-html.body,
256 material-expansionpanel .issue-tracking-work-state {
avm999630bc113a2020-09-07 13:02:11 +0200257 color: var(--TWPT-primary-text)!important;
258}
259
avm99963b2329632021-02-06 20:05:34 +0100260/* Thread view (including review/live review components) */
avm999630bc113a2020-09-07 13:02:11 +0200261ec-question, .heading + .group, ec-message {
262 background-color: var(--TWPT-secondary-background)!important;
263}
264
avm99963b2329632021-02-06 20:05:34 +0100265ec-thread .no-review-needed {
266 background-color: #155829!important;
267 border-color: var(--TWPT-subtle-border)!important;
268}
269
270/* Review bar shown above the main message or replies */
271ec-review-bar {
avm999630bc113a2020-09-07 13:02:11 +0200272 background-color: var(--TWPT-active-background)!important;
273}
274
avm99963b2329632021-02-06 20:05:34 +0100275ec-review-bar material-chip {
276 background-color: var(--TWPT-button-background)!important;
277}
278
279ec-review-bar material-chip:not(.relevant-active):not(.active) {
avm99963b2329632021-02-06 20:05:34 +0100280 border-color: var(--TWPT-card-border)!important;
281}
282
283ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
284 color: var(--TWPT-primary-text)!important;
285 fill: var(--TWPT-primary-text)!important;
286}
287
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200288ec-review-bar material-chip:not(.relevant-active):not(.active) .content {
289 color: var(--TWPT-primary-text)!important;
290}
291
avm99963b2329632021-02-06 20:05:34 +0100292ec-review-bar material-chip.relevant-active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200293 border-color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100294}
295
296ec-review-bar material-chip.relevant-active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200297 color: var(--TWPT-good-text)!important;
298 fill: var(--TWPT-good-text)!important;
299}
300
301ec-review-bar material-chip.relevant-active .content {
302 color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100303}
304
305ec-review-bar material-chip.active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200306 border-color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100307}
308
309ec-review-bar material-chip.active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200310 color: var(--TWPT-bad-text)!important;
311 fill: var(--TWPT-bad-text)!important;
312}
313
314ec-review-bar material-chip.active .content {
315 color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100316}
317
avm999630bc113a2020-09-07 13:02:11 +0200318ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
319 color: var(--TWPT-secondary-text)!important;
320}
321
avm9996395da0772020-09-09 01:07:36 +0200322ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200323 background-color: var(--TWPT-active-background)!important;
324}
325
avm9996395da0772020-09-09 01:07:36 +0200326ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200327 color: var(--TWPT-primary-text)!important;
328}
329
avm9996395da0772020-09-09 01:07:36 +0200330ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200331 color: var(--TWPT-primary-text)!important;
332 fill: var(--TWPT-primary-text)!important;
333}
334
335ec-question .title {
336 color: var(--TWPT-primary-text-alt)!important;
337}
338
avm99963b2329632021-02-06 20:05:34 +0100339ec-user-link .name-text {
340 color: var(--TWPT-link)!important;
341}
342
343ec-message-header ec-avatar svg, ec-message-header .role,
344 ec-message .footer .role {
avm999630bc113a2020-09-07 13:02:11 +0200345 filter: brightness(1.5);
346}
347
348ec-question .body, ec-message .body {
349 color: var(--TWPT-primary-text)!important;
350}
351
352ec-question .thread-insert {
353 background: none!important;
354}
355
356ec-question .details-heading {
357 color: var(--TWPT-primary-text-alt) !important;
358}
359
Adrià Vilanova Martínez0ab61ea2021-06-03 20:25:18 +0200360ec-question .state-chips material-chip {
361 background-color: var(--TWPT-button-background)!important;
362 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
363 0 1px 1px 0 rgba(0, 0, 0, 0.14),
364 0 1px 3px 0 rgba(0, 0, 0, 0.12);
365}
366
367ec-question .state-chips material-chip .content {
368 color: var(--TWPT-primary-text)!important;
369}
370
avm9996348c87d12021-04-09 13:00:21 +0200371ec-question .footer,
372 ec-ask-flow .content-disclaimer {
avm999630bc113a2020-09-07 13:02:11 +0200373 color: var(--TWPT-primary-text)!important;
374 background-color: var(--TWPT-active-background)!important;
375 border-top-color: var(--TWPT-card-border)!important;
376}
377
378.heading {
379 color: var(--TWPT-primary-text)!important;
380}
381
382.heading + .group,
383 .load-more-bar,
384 ec-message:not(:first-child),
385 .load-more-bar .load-more-button,
386 .load-more-bar .load-all-button {
387 border-color: var(--TWPT-card-border)!important;
388}
389
avm9996395da0772020-09-09 01:07:36 +0200390ec-message .type {
391 color: var(--TWPT-primary-text)!important;
392}
393
avm999630bc113a2020-09-07 13:02:11 +0200394ec-message .footer ec-relative-time,
395 ec-message .footer ec-safe-html {
396 color: var(--TWPT-secondary-text)!important;
397}
398
399ec-message .helpful-prompt {
400 color: var(--TWPT-primary-text)!important;
401}
402
403ec-question .me-too-button,
404 ec-question .subscribe-button,
405 ec-message .upvote-button,
406 ec-message .downvote-button {
407 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100408 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200409}
410
avm99963223416c2021-04-21 22:13:14 +0200411ec-message .alert {
412 color: var(--TWPT-secondary-text)!important;
413}
414
avm999630bc113a2020-09-07 13:02:11 +0200415ec-question .me-too-button.selected,
416 ec-question .subscribe-button.selected,
417 ec-message .upvote-button.selected,
418 ec-message .downvote-button.selected {
419 color: #4285f4!important;
420}
421
422.load-more-bar .load-more-button, .load-more-bar .load-all-button {
423 background-color: var(--TWPT-secondary-background)!important;
424}
425
426.locked-alert {
427 background-color: var(--TWPT-active-background)!important;
428 border: var(--TWPT-card-border)!important;
429}
430
431.locked-alert material-icon {
432 color: rgba(255, 255, 255, .38)!important;
433}
434
avm99963b2329632021-02-06 20:05:34 +0100435ec-thread button.reply.collapsed {
436 color: var(--TWPT-secondary-text)!important;
437}
438
avm999630bc113a2020-09-07 13:02:11 +0200439ec-thread .finished-question {
440 background-color: var(--TWPT-active-background)!important;
441 border: var(--TWPT-card-border)!important;
442}
443
avm99963ea9b23f2021-04-22 14:06:03 +0200444ec-thread .finished-question .next-question {
445 color: var(--TWPT-link)!important;
446 border-color: var(--TWPT-link)!important;
447}
448
avm999630bc113a2020-09-07 13:02:11 +0200449.material-content .action-bar material-button.has-activity {
450 color: #1a73e8!important;
451}
452
453.material-content .action-bar material-button.showing-sidebar {
454 background-color: var(--TWPT-active-background)!important;
455}
456
457ec-activity-panel .title-bar h3 {
458 color: #e8eaf2!important;
459}
460
461ec-activity-panel ec-activity {
462 color: var(--TWPT-secondary-text)!important;
463 border-color: var(--TWPT-card-border)!important;
464}
465
466ec-activity-panel ec-activity .message {
467 color: var(--TWPT-primary-text-alt)!important;
468}
469
470ec-activity-panel ec-activity .thread-title {
471 color: #c3bfbc!important;
472}
473
474/* Recommended answers - show in green where we've overwritten the colors */
475.recommended-answers {
476 color: #34a853!important;
477}
478
avm99963fb7107c2021-04-14 19:39:05 +0200479/* Suggested answers - show brighter blue */
480.suggested-icon {
481 color: var(--TWPT-blue-A100)!important;
482}
483
484/* Help button (shown in the suggested answers header) */
485.explanation-icon material-icon {
486 color: rgba(255, 255, 255, .54)!important;
487}
488
489/* Help button tooltip */
490.popup .paper-container {
491 background: var(--TWPT-drawer-background)!important;
492}
493
494.explanation-icon material-icon:hover {
495 color: var(--TWPT-blue-A100)!important;
496}
497
avm99963223416c2021-04-21 22:13:14 +0200498/* New thread and edit message views */
499material-stepper {
500 border-top-color: var(--TWPT-card-border)!important;
501}
502
avm999630bc113a2020-09-07 13:02:11 +0200503material-stepper .stepper-step-name,
504 material-stepper .purpose-title {
505 color: var(--TWPT-primary-text)!important;
506}
507
508ec-ask-flow .display-name-label,
avm99963223416c2021-04-21 22:13:14 +0200509 material-stepper .additional-details-label,
510 material-stepper .detail-label {
avm999630bc113a2020-09-07 13:02:11 +0200511 color: var(--TWPT-secondary-text)!important;
512}
513
avm99963223416c2021-04-21 22:13:14 +0200514material-stepper .stepper-step[selectable=true]:focus {
515 background-color: rgba(60, 64, 67, .24)!important;
516}
517
avm9996301818912021-05-24 11:53:18 +0200518/* Compose thread view */
519ec-thread-composer .main-content .title-label,
520 ec-thread-composer .main-content .post-label {
521 color: var(--TWPT-primary-text-alt)!important;
522}
523
524ec-thread-composer .main-content .title-input,
525 ec-thread-composer .main-content ec-rich-text-editor {
526 border-color: var(--TWPT-card-border)!important;
527}
528
529ec-thread-composer .main-content .title-alert {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200530 color: var(--TWPT-bad-text)!important;
avm9996301818912021-05-24 11:53:18 +0200531}
532
533ec-thread-composer material-drawer {
534 background-color: inherit!important;
535}
536
537ec-thread-composer material-drawer .right-panel {
538 border-left-color: var(--TWPT-card-border)!important;
539}
540
541ec-thread-composer material-drawer .panel-section-title {
542 color: var(--TWPT-primary-text)!important;
543}
544
545ec-thread-composer material-drawer .panel-section-divider {
546 border-color: var(--TWPT-card-border)!important;
547}
548
549ec-thread-composer material-drawer material-radio .radio-label {
550 color: var(--TWPT-primary-text-alt)!important;
551}
552
553ec-thread-composer material-drawer material-radio .radio-description,
554 ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
555 color: var(--TWPT-secondary-text)!important;
556}
557
558ec-thread-composer material-drawer material-checkbox material-icon {
559 opacity: 1!important;
560 color: rgba(255, 255, 255, .74)!important; /* Custom value */
561}
562
563ec-thread-composer material-drawer material-checkbox .content {
564 color: var(--TWPT-primary-text-alt)!important;
565}
566
avm9996348c87d12021-04-09 13:00:21 +0200567/* Note: see thread view section. There is a rule for the thread creation
568 * footer.
569 **/
570
avm999630bc113a2020-09-07 13:02:11 +0200571/* Profile view */
avm9996348c87d12021-04-09 13:00:21 +0200572ec-user .main-card {
avm999630bc113a2020-09-07 13:02:11 +0200573 background-color: var(--TWPT-secondary-background)!important;
avm9996348c87d12021-04-09 13:00:21 +0200574}
575
576ec-user .abuse-alert-container {
577 background-color: var(--TWPT-active-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200578 border-top-right-radius: 8px!important;
avm9996348c87d12021-04-09 13:00:21 +0200579}
580
581ec-user .abuse-alert-container .abuse-alert {
582 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200583}
584
avm99963c4cb8f32020-09-07 23:52:28 +0200585ec-user ec-display-name-editor, ec-user .header .name {
avm999630bc113a2020-09-07 13:02:11 +0200586 color: var(--TWPT-primary-text)!important;
587}
588
avm9996395da0772020-09-09 01:07:36 +0200589ec-user .role {
590 filter: brightness(1.5);
591}
592
avm999630bc113a2020-09-07 13:02:11 +0200593ec-user bar-chart .axis text {
594 fill: rgba(255, 255, 255, .54)!important;
595}
596
597ec-user bar-chart .axis path,
598 ec-user bar-chart .axis .gridline,
599 ec-user bar-chart .axis line {
600 stroke: rgba(255, 255, 255, .12)!important;
601}
602
603ec-user bar-chart .axis line.axis-zero-tick,
604 ec-user bar-chart .axis.x .tick-mark {
605 stroke: rgba(255, 255, 255, .38)!important;
606}
607
608ec-user bar-chart .aplos-legend-entry {
609 color: var(--TWPT-secondary-text)!important;
610}
611
612.aplos-hovercard {
613 background: var(--TWPT-secondary-background)!important;
614}
615
616.aplos-hovercard .title {
617 color: var(--TWPT-primary-text)!important;
618}
619
620.aplos-hovercard .subtitle,
621 .aplos-donut-center .subtitle,
622 .aplos-hovercard .series,
623 .aplos-donut-center .series,
624 .aplos-hovercard .value,
625 .aplos-donut-center .value {
626 color: var(--TWPT-secondary-text)!important;
627}
628
629/* Duplicate thread feature */
630.search-results ec-thread-option material-expansionpanel .panel {
631 background-color: var(--TWPT-primary-background)!important;
632}
633
634.search-results ec-thread-option material-expansionpanel.selected .panel,
635 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
636 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
637 background-color: #17191c!important;
638}
639
640/* Disabled buttons */
641material-button[disabled] {
642 color: rgba(255, 255, 255, .26)!important;
643}
644
645/* Material icons */
646ec-filter-drawer-item material-icon,
647 ec-filter-drawer-item ec-icon,
648 material-drawer .drawer-section material-icon,
649 material-drawer .drawer-section ec-icon,
650 material-list material-icon,
651 ec-query-builder material-icon,
652 material-radio .icon-container:not(.checked) material-icon,
653 ec-thread-summary material-expansionpanel .title material-icon,
654 .search-results ec-thread-option material-icon,
655 .search-results ec-thread-option ec-icon,
656 ec-rich-text-editor material-icon,
657 ec-editor-command material-icon,
avm99963223416c2021-04-21 22:13:14 +0200658 ec-canned-responses ec-canned-response-row material-icon,
659 ec-ask-flow > .header material-button {
avm999630bc113a2020-09-07 13:02:11 +0200660 color: rgba(255, 255, 255, .87)!important;
661}
662
663material-drawer ec-icon,
avm99963223416c2021-04-21 22:13:14 +0200664 .search-results ec-thread-option ec-icon,
avm9996315b23d72021-04-26 18:07:15 +0200665 ec-thread-summary material-expansionpanel .title ec-icon,
666 ec-announcements-menu-item ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200667 fill: rgba(255, 255, 255, .87)!important;
668}
669
670/* Dialogs */
671material-dialog, material-dialog .dialog-header {
672 background-color: var(--TWPT-primary-background)!important;
673}
674
675ec-movable-dialog[showminimize] material-dialog .dialog-header {
676 background-color: #d2e3fc!important;
677}
678
679material-dialog .title {
680 color: var(--TWPT-primary-text-alt)!important;
681}
682
683ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
684 color: var(--TWPT-primary-background)!important;
685}
686
687ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
688 background-color: #170f01!important;
689}
690
avm99963223416c2021-04-21 22:13:14 +0200691ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
692 color: var(--TWPT-blue-A100)!important;
693}
694
avm999630bc113a2020-09-07 13:02:11 +0200695material-dialog .section-title,
696 material-dialog .select-label,
697 material-dialog .input-label,
698 material-dialog .btn-no,
699 ec-display-name-editor,
700 .forum-selection-label {
701 color: var(--TWPT-secondary-text)!important;
702}
703
avm9996301818912021-05-24 11:53:18 +0200704material-dialog main > .user {
705 border-bottom-color: var(--TWPT-card-border)!important;
706}
707
avm999630bc113a2020-09-07 13:02:11 +0200708ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
709 color: var(--TWPT-secondary-text)!important;
710 background-color: var(--TWPT-active-background)!important;
711 border-top-color: #25231f!important;
712}
713
avm9996301818912021-05-24 11:53:18 +0200714ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
715 color: var(--TWPT-link)!important;
716}
717
avm999630bc113a2020-09-07 13:02:11 +0200718/* Keyboard shortcuts dialog */
719material-dialog .main.with-scroll-strokes table td {
720 color: var(--TWPT-primary-text)!important;
721}
722
723/* Rich text editor */
724ec-editor-command material-button,
725 ec-formatting-popup material-button {
726 box-shadow: none!important;
727}
728
729ec-editor-command material-button.is-active {
730 background: var(--TWPT-active-background)!important;
731}
732
733ec-rich-text-editor .placeholder {
734 color: rgba(255, 255, 255, .38)!important;
735}
736
avm9996301818912021-05-24 11:53:18 +0200737ec-rich-text-editor .input-wrapper,
738 ec-rich-text-editor .spacer {
739 border-color: var(--TWPT-card-border)!important;
740}
741
742ec-rich-text-editor .input-wrapper.input-wrapper--focused {
743 border-color: var(--TWPT-blue-A100)!important;
744}
745
avm999630bc113a2020-09-07 13:02:11 +0200746ec-rich-text-editor .input {
747 color: var(--TWPT-primary-text)!important;
748}
749
750ec-rich-text-editor .hint {
751 color: rgba(255, 255, 255, .54)!important;
752}
753
754material-select-searchbox + material-list material-list-item {
755 color: rgba(255, 255, 255, .87)!important;
756}
757
758ec-attachment .filename {
759 color: var(--TWPT-primary-text)!important;
760}
761
762/* Thread insert */
763ec-thread-insert .title {
764 color: var(--TWPT-primary-text)!important;
765}
766
767ec-thread-insert ec-thread-counts,
768 ec-thread-insert .details,
769 ec-thread-insert ec-relative-time {
770 color: rgba(255, 255, 255, .54)!important;
771}
772
773/* Text input */
774material-input input {
775 color: var(--TWPT-primary-text)!important;
776}
777
778material-input .label-text,
779 material-input .hint-text,
780 material-input .counter {
781 color: rgba(255, 255, 255, .54)!important;
782}
783
784material-input .underline .unfocused-underline {
avm99963223416c2021-04-21 22:13:14 +0200785 background-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +0200786}
787
avm9996301818912021-05-24 11:53:18 +0200788material-input .underline .focused-underline {
789 background-color: var(--TWPT-blue-A100)!important;
790}
791
avm999630bc113a2020-09-07 13:02:11 +0200792label .label {
793 color: var(--TWPT-primary-text)!important;
794}
795
796/* Input underline */
797material-input .underline .unfocused-underline,
798 material-dropdown-select dropdown-button [buttondecorator] {
avm9996301818912021-05-24 11:53:18 +0200799 border-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +0200800}
801
802/* Checkbox input */
803material-checkbox, material-checkbox .content {
804 color: var(--TWPT-secondary-text)!important;
805}
806
807/* Material menu button and dropdown select */
808material-menu material-button, material-dropdown-select dropdown-button {
avm99963223416c2021-04-21 22:13:14 +0200809 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200810}
811
avm9996348c87d12021-04-09 13:00:21 +0200812material-dropdown-select dropdown-button .button.is-disabled .button-text,
813 material-dropdown-select dropdown-button .button.is-disabled material-icon {
814 color: rgba(255, 255, 255, .32)!important;
avm999630bc113a2020-09-07 13:02:11 +0200815}
816
817/* Announcements content */
avm99963223416c2021-04-21 22:13:14 +0200818ec-announcements-content .header,
819 ec-announcements-content .no-announcements,
820 ec-announcements-content .announcement {
821 border-bottom-color: var(--TWPT-card-border)!important;
822}
823
avm999630bc113a2020-09-07 13:02:11 +0200824ec-announcements-content .header .title, ec-announcements-content .announcement-title {
825 color: var(--TWPT-primary-text-alt)!important;
826}
827
avm9996315b23d72021-04-26 18:07:15 +0200828ec-announcements-content .announcement-date {
829 color: var(--TWPT-secondary-text)!important;
830}
831
avm999630bc113a2020-09-07 13:02:11 +0200832ec-announcements-content .no-announcements-message {
833 color: #c3bfbc!important;
834}
835
avm9996315b23d72021-04-26 18:07:15 +0200836ec-announcements-content .view-all-link,
837 ec-announcements-content .read-more-button {
avm99963223416c2021-04-21 22:13:14 +0200838 color: var(--TWPT-link)!important;
839}
840
avm9996315b23d72021-04-26 18:07:15 +0200841ec-announcements-content ::-webkit-scrollbar-thumb {
842 background-color: rgba(255, 255, 255, .26)!important;
843}
844
845ec-announcements-content ::-webkit-scrollbar-thumb:hover {
846 background-color: #4285f4!important;
847}
848
avm99963b2329632021-02-06 20:05:34 +0100849/* Generic popup (for notification bell, account selector, etc.) */
850.popup-wrapper .header-text {
851 color: var(--TWPT-primary-text)!important;
852}
853
avm9996348c87d12021-04-09 13:00:21 +0200854/* Notifications bell popup/panel */
855.notification-panel .header material-button {
856 color: var(--TWPT-secondary-text)!important;
857}
858
859.notification-panel .cards-container .promo-message {
860 color: var(--TWPT-secondary-text)!important;
861}
862
863.notification-panel .cards-container .promo-message .header-text {
864 color: var(--TWPT-primary-text)!important;
865}
866
avm999630bc113a2020-09-07 13:02:11 +0200867/* Account selector */
868.popup-wrapper .profile .email {
869 color: rgba(255, 255, 255, .54)!important;
870}
871
872material-gaia-picker-footer {
873 color: rgba(255, 255, 255, .54)!important;
874 background-color: var(--TWPT-active-background)!important;
875}
876
avm9996348c87d12021-04-09 13:00:21 +0200877material-gaia-picker-footer material-button {
878 color: var(--TWPT-secondary-text)!important;
879}
880
avm999630bc113a2020-09-07 13:02:11 +0200881/* Canned responses */
882ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +0100883 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +0200884 color: var(--TWPT-primary-text)!important;
885}
886
avm9996325a0d602020-11-25 19:24:16 +0100887ec-canned-responses .label-row,
888 ec-canned-responses ec-canned-response-row .snippet,
889 ec-canned-responses ec-canned-response-row .tag {
890 color: var(--TWPT-secondary-text)!important;
891}
892
avm999630bc113a2020-09-07 13:02:11 +0200893ec-canned-responses ec-canned-response-row .header.closed:hover,
894 ec-canned-responses ec-canned-response-row .header.closed:focus,
895 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
896 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
897 background-color: var(--TWPT-active-background)!important;
898}
899
avm9996325a0d602020-11-25 19:24:16 +0100900ec-canned-responses .filter-row,
901 ec-canned-responses .label-row,
902 ec-canned-responses ec-canned-response-row material-expansionpanel {
903 border-bottom-color: var(--TWPT-subtle-border)!important;
904}
905
avm999630bc113a2020-09-07 13:02:11 +0200906/* Reply button */
907material-fab.reply-button {
908 background-color: var(--TWPT-link)!important;
909 color: var(--TWPT-primary-background)!important;
910}
911
avm99963223416c2021-04-21 22:13:14 +0200912/* Settings view */
913ec-settings .forum-language-container {
914 border-bottom-color: var(--TWPT-subtle-border)!important;
915}
916
917ec-settings .forum-language-container material-button {
918 color: var(--TWPT-secondary-text)!important;
919}
920
921ec-settings material-checkbox, ec-settings material-checkbox .content {
922 color: var(--TWPT-primary-text)!important;
923}
924
avm99963f5923962020-12-07 16:44:37 +0100925/* Custom injected components */
926.TWPT-log {
927 background-color: #424242!important;
928}
929
930.TWPT-log-entry.TWPT-log-entry--error {
931 color: #ff8A80!important;
932}