.collaborator-video { z-index: 1; position: absolute; width: 150px; height: 150px; cursor: default; color: #FFF; .video-receive { position: absolute; width: 160px; padding: 20px 20px 20px 170px; background: #424242; height: 110px; border-top-left-radius: 75px; border-bottom-left-radius: 75px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; .video-statement { margin-bottom: 10px; } .btn-group { .btn-yes { margin-right: 10px; } .btn-no { background-color: #c04f4f; &:hover { background-color: #A54242; } } } } .video-cutoff { width: 150px; height: 150px; overflow: hidden; border-radius: 75px; z-index: 0; position: relative; -webkit-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19); -moz-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19); box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19); video { height: 150px; margin-left: -25px; } .collaborator-video-avatar { position: absolute; top: 0; left: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-user-drag: none; display: none; } } .video-audio { position: absolute; width: 24px; height: 24px; top: 85%; right: 0px; cursor: pointer; background: url(<%= asset_path 'audio_sprite.png' %>) no-repeat; } .video-audio:hover { background-position-x: -24px; } .video-audio.active { background-position-y: -24px; } .video-video { position: absolute; width: 24px; height: 24px; top: 85%; left: 0px; cursor: pointer; background: url(<%= asset_path 'camera_sprite.png' %>) no-repeat; } .video-video:hover { background-position-x: -24px; } .video-video.active { background-position-y: -24px; } } .collaborator-video.my-video { left: 30px; top: 72px; } #chat-box-wrapper { height: 100%; float: right; } .chat-box { position: relative; display: flex; flex-direction: column; z-index: 1; width: 300px; height: 100%; background: #424242; box-shadow: -8px 0px 16px 2px rgba(0, 0, 0, 0.23); .chat-button { position: absolute; top: 50%; left: -36px; width: 36px; height: 49px; background: url(<%= asset_path 'junto.png' %>) no-repeat 2px 9px, url(<%= asset_path 'tray_tab.png' %>) no-repeat; cursor: pointer; &.active { background: url(<%= asset_path 'junto_spinner_dark.gif' %>) no-repeat 2px 8px, url(<%= asset_path 'tray_tab.png' %>) no-repeat !important; } .chat-unread { background: #DAB539; position: absolute; top: -3px; left: -11px; width: 20px; height: 20px; border-radius: 11px; border: 2px solid #424242; color: #424242; text-align: center; font-size: 12px; font-weight: bold; line-height: 20px; } } .junto-header { width: 276px; padding: 16px 8px 16px 16px; font-size: 16px; text-align: left; font-weight: bold; background-color: #000000; color: #f5f5f5; box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23); .cursor-toggle { width: 32px; height: 32px; margin-right: 8px; margin-top: -8px; float: right; background: url(<%= asset_path 'cursor_sprite.png' %>) no-repeat; } .cursor-toggle:hover { background-position-x: -32px; } .cursor-toggle.active { background-position-y: -32px; } .video-toggle { width: 32px; height: 32px; margin-right: 10px; margin-top: -8px; float: right; background: url(<%= asset_path 'video_sprite.png' %>) no-repeat; } .video-toggle:hover { background-position-x: -32px; } .video-toggle.active { background-position-y: -32px; } } .participants { width: 100%; min-height: 150px; padding: 16px 0px 16px 0px; text-align: left; color: #f5f5f5; overflow-y: auto; .conversation-live { padding: 5px 10px 5px 10px; background: #c04f4f; margin: 5px 10px; border-radius: 2px; } .conversation-live .call-action { float: right; cursor: pointer; color: #EBFF00; } .participant { width: 89%; padding: 8px 8px 2px 8px; color: #f5f5f5; font-family: arial, sans-serif; font-size: 13px; line-height: 14px; .chat-participant-image { width: 15%; float: left; overflow: hidden; color: #BBB; padding-top: 2px; } .chat-participant-image img { width: 32px; height: 32px; border-radius: 18px; } .chat-participant-name { width: 53%; float: left; font-size: 13px; font-weight: bold; margin-top: 12px; padding: 2px 8px 0; text-align: left; } .chat-participant-invite-call, .chat-participant-invite-join { float: right; background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center; } .chat-participant-invite-call.pending, .chat-participant-invite-join.pending { background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center; } .chat-participant-participating { float: right; margin-top: 14px; } .chat-participant-participating .green-dot { background: #4fc059; width: 12px; height: 12px; border-radius: 6px; } } } .chat-header { width: 276px; padding: 16px 8px 16px 16px; font-size: 16px; text-align: left; font-weight: bold; background-color: #000000; color: #f5f5f5; box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23); .sound-toggle { width: 24px; height: 24px; margin-right: 10px; margin-top: -2px; float: right; background: url(<%= asset_path 'sound_sprite.png' %>) no-repeat; } .sound-toggle:hover { background-position-x: -24px; } .sound-toggle.active { background-position-y: -24px; } } $chat_font_size: 16px; .chat-input { min-height: 80px; width: 88%; padding: 8px 9% 8px 3%; font-size: $chat_font_size; outline: none; resize: none; } .chat-messages { width: 100%; padding: 16px 0px; overflow-y: auto; flex-grow: 1; .chat-message { width: 89%; padding: 8px 8px 2px 8px; color: #f5f5f5; font-family: arial, sans-serif; font-size: $chat_font_size; line-height: $chat_font_size + 1px; a:link { color: #4fb5c0; text-decoration: underline; } a:visited { color: #aea9fd; text-decoration: underline; } a:hover { color: #dab539; text-decoration: underline; } .chat-message-user { width: 12%; float: left; overflow: hidden; color: #BBB; padding-top: 2px; } .chat-message-user img { border: 2px solid #424242; width: 28px; height: 28px; border-radius: 16px; } .chat-message-meta { padding: 0 8px; float: left; } .chat-message-username { color: #4fc059; } .chat-message-text { width: 80%; float: left; padding: 2px 8px 0; text-align: left; word-wrap: break-word; } .chat-message-time { font-size: 12px; color: #757575; } } } .new-message-area { position: relative; .extra-message-options { height: 20px; position: absolute; right: 2px; bottom: 74px; .emoji-picker-button { font-size: 16px; line-height: 20px; cursor: pointer; padding: 4px; } } } }