diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less index ab879a765..0a0bcd60f 100644 --- a/internal_packages/thread-list/stylesheets/thread-list.less +++ b/internal_packages/thread-list/stylesheets/thread-list.less @@ -10,19 +10,16 @@ // subpixel antialiasing looks awful against dark background colors -webkit-font-smoothing: antialiased; + color: @text-color-inverse; + .participants { - color: @text-color-inverse; .unread-true { font-weight: @font-weight-normal; } } .subject { - color: @text-color-inverse; font-weight: @font-weight-normal; } - .snippet, .timestamp { - color: @text-color-inverse-subtle; - } .thread-icon, .draft-icon, .mail-important-icon { -webkit-filter: brightness(600%) grayscale(100%); @@ -109,10 +106,10 @@ .snippet { font-size: @font-size-small; font-weight: @font-weight-normal; - color: @text-color-very-subtle; position: relative; text-overflow: ellipsis; overflow: hidden; + opacity: 0.62; top:2px; flex: 1; } @@ -126,13 +123,13 @@ .timestamp { font-size: @font-size-small; font-weight: @font-weight-normal; - color: @text-color-very-subtle; position: relative; top:2px; text-align: right; min-width:70px; margin-right:@scrollbar-margin; display:inline-block; + opacity: 0.62; } .unread:not(.focused):not(.selected) { @@ -357,3 +354,16 @@ } } } +body.is-blurred { + .thread-list.handler-split { + .list-item { + &.selected { + background: fadeout(desaturate(@list-focused-bg, 100%), 65%); + color: @text-color; + .list-column { + border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%); + } + } + } + } +} diff --git a/static/components/list-tabular.less b/static/components/list-tabular.less index e6788b4ae..a5ab9edb2 100644 --- a/static/components/list-tabular.less +++ b/static/components/list-tabular.less @@ -106,6 +106,28 @@ } } +body.is-blurred { + .list-container { + .list-item { + &.selected { + background: fadeout(desaturate(@list-selected-bg, 100%), 65%); + color: @text-color; + .list-column { + border-bottom: 1px solid fadeout(desaturate(@list-selected-border, 100%), 65%); + } + } + + &.focused { + background: fadeout(desaturate(@list-focused-bg, 100%), 65%); + color: @text-color; + .list-column { + border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%); + } + } + } + } +} + .list-tabular { flex: 1; width: 100%;