* { box-sizing: border-box; } html { height: 100%; border: solid 1px #ccc; } body { position: relative; height: 100%; width: 100%; margin: 0; font-family: $roboto; font-size: 14px; } .clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .hide { display: none; } #header { position: fixed; top: 0; width: 100%; z-index: 1; height: $header-height; line-height: 24px; color: #f2f2f2; box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8); background-color: $header-color; -webkit-app-region: drag; button { -webkit-app-region: no-drag; color: inherit; background-color: $blue; &:hover { background-color: rgba(darken($blue, 10%), 0.8); } } } .title-text { display: block; text-align: center; height: $header-height; line-height: $header-height; font-family: $roboto-light; } .title-bar button { width: $header-height; height: $header-height; line-height: $header-height; padding: 0; border: 0; outline: 0; } button { cursor: pointer; } button.back { float: left; background: $header-color url('/images/back.png') no-repeat center center; & + .title-text { text-indent: -$header-height; } } .menu { position: relative; float: left; height: 36px; padding-right: 8px; .hamburger { width: 36px; background: url('/images/menu.png') no-repeat center; } .menu-list { display: none; position: absolute; color: $grey_d; top: 100%; right: 0; margin: 0; padding: 0; border: solid 1px $blue; background-color: white; box-shadow: 0 4px 3px 0px rgba(darken($blue, 30%), 0.8); li { display: block; white-space: nowrap; a { cursor: pointer; display: block; padding: 5px 15px 5px 10px; &:hover { background-color: $grey_l; } } } } } .file-input { position: relative; margin-right: 10px; cursor: pointer; .thumbnail { width: 36px; height: 36px; } .paperclip { width: 36px; height: 36px; background: url('/images/paperclip.png') no-repeat; background-size: 90%; background-position: center 6px; } input[type=file] { display: none; position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; cursor: pointer; z-index: 1; } .close { font-family: sans-serif; color: white; position: absolute; top: 0; right: -8px; cursor: default; border-radius: 50%; width: 20px; height: 20px; padding: 0px; background: #666; color: #fff; text-align: center; } } img.emoji { height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; } .avatar { display: inline-block; height: 44px; width: 44px; background: $grey_l url('/images/default.png') no-repeat center; border-radius: 50%; background-size: cover; vertical-align: middle; } .new-group-update-form { background: white; .group-avatar { float: left; } .group-default { position: relative; display: inline-block; width: 100%; height: 100%; border-radius: 50%; background: $grey_l url('/images/group_default.png') no-repeat center; } .file-input .thumbnail, img { height: 54px; width: 54px; border-radius: (54px / 2); } .thumbnail:after { content: ''; position: absolute; height: 0; width: 0; bottom: 0; right: 0; border-bottom: 10px solid $grey; border-left: 10px solid transparent; } input.name { padding: 0.5em; border: solid 1px #ccc; border-width: 0 0 1px 0; width: calc(100% - 64px); } } .title-bar .check { float: right; background: url('/images/check.png') no-repeat center center; } .contact { position: relative; padding: 12px; background: white; cursor: pointer; transition: background 0.2s; white-space: nowrap; overflow: hidden; &::after { content: ''; position: absolute; right: 16px; bottom: 0; height: 1px; width: calc(100% - 12px - 54px - 2 * 8px - 16px); background: #eee; } &:hover { background: #f8f8f8; } &:last-child { box-shadow: 0 1px 3px rgba(#aaa, 0.8); &::after { display: none; } } .contact-details { vertical-align: top; display: inline-block; margin: 4px 0 0 8px; } .contact-name { margin: 0; font-size: 1em; font-weight: 400; } } .recipients-input { .recipients-container { background-color: white; padding: 2px; border-bottom: 1px solid #f2f2f2; line-height: 24px; } .recipient { display: inline-block; margin: 0 2px 2px 0; padding: 0 5px; border-radius: 10px; background-color: $blue; color: white; &.error { background-color: #f00; } .remove { margin-left: 5px; padding: 0 2px; } } .contact { .number { display: inline-block; } .last-message, .last-timestamp { display: none; } .number { color: $grey; font-size: small; } } } .attachment-preview { width: 100%; height: 100%; background: white; img { width: 100%; } }