.container { width: 1000px; padding: 10px 17px; } .leftside { width: 23%; } .rightside { width: 75%; } .roster { background: $bg-roster; padding: 16px 9px 9px; min-height: 400px; position: relative; &:hover, &:active { cursor: default; } } .my-info { height: 53px; } .user { padding: 4px 0 4px 3px; margin-right: -9px; h1, h2, h3 { margin: 0 0 1px; } h1 { font-size: 12px; color: $black; text-shadow: white 1px 1px; } h2 { input { border: 0; background: transparent; width: 151px; padding: 0; outline: none; margin: 0; font-style: italic; font-size: 11px; font-weight: normal; color: #7e8b90; text-shadow: white 1px 1px; height: 18px; &:focus { border: none !important; } &.editing { padding: 3px 0; font-style: normal; text-shadow: none; } } } h3 { font-size: 12px; color: $status-color; margin-top: -3px; .rolldown { clear: both; left: 54px; position: relative; top: -8px; width: 67px; font-weight: normal; float: left; &.editing { background: white; } .active { font-weight: bold; } } .drop-down { position: relative; top: 2px; left: 36px; font-size: 13px; } } .avatar { float: left; height: 32px; width: 32px; margin-right: 8px; img { height: 32px; margin: 0 auto; display: block; } &.bigger { height: 46px; width: 46px; img { height: 46px; } } } } .friends { .group-header { margin: 16px 3px 3px; font-size: 12px; text-transform: uppercase; color: #9db0b7; &.active { color: $app-color; } } ul { padding: 0; margin: 0; li { list-style: none; } } .user { h2 { font-size: 11px; font-weight: normal; color: #7e8b90; text-shadow: white 1px 1px; } &:hover { background: #fbfbfb; } } .active-group { @extend .no-left-border; @extend .left-border; @extend .border; margin: 0 -16px 0 -5px; padding: 8px 10px; background: white; border-right: 0 !important; &::before { content: ''; border-left: 5px solid #24a396 !important; display: block; width: 0; height: 0; } .user { margin-right: -5px; &:hover { background: $bg-roster; } } } .action { margin-right: 2px; margin-top: -31px; float: right; width: 67px; color: #7e8b90; .icon-bubble, .icon-bubbles, .icon-x-full { width: 21px; overflow: hidden; display: block; float: right; padding-right: 10px; padding-top: 1px; &:before { margin-left: 6px; } span { font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em; } } .icon-bubble { span { left: 2px; } } .icon-bubbles { span { left: 1px; } } .icon-x-full { span { left: 3px; } } } } .status { font-size: 15px; position: relative; top: 2px; &.online, &.away, &.dnd, &.offline { font-size: 11px; } &.online { color: #83C91F; } &.away { color: #E6D105; } &.dnd { color: #DC4E06; } &.offline { color: #848F99; } } .toolbox { position: absolute; bottom: 0; width: 93%; input { width: 75%; height: 22px; border-radius: 16px; margin-right: 6px; padding-left: 10px; padding-right: 10px; display: block; float: left; } a, a:visited { color: $app-color; border: 1px solid #dde0e3; border-radius: 12px; padding: 5px 4px 4px 5px; margin-left: 0; width: 13px; height: 13px; background: white; display: inline-block; } } .chatting-window { padding-left: 5px; } .tabbar { display: inline-block; margin-bottom: -3px; .tab { background: #f7f6f5; width: 132px; border: $border-color 1px solid; float: left; padding: 10px 7px 6px 7px; margin: 0 4px -1px 0; font-size: 15px; color: $bg-color; &:last-child { margin-right: 0; } &.active { width: 240px; background: $bg-roster; font-weight: bold; color: $app-color; padding-bottom: 7px; border-top: 0; padding-top: 10px; line-height: 19px; @extend .top-border; } div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 84%; float: left; } .icon { margin-right: 4px; } } } .conversation { background: white; padding: 9px; min-height: 367px; .event { color: $status-color; font-weight: bold; font-size: 12px; margin: 10px auto 0; width: 50%; text-align: center; } .messages { min-height: 296px; overflow: auto; } .message-box { width: 75%; color: #393939; background: $bg-roster; border: 1px solid $gray-light; border-radius: 5px; padding: 0 10px; margin-top: 10px; margin-left: 45px; position: relative; &::after, &::before { content: ''; display: block; width: 0; height: 0; border-right: 8px solid #f4f4f4; border-bottom: 8px solid rgba(255,255,255,0); border-top: 8px solid rgba(255,255,255,0); position: absolute; left: -8px; top: 14px; } &::before { z-index: 20; } &::after { height: 2px; border-right: 8px solid $gray-light; left: -9px; top: 13px; } &.active { background: #dfecea; &::before { border-right: 8px solid #dfecea; } } .date { color: #949494; text-shadow: white 1px 1px; } p { margin: 4px 0 8px; } .user { margin-left: -59px; &:hover { background: transparent; } } } } .message-writer { padding-top: 20px; padding-left: 9px; border-top: 1px solid $gray-light; margin: 10px -9px 0; position: relative; input { margin-top: 0; border-color: black; font-weight: bold; } input[type="text"] { font-size: 12px; width: 90%; margin-right: 5px; border-color: $gray-light; color: $app-color; } ::-webkit-input-placeholder { color: $app-color; opacity: 0.8; } ::-moz-placeholder { color: $app-color; opacity: 0.8; } :-ms-input-placeholder { color: $app-color; opacity: 0.8; } input[type="submit"] { font-size: 18px; width: 8%; position: absolute; right: 8px; margin: 0; padding-bottom: 2px; } }