blob: f318a404513c8b31831669d36a9a3c1c342b031d [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
107main .title-bar {
108 border-bottom-color: var(--TWPT-subtle-border)!important;
109}
110
111main .title-bar .title, main .page-header h1, main .header h1 {
112 color: var(--TWPT-primary-text)!important;
113}
114
115.card {
116 background-color: var(--TWPT-secondary-background)!important;
117 color: var(--TWPT-primary-text)!important;
118 border-color: var(--TWPT-card-border)!important;
119}
120
121.card .card-title, .card, .card-section-title {
122 color: var(--TWPT-primary-text)!important;
123}
124
125.card .card-section-hint {
126 color: var(--TWPT-secondary-text)!important;
127}
128
129/* Action bar */
130.material-content .action-bar material-button,
131 ec-bulk-actions material-button,
132 ec-back-button material-button {
133 color: rgba(255, 255, 255, .54)!important;
134}
135
136.material-content .action-bar material-button.starred {
137 color: #fbbc04!important;
138}
139
140/* Thread list */
141ec-thread-list ul.thread-group {
142 background-color: var(--TWPT-primary-background)!important;
143}
144
145ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
146 border-bottom-color: var(--TWPT-subtle-border)!important;
147}
148
149ec-thread-summary material-expansionpanel.read {
150 background-color: var(--TWPT-thread-read-background)!important;
151}
152
avm99963e65bec42020-11-25 18:26:29 +0100153ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
avm9996395da0772020-09-09 01:07:36 +0200154 opacity: 0.8;
155}
156
avm99963e65bec42020-11-25 18:26:29 +0100157ec-thread-summary material-expansionpanel.read .title .icon {
158 opacity: 0.48!important;
159}
160
avm999630bc113a2020-09-07 13:02:11 +0200161ec-thread-summary material-expansionpanel.checked {
162 background-color: #17191c!important;
163}
164
165ec-thread-summary material-expansionpanel .title {
166 color: var(--TWPT-primary-text)!important;
167}
168
169ec-thread-summary material-expansionpanel ec-second-summary-line,
170 material-expansionpanel .header-content,
171 material-expansionpanel ec-thread-counts > span:not(.recommended-answers) {
172 color: #928e89!important;
173}
174
175ec-thread-summary material-expansionpanel ec-safe-html.body {
176 color: var(--TWPT-primary-text)!important;
177}
178
179/* Thread view */
180ec-question, .heading + .group, ec-message {
181 background-color: var(--TWPT-secondary-background)!important;
182}
183
184ec-question ec-review-bar {
185 background-color: var(--TWPT-active-background)!important;
186}
187
188ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
189 color: var(--TWPT-secondary-text)!important;
190}
191
avm9996395da0772020-09-09 01:07:36 +0200192ec-question .alert, ec-message .alert {
avm999630bc113a2020-09-07 13:02:11 +0200193 background-color: var(--TWPT-active-background)!important;
194}
195
avm9996395da0772020-09-09 01:07:36 +0200196ec-question .alert material-icon, ec-message .alert material-icon {
avm999630bc113a2020-09-07 13:02:11 +0200197 color: var(--TWPT-primary-text)!important;
198}
199
avm9996395da0772020-09-09 01:07:36 +0200200ec-question .alert ec-icon, ec-message .alert ec-icon {
avm999630bc113a2020-09-07 13:02:11 +0200201 color: var(--TWPT-primary-text)!important;
202 fill: var(--TWPT-primary-text)!important;
203}
204
205ec-question .title {
206 color: var(--TWPT-primary-text-alt)!important;
207}
208
209ec-message-header ec-avatar svg, ec-message-header .role {
210 filter: brightness(1.5);
211}
212
213ec-question .body, ec-message .body {
214 color: var(--TWPT-primary-text)!important;
215}
216
217ec-question .thread-insert {
218 background: none!important;
219}
220
221ec-question .details-heading {
222 color: var(--TWPT-primary-text-alt) !important;
223}
224
225ec-question .footer {
226 color: var(--TWPT-primary-text)!important;
227 background-color: var(--TWPT-active-background)!important;
228 border-top-color: var(--TWPT-card-border)!important;
229}
230
231.heading {
232 color: var(--TWPT-primary-text)!important;
233}
234
235.heading + .group,
236 .load-more-bar,
237 ec-message:not(:first-child),
238 .load-more-bar .load-more-button,
239 .load-more-bar .load-all-button {
240 border-color: var(--TWPT-card-border)!important;
241}
242
avm9996395da0772020-09-09 01:07:36 +0200243ec-message .type {
244 color: var(--TWPT-primary-text)!important;
245}
246
avm999630bc113a2020-09-07 13:02:11 +0200247ec-message .footer ec-relative-time,
248 ec-message .footer ec-safe-html {
249 color: var(--TWPT-secondary-text)!important;
250}
251
252ec-message .helpful-prompt {
253 color: var(--TWPT-primary-text)!important;
254}
255
256ec-question .me-too-button,
257 ec-question .subscribe-button,
258 ec-message .upvote-button,
259 ec-message .downvote-button {
260 color: var(--TWPT-secondary-text)!important;
261 background-color: #3c3e42!important;
262}
263
264ec-question .me-too-button.selected,
265 ec-question .subscribe-button.selected,
266 ec-message .upvote-button.selected,
267 ec-message .downvote-button.selected {
268 color: #4285f4!important;
269}
270
271.load-more-bar .load-more-button, .load-more-bar .load-all-button {
272 background-color: var(--TWPT-secondary-background)!important;
273}
274
275.locked-alert {
276 background-color: var(--TWPT-active-background)!important;
277 border: var(--TWPT-card-border)!important;
278}
279
280.locked-alert material-icon {
281 color: rgba(255, 255, 255, .38)!important;
282}
283
284ec-thread .finished-question {
285 background-color: var(--TWPT-active-background)!important;
286 border: var(--TWPT-card-border)!important;
287}
288
289.material-content .action-bar material-button.has-activity {
290 color: #1a73e8!important;
291}
292
293.material-content .action-bar material-button.showing-sidebar {
294 background-color: var(--TWPT-active-background)!important;
295}
296
297ec-activity-panel .title-bar h3 {
298 color: #e8eaf2!important;
299}
300
301ec-activity-panel ec-activity {
302 color: var(--TWPT-secondary-text)!important;
303 border-color: var(--TWPT-card-border)!important;
304}
305
306ec-activity-panel ec-activity .message {
307 color: var(--TWPT-primary-text-alt)!important;
308}
309
310ec-activity-panel ec-activity .thread-title {
311 color: #c3bfbc!important;
312}
313
314/* Recommended answers - show in green where we've overwritten the colors */
315.recommended-answers {
316 color: #34a853!important;
317}
318
319/* New thread view */
320material-stepper .stepper-step-name,
321 material-stepper .purpose-title {
322 color: var(--TWPT-primary-text)!important;
323}
324
325ec-ask-flow .display-name-label,
326 material-stepper .additional-details-label {
327 color: var(--TWPT-secondary-text)!important;
328}
329
330/* Profile view */
331ec-user .main-card-content {
332 background-color: var(--TWPT-secondary-background)!important;
333 border: 1px solid var(--TWPT-card-border)!important;
334 border-top-right-radius: 8px!important;
335 border-bottom-right-radius: 8px!important;
336}
337
avm99963c4cb8f32020-09-07 23:52:28 +0200338ec-user ec-display-name-editor, ec-user .header .name {
avm999630bc113a2020-09-07 13:02:11 +0200339 color: var(--TWPT-primary-text)!important;
340}
341
avm9996395da0772020-09-09 01:07:36 +0200342ec-user .role {
343 filter: brightness(1.5);
344}
345
avm999630bc113a2020-09-07 13:02:11 +0200346ec-user bar-chart .axis text {
347 fill: rgba(255, 255, 255, .54)!important;
348}
349
350ec-user bar-chart .axis path,
351 ec-user bar-chart .axis .gridline,
352 ec-user bar-chart .axis line {
353 stroke: rgba(255, 255, 255, .12)!important;
354}
355
356ec-user bar-chart .axis line.axis-zero-tick,
357 ec-user bar-chart .axis.x .tick-mark {
358 stroke: rgba(255, 255, 255, .38)!important;
359}
360
361ec-user bar-chart .aplos-legend-entry {
362 color: var(--TWPT-secondary-text)!important;
363}
364
365.aplos-hovercard {
366 background: var(--TWPT-secondary-background)!important;
367}
368
369.aplos-hovercard .title {
370 color: var(--TWPT-primary-text)!important;
371}
372
373.aplos-hovercard .subtitle,
374 .aplos-donut-center .subtitle,
375 .aplos-hovercard .series,
376 .aplos-donut-center .series,
377 .aplos-hovercard .value,
378 .aplos-donut-center .value {
379 color: var(--TWPT-secondary-text)!important;
380}
381
382/* Duplicate thread feature */
383.search-results ec-thread-option material-expansionpanel .panel {
384 background-color: var(--TWPT-primary-background)!important;
385}
386
387.search-results ec-thread-option material-expansionpanel.selected .panel,
388 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
389 .search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
390 background-color: #17191c!important;
391}
392
393/* Disabled buttons */
394material-button[disabled] {
395 color: rgba(255, 255, 255, .26)!important;
396}
397
398/* Material icons */
399ec-filter-drawer-item material-icon,
400 ec-filter-drawer-item ec-icon,
401 material-drawer .drawer-section material-icon,
402 material-drawer .drawer-section ec-icon,
403 material-list material-icon,
404 ec-query-builder material-icon,
405 material-radio .icon-container:not(.checked) material-icon,
406 ec-thread-summary material-expansionpanel .title material-icon,
407 .search-results ec-thread-option material-icon,
408 .search-results ec-thread-option ec-icon,
409 ec-rich-text-editor material-icon,
410 ec-editor-command material-icon,
411 ec-canned-responses ec-canned-response-row material-icon {
412 color: rgba(255, 255, 255, .87)!important;
413}
414
415material-drawer ec-icon,
416 .search-results ec-thread-option ec-icon {
417 fill: rgba(255, 255, 255, .87)!important;
418}
419
420/* Dialogs */
421material-dialog, material-dialog .dialog-header {
422 background-color: var(--TWPT-primary-background)!important;
423}
424
425ec-movable-dialog[showminimize] material-dialog .dialog-header {
426 background-color: #d2e3fc!important;
427}
428
429material-dialog .title {
430 color: var(--TWPT-primary-text-alt)!important;
431}
432
433ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
434 color: var(--TWPT-primary-background)!important;
435}
436
437ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
438 background-color: #170f01!important;
439}
440
441material-dialog .section-title,
442 material-dialog .select-label,
443 material-dialog .input-label,
444 material-dialog .btn-no,
445 ec-display-name-editor,
446 .forum-selection-label {
447 color: var(--TWPT-secondary-text)!important;
448}
449
450ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
451 color: var(--TWPT-secondary-text)!important;
452 background-color: var(--TWPT-active-background)!important;
453 border-top-color: #25231f!important;
454}
455
456/* Keyboard shortcuts dialog */
457material-dialog .main.with-scroll-strokes table td {
458 color: var(--TWPT-primary-text)!important;
459}
460
461/* Rich text editor */
462ec-editor-command material-button,
463 ec-formatting-popup material-button {
464 box-shadow: none!important;
465}
466
467ec-editor-command material-button.is-active {
468 background: var(--TWPT-active-background)!important;
469}
470
471ec-rich-text-editor .placeholder {
472 color: rgba(255, 255, 255, .38)!important;
473}
474
475ec-rich-text-editor .input {
476 color: var(--TWPT-primary-text)!important;
477}
478
479ec-rich-text-editor .hint {
480 color: rgba(255, 255, 255, .54)!important;
481}
482
483material-select-searchbox + material-list material-list-item {
484 color: rgba(255, 255, 255, .87)!important;
485}
486
487ec-attachment .filename {
488 color: var(--TWPT-primary-text)!important;
489}
490
491/* Thread insert */
492ec-thread-insert .title {
493 color: var(--TWPT-primary-text)!important;
494}
495
496ec-thread-insert ec-thread-counts,
497 ec-thread-insert .details,
498 ec-thread-insert ec-relative-time {
499 color: rgba(255, 255, 255, .54)!important;
500}
501
502/* Text input */
503material-input input {
504 color: var(--TWPT-primary-text)!important;
505}
506
507material-input .label-text,
508 material-input .hint-text,
509 material-input .counter {
510 color: rgba(255, 255, 255, .54)!important;
511}
512
513material-input .underline .unfocused-underline {
514 background-color: rgba(255, 255, 255, .12)!important;
515}
516
517label .label {
518 color: var(--TWPT-primary-text)!important;
519}
520
521/* Input underline */
522material-input .underline .unfocused-underline,
523 material-dropdown-select dropdown-button [buttondecorator] {
524 border-bottom-color: rgba(255, 255, 255, .12)!important;
525}
526
527/* Checkbox input */
528material-checkbox, material-checkbox .content {
529 color: var(--TWPT-secondary-text)!important;
530}
531
532/* Material menu button and dropdown select */
533material-menu material-button, material-dropdown-select dropdown-button {
534 color: rgba(255, 255, 255, .54)!important;
535}
536
537material-dropdown-select dropdown-button .is-disabled .button-text {
538 color: rgba(255, 255, 255, .38)!important;
539}
540
541/* Announcements content */
542ec-announcements-content .header .title, ec-announcements-content .announcement-title {
543 color: var(--TWPT-primary-text-alt)!important;
544}
545
546ec-announcements-content .no-announcements-message {
547 color: #c3bfbc!important;
548}
549
550/* Account selector */
551.popup-wrapper .profile .email {
552 color: rgba(255, 255, 255, .54)!important;
553}
554
555material-gaia-picker-footer {
556 color: rgba(255, 255, 255, .54)!important;
557 background-color: var(--TWPT-active-background)!important;
558}
559
560/* Canned responses */
561ec-canned-responses .filter-label,
562 ec-canned-responses ec-canned-response-row .name,
563 ec-canned-responses ec-canned-response-row .snippet {
564 color: var(--TWPT-primary-text)!important;
565}
566
567ec-canned-responses ec-canned-response-row .header.closed:hover,
568 ec-canned-responses ec-canned-response-row .header.closed:focus,
569 ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
570 ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar {
571 background-color: var(--TWPT-active-background)!important;
572}
573
574/* Reply button */
575material-fab.reply-button {
576 background-color: var(--TWPT-link)!important;
577 color: var(--TWPT-primary-background)!important;
578}
579