Invisible ink text entry for chats

[Atazhaia]

Using the Slate theme the reply box for chats doesn't exactly have a great contrast for the text entry:

There are a couple words entered there, as evident by the spell checker flagging one of them. But yeah, it's kinda difficult to see what's been entered due to the text and background being kinda samey.

[hungrier]

@atazhaia said in Invisible ink text entry for chats:

Using the Slate theme

On mine it looks a little different but still very hard to see

[Atazhaia]

And in a related note, the same goes for username/background in the message list.

[hungrier]

I haven't done anything for chat (guess how much I use that feature) but I've got some custom css that I think improves Slate:

/* zebra stripes */
ul.topic-list li.row:nth-child(odd):not(.highlight) {
    background-color: #222;
}

/* tags */
.category>ul>li .tag-list .tag {
    background-color: #567;
}

.category>ul>li:not(.unread) .tag-list .tag {
    color: #333;
}

/* @mentions */
.plugin-mentions-a:hover {
    color: #48a;
}

.plugin-mentions-a {
    font-size: 1em;
}

/* del/ins */
html:not([data-disable-tdwtf-css]) .composer .preview del, html:not([data-disable-tdwtf-css]) .topic .posts .content del, html:not([data-disable-tdwtf-css]) [component="chat/message/body"] del {
    background-color: #722;
    color: inherit;
}

html:not([data-disable-tdwtf-css]) .composer .preview del > ins, html:not([data-disable-tdwtf-css]) .topic .posts .content del > ins, html:not([data-disable-tdwtf-css]) [component="chat/message/body"] del > ins {
    background-color: #751;
    color: inherit;
}

html:not([data-disable-tdwtf-css]) .composer .preview ins, html:not([data-disable-tdwtf-css]) .topic .posts .content ins, html:not([data-disable-tdwtf-css]) [component="chat/message/body"] ins {
    background-color: #252;
    color: inherit;
}

html:not([data-disable-tdwtf-css]) .composer .preview ins > del, html:not([data-disable-tdwtf-css]) .topic .posts .content ins > del, html:not([data-disable-tdwtf-css]) [component="chat/message/body"] ins > del {
    background-color: #037;
    color: inherit;
}

/* unread notifications */
ul.notification-list li.unread, ul.chat-list li.unread, .header ul.notification-list li.unread, .header ul.chat-list li.unread, .notifications-list li.unread {
    background-color: #567!important;
}

/* notification toggle */
#menu .notification-list li .mark-read, .header .notification-list li .mark-read, #menu .notification-list li .mark-read:hover, .header .notification-list li .mark-read:hover {
    color: #bbb;
}

/* composer */
.composer {
    background-color: #444;
}

.composer span.title {
    background-color: #333;
    margin-left: 0px!important;
    color: #ddd;
    padding-top: 4px!important;
}

.composer textarea.write {
    background-color: #333;
    color: #ddd;
    border: 1px inset #777;
}

.composer .formatting-bar i.fa {
    filter: invert(1);
    -webkit-filter: invert(1);
}

.composer .formatting-bar li:hover .fa {
    filter: none;
    -webkit-filter: none;
}

.composer input.title {
    margin: 0!important;
    background-color: #333;
    color: #ddd;
}

.composer select.category-list {
    background: #333;
    color: #ddd;
}

.tag-row input.ui-autocomplete-input {
    background-color: #333;
    color: #ddd;
}

.tag-row .bootstrap-tagsinput {
    background-color: #333;
}

.tags-container {
    margin-left: 5px;
}

/* profile info */
.account .profile .profile-meta strong {
    color: #ddd;
}

.account .posts-list .posts-list-item .topic-title {
    color: #aaa;
}

/* onebox background  */
.embedly-card {
    background-color: #ddd;
}