Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15316 from vector-im/travis/jitsi-widget

Browse Source 
Give the Jitsi widget an icon to help with discovery
This commit is contained in:
Travis Ralston 2020-09-29 11:06:42 -06:00 committed by GitHub
commit 20c6e6dd73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/vector/jitsi/index.html
View File

@ -9,6 +9,7 @@
<div id="joinButtonContainer"> <div id="joinButtonContainer">
<div class="joinConferenceFloating"> <div class="joinConferenceFloating">
<div class="joinConferencePrompt"> <div class="joinConferencePrompt">
<span class="icon"><!-- managed by CSS --></span>
<!-- TODO: i18n --> <!-- TODO: i18n -->
<h2>Jitsi Video Conference</h2> <h2>Jitsi Video Conference</h2>
<div id="widgetActionContainer"> <div id="widgetActionContainer">

22
src/vector/jitsi/index.scss
View File

@ -23,10 +23,11 @@ limitations under the License.
src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype'); src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
} }
$fg-color: #edf3ff;
body { body {
font-family: Nunito, Arial, Helvetica, sans-serif; font-family: Nunito, Arial, Helvetica, sans-serif;
background-color: #181b21; background-color: #181b21;
color: #edf3ff; color: $fg-color;
} }
body, html { body, html {
@ -73,3 +74,22 @@ body, html {
background-color: #03b381; background-color: #03b381;
border: 0; border: 0;
} }
.icon {
$icon-size: 42px;
margin-top: -$icon-size; // to visually center the form
&::before {
content: '';
background-size: contain;
background-color: $fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url("~matrix-react-sdk/res/img/element-icons/call/video-call.svg");
mask-size: $icon-size;
display: block;
width: $icon-size;
height: $icon-size;
margin: 0 auto; // center
}
}