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