signal-desktop/stylesheets/_android.scss
Scott Nonnenberg 293be5d9f6 Truncate long filenames in attachments
The :before technique for adding the icon was removed, because it
resulted in some rendering issues when the layout pressure in the
message bubble got too high - you would see a partial icon. This
solution shrinks the icon a bit when the filename wants to expand to
take its space.

The iOS bubble width also needed special care to ensure it didn't expand
to accommodate the very wide filenames. Beyond that, overflow: hidden
needed to be applied at several levels to make everything behave as
expected.

FREEBIE
2017-08-04 12:03:25 -07:00

74 lines
1.4 KiB
SCSS

.android {
#header {
background-color: $blue;
color: white;
transition: background-color 0.5s;
&.inactive {
background-color: $grey_l;
color: $grey_d;
}
}
.contact-details .name {
font-weight: 400;
}
.conversation.placeholder .conversation-header {
display: none;
}
.conversation-header, .bubble {
@include avatar-colors;
}
.bottom-bar {
min-height: 10px;
}
.bubble {
padding: 9px 12px;
border-radius: $border-radius;
box-shadow: 0 3px 3px -4px black;
}
.outgoing .bubble {
background-color: white;
}
.outgoing .hourglass {
@include hourglass(#999);
}
.incoming .hourglass {
@include hourglass(#fff);
}
.incoming .bubble {
.sender, .content, .body, .meta, a, .fileView {
@include invert-text-color;
}
.attachments, .content {
a {
color: $grey_l;
}
}
}
.incoming .bubble .fileView .icon {
@include color-svg('/images/file.svg', white);
}
button.clock {
@include header-icon-white('/images/clock.svg');
}
.inactive button.clock {
@include header-icon-black('/images/clock.svg');
}
button.hamburger {
@include header-icon-white('/images/menu.svg');
}
.inactive button.hamburger {
@include header-icon-black('/images/menu.svg');
}
button.back {
@include header-icon-white('/images/back.svg');
}
.inactive button.back {
@include header-icon-black('/images/back.svg');
}
}