diff --git a/app/assets/stylesheets/junto.scss.erb b/app/assets/stylesheets/junto.scss.erb index 9dd94a91..f9599245 100644 --- a/app/assets/stylesheets/junto.scss.erb +++ b/app/assets/stylesheets/junto.scss.erb @@ -5,8 +5,8 @@ height: 150px; cursor: default; color: #FFF; -} -.collaborator-video .video-receive { + + .video-receive { position: absolute; width: 160px; padding: 20px 20px 20px 170px; @@ -16,84 +16,93 @@ 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 .video-receive .video-statement { - margin-bottom: 10px; -} -.collaborator-video .video-receive .btn-group .btn-yes { - margin-right: 10px; -} -.collaborator-video .video-receive .btn-group .btn-no { - background-color: #c04f4f; -} -.collaborator-video .video-receive .btn-group .btn-no:hover { - background-color: #A54242; -} -.collaborator-video .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); -} -.collaborator-video .video-cutoff video { - height: 150px; - margin-left: -25px; -} -.collaborator-video .video-cutoff .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; -} -.collaborator-video .video-audio { - position: absolute; - width: 24px; - height: 24px; - top: 85%; - right: 0px; - cursor: pointer; - background: url(<%= asset_path 'audio_sprite.png' %>) no-repeat; -} -.collaborator-video .video-audio:hover { - background-position-x: -24px; -} -.collaborator-video .video-audio.active { - background-position-y: -24px; -} -.collaborator-video .video-video { - position: absolute; - width: 24px; - height: 24px; - top: 85%; - left: 0px; - cursor: pointer; - background: url(<%= asset_path 'camera_sprite.png' %>) no-repeat; -} -.collaborator-video .video-video:hover { - background-position-x: -24px; -} -.collaborator-video .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; @@ -103,226 +112,239 @@ height: 100%; background: #424242; box-shadow: -8px 0px 16px 2px rgba(0, 0, 0, 0.23); -} -.chat-box .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; -} -.chat-box .chat-button.active { - background: url(<%= asset_path 'junto_spinner_dark.gif' %>) no-repeat 2px 8px, url(<%= asset_path 'tray_tab.png' %>) no-repeat !important; -} -.chat-box .chat-button .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; -} -.chat-box .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); -} -.chat-box .junto-header .cursor-toggle { - width: 32px; - height: 32px; - margin-right: 8px; - margin-top: -8px; - float: right; - background: url(<%= asset_path 'cursor_sprite.png' %>) no-repeat; -} -.chat-box .junto-header .cursor-toggle:hover { - background-position-x: -32px; -} -.chat-box .junto-header .cursor-toggle.active { - background-position-y: -32px; -} -.chat-box .junto-header .video-toggle { - width: 32px; - height: 32px; - margin-right: 10px; - margin-top: -8px; - float: right; - background: url(<%= asset_path 'video_sprite.png' %>) no-repeat; -} -.chat-box .junto-header .video-toggle:hover { - background-position-x: -32px; -} -.chat-box .junto-header .video-toggle.active { - background-position-y: -32px; -} -.chat-box .participants { - width: 100%; - min-height: 150px; - padding: 16px 0px 16px 0px; - text-align: left; - color: #f5f5f5; - overflow-y: auto; -} -.chat-box .participants .conversation-live { - padding: 5px 10px 5px 10px; - background: #c04f4f; - margin: 5px 10px; - border-radius: 2px; -} -.chat-box .participants .conversation-live .call-action { - float: right; - cursor: pointer; - color: #EBFF00; -} -.chat-box .participants .participant { - width: 89%; - padding: 8px 8px 2px 8px; - color: #f5f5f5; - font-family: arial, sans-serif; - font-size: 13px; - line-height: 14px; -} -.chat-box .participants .participant .chat-participant-image { - width: 15%; - float: left; - overflow: hidden; - color: #BBB; - padding-top: 2px; -} -.chat-box .participants .participant .chat-participant-image img { - width: 32px; - height: 32px; - border-radius: 18px; -} -.chat-box .participants .participant .chat-participant-name { - width: 53%; - float: left; - font-size: 13px; - font-weight: bold; - margin-top: 12px; - padding: 2px 8px 0; - text-align: left; -} -.chat-box .participants .participant .chat-participant-invite-call, -.chat-box .participants .participant .chat-participant-invite-join - { - float: right; - background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center; -} -.chat-box .participants .participant .chat-participant-invite-call.pending, -.chat-box .participants .participant .chat-participant-invite-join.pending { - background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center; -} -.chat-box .participants .participant .chat-participant-participating { - float: right; - margin-top: 14px; -} -.chat-box .participants .participant .chat-participant-participating .green-dot { - background: #4fc059; - width: 12px; - height: 12px; - border-radius: 6px; -} -.chat-box .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); -} -.chat-box .chat-header .sound-toggle { - width: 24px; - height: 24px; - margin-right: 10px; - margin-top: -2px; - float: right; - background: url(<%= asset_path 'sound_sprite.png' %>) no-repeat; -} -.chat-box .chat-header .sound-toggle:hover { - background-position-x: -24px; -} -.chat-box .chat-header .sound-toggle.active { - background-position-y: -24px; -} -.chat-box .chat-input { - min-height: 80px; - width: 94%; - padding: 8px 3% 8px 3%; - font-size: 13px; - outline: none; - resize: none; -} -.chat-box .chat-messages { - width: 100%; - padding: 16px 0px; - overflow-y: auto; - flex-grow: 1; -} -.chat-box .chat-messages .chat-message { - width: 89%; - padding: 8px 8px 2px 8px; - color: #f5f5f5; - font-family: arial, sans-serif; - font-size: 13px; - line-height: 14px; -} -.chat-box .chat-messages .chat-message a:link { - color: #4fb5c0; - text-decoration: underline; -} -.chat-box .chat-messages .chat-message a:visited { - color: #aea9fd; - text-decoration: underline; -} -.chat-box .chat-messages .chat-message a:hover { - color: #dab539; - text-decoration: underline; -} -.chat-box .chat-messages .chat-message .chat-message-user { - width: 12%; - float: left; - overflow: hidden; - color: #BBB; - padding-top: 2px; -} -.chat-box .chat-messages .chat-message .chat-message-user img { - border: 2px solid #424242; - width: 26px; - height: 26px; - border-radius: 14px; -} -.chat-box .chat-messages .chat-message .chat-message-meta { - padding: 0 8px; - float: left; -} -.chat-box .chat-messages .chat-message .chat-message-username { - color: #4fc059; -} -.chat-box .chat-messages .chat-message .chat-message-text { - width: 80%; - float: left; - padding: 2px 8px 0; - text-align: left; - word-wrap: break-word; -} -.chat-box .chat-messages .chat-message .chat-message-time { - font-size: 10px; - color: #757575; + + .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-input { + min-height: 80px; + width: 94%; + padding: 8px 3% 8px 3%; + font-size: 13px; + 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: 13px; + line-height: 14px; + + 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: 26px; + height: 26px; + border-radius: 14px; + } + .chat-message-meta { + padding: 0 px; + 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: 10px; + color: #757575; + } + } + } }