blob: e256297dba932cc0e1567c4cf3168e716fff8005 [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);
avm99963b2329632021-02-06 20:05:34 +010016 --TWPT-green-A400: #00E676;
17 --TWPT-red-A400: #FF1744;
avm99963fb7107c2021-04-14 19:39:05 +020018 --TWPT-blue-A100: #82B1FF;
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
avm9996352b52c32021-05-02 14:34:02 +020059.material-content > header .right-control {
60 width: auto!important;
avm9996387ba0d22021-05-03 22:09:39 +020061 max-width: 252px!important;
avm9996352b52c32021-05-02 14:34:02 +020062}
63
avm999630bc113a2020-09-07 13:02:11 +020064.material-content > header .bell.mixin {
65 fill: rgba(255, 255, 255, .87)!important;
66}
67
68/* Drawer */
69material-drawer, material-drawer .panel, material-list-item {
70 background-color: var(--TWPT-drawer-background)!important;
71}
72
avm9996324ef6522020-11-25 19:45:43 +010073material-list-item:hover, material-list-item:focus, material-list-item.item--active {
avm999630bc113a2020-09-07 13:02:11 +020074 background-color: var(--TWPT-active-background)!important;
75}
76
77material-drawer .panel {
78 border-bottom-color: #25231f!important;
79}
80
81material-drawer .drawer-section-title, material-drawer .header > material-icon {
82 color: var(--TWPT-secondary-text)!important;
83}
84
avm9996315b23d72021-04-26 18:07:15 +020085material-drawer material-list-item,
86 material-drawer material-list-item .title {
avm999630bc113a2020-09-07 13:02:11 +020087 color: #d2cecb!important;
88}
89
90material-drawer ec-forum-drawer-item material-checkbox material-icon {
91 filter: brightness(1.5);
92}
93
avm9996315b23d72021-04-26 18:07:15 +020094/* Header menus */
95.popup material-list-item {
96 color: #d2cecb!important;
97}
98
avm99963223416c2021-04-21 22:13:14 +020099/* Filters (ec-query-builder) */
100material-condition-builder .compound-condition-operator {
101 color: var(--TWPT-secondary-text)!important;
102}
103
104material-condition-builder .compound-condition-operator::before,
105 material-condition-builder .compound-condition-operator::after {
106 border-left-color: rgba(255, 255, 255, .20)!important;
107}
108
avm999630bc113a2020-09-07 13:02:11 +0200109/* Selector */
avm99963a51c7612020-11-25 23:58:56 +0100110
111/*
112 * This applies not only to the selector but also to the ec-work-state-picker.
113 */
avm99963a091be12021-02-18 17:03:28 +0100114.popup-wrapper, material-list, .popup .item-group-list {
avm999630bc113a2020-09-07 13:02:11 +0200115 background-color: var(--TWPT-drawer-background)!important;
116}
117
avm99963a091be12021-02-18 17:03:28 +0100118material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
119 .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
avm999630bc113a2020-09-07 13:02:11 +0200120 box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
121 border-top-color: #1f1f1f!important;
122}
123
124material-list material-select-item:hover,
125 material-list material-select-item:focus,
126 material-list material-select-dropdown-item:hover,
127 material-list material-select-dropdown-item:focus,
128 material-list material-select-dropdown-item.active,
avm99963a091be12021-02-18 17:03:28 +0100129 material-list material-select-dropdown-item:not(.multiselect).selected,
130 .popup .item-group-list material-select-item:hover,
131 .popup .item-group-list material-select-item:focus,
avm99963744d0cf2021-03-23 22:05:57 +0100132 .popup .item-group-list material-select-item.active,
avm99963a091be12021-02-18 17:03:28 +0100133 .popup .item-group-list material-select-dropdown-item:hover,
134 .popup .item-group-list material-select-dropdown-item:focus,
135 .popup .item-group-list material-select-dropdown-item.active,
136 .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
avm99963744d0cf2021-03-23 22:05:57 +0100137 background-color: var(--TWPT-highlighted-item-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200138}
139
avm99963a091be12021-02-18 17:03:28 +0100140material-list .menu-item-label,
141 material-list .label,
142 material-list .text-segment,
143 .popup .item-group-list .menu-item-label,
144 .popup .item-group-list .label,
145 .popup .item-group-list .text-segment {
avm999630bc113a2020-09-07 13:02:11 +0200146 color: rgba(255, 255, 255, .87)!important;
147}
148
avm99963a091be12021-02-18 17:03:28 +0100149.popup .item-group-list material-icon {
150 color: rgba(255, 255, 255, .7)!important;
151}
152
avm999630bc113a2020-09-07 13:02:11 +0200153material-list [group] > [label] {
154 color: #8a8a8a!important;
155}
156
avm9996348c87d12021-04-09 13:00:21 +0200157/* This is shown in the new thread view */
158ec-forum-language-picker .labeled-select .select-label {
159 color: var(--TWPT-secondary-text)!important;
160}
161
avm999630bc113a2020-09-07 13:02:11 +0200162/* Main */
163.main {
164 color: var(--TWPT-primary-text)!important;
165}
166
avm9996325a0d602020-11-25 19:24:16 +0100167/* Border color for the page title bar (most pages use .title-bar although
168 * some use .page-header).
169 */
170main .title-bar, main .page-header {
avm999630bc113a2020-09-07 13:02:11 +0200171 border-bottom-color: var(--TWPT-subtle-border)!important;
172}
173
174main .title-bar .title, main .page-header h1, main .header h1 {
175 color: var(--TWPT-primary-text)!important;
176}
177
178.card {
179 background-color: var(--TWPT-secondary-background)!important;
180 color: var(--TWPT-primary-text)!important;
181 border-color: var(--TWPT-card-border)!important;
182}
183
184.card .card-title, .card, .card-section-title {
185 color: var(--TWPT-primary-text)!important;
186}
187
avm99963223416c2021-04-21 22:13:14 +0200188.card .card-section-hint, .card .card-section-checkbox-hint {
avm999630bc113a2020-09-07 13:02:11 +0200189 color: var(--TWPT-secondary-text)!important;
190}
191
192/* Action bar */
193.material-content .action-bar material-button,
194 ec-bulk-actions material-button,
avm99963b2329632021-02-06 20:05:34 +0100195 ec-back-button material-button,
avm9996348c87d12021-04-09 13:00:21 +0200196 .sort-options material-button {
avm999630bc113a2020-09-07 13:02:11 +0200197 color: rgba(255, 255, 255, .54)!important;
198}
199
avm99963ea9b23f2021-04-22 14:06:03 +0200200.material-content .action-bar .review-button.reviewing {
201 color: #1a73e8!important;
202 background: #dae7ff!important;
203}
204
avm999630bc113a2020-09-07 13:02:11 +0200205.material-content .action-bar material-button.starred {
206 color: #fbbc04!important;
207}
208
avm99963a51c7612020-11-25 23:58:56 +0100209/* ec-work-state-picker */
210ec-work-state-picker > button {
211 color: var(--TWPT-secondary-text)!important;
212 background-color: var(--TWPT-button-background)!important;
213 border-color: var(--TWPT-subtle-border)!important;
214}
215
216.material-popup-content .popup-content .title {
217 color: var(--TWPT-primary-text)!important;
218}
219
avm999630bc113a2020-09-07 13:02:11 +0200220/* Thread list */
221ec-thread-list ul.thread-group {
222 background-color: var(--TWPT-primary-background)!important;
223}
224
225ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
226 border-bottom-color: var(--TWPT-subtle-border)!important;
227}
228
avm99963a2a06442020-11-25 21:11:10 +0100229ec-thread-summary material-expansionpanel.read:not(.checked) {
avm999630bc113a2020-09-07 13:02:11 +0200230 background-color: var(--TWPT-thread-read-background)!important;
231}
232
avm99963e65bec42020-11-25 18:26:29 +0100233ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200234 opacity: 0.8;
235}
236
avm99963e65bec42020-11-25 18:26:29 +0100237ec-thread-summary material-expansionpanel.read .title .icon {
238 opacity: 0.48!important;
239}
240
avm999630bc113a2020-09-07 13:02:11 +0200241ec-thread-summary material-expansionpanel.checked {
avm99963a2a06442020-11-25 21:11:10 +0100242 background-color: #2c4b77!important;
avm999630bc113a2020-09-07 13:02:11 +0200243}
244
245ec-thread-summary material-expansionpanel .title {
246 color: var(--TWPT-primary-text)!important;
247}
248
249ec-thread-summary material-expansionpanel ec-second-summary-line,
250 material-expansionpanel .header-content,
avm9996348c87d12021-04-09 13:00:21 +0200251 material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
252 material-expansionpanel .duplicate-label {
avm999630bc113a2020-09-07 13:02:11 +0200253 color: #928e89!important;
254}
255
avm9996348c87d12021-04-09 13:00:21 +0200256material-expansionpanel .removed-label {
257 /*
258 * The following color should be --TWPT-red-A400, but it unfortunately doesn't
259 * contrast well with the dark background, so this is the AA correction of
260 * that color.
261 **/
262 color: #ff6868!important;
263}
264
avm999631558e6c2020-12-08 13:42:40 +0100265ec-thread-summary material-expansionpanel ec-safe-html.body,
266 material-expansionpanel .issue-tracking-work-state {
avm999630bc113a2020-09-07 13:02:11 +0200267 color: var(--TWPT-primary-text)!important;
268}
269
avm99963b2329632021-02-06 20:05:34 +0100270/* Thread view (including review/live review components) */
avm999630bc113a2020-09-07 13:02:11 +0200271ec-question, .heading + .group, ec-message {
272 background-color: var(--TWPT-secondary-background)!important;
273}
274
avm99963b2329632021-02-06 20:05:34 +0100275ec-thread .no-review-needed {
276 background-color: #155829!important;
277 border-color: var(--TWPT-subtle-border)!important;
278}
279
280/* Review bar shown above the main message or replies */
281ec-review-bar {
avm999630bc113a2020-09-07 13:02:11 +0200282 background-color: var(--TWPT-active-background)!important;
283}
284
avm99963b2329632021-02-06 20:05:34 +0100285ec-review-bar material-chip {
286 background-color: var(--TWPT-button-background)!important;
287}
288
289ec-review-bar material-chip:not(.relevant-active):not(.active) {
290 color: var(--TWPT-primary-text)!important;
291 border-color: var(--TWPT-card-border)!important;
292}
293
294ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
295 color: var(--TWPT-primary-text)!important;
296 fill: var(--TWPT-primary-text)!important;
297}
298
299ec-review-bar material-chip.relevant-active {
300 color: var(--TWPT-green-A400)!important;
301 border-color: var(--TWPT-green-A400)!important;
302}
303
304ec-review-bar material-chip.relevant-active material-icon {
305 color: var(--TWPT-green-A400)!important;
306 fill: var(--TWPT-green-A400)!important;
307}
308
309ec-review-bar material-chip.active {
310 color: var(--TWPT-red-A400)!important;
311 border-color: var(--TWPT-red-A400)!important;
312}
313
314ec-review-bar material-chip.active material-icon {
315 color: var(--TWPT-red-A400)!important;
316 fill: var(--TWPT-red-A400)!important;
317}
318
avm999630bc113a2020-09-07 13:02:11 +0200319ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
320 color: var(--TWPT-secondary-text)!important;
321}
322
avm9996395da0772020-09-09 01:07:36 +0200323ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200324 background-color: var(--TWPT-active-background)!important;
325}
326
avm9996395da0772020-09-09 01:07:36 +0200327ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200328 color: var(--TWPT-primary-text)!important;
329}
330
avm9996395da0772020-09-09 01:07:36 +0200331ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200332 color: var(--TWPT-primary-text)!important;
333 fill: var(--TWPT-primary-text)!important;
334}
335
336ec-question .title {
337 color: var(--TWPT-primary-text-alt)!important;
338}
339
avm99963b2329632021-02-06 20:05:34 +0100340ec-user-link .name-text {
341 color: var(--TWPT-link)!important;
342}
343
344ec-message-header ec-avatar svg, ec-message-header .role,
345 ec-message .footer .role {
avm999630bc113a2020-09-07 13:02:11 +0200346 filter: brightness(1.5);
347}
348
349ec-question .body, ec-message .body {
350 color: var(--TWPT-primary-text)!important;
351}
352
353ec-question .thread-insert {
354 background: none!important;
355}
356
357ec-question .details-heading {
358 color: var(--TWPT-primary-text-alt) !important;
359}
360
avm9996348c87d12021-04-09 13:00:21 +0200361ec-question .footer,
362 ec-ask-flow .content-disclaimer {
avm999630bc113a2020-09-07 13:02:11 +0200363 color: var(--TWPT-primary-text)!important;
364 background-color: var(--TWPT-active-background)!important;
365 border-top-color: var(--TWPT-card-border)!important;
366}
367
368.heading {
369 color: var(--TWPT-primary-text)!important;
370}
371
372.heading + .group,
373 .load-more-bar,
374 ec-message:not(:first-child),
375 .load-more-bar .load-more-button,
376 .load-more-bar .load-all-button {
377 border-color: var(--TWPT-card-border)!important;
378}
379
avm9996395da0772020-09-09 01:07:36 +0200380ec-message .type {
381 color: var(--TWPT-primary-text)!important;
382}
383
avm999630bc113a2020-09-07 13:02:11 +0200384ec-message .footer ec-relative-time,
385 ec-message .footer ec-safe-html {
386 color: var(--TWPT-secondary-text)!important;
387}
388
389ec-message .helpful-prompt {
390 color: var(--TWPT-primary-text)!important;
391}
392
393ec-question .me-too-button,
394 ec-question .subscribe-button,
395 ec-message .upvote-button,
396 ec-message .downvote-button {
397 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100398 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200399}
400
avm99963223416c2021-04-21 22:13:14 +0200401ec-message .alert {
402 color: var(--TWPT-secondary-text)!important;
403}
404
avm999630bc113a2020-09-07 13:02:11 +0200405ec-question .me-too-button.selected,
406 ec-question .subscribe-button.selected,
407 ec-message .upvote-button.selected,
408 ec-message .downvote-button.selected {
409 color: #4285f4!important;
410}
411
412.load-more-bar .load-more-button, .load-more-bar .load-all-button {
413 background-color: var(--TWPT-secondary-background)!important;
414}
415
416.locked-alert {
417 background-color: var(--TWPT-active-background)!important;
418 border: var(--TWPT-card-border)!important;
419}
420
421.locked-alert material-icon {
422 color: rgba(255, 255, 255, .38)!important;
423}
424
avm99963b2329632021-02-06 20:05:34 +0100425ec-thread button.reply.collapsed {
426 color: var(--TWPT-secondary-text)!important;
427}
428
avm999630bc113a2020-09-07 13:02:11 +0200429ec-thread .finished-question {
430 background-color: var(--TWPT-active-background)!important;
431 border: var(--TWPT-card-border)!important;
432}
433
avm99963ea9b23f2021-04-22 14:06:03 +0200434ec-thread .finished-question .next-question {
435 color: var(--TWPT-link)!important;
436 border-color: var(--TWPT-link)!important;
437}
438
avm999630bc113a2020-09-07 13:02:11 +0200439.material-content .action-bar material-button.has-activity {
440 color: #1a73e8!important;
441}
442
443.material-content .action-bar material-button.showing-sidebar {
444 background-color: var(--TWPT-active-background)!important;
445}
446
447ec-activity-panel .title-bar h3 {
448 color: #e8eaf2!important;
449}
450
451ec-activity-panel ec-activity {
452 color: var(--TWPT-secondary-text)!important;
453 border-color: var(--TWPT-card-border)!important;
454}
455
456ec-activity-panel ec-activity .message {
457 color: var(--TWPT-primary-text-alt)!important;
458}
459
460ec-activity-panel ec-activity .thread-title {
461 color: #c3bfbc!important;
462}
463
464/* Recommended answers - show in green where we've overwritten the colors */
465.recommended-answers {
466 color: #34a853!important;
467}
468
avm99963fb7107c2021-04-14 19:39:05 +0200469/* Suggested answers - show brighter blue */
470.suggested-icon {
471 color: var(--TWPT-blue-A100)!important;
472}
473
474/* Help button (shown in the suggested answers header) */
475.explanation-icon material-icon {
476 color: rgba(255, 255, 255, .54)!important;
477}
478
479/* Help button tooltip */
480.popup .paper-container {
481 background: var(--TWPT-drawer-background)!important;
482}
483
484.explanation-icon material-icon:hover {
485 color: var(--TWPT-blue-A100)!important;
486}
487
avm99963223416c2021-04-21 22:13:14 +0200488/* New thread and edit message views */
489material-stepper {
490 border-top-color: var(--TWPT-card-border)!important;
491}
492
avm999630bc113a2020-09-07 13:02:11 +0200493material-stepper .stepper-step-name,
494 material-stepper .purpose-title {
495 color: var(--TWPT-primary-text)!important;
496}
497
498ec-ask-flow .display-name-label,
avm99963223416c2021-04-21 22:13:14 +0200499 material-stepper .additional-details-label,
500 material-stepper .detail-label {
avm999630bc113a2020-09-07 13:02:11 +0200501 color: var(--TWPT-secondary-text)!important;
502}
503
avm99963223416c2021-04-21 22:13:14 +0200504material-stepper .stepper-step[selectable=true]:focus {
505 background-color: rgba(60, 64, 67, .24)!important;
506}
507
avm9996301818912021-05-24 11:53:18 +0200508/* Compose thread view */
509ec-thread-composer .main-content .title-label,
510 ec-thread-composer .main-content .post-label {
511 color: var(--TWPT-primary-text-alt)!important;
512}
513
514ec-thread-composer .main-content .title-input,
515 ec-thread-composer .main-content ec-rich-text-editor {
516 border-color: var(--TWPT-card-border)!important;
517}
518
519ec-thread-composer .main-content .title-alert {
520 color: var(--TWPT-red-A400)!important;
521}
522
523ec-thread-composer material-drawer {
524 background-color: inherit!important;
525}
526
527ec-thread-composer material-drawer .right-panel {
528 border-left-color: var(--TWPT-card-border)!important;
529}
530
531ec-thread-composer material-drawer .panel-section-title {
532 color: var(--TWPT-primary-text)!important;
533}
534
535ec-thread-composer material-drawer .panel-section-divider {
536 border-color: var(--TWPT-card-border)!important;
537}
538
539ec-thread-composer material-drawer material-radio .radio-label {
540 color: var(--TWPT-primary-text-alt)!important;
541}
542
543ec-thread-composer material-drawer material-radio .radio-description,
544 ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
545 color: var(--TWPT-secondary-text)!important;
546}
547
548ec-thread-composer material-drawer material-checkbox material-icon {
549 opacity: 1!important;
550 color: rgba(255, 255, 255, .74)!important; /* Custom value */
551}
552
553ec-thread-composer material-drawer material-checkbox .content {
554 color: var(--TWPT-primary-text-alt)!important;
555}
556
avm9996348c87d12021-04-09 13:00:21 +0200557/* Note: see thread view section. There is a rule for the thread creation
558 * footer.
559 **/
560
avm999630bc113a2020-09-07 13:02:11 +0200561/* Profile view */
avm9996348c87d12021-04-09 13:00:21 +0200562ec-user .main-card {
avm999630bc113a2020-09-07 13:02:11 +0200563 background-color: var(--TWPT-secondary-background)!important;
avm9996348c87d12021-04-09 13:00:21 +0200564}
565
566ec-user .abuse-alert-container {
567 background-color: var(--TWPT-active-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200568 border-top-right-radius: 8px!important;
avm9996348c87d12021-04-09 13:00:21 +0200569}
570
571ec-user .abuse-alert-container .abuse-alert {
572 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200573}
574
avm99963c4cb8f32020-09-07 23:52:28 +0200575ec-user ec-display-name-editor, ec-user .header .name {
avm999630bc113a2020-09-07 13:02:11 +0200576 color: var(--TWPT-primary-text)!important;
577}
578
avm9996395da0772020-09-09 01:07:36 +0200579ec-user .role {
580 filter: brightness(1.5);
581}
582
avm999630bc113a2020-09-07 13:02:11 +0200583ec-user bar-chart .axis text {
584 fill: rgba(255, 255, 255, .54)!important;
585}
586
587ec-user bar-chart .axis path,
588 ec-user bar-chart .axis .gridline,
589 ec-user bar-chart .axis line {
590 stroke: rgba(255, 255, 255, .12)!important;
591}
592
593ec-user bar-chart .axis line.axis-zero-tick,
594 ec-user bar-chart .axis.x .tick-mark {
595 stroke: rgba(255, 255, 255, .38)!important;
596}
597
598ec-user bar-chart .aplos-legend-entry {
599 color: var(--TWPT-secondary-text)!important;
600}
601
602.aplos-hovercard {
603 background: var(--TWPT-secondary-background)!important;
604}
605
606.aplos-hovercard .title {
607 color: var(--TWPT-primary-text)!important;
608}
609
610.aplos-hovercard .subtitle,
611 .aplos-donut-center .subtitle,
612 .aplos-hovercard .series,
613 .aplos-donut-center .series,
614 .aplos-hovercard .value,
615 .aplos-donut-center .value {
616 color: var(--TWPT-secondary-text)!important;
617}
618
619/* Duplicate thread feature */
620.search-results ec-thread-option material-expansionpanel .panel {
621 background-color: var(--TWPT-primary-background)!important;
622}
623
624.search-results ec-thread-option material-expansionpanel.selected .panel,
625 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
626 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
627 background-color: #17191c!important;
628}
629
630/* Disabled buttons */
631material-button[disabled] {
632 color: rgba(255, 255, 255, .26)!important;
633}
634
635/* Material icons */
636ec-filter-drawer-item material-icon,
637 ec-filter-drawer-item ec-icon,
638 material-drawer .drawer-section material-icon,
639 material-drawer .drawer-section ec-icon,
640 material-list material-icon,
641 ec-query-builder material-icon,
642 material-radio .icon-container:not(.checked) material-icon,
643 ec-thread-summary material-expansionpanel .title material-icon,
644 .search-results ec-thread-option material-icon,
645 .search-results ec-thread-option ec-icon,
646 ec-rich-text-editor material-icon,
647 ec-editor-command material-icon,
avm99963223416c2021-04-21 22:13:14 +0200648 ec-canned-responses ec-canned-response-row material-icon,
649 ec-ask-flow > .header material-button {
avm999630bc113a2020-09-07 13:02:11 +0200650 color: rgba(255, 255, 255, .87)!important;
651}
652
653material-drawer ec-icon,
avm99963223416c2021-04-21 22:13:14 +0200654 .search-results ec-thread-option ec-icon,
avm9996315b23d72021-04-26 18:07:15 +0200655 ec-thread-summary material-expansionpanel .title ec-icon,
656 ec-announcements-menu-item ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200657 fill: rgba(255, 255, 255, .87)!important;
658}
659
660/* Dialogs */
661material-dialog, material-dialog .dialog-header {
662 background-color: var(--TWPT-primary-background)!important;
663}
664
665ec-movable-dialog[showminimize] material-dialog .dialog-header {
666 background-color: #d2e3fc!important;
667}
668
669material-dialog .title {
670 color: var(--TWPT-primary-text-alt)!important;
671}
672
673ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
674 color: var(--TWPT-primary-background)!important;
675}
676
677ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
678 background-color: #170f01!important;
679}
680
avm99963223416c2021-04-21 22:13:14 +0200681ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
682 color: var(--TWPT-blue-A100)!important;
683}
684
avm999630bc113a2020-09-07 13:02:11 +0200685material-dialog .section-title,
686 material-dialog .select-label,
687 material-dialog .input-label,
688 material-dialog .btn-no,
689 ec-display-name-editor,
690 .forum-selection-label {
691 color: var(--TWPT-secondary-text)!important;
692}
693
avm9996301818912021-05-24 11:53:18 +0200694material-dialog main > .user {
695 border-bottom-color: var(--TWPT-card-border)!important;
696}
697
avm999630bc113a2020-09-07 13:02:11 +0200698ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
699 color: var(--TWPT-secondary-text)!important;
700 background-color: var(--TWPT-active-background)!important;
701 border-top-color: #25231f!important;
702}
703
avm9996301818912021-05-24 11:53:18 +0200704ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
705 color: var(--TWPT-link)!important;
706}
707
avm999630bc113a2020-09-07 13:02:11 +0200708/* Keyboard shortcuts dialog */
709material-dialog .main.with-scroll-strokes table td {
710 color: var(--TWPT-primary-text)!important;
711}
712
713/* Rich text editor */
714ec-editor-command material-button,
715 ec-formatting-popup material-button {
716 box-shadow: none!important;
717}
718
719ec-editor-command material-button.is-active {
720 background: var(--TWPT-active-background)!important;
721}
722
723ec-rich-text-editor .placeholder {
724 color: rgba(255, 255, 255, .38)!important;
725}
726
avm9996301818912021-05-24 11:53:18 +0200727ec-rich-text-editor .input-wrapper,
728 ec-rich-text-editor .spacer {
729 border-color: var(--TWPT-card-border)!important;
730}
731
732ec-rich-text-editor .input-wrapper.input-wrapper--focused {
733 border-color: var(--TWPT-blue-A100)!important;
734}
735
avm999630bc113a2020-09-07 13:02:11 +0200736ec-rich-text-editor .input {
737 color: var(--TWPT-primary-text)!important;
738}
739
740ec-rich-text-editor .hint {
741 color: rgba(255, 255, 255, .54)!important;
742}
743
744material-select-searchbox + material-list material-list-item {
745 color: rgba(255, 255, 255, .87)!important;
746}
747
748ec-attachment .filename {
749 color: var(--TWPT-primary-text)!important;
750}
751
752/* Thread insert */
753ec-thread-insert .title {
754 color: var(--TWPT-primary-text)!important;
755}
756
757ec-thread-insert ec-thread-counts,
758 ec-thread-insert .details,
759 ec-thread-insert ec-relative-time {
760 color: rgba(255, 255, 255, .54)!important;
761}
762
763/* Text input */
764material-input input {
765 color: var(--TWPT-primary-text)!important;
766}
767
768material-input .label-text,
769 material-input .hint-text,
770 material-input .counter {
771 color: rgba(255, 255, 255, .54)!important;
772}
773
774material-input .underline .unfocused-underline {
avm99963223416c2021-04-21 22:13:14 +0200775 background-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +0200776}
777
avm9996301818912021-05-24 11:53:18 +0200778material-input .underline .focused-underline {
779 background-color: var(--TWPT-blue-A100)!important;
780}
781
avm999630bc113a2020-09-07 13:02:11 +0200782label .label {
783 color: var(--TWPT-primary-text)!important;
784}
785
786/* Input underline */
787material-input .underline .unfocused-underline,
788 material-dropdown-select dropdown-button [buttondecorator] {
avm9996301818912021-05-24 11:53:18 +0200789 border-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +0200790}
791
792/* Checkbox input */
793material-checkbox, material-checkbox .content {
794 color: var(--TWPT-secondary-text)!important;
795}
796
797/* Material menu button and dropdown select */
798material-menu material-button, material-dropdown-select dropdown-button {
avm99963223416c2021-04-21 22:13:14 +0200799 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200800}
801
avm9996348c87d12021-04-09 13:00:21 +0200802material-dropdown-select dropdown-button .button.is-disabled .button-text,
803 material-dropdown-select dropdown-button .button.is-disabled material-icon {
804 color: rgba(255, 255, 255, .32)!important;
avm999630bc113a2020-09-07 13:02:11 +0200805}
806
807/* Announcements content */
avm99963223416c2021-04-21 22:13:14 +0200808ec-announcements-content .header,
809 ec-announcements-content .no-announcements,
810 ec-announcements-content .announcement {
811 border-bottom-color: var(--TWPT-card-border)!important;
812}
813
avm999630bc113a2020-09-07 13:02:11 +0200814ec-announcements-content .header .title, ec-announcements-content .announcement-title {
815 color: var(--TWPT-primary-text-alt)!important;
816}
817
avm9996315b23d72021-04-26 18:07:15 +0200818ec-announcements-content .announcement-date {
819 color: var(--TWPT-secondary-text)!important;
820}
821
avm999630bc113a2020-09-07 13:02:11 +0200822ec-announcements-content .no-announcements-message {
823 color: #c3bfbc!important;
824}
825
avm9996315b23d72021-04-26 18:07:15 +0200826ec-announcements-content .view-all-link,
827 ec-announcements-content .read-more-button {
avm99963223416c2021-04-21 22:13:14 +0200828 color: var(--TWPT-link)!important;
829}
830
avm9996315b23d72021-04-26 18:07:15 +0200831ec-announcements-content ::-webkit-scrollbar-thumb {
832 background-color: rgba(255, 255, 255, .26)!important;
833}
834
835ec-announcements-content ::-webkit-scrollbar-thumb:hover {
836 background-color: #4285f4!important;
837}
838
avm99963b2329632021-02-06 20:05:34 +0100839/* Generic popup (for notification bell, account selector, etc.) */
840.popup-wrapper .header-text {
841 color: var(--TWPT-primary-text)!important;
842}
843
avm9996348c87d12021-04-09 13:00:21 +0200844/* Notifications bell popup/panel */
845.notification-panel .header material-button {
846 color: var(--TWPT-secondary-text)!important;
847}
848
849.notification-panel .cards-container .promo-message {
850 color: var(--TWPT-secondary-text)!important;
851}
852
853.notification-panel .cards-container .promo-message .header-text {
854 color: var(--TWPT-primary-text)!important;
855}
856
avm999630bc113a2020-09-07 13:02:11 +0200857/* Account selector */
858.popup-wrapper .profile .email {
859 color: rgba(255, 255, 255, .54)!important;
860}
861
862material-gaia-picker-footer {
863 color: rgba(255, 255, 255, .54)!important;
864 background-color: var(--TWPT-active-background)!important;
865}
866
avm9996348c87d12021-04-09 13:00:21 +0200867material-gaia-picker-footer material-button {
868 color: var(--TWPT-secondary-text)!important;
869}
870
avm999630bc113a2020-09-07 13:02:11 +0200871/* Canned responses */
872ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +0100873 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +0200874 color: var(--TWPT-primary-text)!important;
875}
876
avm9996325a0d602020-11-25 19:24:16 +0100877ec-canned-responses .label-row,
878 ec-canned-responses ec-canned-response-row .snippet,
879 ec-canned-responses ec-canned-response-row .tag {
880 color: var(--TWPT-secondary-text)!important;
881}
882
avm999630bc113a2020-09-07 13:02:11 +0200883ec-canned-responses ec-canned-response-row .header.closed:hover,
884 ec-canned-responses ec-canned-response-row .header.closed:focus,
885 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
886 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
887 background-color: var(--TWPT-active-background)!important;
888}
889
avm9996325a0d602020-11-25 19:24:16 +0100890ec-canned-responses .filter-row,
891 ec-canned-responses .label-row,
892 ec-canned-responses ec-canned-response-row material-expansionpanel {
893 border-bottom-color: var(--TWPT-subtle-border)!important;
894}
895
avm999630bc113a2020-09-07 13:02:11 +0200896/* Reply button */
897material-fab.reply-button {
898 background-color: var(--TWPT-link)!important;
899 color: var(--TWPT-primary-background)!important;
900}
901
avm99963223416c2021-04-21 22:13:14 +0200902/* Settings view */
903ec-settings .forum-language-container {
904 border-bottom-color: var(--TWPT-subtle-border)!important;
905}
906
907ec-settings .forum-language-container material-button {
908 color: var(--TWPT-secondary-text)!important;
909}
910
911ec-settings material-checkbox, ec-settings material-checkbox .content {
912 color: var(--TWPT-primary-text)!important;
913}
914
avm99963f5923962020-12-07 16:44:37 +0100915/* Custom injected components */
916.TWPT-log {
917 background-color: #424242!important;
918}
919
920.TWPT-log-entry.TWPT-log-entry--error {
921 color: #ff8A80!important;
922}