ef4b4da2a3
This makes the "x" in the search bar always visible when there is text in the search box, even if the mouse is not hovering, hopefully making for a clearer UI around search and resolving issue #741 The implementation adds the "x.svg" as a background image to the search box when it is classed with .active, in addition to the -webkit-search-cancel-button, which is still there for the actual functionality but only appears on mouse hover (one tiny snag is that coloring appears slightly different on hover, at least on my screen - don't know if this is a problem). I accounted for both ltr and rtl text-direction by using getComputedStyle(...).direction to detect from the input's dir="auto" - if there's a more elegant way to do this, please suggest. An ideal solution would use the :dir pseudo-class but it's not implemented in Chrome yet - https://developer.mozilla.org/en-US/docs/Web/CSS/:dir For now, I added the direction-checking to inbox_view.js. I see that input.search is also used in new_group_update_view.js and recipient_input_view.js but neither of these views seem to be in use (?) and they don't set the .active class anyway, so I ignored them. Update: Amended version a few hours later - fixed and manually tested color and spacing for iOS and Android Dark themes. Also made some new SASS variables to make things DRYer and fixed my tab size.
165 lines
3.7 KiB
SCSS
165 lines
3.7 KiB
SCSS
$grey-dark: #333333;
|
|
$grey-dark_l2: darken($grey-dark, 4%);
|
|
$grey-dark_l3: darken($grey-dark_l2, 7%);
|
|
$grey-dark_l4: darken($grey-dark_l3, 8%);
|
|
$text-dark: #CCCCCC;
|
|
|
|
.android-dark {
|
|
color: $text-dark;
|
|
a { color: #57a5e5; }
|
|
hr {
|
|
border-color: $grey-dark;
|
|
}
|
|
#header {
|
|
background-color: $grey-dark_l2;
|
|
color: white;
|
|
transition: background-color 0.5s;
|
|
&.inactive {
|
|
background-color: $grey-dark;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
.message-detail, .message-container, .conversation,
|
|
.discussion-container {
|
|
background-color: $grey-dark_l3;
|
|
}
|
|
.modal .content {
|
|
background-color: $grey-dark;
|
|
}
|
|
.lightbox .content {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
.key-verification .key {
|
|
background-color: $grey-dark_l4;
|
|
border-color: $grey-dark_l2;
|
|
}
|
|
.menu-list {
|
|
background-color: $grey-dark_l2;
|
|
color: $text-dark;
|
|
li:hover {
|
|
background-color: $grey-dark;
|
|
}
|
|
}
|
|
.content textarea {
|
|
background-color: $grey-dark_l3;
|
|
border-width: 0px;
|
|
@include invert-text-color;
|
|
}
|
|
.flex {
|
|
background-color: $grey-dark_l3;
|
|
.send-message {
|
|
background-color: $grey-dark_l3;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
.contact-details .name {
|
|
font-weight: 400;
|
|
}
|
|
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
|
|
background-color: $grey-dark_l3;
|
|
border-color: $grey-dark;
|
|
}
|
|
.conversation.placeholder .conversation-header {
|
|
display: none;
|
|
}
|
|
.avatar, .conversation-header, .bubble {
|
|
@include dark-avatar-colors;
|
|
}
|
|
.message-list .advisory .content {
|
|
background-color: $grey-dark;
|
|
}
|
|
.inactive .conversation-header {
|
|
background-color: $grey-dark !important;
|
|
color: $text-dark;
|
|
}
|
|
.sent .status {
|
|
display: inline-block;
|
|
@include color-svg('/images/check.svg', white);
|
|
}
|
|
.delivered .status {
|
|
display: inline-block;
|
|
@include color-svg('/images/double-check.svg', white);
|
|
}
|
|
.paperclip:before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: $button-height;
|
|
height: $button-height;
|
|
@include color-svg('/images/paperclip.svg', white);
|
|
transform: rotateZ(-45deg);
|
|
}
|
|
.scrollable {
|
|
background-color: $grey-dark_l2;
|
|
.conversation-list-item {
|
|
background-color: $grey-dark_l3;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
.bottom-bar {
|
|
min-height: 10px;
|
|
background-color: $grey-dark_l2;
|
|
form.send {
|
|
background: $grey-dark_l3;
|
|
}
|
|
}
|
|
.search {
|
|
background-color: $grey-dark_l3;
|
|
border-color: $grey-dark_l2;
|
|
@include invert-text-color;
|
|
&::-webkit-search-cancel-button {
|
|
background: url('/images/x_white.svg') no-repeat center;
|
|
background-size: cover;
|
|
}
|
|
&.active.ltr, &.active.rtl {
|
|
background-image: url('/images/x_white.svg');
|
|
}
|
|
}
|
|
.bubble {
|
|
padding: 9px 12px;
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 3px 3px -4px black;
|
|
}
|
|
|
|
.outgoing .bubble {
|
|
background-color: $grey-dark;
|
|
@include invert-text-color;
|
|
color: $text-dark;
|
|
}
|
|
.outgoing .hourglass {
|
|
@include hourglass(#999);
|
|
}
|
|
.incoming .hourglass {
|
|
@include hourglass(#fff);
|
|
}
|
|
|
|
.incoming .bubble {
|
|
.sender, .content, .body, .meta, a {
|
|
@include invert-text-color;
|
|
}
|
|
.attachments, .content {
|
|
a {
|
|
color: $grey_l;
|
|
}
|
|
}
|
|
}
|
|
button.clock {
|
|
@include header-icon-white('/images/clock.svg');
|
|
}
|
|
button.hamburger {
|
|
@include header-icon-white('/images/menu.svg');
|
|
}
|
|
button.back {
|
|
@include header-icon-white('/images/back.svg');
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.15);
|
|
|
|
&:hover {
|
|
background: rgba(255,255,255,0.25);
|
|
}
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: $grey-dark_l2;
|
|
}
|
|
}
|