blob: 4760876db3482326a86d8d30fd1f49683aa59d90 [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;
avm9996306167752020-09-08 00:50:36 +020011 --TWPT-thread-read-background: rgba(255, 255, 255, .08);
avm999630bc113a2020-09-07 13:02:11 +020012 --TWPT-drawer-background: #2d2e30;
avm99963a51c7612020-11-25 23:58:56 +010013 --TWPT-button-background: #3c3e42;
avm999630bc113a2020-09-07 13:02:11 +020014}
15
16body {
17 color: var(--TWPT-primary-text);
18 background-color: var(--TWPT-primary-background)!important;
19}
20
21p {
22 color: var(--TWPT-primary-text);
23}
24
25body.ec a {
26 color: var(--TWPT-link);
27}
28
29/* Header */
30.material-content > header {
31 background-color: var(--TWPT-primary-background)!important;
32}
33
34.material-content > header material-button {
35 color: rgba(255, 255, 255, .87)!important;
36}
37
38.search-box {
39 background-color: #313235!important;
40}
41
42.search-box .clear-icon {
43 opacity: 0.8;
44 color: rgba(255, 255, 255, .87)!important;
45}
46
47.material-content > header .bell.mixin {
48 fill: rgba(255, 255, 255, .87)!important;
49}
50
51/* Drawer */
52material-drawer, material-drawer .panel, material-list-item {
53 background-color: var(--TWPT-drawer-background)!important;
54}
55
avm9996324ef6522020-11-25 19:45:43 +010056material-list-item:hover, material-list-item:focus, material-list-item.item--active {
avm999630bc113a2020-09-07 13:02:11 +020057 background-color: var(--TWPT-active-background)!important;
58}
59
60material-drawer .panel {
61 border-bottom-color: #25231f!important;
62}
63
64material-drawer .drawer-section-title, material-drawer .header > material-icon {
65 color: var(--TWPT-secondary-text)!important;
66}
67
68material-drawer material-list-item, material-drawer material-list-item .title {
69 color: #d2cecb!important;
70}
71
72material-drawer ec-forum-drawer-item material-checkbox material-icon {
73 filter: brightness(1.5);
74}
75
76/* Selector */
avm99963a51c7612020-11-25 23:58:56 +010077
78/*
79 * This applies not only to the selector but also to the ec-work-state-picker.
80 */
avm999630bc113a2020-09-07 13:02:11 +020081.popup-wrapper, material-list {
82 background-color: var(--TWPT-drawer-background)!important;
83}
84
85material-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
86 box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
87 border-top-color: #1f1f1f!important;
88}
89
90material-list material-select-item:hover,
91 material-list material-select-item:focus,
92 material-list material-select-dropdown-item:hover,
93 material-list material-select-dropdown-item:focus,
94 material-list material-select-dropdown-item.active,
95 material-list material-select-dropdown-item:not(.multiselect).selected {
96 background-color: rgba(255, 255, 255, .04)!important;
97}
98
99material-list .menu-item-label, material-list .label, material-list .text-segment {
100 color: rgba(255, 255, 255, .87)!important;
101}
102
103material-list [group] > [label] {
104 color: #8a8a8a!important;
105}
106
107/* Main */
108.main {
109 color: var(--TWPT-primary-text)!important;
110}
111
avm9996325a0d602020-11-25 19:24:16 +0100112/* Border color for the page title bar (most pages use .title-bar although
113 * some use .page-header).
114 */
115main .title-bar, main .page-header {
avm999630bc113a2020-09-07 13:02:11 +0200116 border-bottom-color: var(--TWPT-subtle-border)!important;
117}
118
119main .title-bar .title, main .page-header h1, main .header h1 {
120 color: var(--TWPT-primary-text)!important;
121}
122
123.card {
124 background-color: var(--TWPT-secondary-background)!important;
125 color: var(--TWPT-primary-text)!important;
126 border-color: var(--TWPT-card-border)!important;
127}
128
129.card .card-title, .card, .card-section-title {
130 color: var(--TWPT-primary-text)!important;
131}
132
133.card .card-section-hint {
134 color: var(--TWPT-secondary-text)!important;
135}
136
137/* Action bar */
138.material-content .action-bar material-button,
139 ec-bulk-actions material-button,
140 ec-back-button material-button {
141 color: rgba(255, 255, 255, .54)!important;
142}
143
144.material-content .action-bar material-button.starred {
145 color: #fbbc04!important;
146}
147
avm99963a51c7612020-11-25 23:58:56 +0100148/* ec-work-state-picker */
149ec-work-state-picker > button {
150 color: var(--TWPT-secondary-text)!important;
151 background-color: var(--TWPT-button-background)!important;
152 border-color: var(--TWPT-subtle-border)!important;
153}
154
155.material-popup-content .popup-content .title {
156 color: var(--TWPT-primary-text)!important;
157}
158
avm999630bc113a2020-09-07 13:02:11 +0200159/* Thread list */
160ec-thread-list ul.thread-group {
161 background-color: var(--TWPT-primary-background)!important;
162}
163
164ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
165 border-bottom-color: var(--TWPT-subtle-border)!important;
166}
167
avm99963a2a06442020-11-25 21:11:10 +0100168ec-thread-summary material-expansionpanel.read:not(.checked) {
avm999630bc113a2020-09-07 13:02:11 +0200169 background-color: var(--TWPT-thread-read-background)!important;
170}
171
avm99963e65bec42020-11-25 18:26:29 +0100172ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200173 opacity: 0.8;
174}
175
avm99963e65bec42020-11-25 18:26:29 +0100176ec-thread-summary material-expansionpanel.read .title .icon {
177 opacity: 0.48!important;
178}
179
avm999630bc113a2020-09-07 13:02:11 +0200180ec-thread-summary material-expansionpanel.checked {
avm99963a2a06442020-11-25 21:11:10 +0100181 background-color: #2c4b77!important;
avm999630bc113a2020-09-07 13:02:11 +0200182}
183
184ec-thread-summary material-expansionpanel .title {
185 color: var(--TWPT-primary-text)!important;
186}
187
188ec-thread-summary material-expansionpanel ec-second-summary-line,
189 material-expansionpanel .header-content,
190 material-expansionpanel ec-thread-counts > span:not(.recommended-answers) {
191 color: #928e89!important;
192}
193
194ec-thread-summary material-expansionpanel ec-safe-html.body {
195 color: var(--TWPT-primary-text)!important;
196}
197
198/* Thread view */
199ec-question, .heading + .group, ec-message {
200 background-color: var(--TWPT-secondary-background)!important;
201}
202
203ec-question ec-review-bar {
204 background-color: var(--TWPT-active-background)!important;
205}
206
207ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
208 color: var(--TWPT-secondary-text)!important;
209}
210
avm9996395da0772020-09-09 01:07:36 +0200211ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200212 background-color: var(--TWPT-active-background)!important;
213}
214
avm9996395da0772020-09-09 01:07:36 +0200215ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200216 color: var(--TWPT-primary-text)!important;
217}
218
avm9996395da0772020-09-09 01:07:36 +0200219ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200220 color: var(--TWPT-primary-text)!important;
221 fill: var(--TWPT-primary-text)!important;
222}
223
224ec-question .title {
225 color: var(--TWPT-primary-text-alt)!important;
226}
227
228ec-message-header ec-avatar svg, ec-message-header .role {
229 filter: brightness(1.5);
230}
231
232ec-question .body, ec-message .body {
233 color: var(--TWPT-primary-text)!important;
234}
235
236ec-question .thread-insert {
237 background: none!important;
238}
239
240ec-question .details-heading {
241 color: var(--TWPT-primary-text-alt) !important;
242}
243
244ec-question .footer {
245 color: var(--TWPT-primary-text)!important;
246 background-color: var(--TWPT-active-background)!important;
247 border-top-color: var(--TWPT-card-border)!important;
248}
249
250.heading {
251 color: var(--TWPT-primary-text)!important;
252}
253
254.heading + .group,
255 .load-more-bar,
256 ec-message:not(:first-child),
257 .load-more-bar .load-more-button,
258 .load-more-bar .load-all-button {
259 border-color: var(--TWPT-card-border)!important;
260}
261
avm9996395da0772020-09-09 01:07:36 +0200262ec-message .type {
263 color: var(--TWPT-primary-text)!important;
264}
265
avm999630bc113a2020-09-07 13:02:11 +0200266ec-message .footer ec-relative-time,
267 ec-message .footer ec-safe-html {
268 color: var(--TWPT-secondary-text)!important;
269}
270
271ec-message .helpful-prompt {
272 color: var(--TWPT-primary-text)!important;
273}
274
275ec-question .me-too-button,
276 ec-question .subscribe-button,
277 ec-message .upvote-button,
278 ec-message .downvote-button {
279 color: var(--TWPT-secondary-text)!important;
avm99963a51c7612020-11-25 23:58:56 +0100280 background-color: var(--TWPT-button-background)!important;
avm999630bc113a2020-09-07 13:02:11 +0200281}
282
283ec-question .me-too-button.selected,
284 ec-question .subscribe-button.selected,
285 ec-message .upvote-button.selected,
286 ec-message .downvote-button.selected {
287 color: #4285f4!important;
288}
289
290.load-more-bar .load-more-button, .load-more-bar .load-all-button {
291 background-color: var(--TWPT-secondary-background)!important;
292}
293
294.locked-alert {
295 background-color: var(--TWPT-active-background)!important;
296 border: var(--TWPT-card-border)!important;
297}
298
299.locked-alert material-icon {
300 color: rgba(255, 255, 255, .38)!important;
301}
302
303ec-thread .finished-question {
304 background-color: var(--TWPT-active-background)!important;
305 border: var(--TWPT-card-border)!important;
306}
307
308.material-content .action-bar material-button.has-activity {
309 color: #1a73e8!important;
310}
311
312.material-content .action-bar material-button.showing-sidebar {
313 background-color: var(--TWPT-active-background)!important;
314}
315
316ec-activity-panel .title-bar h3 {
317 color: #e8eaf2!important;
318}
319
320ec-activity-panel ec-activity {
321 color: var(--TWPT-secondary-text)!important;
322 border-color: var(--TWPT-card-border)!important;
323}
324
325ec-activity-panel ec-activity .message {
326 color: var(--TWPT-primary-text-alt)!important;
327}
328
329ec-activity-panel ec-activity .thread-title {
330 color: #c3bfbc!important;
331}
332
333/* Recommended answers - show in green where we've overwritten the colors */
334.recommended-answers {
335 color: #34a853!important;
336}
337
338/* New thread view */
339material-stepper .stepper-step-name,
340 material-stepper .purpose-title {
341 color: var(--TWPT-primary-text)!important;
342}
343
344ec-ask-flow .display-name-label,
345 material-stepper .additional-details-label {
346 color: var(--TWPT-secondary-text)!important;
347}
348
349/* Profile view */
350ec-user .main-card-content {
351 background-color: var(--TWPT-secondary-background)!important;
352 border: 1px solid var(--TWPT-card-border)!important;
353 border-top-right-radius: 8px!important;
354 border-bottom-right-radius: 8px!important;
355}
356
avm99963c4cb8f32020-09-07 23:52:28 +0200357ec-user ec-display-name-editor, ec-user .header .name {
avm999630bc113a2020-09-07 13:02:11 +0200358 color: var(--TWPT-primary-text)!important;
359}
360
avm9996395da0772020-09-09 01:07:36 +0200361ec-user .role {
362 filter: brightness(1.5);
363}
364
avm999630bc113a2020-09-07 13:02:11 +0200365ec-user bar-chart .axis text {
366 fill: rgba(255, 255, 255, .54)!important;
367}
368
369ec-user bar-chart .axis path,
370 ec-user bar-chart .axis .gridline,
371 ec-user bar-chart .axis line {
372 stroke: rgba(255, 255, 255, .12)!important;
373}
374
375ec-user bar-chart .axis line.axis-zero-tick,
376 ec-user bar-chart .axis.x .tick-mark {
377 stroke: rgba(255, 255, 255, .38)!important;
378}
379
380ec-user bar-chart .aplos-legend-entry {
381 color: var(--TWPT-secondary-text)!important;
382}
383
384.aplos-hovercard {
385 background: var(--TWPT-secondary-background)!important;
386}
387
388.aplos-hovercard .title {
389 color: var(--TWPT-primary-text)!important;
390}
391
392.aplos-hovercard .subtitle,
393 .aplos-donut-center .subtitle,
394 .aplos-hovercard .series,
395 .aplos-donut-center .series,
396 .aplos-hovercard .value,
397 .aplos-donut-center .value {
398 color: var(--TWPT-secondary-text)!important;
399}
400
401/* Duplicate thread feature */
402.search-results ec-thread-option material-expansionpanel .panel {
403 background-color: var(--TWPT-primary-background)!important;
404}
405
406.search-results ec-thread-option material-expansionpanel.selected .panel,
407 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
408 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
409 background-color: #17191c!important;
410}
411
412/* Disabled buttons */
413material-button[disabled] {
414 color: rgba(255, 255, 255, .26)!important;
415}
416
417/* Material icons */
418ec-filter-drawer-item material-icon,
419 ec-filter-drawer-item ec-icon,
420 material-drawer .drawer-section material-icon,
421 material-drawer .drawer-section ec-icon,
422 material-list material-icon,
423 ec-query-builder material-icon,
424 material-radio .icon-container:not(.checked) material-icon,
425 ec-thread-summary material-expansionpanel .title material-icon,
426 .search-results ec-thread-option material-icon,
427 .search-results ec-thread-option ec-icon,
428 ec-rich-text-editor material-icon,
429 ec-editor-command material-icon,
430 ec-canned-responses ec-canned-response-row material-icon {
431 color: rgba(255, 255, 255, .87)!important;
432}
433
434material-drawer ec-icon,
435 .search-results ec-thread-option ec-icon {
436 fill: rgba(255, 255, 255, .87)!important;
437}
438
439/* Dialogs */
440material-dialog, material-dialog .dialog-header {
441 background-color: var(--TWPT-primary-background)!important;
442}
443
444ec-movable-dialog[showminimize] material-dialog .dialog-header {
445 background-color: #d2e3fc!important;
446}
447
448material-dialog .title {
449 color: var(--TWPT-primary-text-alt)!important;
450}
451
452ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
453 color: var(--TWPT-primary-background)!important;
454}
455
456ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
457 background-color: #170f01!important;
458}
459
460material-dialog .section-title,
461 material-dialog .select-label,
462 material-dialog .input-label,
463 material-dialog .btn-no,
464 ec-display-name-editor,
465 .forum-selection-label {
466 color: var(--TWPT-secondary-text)!important;
467}
468
469ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
470 color: var(--TWPT-secondary-text)!important;
471 background-color: var(--TWPT-active-background)!important;
472 border-top-color: #25231f!important;
473}
474
475/* Keyboard shortcuts dialog */
476material-dialog .main.with-scroll-strokes table td {
477 color: var(--TWPT-primary-text)!important;
478}
479
480/* Rich text editor */
481ec-editor-command material-button,
482 ec-formatting-popup material-button {
483 box-shadow: none!important;
484}
485
486ec-editor-command material-button.is-active {
487 background: var(--TWPT-active-background)!important;
488}
489
490ec-rich-text-editor .placeholder {
491 color: rgba(255, 255, 255, .38)!important;
492}
493
494ec-rich-text-editor .input {
495 color: var(--TWPT-primary-text)!important;
496}
497
498ec-rich-text-editor .hint {
499 color: rgba(255, 255, 255, .54)!important;
500}
501
502material-select-searchbox + material-list material-list-item {
503 color: rgba(255, 255, 255, .87)!important;
504}
505
506ec-attachment .filename {
507 color: var(--TWPT-primary-text)!important;
508}
509
510/* Thread insert */
511ec-thread-insert .title {
512 color: var(--TWPT-primary-text)!important;
513}
514
515ec-thread-insert ec-thread-counts,
516 ec-thread-insert .details,
517 ec-thread-insert ec-relative-time {
518 color: rgba(255, 255, 255, .54)!important;
519}
520
521/* Text input */
522material-input input {
523 color: var(--TWPT-primary-text)!important;
524}
525
526material-input .label-text,
527 material-input .hint-text,
528 material-input .counter {
529 color: rgba(255, 255, 255, .54)!important;
530}
531
532material-input .underline .unfocused-underline {
533 background-color: rgba(255, 255, 255, .12)!important;
534}
535
536label .label {
537 color: var(--TWPT-primary-text)!important;
538}
539
540/* Input underline */
541material-input .underline .unfocused-underline,
542 material-dropdown-select dropdown-button [buttondecorator] {
543 border-bottom-color: rgba(255, 255, 255, .12)!important;
544}
545
546/* Checkbox input */
547material-checkbox, material-checkbox .content {
548 color: var(--TWPT-secondary-text)!important;
549}
550
551/* Material menu button and dropdown select */
552material-menu material-button, material-dropdown-select dropdown-button {
553 color: rgba(255, 255, 255, .54)!important;
554}
555
556material-dropdown-select dropdown-button .is-disabled .button-text {
557 color: rgba(255, 255, 255, .38)!important;
558}
559
560/* Announcements content */
561ec-announcements-content .header .title, ec-announcements-content .announcement-title {
562 color: var(--TWPT-primary-text-alt)!important;
563}
564
565ec-announcements-content .no-announcements-message {
566 color: #c3bfbc!important;
567}
568
569/* Account selector */
570.popup-wrapper .profile .email {
571 color: rgba(255, 255, 255, .54)!important;
572}
573
574material-gaia-picker-footer {
575 color: rgba(255, 255, 255, .54)!important;
576 background-color: var(--TWPT-active-background)!important;
577}
578
579/* Canned responses */
580ec-canned-responses .filter-label,
avm9996325a0d602020-11-25 19:24:16 +0100581 ec-canned-responses ec-canned-response-row .name {
avm999630bc113a2020-09-07 13:02:11 +0200582 color: var(--TWPT-primary-text)!important;
583}
584
avm9996325a0d602020-11-25 19:24:16 +0100585ec-canned-responses .label-row,
586 ec-canned-responses ec-canned-response-row .snippet,
587 ec-canned-responses ec-canned-response-row .tag {
588 color: var(--TWPT-secondary-text)!important;
589}
590
avm999630bc113a2020-09-07 13:02:11 +0200591ec-canned-responses ec-canned-response-row .header.closed:hover,
592 ec-canned-responses ec-canned-response-row .header.closed:focus,
593 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
594 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
595 background-color: var(--TWPT-active-background)!important;
596}
597
avm9996325a0d602020-11-25 19:24:16 +0100598ec-canned-responses .filter-row,
599 ec-canned-responses .label-row,
600 ec-canned-responses ec-canned-response-row material-expansionpanel {
601 border-bottom-color: var(--TWPT-subtle-border)!important;
602}
603
avm999630bc113a2020-09-07 13:02:11 +0200604/* Reply button */
605material-fab.reply-button {
606 background-color: var(--TWPT-link)!important;
607 color: var(--TWPT-primary-background)!important;
608}
609