123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- $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: 30px;
- line-height: 34px;
- background-color: #dddddd;
- }
- .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;
- }
- }
|