blob: 633dcaab88180bc82ee7457b3ab421c6743e2865 [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;
avm999630bc113a2020-09-07 13:02:11 +020020}
21
22body {
23 color: var(--TWPT-primary-text);
24 background-color: var(--TWPT-primary-background)!important;
25}
26
27p {
28 color: var(--TWPT-primary-text);
29}
30
31body.ec a {
32 color: var(--TWPT-link);
33}
34
35/* Header */
36.material-content > header {
37 background-color: var(--TWPT-primary-background)!important;
38}
39
avm9996315b23d72021-04-26 18:07:15 +020040.material-content > header .app-title-button,
41 .material-content > header .app-title-text {
42 color: var(--TWPT-secondary-text)!important;
avm99963ea9b23f2021-04-22 14:06:03 +020043}
44
avm9996348c87d12021-04-09 13:00:21 +020045.material-content > header material-button,
avm9996315b23d72021-04-26 18:07:15 +020046 .material-content > header material-button material-icon,
avm9996348c87d12021-04-09 13:00:21 +020047 .material-content > header notification-bell material-icon {
avm999630bc113a2020-09-07 13:02:11 +020048 color: rgba(255, 255, 255, .87)!important;
49}
50
51.search-box {
52 background-color: #313235!important;
53}
54
55.search-box .clear-icon {
56 opacity: 0.8;
57 color: rgba(255, 255, 255, .87)!important;
58}
59
60.material-content > header .bell.mixin {
61 fill: rgba(255, 255, 255, .87)!important;
62}
63
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +020064/* Notification bell */
65notification-bell:focus {
66 background-color: rgba(255, 255, 255, .10)!important;
67}
68
avm999630bc113a2020-09-07 13:02:11 +020069/* Drawer */
70material-drawer, material-drawer .panel, material-list-item {
71 background-color: var(--TWPT-drawer-background)!important;
72}
73
avm9996324ef6522020-11-25 19:45:43 +010074material-list-item:hover, material-list-item:focus, material-list-item.item--active {
avm999630bc113a2020-09-07 13:02:11 +020075 background-color: var(--TWPT-active-background)!important;
76}
77
78material-drawer .panel {
79 border-bottom-color: #25231f!important;
80}
81
82material-drawer .drawer-section-title, material-drawer .header > material-icon {
83 color: var(--TWPT-secondary-text)!important;
84}
85
avm9996315b23d72021-04-26 18:07:15 +020086material-drawer material-list-item,
87 material-drawer material-list-item .title {
avm999630bc113a2020-09-07 13:02:11 +020088 color: #d2cecb!important;
89}
90
91material-drawer ec-forum-drawer-item material-checkbox material-icon {
92 filter: brightness(1.5);
93}
94
avm9996315b23d72021-04-26 18:07:15 +020095/* Header menus */
96.popup material-list-item {
97 color: #d2cecb!important;
98}
99
avm99963223416c2021-04-21 22:13:14 +0200100/* Filters (ec-query-builder) */
101material-condition-builder .compound-condition-operator {
102 color: var(--TWPT-secondary-text)!important;
103}
104
105material-condition-builder .compound-condition-operator::before,
106 material-condition-builder .compound-condition-operator::after {
107 border-left-color: rgba(255, 255, 255, .20)!important;
108}
109
avm999630bc113a2020-09-07 13:02:11 +0200110/* Selector */
avm99963a51c7612020-11-25 23:58:56 +0100111
112/*
113 * This applies not only to the selector but also to the ec-work-state-picker.
114 */
avm99963a091be12021-02-18 17:03:28 +0100115.popup-wrapper, material-list, .popup .item-group-list {
avm999630bc113a2020-09-07 13:02:11 +0200116 background-color: var(--TWPT-drawer-background)!important;
117}
118
avm99963a091be12021-02-18 17:03:28 +0100119material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
120 .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
avm999630bc113a2020-09-07 13:02:11 +0200121 box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
122 border-top-color: #1f1f1f!important;
123}
124
125material-list material-select-item:hover,
126 material-list material-select-item:focus,
127 material-list material-select-dropdown-item:hover,
128 material-list material-select-dropdown-item:focus,
129 material-list material-select-dropdown-item.active,
avm99963a091be12021-02-18 17:03:28 +0100130 material-list material-select-dropdown-item:not(.multiselect).selected,
avm999634298b432021-08-16 16:38:00 +0200131 material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
avm99963a091be12021-02-18 17:03:28 +0100132 .popup .item-group-list material-select-item:hover,
133 .popup .item-group-list material-select-item:focus,
avm99963744d0cf2021-03-23 22:05:57 +0100134 .popup .item-group-list material-select-item.active,
avm99963a091be12021-02-18 17:03:28 +0100135 .popup .item-group-list material-select-dropdown-item:hover,
136 .popup .item-group-list material-select-dropdown-item:focus,
137 .popup .item-group-list material-select-dropdown-item.active,
138 .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
avm99963744d0cf2021-03-23 22:05:57 +0100139 background-color: var(--TWPT-highlighted-item-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200140}
141
avm999634298b432021-08-16 16:38:00 +0200142material-list .single-select-item,
143 material-list .menu-item-label,
avm99963a091be12021-02-18 17:03:28 +0100144 material-list .label,
145 material-list .text-segment,
avm999634298b432021-08-16 16:38:00 +0200146 .popup .item-group-list .single-select-item
avm99963a091be12021-02-18 17:03:28 +0100147 .popup .item-group-list .menu-item-label,
148 .popup .item-group-list .label,
149 .popup .item-group-list .text-segment {
avm999630bc113a2020-09-07 13:02:11 +0200150 color: rgba(255, 255, 255, .87)!important;
151}
152
avm99963a091be12021-02-18 17:03:28 +0100153.popup .item-group-list material-icon {
154 color: rgba(255, 255, 255, .7)!important;
155}
156
avm999630bc113a2020-09-07 13:02:11 +0200157material-list [group] > [label] {
158 color: #8a8a8a!important;
159}
160
avm9996348c87d12021-04-09 13:00:21 +0200161/* This is shown in the new thread view */
162ec-forum-language-picker .labeled-select .select-label {
163 color: var(--TWPT-secondary-text)!important;
164}
165
avm999630bc113a2020-09-07 13:02:11 +0200166/* Main */
167.main {
168 color: var(--TWPT-primary-text)!important;
169}
170
avm9996325a0d602020-11-25 19:24:16 +0100171/* Border color for the page title bar (most pages use .title-bar although
172 * some use .page-header).
173 */
174main .title-bar, main .page-header {
avm999630bc113a2020-09-07 13:02:11 +0200175 border-bottom-color: var(--TWPT-subtle-border)!important;
176}
177
178main .title-bar .title, main .page-header h1, main .header h1 {
179 color: var(--TWPT-primary-text)!important;
180}
181
182.card {
183 background-color: var(--TWPT-secondary-background)!important;
184 color: var(--TWPT-primary-text)!important;
185 border-color: var(--TWPT-card-border)!important;
186}
187
188.card .card-title, .card, .card-section-title {
189 color: var(--TWPT-primary-text)!important;
190}
191
avm99963223416c2021-04-21 22:13:14 +0200192.card .card-section-hint, .card .card-section-checkbox-hint {
avm999630bc113a2020-09-07 13:02:11 +0200193 color: var(--TWPT-secondary-text)!important;
194}
195
196/* Action bar */
197.material-content .action-bar material-button,
198 ec-bulk-actions material-button,
avm99963b2329632021-02-06 20:05:34 +0100199 ec-back-button material-button,
avm9996348c87d12021-04-09 13:00:21 +0200200 .sort-options material-button {
avm999630bc113a2020-09-07 13:02:11 +0200201 color: rgba(255, 255, 255, .54)!important;
202}
203
avm99963ea9b23f2021-04-22 14:06:03 +0200204.material-content .action-bar .review-button.reviewing {
205 color: #1a73e8!important;
206 background: #dae7ff!important;
207}
208
avm999630bc113a2020-09-07 13:02:11 +0200209.material-content .action-bar material-button.starred {
210 color: #fbbc04!important;
211}
212
Adrià Vilanova Martínez2c8913b2021-07-22 23:33:37 +0200213/* ec-work-state-picker and ec-symptom-picker */
214ec-work-state-picker > button,
215 ec-symptom-picker > button {
avm99963a51c7612020-11-25 23:58:56 +0100216 color: var(--TWPT-secondary-text)!important;
217 background-color: var(--TWPT-button-background)!important;
218 border-color: var(--TWPT-subtle-border)!important;
219}
220
221.material-popup-content .popup-content .title {
222 color: var(--TWPT-primary-text)!important;
223}
224
avm999630bc113a2020-09-07 13:02:11 +0200225/* Thread list */
226ec-thread-list ul.thread-group {
227 background-color: var(--TWPT-primary-background)!important;
228}
229
230ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
231 border-bottom-color: var(--TWPT-subtle-border)!important;
232}
233
avm99963a2a06442020-11-25 21:11:10 +0100234ec-thread-summary material-expansionpanel.read:not(.checked) {
avm999630bc113a2020-09-07 13:02:11 +0200235 background-color: var(--TWPT-thread-read-background)!important;
236}
237
avm99963e65bec42020-11-25 18:26:29 +0100238ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200239 opacity: 0.8;
240}
241
avm99963e65bec42020-11-25 18:26:29 +0100242ec-thread-summary material-expansionpanel.read .title .icon {
243 opacity: 0.48!important;
244}
245
avm999630bc113a2020-09-07 13:02:11 +0200246ec-thread-summary material-expansionpanel.checked {
avm99963a2a06442020-11-25 21:11:10 +0100247 background-color: #2c4b77!important;
avm999630bc113a2020-09-07 13:02:11 +0200248}
249
250ec-thread-summary material-expansionpanel .title {
251 color: var(--TWPT-primary-text)!important;
252}
253
254ec-thread-summary material-expansionpanel ec-second-summary-line,
255 material-expansionpanel .header-content,
avm9996348c87d12021-04-09 13:00:21 +0200256 material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
257 material-expansionpanel .duplicate-label {
avm999630bc113a2020-09-07 13:02:11 +0200258 color: #928e89!important;
259}
260
avm9996348c87d12021-04-09 13:00:21 +0200261material-expansionpanel .removed-label {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200262 color: var(--TWPT-bad-text)!important;
avm9996348c87d12021-04-09 13:00:21 +0200263}
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
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200270/*
271 * The following section changes the styles of the checkboxes in thread lists,
272 * based in the styles defined in the "Checkbox input" section.
273 **/
Adrià Vilanova Martínezfb2169a2021-07-09 00:26:37 +0200274ec-thread-summary material-expansionpanel .action material-button,
275 ec-thread-list material-checkbox material-icon,
276 ec-thread-summary material-expansionpanel .star-button:not(.starred) {
277 color: #696867!important; /* Custom value to match previous behavior */
278 opacity: 1!important;
279}
280
281ec-thread-list material-checkbox material-icon.filled {
282 color: #62a5ff!important; /* Custom value to contrast well with the background */
283}
284
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200285/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
Adrià Vilanova Martínezfb2169a2021-07-09 00:26:37 +0200286ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon,
287 .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon,
288 ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon,
289 .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon {
290 color: #807d7c!important; /* custom value */
291}
292
293ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
294 .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon.filled,
295 ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
296 .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon.filled {
297 color: #92c1ff!important; /* custom value */
298}
299
avm99963b2329632021-02-06 20:05:34 +0100300/* Thread view (including review/live review components) */
avm999630bc113a2020-09-07 13:02:11 +0200301ec-question, .heading + .group, ec-message {
302 background-color: var(--TWPT-secondary-background)!important;
303}
304
avm99963b2329632021-02-06 20:05:34 +0100305ec-thread .no-review-needed {
306 background-color: #155829!important;
307 border-color: var(--TWPT-subtle-border)!important;
308}
309
310/* Review bar shown above the main message or replies */
311ec-review-bar {
avm999630bc113a2020-09-07 13:02:11 +0200312 background-color: var(--TWPT-active-background)!important;
313}
314
avm99963b2329632021-02-06 20:05:34 +0100315ec-review-bar material-chip {
316 background-color: var(--TWPT-button-background)!important;
317}
318
319ec-review-bar material-chip:not(.relevant-active):not(.active) {
avm99963b2329632021-02-06 20:05:34 +0100320 border-color: var(--TWPT-card-border)!important;
321}
322
323ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
324 color: var(--TWPT-primary-text)!important;
325 fill: var(--TWPT-primary-text)!important;
326}
327
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200328ec-review-bar material-chip:not(.relevant-active):not(.active) .content {
329 color: var(--TWPT-primary-text)!important;
330}
331
avm99963b2329632021-02-06 20:05:34 +0100332ec-review-bar material-chip.relevant-active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200333 border-color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100334}
335
336ec-review-bar material-chip.relevant-active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200337 color: var(--TWPT-good-text)!important;
338 fill: var(--TWPT-good-text)!important;
339}
340
341ec-review-bar material-chip.relevant-active .content {
342 color: var(--TWPT-good-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100343}
344
345ec-review-bar material-chip.active {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200346 border-color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100347}
348
349ec-review-bar material-chip.active material-icon {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200350 color: var(--TWPT-bad-text)!important;
351 fill: var(--TWPT-bad-text)!important;
352}
353
354ec-review-bar material-chip.active .content {
355 color: var(--TWPT-bad-text)!important;
avm99963b2329632021-02-06 20:05:34 +0100356}
357
avm999630bc113a2020-09-07 13:02:11 +0200358ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
359 color: var(--TWPT-secondary-text)!important;
360}
361
avm9996395da0772020-09-09 01:07:36 +0200362ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200363 background-color: var(--TWPT-active-background)!important;
364}
365
avm9996395da0772020-09-09 01:07:36 +0200366ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200367 color: var(--TWPT-primary-text)!important;
368}
369
avm9996395da0772020-09-09 01:07:36 +0200370ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200371 color: var(--TWPT-primary-text)!important;
372 fill: var(--TWPT-primary-text)!important;
373}
374
375ec-question .title {
376 color: var(--TWPT-primary-text-alt)!important;
377}
378
avm99963b2329632021-02-06 20:05:34 +0100379ec-user-link .name-text {
380 color: var(--TWPT-link)!important;
381}
382
383ec-message-header ec-avatar svg, ec-message-header .role,
384 ec-message .footer .role {
avm999630bc113a2020-09-07 13:02:11 +0200385 filter: brightness(1.5);
386}
387
388ec-question .body, ec-message .body {
389 color: var(--TWPT-primary-text)!important;
390}
391
392ec-question .thread-insert {
393 background: none!important;
394}
395
396ec-question .details-heading {
397 color: var(--TWPT-primary-text-alt) !important;
398}
399
Adrià Vilanova Martínez0ab61ea2021-06-03 20:25:18 +0200400ec-question .state-chips material-chip {
401 background-color: var(--TWPT-button-background)!important;
402 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
403 0 1px 1px 0 rgba(0, 0, 0, 0.14),
404 0 1px 3px 0 rgba(0, 0, 0, 0.12);
405}
406
407ec-question .state-chips material-chip .content {
408 color: var(--TWPT-primary-text)!important;
409}
410
avm9996348c87d12021-04-09 13:00:21 +0200411ec-question .footer,
412 ec-ask-flow .content-disclaimer {
avm999630bc113a2020-09-07 13:02:11 +0200413 color: var(--TWPT-primary-text)!important;
414 background-color: var(--TWPT-active-background)!important;
415 border-top-color: var(--TWPT-card-border)!important;
416}
417
418.heading {
419 color: var(--TWPT-primary-text)!important;
420}
421
422.heading + .group,
423 .load-more-bar,
424 ec-message:not(:first-child),
425 .load-more-bar .load-more-button,
426 .load-more-bar .load-all-button {
427 border-color: var(--TWPT-card-border)!important;
428}
429
avm9996395da0772020-09-09 01:07:36 +0200430ec-message .type {
431 color: var(--TWPT-primary-text)!important;
432}
433
avm999630bc113a2020-09-07 13:02:11 +0200434ec-message .footer ec-relative-time,
435 ec-message .footer ec-safe-html {
436 color: var(--TWPT-secondary-text)!important;
437}
438
439ec-message .helpful-prompt {
440 color: var(--TWPT-primary-text)!important;
441}
442
443ec-question .me-too-button,
444 ec-question .subscribe-button,
445 ec-message .upvote-button,
446 ec-message .downvote-button {
447 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100448 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200449}
450
avm99963223416c2021-04-21 22:13:14 +0200451ec-message .alert {
452 color: var(--TWPT-secondary-text)!important;
453}
454
avm999630bc113a2020-09-07 13:02:11 +0200455ec-question .me-too-button.selected,
456 ec-question .subscribe-button.selected,
457 ec-message .upvote-button.selected,
458 ec-message .downvote-button.selected {
459 color: #4285f4!important;
460}
461
462.load-more-bar .load-more-button, .load-more-bar .load-all-button {
463 background-color: var(--TWPT-secondary-background)!important;
464}
465
466.locked-alert {
467 background-color: var(--TWPT-active-background)!important;
468 border: var(--TWPT-card-border)!important;
469}
470
471.locked-alert material-icon {
472 color: rgba(255, 255, 255, .38)!important;
473}
474
avm99963b2329632021-02-06 20:05:34 +0100475ec-thread button.reply.collapsed {
476 color: var(--TWPT-secondary-text)!important;
477}
478
avm999630bc113a2020-09-07 13:02:11 +0200479ec-thread .finished-question {
480 background-color: var(--TWPT-active-background)!important;
481 border: var(--TWPT-card-border)!important;
482}
483
avm99963ea9b23f2021-04-22 14:06:03 +0200484ec-thread .finished-question .next-question {
485 color: var(--TWPT-link)!important;
486 border-color: var(--TWPT-link)!important;
487}
488
avm999630bc113a2020-09-07 13:02:11 +0200489.material-content .action-bar material-button.has-activity {
490 color: #1a73e8!important;
491}
492
493.material-content .action-bar material-button.showing-sidebar {
494 background-color: var(--TWPT-active-background)!important;
495}
496
497ec-activity-panel .title-bar h3 {
498 color: #e8eaf2!important;
499}
500
501ec-activity-panel ec-activity {
502 color: var(--TWPT-secondary-text)!important;
503 border-color: var(--TWPT-card-border)!important;
504}
505
506ec-activity-panel ec-activity .message {
507 color: var(--TWPT-primary-text-alt)!important;
508}
509
510ec-activity-panel ec-activity .thread-title {
511 color: #c3bfbc!important;
512}
513
514/* Recommended answers - show in green where we've overwritten the colors */
515.recommended-answers {
516 color: #34a853!important;
517}
518
avm99963fb7107c2021-04-14 19:39:05 +0200519/* Suggested answers - show brighter blue */
520.suggested-icon {
521 color: var(--TWPT-blue-A100)!important;
522}
523
524/* Help button (shown in the suggested answers header) */
525.explanation-icon material-icon {
526 color: rgba(255, 255, 255, .54)!important;
527}
528
529/* Help button tooltip */
530.popup .paper-container {
531 background: var(--TWPT-drawer-background)!important;
532}
533
534.explanation-icon material-icon:hover {
535 color: var(--TWPT-blue-A100)!important;
536}
537
avm99963223416c2021-04-21 22:13:14 +0200538/* New thread and edit message views */
539material-stepper {
540 border-top-color: var(--TWPT-card-border)!important;
541}
542
avm999630bc113a2020-09-07 13:02:11 +0200543material-stepper .stepper-step-name,
544 material-stepper .purpose-title {
545 color: var(--TWPT-primary-text)!important;
546}
547
548ec-ask-flow .display-name-label,
avm99963223416c2021-04-21 22:13:14 +0200549 material-stepper .additional-details-label,
550 material-stepper .detail-label {
avm999630bc113a2020-09-07 13:02:11 +0200551 color: var(--TWPT-secondary-text)!important;
552}
553
avm99963223416c2021-04-21 22:13:14 +0200554material-stepper .stepper-step[selectable=true]:focus {
555 background-color: rgba(60, 64, 67, .24)!important;
556}
557
avm9996301818912021-05-24 11:53:18 +0200558/* Compose thread view */
559ec-thread-composer .main-content .title-label,
560 ec-thread-composer .main-content .post-label {
561 color: var(--TWPT-primary-text-alt)!important;
562}
563
564ec-thread-composer .main-content .title-input,
565 ec-thread-composer .main-content ec-rich-text-editor {
566 border-color: var(--TWPT-card-border)!important;
567}
568
569ec-thread-composer .main-content .title-alert {
Adrià Vilanova Martínezc5d40aa2021-06-11 14:18:23 +0200570 color: var(--TWPT-bad-text)!important;
avm9996301818912021-05-24 11:53:18 +0200571}
572
573ec-thread-composer material-drawer {
574 background-color: inherit!important;
575}
576
577ec-thread-composer material-drawer .right-panel {
578 border-left-color: var(--TWPT-card-border)!important;
579}
580
581ec-thread-composer material-drawer .panel-section-title {
582 color: var(--TWPT-primary-text)!important;
583}
584
585ec-thread-composer material-drawer .panel-section-divider {
586 border-color: var(--TWPT-card-border)!important;
587}
588
589ec-thread-composer material-drawer material-radio .radio-label {
590 color: var(--TWPT-primary-text-alt)!important;
591}
592
593ec-thread-composer material-drawer material-radio .radio-description,
594 ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
595 color: var(--TWPT-secondary-text)!important;
596}
597
avm9996348c87d12021-04-09 13:00:21 +0200598/* Note: see thread view section. There is a rule for the thread creation
599 * footer.
600 **/
601
avm999630bc113a2020-09-07 13:02:11 +0200602/* Profile view */
avm9996348c87d12021-04-09 13:00:21 +0200603ec-user .main-card {
avm999630bc113a2020-09-07 13:02:11 +0200604 background-color: var(--TWPT-secondary-background)!important;
avm9996348c87d12021-04-09 13:00:21 +0200605}
606
607ec-user .abuse-alert-container {
608 background-color: var(--TWPT-active-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200609 border-top-right-radius: 8px!important;
avm9996348c87d12021-04-09 13:00:21 +0200610}
611
612ec-user .abuse-alert-container .abuse-alert {
613 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200614}
615
avm99963c4cb8f32020-09-07 23:52:28 +0200616ec-user ec-display-name-editor, ec-user .header .name {
avm999630bc113a2020-09-07 13:02:11 +0200617 color: var(--TWPT-primary-text)!important;
618}
619
avm9996395da0772020-09-09 01:07:36 +0200620ec-user .role {
621 filter: brightness(1.5);
622}
623
avm999630bc113a2020-09-07 13:02:11 +0200624ec-user bar-chart .axis text {
625 fill: rgba(255, 255, 255, .54)!important;
626}
627
628ec-user bar-chart .axis path,
629 ec-user bar-chart .axis .gridline,
630 ec-user bar-chart .axis line {
631 stroke: rgba(255, 255, 255, .12)!important;
632}
633
634ec-user bar-chart .axis line.axis-zero-tick,
635 ec-user bar-chart .axis.x .tick-mark {
636 stroke: rgba(255, 255, 255, .38)!important;
637}
638
639ec-user bar-chart .aplos-legend-entry {
640 color: var(--TWPT-secondary-text)!important;
641}
642
643.aplos-hovercard {
644 background: var(--TWPT-secondary-background)!important;
645}
646
647.aplos-hovercard .title {
648 color: var(--TWPT-primary-text)!important;
649}
650
651.aplos-hovercard .subtitle,
652 .aplos-donut-center .subtitle,
653 .aplos-hovercard .series,
654 .aplos-donut-center .series,
655 .aplos-hovercard .value,
656 .aplos-donut-center .value {
657 color: var(--TWPT-secondary-text)!important;
658}
659
660/* Duplicate thread feature */
661.search-results ec-thread-option material-expansionpanel .panel {
662 background-color: var(--TWPT-primary-background)!important;
663}
664
665.search-results ec-thread-option material-expansionpanel.selected .panel,
666 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
667 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
668 background-color: #17191c!important;
669}
670
671/* Disabled buttons */
672material-button[disabled] {
673 color: rgba(255, 255, 255, .26)!important;
674}
675
676/* Material icons */
677ec-filter-drawer-item material-icon,
678 ec-filter-drawer-item ec-icon,
679 material-drawer .drawer-section material-icon,
680 material-drawer .drawer-section ec-icon,
681 material-list material-icon,
682 ec-query-builder material-icon,
avm999630bc113a2020-09-07 13:02:11 +0200683 ec-thread-summary material-expansionpanel .title material-icon,
684 .search-results ec-thread-option material-icon,
685 .search-results ec-thread-option ec-icon,
686 ec-rich-text-editor material-icon,
687 ec-editor-command material-icon,
avm99963223416c2021-04-21 22:13:14 +0200688 ec-canned-responses ec-canned-response-row material-icon,
689 ec-ask-flow > .header material-button {
avm999630bc113a2020-09-07 13:02:11 +0200690 color: rgba(255, 255, 255, .87)!important;
691}
692
693material-drawer ec-icon,
avm99963223416c2021-04-21 22:13:14 +0200694 .search-results ec-thread-option ec-icon,
avm9996315b23d72021-04-26 18:07:15 +0200695 ec-thread-summary material-expansionpanel .title ec-icon,
696 ec-announcements-menu-item ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200697 fill: rgba(255, 255, 255, .87)!important;
698}
699
700/* Dialogs */
701material-dialog, material-dialog .dialog-header {
702 background-color: var(--TWPT-primary-background)!important;
703}
704
705ec-movable-dialog[showminimize] material-dialog .dialog-header {
706 background-color: #d2e3fc!important;
707}
708
709material-dialog .title {
710 color: var(--TWPT-primary-text-alt)!important;
711}
712
713ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
714 color: var(--TWPT-primary-background)!important;
715}
716
717ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
718 background-color: #170f01!important;
719}
720
avm99963223416c2021-04-21 22:13:14 +0200721ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
722 color: var(--TWPT-blue-A100)!important;
723}
724
avm999630bc113a2020-09-07 13:02:11 +0200725material-dialog .section-title,
726 material-dialog .select-label,
727 material-dialog .input-label,
728 material-dialog .btn-no,
729 ec-display-name-editor,
730 .forum-selection-label {
731 color: var(--TWPT-secondary-text)!important;
732}
733
avm9996301818912021-05-24 11:53:18 +0200734material-dialog main > .user {
735 border-bottom-color: var(--TWPT-card-border)!important;
736}
737
avm999630bc113a2020-09-07 13:02:11 +0200738ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
739 color: var(--TWPT-secondary-text)!important;
740 background-color: var(--TWPT-active-background)!important;
741 border-top-color: #25231f!important;
742}
743
avm9996301818912021-05-24 11:53:18 +0200744ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
745 color: var(--TWPT-link)!important;
746}
747
avm999630bc113a2020-09-07 13:02:11 +0200748/* Keyboard shortcuts dialog */
749material-dialog .main.with-scroll-strokes table td {
750 color: var(--TWPT-primary-text)!important;
751}
752
753/* Rich text editor */
754ec-editor-command material-button,
755 ec-formatting-popup material-button {
756 box-shadow: none!important;
757}
758
759ec-editor-command material-button.is-active {
760 background: var(--TWPT-active-background)!important;
761}
762
763ec-rich-text-editor .placeholder {
764 color: rgba(255, 255, 255, .38)!important;
765}
766
avm9996301818912021-05-24 11:53:18 +0200767ec-rich-text-editor .input-wrapper,
768 ec-rich-text-editor .spacer {
769 border-color: var(--TWPT-card-border)!important;
770}
771
772ec-rich-text-editor .input-wrapper.input-wrapper--focused {
773 border-color: var(--TWPT-blue-A100)!important;
774}
775
avm999630bc113a2020-09-07 13:02:11 +0200776ec-rich-text-editor .input {
777 color: var(--TWPT-primary-text)!important;
778}
779
780ec-rich-text-editor .hint {
781 color: rgba(255, 255, 255, .54)!important;
782}
783
784material-select-searchbox + material-list material-list-item {
785 color: rgba(255, 255, 255, .87)!important;
786}
787
788ec-attachment .filename {
789 color: var(--TWPT-primary-text)!important;
790}
791
792/* Thread insert */
793ec-thread-insert .title {
794 color: var(--TWPT-primary-text)!important;
795}
796
797ec-thread-insert ec-thread-counts,
798 ec-thread-insert .details,
799 ec-thread-insert ec-relative-time {
800 color: rgba(255, 255, 255, .54)!important;
801}
802
803/* Text input */
804material-input input {
805 color: var(--TWPT-primary-text)!important;
806}
807
808material-input .label-text,
809 material-input .hint-text,
810 material-input .counter {
811 color: rgba(255, 255, 255, .54)!important;
812}
813
814material-input .underline .unfocused-underline {
avm99963223416c2021-04-21 22:13:14 +0200815 background-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +0200816}
817
avm9996301818912021-05-24 11:53:18 +0200818material-input .underline .focused-underline {
819 background-color: var(--TWPT-blue-A100)!important;
820}
821
avm999630bc113a2020-09-07 13:02:11 +0200822label .label {
823 color: var(--TWPT-primary-text)!important;
824}
825
826/* Input underline */
827material-input .underline .unfocused-underline,
828 material-dropdown-select dropdown-button [buttondecorator] {
avm9996301818912021-05-24 11:53:18 +0200829 border-color: var(--TWPT-input-underline)!important;
avm999630bc113a2020-09-07 13:02:11 +0200830}
831
832/* Checkbox input */
Adrià Vilanova Martínez1d44d3d2021-07-26 15:34:19 +0200833material-checkbox material-icon,
834 material-checkbox .content {
avm999630bc113a2020-09-07 13:02:11 +0200835 color: var(--TWPT-secondary-text)!important;
836}
837
Adrià Vilanova Martínez0d15aeb2021-07-26 15:18:43 +0200838/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
839material-checkbox material-icon.filled {
840 color: var(--TWPT-blue-A100)!important;
841}
842
843material-checkbox:focus:not(.disabled).gm-icons .icon,
844 .gm-icons material-checkbox:focus:not(.disabled) .icon,
845 material-checkbox:hover:not(.disabled).gm-icons .icon,
846 .gm-icons material-checkbox:hover:not(.disabled) .icon {
847 color: #cfd2d8!important; /* custom value */
848}
849
850material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
851 .gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
852 material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
853 .gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
854 color: var(--TWPT-blue-100)!important;
855}
856
857.gm-icons material-checkbox .icon-container::before{
858 background-color: #dfdedb!important; /* custom value */
859}
860
861/* Radio input */
862material-radio .icon-container:not(.checked) material-icon {
863 color: var(--TWPT-secondary-text)!important;
864}
865
866material-radio .icon-container.checked material-icon {
867 color: var(--TWPT-blue-A100)!important;
868}
869
870/* Material switch */
871.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
872 background-color: #7d7d7d!important; /* custom value */
873}
874
875.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
876 border-color: #fff!important; /* custom value */
877}
878
879.mdc-switch.mdc-switch--checked .mdc-switch__track {
880 background-color: var(--TWPT-blue-A100)!important;
881}
882
883.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
884 border-color: var(--TWPT-blue-A100)!important;
885}
886
avm999630bc113a2020-09-07 13:02:11 +0200887/* Material menu button and dropdown select */
888material-menu material-button, material-dropdown-select dropdown-button {
avm99963223416c2021-04-21 22:13:14 +0200889 color: var(--TWPT-primary-text)!important;
avm999630bc113a2020-09-07 13:02:11 +0200890}
891
avm9996348c87d12021-04-09 13:00:21 +0200892material-dropdown-select dropdown-button .button.is-disabled .button-text,
893 material-dropdown-select dropdown-button .button.is-disabled material-icon {
894 color: rgba(255, 255, 255, .32)!important;
avm999630bc113a2020-09-07 13:02:11 +0200895}
896
897/* Announcements content */
avm99963223416c2021-04-21 22:13:14 +0200898ec-announcements-content .header,
899 ec-announcements-content .no-announcements,
900 ec-announcements-content .announcement {
901 border-bottom-color: var(--TWPT-card-border)!important;
902}
903
avm999630bc113a2020-09-07 13:02:11 +0200904ec-announcements-content .header .title, ec-announcements-content .announcement-title {
905 color: var(--TWPT-primary-text-alt)!important;
906}
907
avm9996315b23d72021-04-26 18:07:15 +0200908ec-announcements-content .announcement-date {
909 color: var(--TWPT-secondary-text)!important;
910}
911
avm999630bc113a2020-09-07 13:02:11 +0200912ec-announcements-content .no-announcements-message {
913 color: #c3bfbc!important;
914}
915
avm9996315b23d72021-04-26 18:07:15 +0200916ec-announcements-content .view-all-link,
917 ec-announcements-content .read-more-button {
avm99963223416c2021-04-21 22:13:14 +0200918 color: var(--TWPT-link)!important;
919}
920
avm9996315b23d72021-04-26 18:07:15 +0200921ec-announcements-content ::-webkit-scrollbar-thumb {
922 background-color: rgba(255, 255, 255, .26)!important;
923}
924
925ec-announcements-content ::-webkit-scrollbar-thumb:hover {
926 background-color: #4285f4!important;
927}
928
avm99963b2329632021-02-06 20:05:34 +0100929/* Generic popup (for notification bell, account selector, etc.) */
930.popup-wrapper .header-text {
931 color: var(--TWPT-primary-text)!important;
932}
933
avm9996348c87d12021-04-09 13:00:21 +0200934/* Notifications bell popup/panel */
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +0200935.notification-panel .header {
936 border-bottom-color: var(--TWPT-card-border)!important;
937}
938
avm9996348c87d12021-04-09 13:00:21 +0200939.notification-panel .header material-button {
940 color: var(--TWPT-secondary-text)!important;
941}
942
943.notification-panel .cards-container .promo-message {
944 color: var(--TWPT-secondary-text)!important;
945}
946
947.notification-panel .cards-container .promo-message .header-text {
948 color: var(--TWPT-primary-text)!important;
949}
950
Adrià Vilanova Martínez47d33bc2021-08-14 18:50:50 +0200951.notification-panel .cards-container ec-notification-card-content {
952 border-bottom-color: var(--TWPT-card-border)!important;
953}
954
955.notification-panel .cards-container ec-notification-card-content .text {
956 color: var(--TWPT-primary-text)!important;
957}
958
959.notification-panel .cards-container ec-notification-card-content .time,
960 .notification-panel .cards-container ec-notification-card-content .close material-button {
961 color: var(--TWPT-secondary-text)!important;
962}
963
avm999630bc113a2020-09-07 13:02:11 +0200964/* Account selector */
965.popup-wrapper .profile .email {
966 color: rgba(255, 255, 255, .54)!important;
967}
968
969material-gaia-picker-footer {
970 color: rgba(255, 255, 255, .54)!important;
971 background-color: var(--TWPT-active-background)!important;
972}
973
avm9996348c87d12021-04-09 13:00:21 +0200974material-gaia-picker-footer material-button {
975 color: var(--TWPT-secondary-text)!important;
976}
977
avm999630bc113a2020-09-07 13:02:11 +0200978/* Canned responses */
979ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +0100980 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +0200981 color: var(--TWPT-primary-text)!important;
982}
983
avm9996325a0d602020-11-25 19:24:16 +0100984ec-canned-responses .label-row,
985 ec-canned-responses ec-canned-response-row .snippet,
986 ec-canned-responses ec-canned-response-row .tag {
987 color: var(--TWPT-secondary-text)!important;
988}
989
avm999630bc113a2020-09-07 13:02:11 +0200990ec-canned-responses ec-canned-response-row .header.closed:hover,
991 ec-canned-responses ec-canned-response-row .header.closed:focus,
992 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
993 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
994 background-color: var(--TWPT-active-background)!important;
995}
996
avm9996325a0d602020-11-25 19:24:16 +0100997ec-canned-responses .filter-row,
998 ec-canned-responses .label-row,
999 ec-canned-responses ec-canned-response-row material-expansionpanel {
1000 border-bottom-color: var(--TWPT-subtle-border)!important;
1001}
1002
avm999630bc113a2020-09-07 13:02:11 +02001003/* Reply button */
Adrià Vilanova Martínez1d44d3d2021-07-26 15:34:19 +02001004material-fab.reply-button,
1005 material-fab.reply-fab {
avm999630bc113a2020-09-07 13:02:11 +02001006 background-color: var(--TWPT-link)!important;
1007 color: var(--TWPT-primary-background)!important;
1008}
1009
avm99963223416c2021-04-21 22:13:14 +02001010/* Settings view */
1011ec-settings .forum-language-container {
1012 border-bottom-color: var(--TWPT-subtle-border)!important;
1013}
1014
1015ec-settings .forum-language-container material-button {
1016 color: var(--TWPT-secondary-text)!important;
1017}
1018
Adrià Vilanova Martínez3356df72021-07-09 19:27:04 +02001019/* Loading spinner */
1020material-spinner {
1021 border-color: var(--TWPT-blue-A100)!important;
1022}
1023
avm99963f5923962020-12-07 16:44:37 +01001024/* Custom injected components */
1025.TWPT-log {
1026 background-color: #424242!important;
1027}
1028
1029.TWPT-log-entry.TWPT-log-entry--error {
1030 color: #ff8A80!important;
1031}