.container { width: 1000px; padding: 10px 17px; } .chat-alert { width: 400px; left: 490px; background: white; margin-bottom: 58px; padding: 0 11px; position: absolute; @include box-shadow(rgba(33,87,81, 0.4) 0 1px 2px); h1 { font-size: 1.4em; } .close { font-size: 18px; float: right; padding: 11px 0 0; } } .leftside { width: 23%; } .rightside { width: 75%; } .roster { background: $bg-roster; padding: 16px 9px 9px; min-height: 400px; position: relative; &:hover, &:active { cursor: default; } .wrap { overflow-y: auto; overflow-x: hidden; width: 210px; } } .my-info { height: 53px; } .user { padding: 4px 0 4px 3px; margin-right: -9px; h1, h2, h3 { margin: 0 0 1px; } //.name { // font-size: 12px; // color: $black; // text-shadow: white 1px 1px; // margin: 0; // width: auto; //} h1 { font-size: 12px; color: $black; text-shadow: white 1px 1px; .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 66%; float: left; } } h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 66%; } h3 { font-size: 12px; color: $status-color; margin-top: -2px; .rolldown { clear: both; left: 59px; width: 72px; font-weight: normal; float: left; z-index: 10; margin: 2px; position: absolute; top: 60px; a { color: $status-color; } &.editing { background: white; @include box-shadow(rgba(33,87,81, 0.4) 0 0 2px); } .active { font-weight: bold; } div { clear: both; } } .drop-down { position: relative; top: 2px; font-size: 13px; } .logout { left: 158px; font-weight: normal; float: left; margin: 2px; position: absolute; top: 61px; color: $status-color; &:after { padding-left: 4px; } } } h1 input, h2 input { border: 0; background: transparent; width: 151px; padding: 0; outline: none; margin: 0; 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; } } h1 input { color: $black; font-size: 12px; font-weight: bold; } h2 input { font-style: italic; font-size: 11px; } .avatar { float: left; height: 32px; width: 32px; margin-right: 8px; &.bigger { height: 46px; width: 46px; position: relative; img { height: 46px; max-width: 46px; } .change-avatar { &:hover { cursor: pointer; } .background { position: absolute; top: 0; left: 0; height: 46px; width: 46px; background: $inactive-color; @include opacity(0.8); } p { position: absolute; top: 3px; left: 4px; color: $gray-light; font-weight: bold; &:hover { text-decoration: underline; } } } } img { height: 32px; border-radius: 5px; margin: 0 auto; display: block; } } } .friends { height: inherit; //overflow-x: hidden; //overflow-y: auto; .group-header { margin: 16px 3px 3px; font-size: 12px; text-transform: uppercase; color: #9db0b7; &.active { color: $app-color; } } ul { padding: 0; margin: 0; position: relative; li { list-style: none; background: $bg-roster; position: relative; } } .floating { position: absolute; // TODO } .user { h2 { font-size: 11px; font-weight: normal; color: #7e8b90; text-shadow: white 1px 1px; } &:hover { background: #fbfbfb; } } ul.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; z-index: 1; li { background: white; } &::before { content: ''; border-left: 5px solid #24a396 !important; display: block; width: 0; height: 0; } .user { margin-right: -5px; &:hover { background: $bg-roster; } } .action { background: $bg-roster; margin-right: 0; } } .action { margin-right: 10px; margin-top: -33px; float: right; width: 67px; color: #7e8b90; position: relative; width: auto; background: #fbfbfb; .icon-bubble, .icon-bubbles, .icon-x-full, .icon-owner, .icon-make-owner { display: none; width: 21px; overflow: hidden; float: right; padding-right: 10px; padding-top: 1px; &:hover { cursor: pointer; } &: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: 7px; } } .icon-x-full { &:before { margin-left: 9px; } } } } #js-inactive-friends, js-active-friends { position: relative; } .status { font-size: 15px; position: relative; top: 1px; margin-left: 5px; &.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: 4px 4px 4px 5px; margin-left: 0; width: 13px; height: 14px; background: white; display: inline-block; } } .chatting-window { padding-left: 5px; } .tabbar { display: inline-block; margin-bottom: -3px; width: 750px; .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; } a { color: $app-color; } 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; width: 730px; position: relative; .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: 580px; color: #393939; background: $bg-roster; border: 1px solid $gray-light; border-radius: 5px; padding: 0 10px; margin-top: 10px; margin-left: 45px; position: relative; &.me { border-right: 4px solid $app-color; width: 577px; } &::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; } }