Fix (unified) transaction listing on PayPal.com

[oberrich]

• Fixes unified transaction view on PayPal.com

(before)

(after)

[oberrich]

• De-uglifies input, see refund view

(before)

(after)

[alexanderby]

Could you please share the source CSS colors assigned there (with Dark Reader disabled)? The support for those color mixes was added recently, maybe it should be improved.

[oberrich]

Dump of styles (devtools)

.tab_container {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    font-family: PayPalSansSmall-Regular,Helvetica Neue,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    --darkreader-inline-outline: initial;
    box-sizing: inherit;
    background: var(--sys-background-surface,#fff);
    padding-bottom: 32px;
}
.tab_container:dark-reader {
    color-scheme: dark !important;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    --darkreader-neutral-background: #131516;
    --darkreader-neutral-text: #d8d4cf;
    --darkreader-selection-background: #004daa;
    --darkreader-selection-text: #e8e6e3;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    color: #e8e6e3;
    -webkit-font-smoothing: antialiased;
    --darkreader-inline-outline: initial;
    box-sizing: inherit;
    font-family: Gadugi !important;
    background: var(--sys-background-surface,#fff);
    padding-bottom: 32px;
}

.listing_bg {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    font-family: PayPalSansSmall-Regular,Helvetica Neue,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    --darkreader-inline-outline: initial;
    box-sizing: inherit;
    background-color: #faf8f5;
    height: auto;
}
.listing_bg:dark-reader {
    color-scheme: dark !important;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    --darkreader-neutral-background: #131516;
    --darkreader-neutral-text: #d8d4cf;
    --darkreader-selection-background: #004daa;
    --darkreader-selection-text: #e8e6e3;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    color: #e8e6e3;
    -webkit-font-smoothing: antialiased;
    --darkreader-inline-outline: initial;
    box-sizing: inherit;
    font-family: Gadugi !important;
    height: auto;
    background-color: rgb(40, 32, 20);
}

:dark-reader isn't real and merely for distinction

[alexanderby]

Ah, I thought the color-mix() was used there. You can try using background-color: ${#faf8f5) !important; instead to make it simpler.