.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: $grey_l; } .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'); } .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'); } }