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