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.
167 lines
3.2 KiB
SCSS
167 lines
3.2 KiB
SCSS
$ios-header-border-color: rgba(0,0,0,0.05);
|
|
$ios-border-color: rgba(0,0,0,0.1);
|
|
|
|
.ios {
|
|
#header {
|
|
height: $header-height;
|
|
border-bottom: 1px solid $ios-header-border-color;
|
|
border-width: 0 1px 1px 0;
|
|
background-color: $grey_l;
|
|
color: $grey_d;
|
|
h1 { display: none; }
|
|
}
|
|
.gutter {
|
|
border-right: 1px solid $ios-border-color;
|
|
.content {
|
|
height: calc(100% - #{$header-height});
|
|
background: $ios-border-color;
|
|
}
|
|
.contact {
|
|
background: $grey_l;
|
|
margin-right: 0;
|
|
|
|
&.selected {
|
|
background: $blue;
|
|
color: white;
|
|
.last-timestamp {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: $grey_l;
|
|
}
|
|
}
|
|
.tool-bar {
|
|
float: left;
|
|
padding: 15px;
|
|
}
|
|
input[type=text]:active,
|
|
input[type=text]:focus,
|
|
input[type=search]:active,
|
|
input[type=search]:focus,
|
|
input[type=search].active,
|
|
form.active {
|
|
outline-offset: 0;
|
|
outline: -webkit-focus-ring-color auto 5px;
|
|
}
|
|
input.search {
|
|
border-radius: 5px;
|
|
width: 220px;
|
|
height: 34px;
|
|
padding-left: $search-padding-left-ios;
|
|
line-height: 34px;
|
|
background-color: #dddddd;
|
|
&.active.rtl {
|
|
background-position : left $search-padding-left-ios center;
|
|
}
|
|
}
|
|
.conversation-header {
|
|
background-color: $grey_l;
|
|
color: $grey_d;
|
|
border-color: $ios-header-border-color;
|
|
text-align: left;
|
|
|
|
.conversation-title {
|
|
line-height: $header-height;
|
|
}
|
|
.avatar { display: none; }
|
|
}
|
|
.settings h3,
|
|
.menu-list li {
|
|
text-transform: capitalize;
|
|
}
|
|
.bottom-bar {
|
|
padding: 15px;
|
|
min-height: 30px;
|
|
border-top: 1px solid $ios-border-color;
|
|
form.send {
|
|
border-radius: 5px;
|
|
border: 1px solid $ios-border-color;
|
|
}
|
|
}
|
|
|
|
.error-message.content,
|
|
.control .content {
|
|
padding: 10px;
|
|
}
|
|
.bubble {
|
|
.content {
|
|
margin-bottom: 5px;
|
|
.body {
|
|
display: inline-block;
|
|
padding: 10px;
|
|
position: relative;
|
|
word-break: break-word;
|
|
|
|
&:before, &:after {
|
|
content: '';
|
|
display: block;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
width: 10px;
|
|
}
|
|
&:before {
|
|
right: -1px;
|
|
bottom: -3px;
|
|
height: 10px;
|
|
border-radius: 20px;
|
|
background: $blue;
|
|
}
|
|
&:after {
|
|
height: 11px;
|
|
right: -6px;
|
|
bottom: -3px;
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
.content, .attachments img {
|
|
border-radius: 15px;
|
|
}
|
|
.attachments img {
|
|
border: 1px solid $ios-border-color;
|
|
}
|
|
.meta {
|
|
clear: both;
|
|
}
|
|
}
|
|
.incoming .content {
|
|
background-color: #e6e5ea;
|
|
color: black;
|
|
float: left;
|
|
.body {
|
|
&:before {
|
|
left: -1px;
|
|
background-color: #e6e5ea;
|
|
}
|
|
&:after {
|
|
left: -6px;
|
|
}
|
|
}
|
|
}
|
|
.outgoing {
|
|
.content {
|
|
background-color: $blue;
|
|
&, .body, a {
|
|
@include invert-text-color;
|
|
}
|
|
float: right;
|
|
}
|
|
}
|
|
.attachment {
|
|
a {
|
|
border-radius: 15px;
|
|
}
|
|
margin-bottom: 1px;
|
|
}
|
|
.hourglass {
|
|
@include hourglass(#999);
|
|
}
|
|
.socket-status {
|
|
position: absolute;
|
|
padding-top:-3px;
|
|
top:0;
|
|
right:5px;
|
|
}
|
|
}
|