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