diff --git a/src/packages/collaboration/lib/participant-view.coffee b/src/packages/collaboration/lib/participant-view.coffee index 0a8e87757..e20819c48 100644 --- a/src/packages/collaboration/lib/participant-view.coffee +++ b/src/packages/collaboration/lib/participant-view.coffee @@ -41,6 +41,8 @@ class ParticipantView extends View onClickRemove: => false onClickToggleVideo: => + @toggleVideoButton.toggleClass('disabled') false onClickToggleAudio: => + @toggleAudioButton.toggleClass('disabled') false diff --git a/src/packages/collaboration/stylesheets/collaboration.less b/src/packages/collaboration/stylesheets/collaboration.less index e8c9d41a1..62344d3fd 100644 --- a/src/packages/collaboration/stylesheets/collaboration.less +++ b/src/packages/collaboration/stylesheets/collaboration.less @@ -4,8 +4,6 @@ @video-padding: 5px; @large-width: 160px; @small-width: 42px; -// @user-color: #3facc1; -@user-color: #00f; .collaboration-status{ float: right; @@ -112,13 +110,6 @@ margin-left: 5px; .mini-icon(arr-up); } - - .remove:before, .toggle-audio:before, .toggle-video:before { - color: rgba(255, 255, 255, 0.8); - } - .remove:hover:before, .toggle-audio:hover:before, .toggle-video:hover:before { - color: #fff; - } } &:hover{ diff --git a/themes/atom-dark-ui/collaboration.less b/themes/atom-dark-ui/collaboration.less index dbb1e0f7e..984715102 100644 --- a/themes/atom-dark-ui/collaboration.less +++ b/themes/atom-dark-ui/collaboration.less @@ -6,6 +6,12 @@ @site-3-color: #db2ff4; @site-4-color: #f4541e; +@action-icon-disabled-color: rgba(255, 255, 255, 0.5); +@action-icon-disabled-hover-color: #fff; + +@action-icon-color: fade(@running-color, 80%); +@action-icon-hover-color: @running-color; + .site-colors(@site, @color) { .collaboration-participant{ .site-@{site} { @@ -35,9 +41,8 @@ .site-colors(8, @site-4-color); .collaboration-status{ - .guest { - color: #96CBFE; + color: @guest-color; } .running { @@ -45,3 +50,23 @@ &:hover { color: lighten(@running-color, 15%); } } } + +.collaboration-participant { + &.large{ + .actions{ + .remove:before, .toggle-audio.disabled:before, .toggle-video.disabled:before { + color: @action-icon-disabled-color; + } + .remove:hover:before, .toggle-audio.disabled:hover:before, .toggle-video.disabled:hover:before { + color: @action-icon-disabled-hover-color; + } + + .toggle-audio:before, .toggle-video:before { + color: @action-icon-color; + } + .toggle-audio:hover:before, .toggle-video:hover:before { + color: @action-icon-hover-color; + } + } + } +}