зеркало из https://github.com/nextcloud/spreed.git
Fix icons for .incall scene when dark mode is enabled
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling
Родитель
83e58805fa
Коммит
339b1dfc05
|
|
@ -298,43 +298,59 @@ input[type="password"] {
|
|||
}
|
||||
}
|
||||
|
||||
/* Use dark icons when not in a call (= white background) */
|
||||
#app-content:not(.incall):not(.screensharing) .icon-white.icon-shadow,
|
||||
#app-content:not(.incall):not(.screensharing) ~ #app-sidebar-wrapper .icon-white.icon-shadow {
|
||||
/* Still use white icons outside of calls when local video shows; otherwise
|
||||
* use dark icons.
|
||||
* There is no need to override "icon-video" and "icon-screensharing", as
|
||||
* they will never be shown with dark icons. */
|
||||
&#hideVideo.local-video-disabled,
|
||||
&#mute.local-video-disabled,
|
||||
&#screensharing-button.local-video-disabled {
|
||||
filter: none;
|
||||
#app-content:not(.incall):not(.screensharing) .force-icon-white-in-call,
|
||||
#app-content:not(.incall):not(.screensharing) ~ #app-sidebar-wrapper .force-icon-white-in-call {
|
||||
/*
|
||||
* Also force the white icons, when the video of the local participant is shown,
|
||||
* because the black icons are not visible on videos, especially when your camera is covered.
|
||||
*/
|
||||
&#hideVideo:not(.local-video-disabled) {
|
||||
background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&#hideVideo.local-video-disabled {
|
||||
background-image: var(--icon-video-off-000);
|
||||
}
|
||||
&#mute.local-video-disabled {
|
||||
&.icon-audio-off {
|
||||
background-image: var(--icon-audio-off-000);
|
||||
}
|
||||
&#mute:not(.local-video-disabled) {
|
||||
&.icon-audio {
|
||||
background-image: var(--icon-audio-000);
|
||||
background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&.icon-audio-off {
|
||||
background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
|
||||
}
|
||||
}
|
||||
&#screensharing-button.local-video-disabled {
|
||||
background-image: var(--icon-screen-off-000);
|
||||
&#screensharing-button:not(.local-video-disabled) {
|
||||
background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
|
||||
}
|
||||
}
|
||||
|
||||
#app-content.incall .force-icon-white-in-call,
|
||||
#app-content.screensharing .force-icon-white-in-call,
|
||||
#app-content.incall ~ #app-sidebar-wrapper .force-icon-white-in-call,
|
||||
#app-content.screensharing ~ #app-sidebar-wrapper .force-icon-white-in-call {
|
||||
/*
|
||||
* Force the white icon, independent from white/dark mode selection,
|
||||
* because those icons are presented on our black calling-screen.
|
||||
*/
|
||||
&.icon-menu-people {
|
||||
background-image: var(--icon-spreed-menu-people-000);
|
||||
background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1, false));
|
||||
}
|
||||
&.icon-fullscreen {
|
||||
background-image: var(--icon-fullscreen-000);
|
||||
background-image: url(icon-color-path('fullscreen', 'actions', 'fff', 1, true));
|
||||
}
|
||||
|
||||
&.icon-menu-people,
|
||||
&.icon-fullscreen {
|
||||
filter: none;
|
||||
&.icon-audio {
|
||||
background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&.icon-audio-off {
|
||||
background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&.icon-video {
|
||||
background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&.icon-video-off {
|
||||
background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&.icon-screen {
|
||||
background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true));
|
||||
}
|
||||
&.icon-screen-off {
|
||||
background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1071,8 +1087,8 @@ input[type="password"] {
|
|||
/**
|
||||
* Dark-Theme fixes
|
||||
*/
|
||||
// We always want to use the white icons, this is why we don't use var(--color-white) here.
|
||||
.avatar.icon {
|
||||
// We always want to use the white icons, this is why we don't use var(--color-white) here.
|
||||
&.icon-public {
|
||||
background-image: url(icon-color-path('public', 'actions', 'fff', 1, true));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ video {
|
|||
#app-content.screensharing .videoContainer video {
|
||||
max-height: 200px;
|
||||
background-color: transparent;
|
||||
box-shadow: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#screens video {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
|
||||
|
||||
var TEMPLATE =
|
||||
'<div id="app-sidebar-trigger" class="icon-menu-people icon-white icon-shadow">' +
|
||||
'<div id="app-sidebar-trigger" class="icon-menu-people force-icon-white-in-call icon-shadow">' +
|
||||
'</div>' +
|
||||
'<div id="app-sidebar" class="detailsView">' +
|
||||
' <div class="detailCallInfoContainer">' +
|
||||
|
|
|
|||
|
|
@ -116,11 +116,11 @@ templates['chatview_comment'] = template({"1":function(container,depth0,helpers,
|
|||
templates['mediacontrolsview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
|
||||
var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
|
||||
|
||||
return "<button id=\"mute\" class=\"icon-audio icon-white icon-shadow\" data-placement=\"top\" data-toggle=\"tooltip\" data-original-title=\""
|
||||
return "<button id=\"mute\" class=\"icon-audio force-icon-white-in-call icon-shadow\" data-placement=\"top\" data-toggle=\"tooltip\" data-original-title=\""
|
||||
+ alias4(((helper = (helper = helpers.muteAudioButtonTitle || (depth0 != null ? depth0.muteAudioButtonTitle : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"muteAudioButtonTitle","hash":{},"data":data}) : helper)))
|
||||
+ "\"></button>\n<button id=\"hideVideo\" class=\"icon-video icon-white icon-shadow\" data-placement=\"top\" data-toggle=\"tooltip\" data-original-title=\""
|
||||
+ "\"></button>\n<button id=\"hideVideo\" class=\"icon-video force-icon-white-in-call icon-shadow\" data-placement=\"top\" data-toggle=\"tooltip\" data-original-title=\""
|
||||
+ alias4(((helper = (helper = helpers.hideVideoButtonTitle || (depth0 != null ? depth0.hideVideoButtonTitle : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"hideVideoButtonTitle","hash":{},"data":data}) : helper)))
|
||||
+ "\"></button>\n<button id=\"screensharing-button\" class=\"app-navigation-entry-utils-menu-button icon-screen-off icon-white icon-shadow screensharing-disabled\" data-placement=\"top\" data-toggle=\"tooltip\" data-original-title=\""
|
||||
+ "\"></button>\n<button id=\"screensharing-button\" class=\"app-navigation-entry-utils-menu-button icon-screen-off force-icon-white-in-call icon-shadow screensharing-disabled\" data-placement=\"top\" data-toggle=\"tooltip\" data-original-title=\""
|
||||
+ alias4(((helper = (helper = helpers.screensharingButtonTitle || (depth0 != null ? depth0.screensharingButtonTitle : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"screensharingButtonTitle","hash":{},"data":data}) : helper)))
|
||||
+ "\"></button>\n<div id=\"screensharing-menu\" class=\"app-navigation-entry-menu\">\n <ul>\n <li id=\"share-screen-entry\">\n <button id=\"share-screen-button\">\n <span class=\"icon-screen\"></span>\n <span>"
|
||||
+ alias4(((helper = (helper = helpers.shareScreenButtonTitle || (depth0 != null ? depth0.shareScreenButtonTitle : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"shareScreenButtonTitle","hash":{},"data":data}) : helper)))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<button id="mute" class="icon-audio icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="{{muteAudioButtonTitle}}"></button>
|
||||
<button id="hideVideo" class="icon-video icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="{{hideVideoButtonTitle}}"></button>
|
||||
<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off icon-white icon-shadow screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="{{screensharingButtonTitle}}"></button>
|
||||
<button id="mute" class="icon-audio force-icon-white-in-call icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="{{muteAudioButtonTitle}}"></button>
|
||||
<button id="hideVideo" class="icon-video force-icon-white-in-call icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="{{hideVideoButtonTitle}}"></button>
|
||||
<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off force-icon-white-in-call icon-shadow screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="{{screensharingButtonTitle}}"></button>
|
||||
<div id="screensharing-menu" class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li id="share-screen-entry">
|
||||
|
|
|
|||
|
|
@ -386,11 +386,11 @@ var spreedPeerConnectionTable = [];
|
|||
mediaIndicator.className = 'mediaIndicator';
|
||||
|
||||
var muteIndicator = document.createElement('button');
|
||||
muteIndicator.className = 'muteIndicator icon-white icon-shadow icon-audio-off audio-on';
|
||||
muteIndicator.className = 'muteIndicator force-icon-white-in-call icon-shadow icon-audio-off audio-on';
|
||||
muteIndicator.disabled = true;
|
||||
|
||||
var hideRemoteVideoButton = document.createElement('button');
|
||||
hideRemoteVideoButton.className = 'hideRemoteVideo icon-white icon-shadow icon-video';
|
||||
hideRemoteVideoButton.className = 'hideRemoteVideo force-icon-white-in-call icon-shadow icon-video';
|
||||
hideRemoteVideoButton.setAttribute('style', 'display: none;');
|
||||
hideRemoteVideoButton.setAttribute('data-original-title', t('spreed', 'Disable video'));
|
||||
hideRemoteVideoButton.onclick = function() {
|
||||
|
|
@ -398,11 +398,11 @@ var spreedPeerConnectionTable = [];
|
|||
};
|
||||
|
||||
var screenSharingIndicator = document.createElement('button');
|
||||
screenSharingIndicator.className = 'screensharingIndicator icon-white icon-shadow icon-screen screen-off';
|
||||
screenSharingIndicator.className = 'screensharingIndicator force-icon-white-in-call icon-shadow icon-screen screen-off';
|
||||
screenSharingIndicator.setAttribute('data-original-title', t('spreed', 'Show screen'));
|
||||
|
||||
var iceFailedIndicator = document.createElement('button');
|
||||
iceFailedIndicator.className = 'iceFailedIndicator icon-white icon-shadow icon-error not-failed';
|
||||
iceFailedIndicator.className = 'iceFailedIndicator force-icon-white-in-call icon-shadow icon-error not-failed';
|
||||
iceFailedIndicator.disabled = true;
|
||||
|
||||
$(hideRemoteVideoButton).tooltip({
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ script(
|
|||
<div id="app-content" class="participants-1">
|
||||
|
||||
<div id="app-content-wrapper">
|
||||
<button id="video-fullscreen" class="icon-fullscreen icon-white icon-shadow public" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
|
||||
<button id="video-fullscreen" class="icon-fullscreen force-icon-white-in-call icon-shadow public" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
|
||||
|
||||
<div id="video-speaking">
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ script(
|
|||
<div id="app-content" class="participants-1">
|
||||
|
||||
<div id="app-content-wrapper">
|
||||
<button id="video-fullscreen" class="icon-fullscreen icon-white icon-shadow hidden" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
|
||||
<button id="video-fullscreen" class="icon-fullscreen force-icon-white-in-call icon-shadow hidden" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
|
||||
|
||||
<div id="video-speaking">
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче