mirror of https://github.com/jitsi/jitsi-meet
parent
c1b9b7a623
commit
1268afd3f8
@ -1,132 +1,39 @@ |
||||
.supported-browser { |
||||
color: #929391; |
||||
display: inline-block; |
||||
font-size: 20px; |
||||
margin: 1em 7px; |
||||
vertical-align: middle; |
||||
width: 138px; |
||||
|
||||
&__button { |
||||
background-color: #62c82a; |
||||
border: 1px solid #3c8117; |
||||
border-radius: 10px; |
||||
color: #FFFFFF; |
||||
font-size: 12px; |
||||
height: 26px; |
||||
margin: 15px auto 0px auto; |
||||
padding-top: 13px; |
||||
text-align: center; |
||||
width: 115px; |
||||
} |
||||
|
||||
&__link { |
||||
color: #087dba; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
&:active { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
&:focus { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
&-list |
||||
{ |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
&__logo { |
||||
margin: 20px auto 0px auto; |
||||
|
||||
&_chrome { |
||||
background-image: url('../../images/chrome.png'); |
||||
height: 78px; |
||||
width: 78px; |
||||
} |
||||
|
||||
&_chromium { |
||||
background-image: url('../../images/chromium.png'); |
||||
height: 78px; |
||||
width: 77px; |
||||
} |
||||
|
||||
&_firefox { |
||||
background-image: url('../../images/firefox.png'); |
||||
height: 80px; |
||||
width: 86px; |
||||
} |
||||
|
||||
&_opera { |
||||
background-image: url('../../images/opera.png'); |
||||
height: 78px; |
||||
width: 73px; |
||||
} |
||||
.unsupported-desktop-browser { |
||||
@include absoluteAligning(); |
||||
|
||||
&_ie { |
||||
background-image: url('../../images/ie.png'); |
||||
height: 78px; |
||||
width: 80px; |
||||
} |
||||
display: block; |
||||
text-align: center; |
||||
|
||||
&_safari { |
||||
background-image: url('../../images/safari.png'); |
||||
height: 79px; |
||||
width: 78px; |
||||
} |
||||
&__title { |
||||
color: #fff; |
||||
font-weight: 300; |
||||
font-size: 24px; |
||||
letter-spacing: 1px; |
||||
} |
||||
|
||||
&__text |
||||
{ |
||||
line-height: 1.2em; |
||||
&__description { |
||||
margin-top: 16px; |
||||
color: rgba(255, 255, 255, 0.7); |
||||
font-weight: 300; |
||||
font-size: 21px; |
||||
letter-spacing: 1px; |
||||
|
||||
&_small { |
||||
font-size: small; |
||||
@extend .unsupported-desktop-browser__description; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
&__tile { |
||||
background-color: #e8e8e8; |
||||
border: 1px solid #cfcfcf; |
||||
border-radius: 10px; |
||||
height: 163px; |
||||
margin-top: 5px; |
||||
width: 138px; |
||||
} |
||||
} |
||||
|
||||
.unsupported-desktop-browser { |
||||
display: block; |
||||
height: 565px; |
||||
margin: auto; |
||||
overflow:hidden; |
||||
position: absolute; |
||||
text-align: center; |
||||
top: 0; left: 0; bottom: 0; right: 0; |
||||
width:500px; |
||||
|
||||
&__page { |
||||
display:inline-block; |
||||
font-size: 28px; |
||||
padding-top: 25px; |
||||
vertical-align:middle; |
||||
} |
||||
&__link { |
||||
color: $linkFontColor; |
||||
@include transition(color .1s ease-out); |
||||
|
||||
&__title { |
||||
margin: 0 auto; |
||||
width: 20em; |
||||
} |
||||
&:hover { |
||||
color: $linkHoverFontColor; |
||||
cursor: pointer; |
||||
text-decoration: none; |
||||
|
||||
&-wrapper { |
||||
background: #fff; |
||||
display: block; |
||||
height: 100%; |
||||
position: absolute; |
||||
width: 100%; |
||||
@include transition(color .1s ease-in); |
||||
} |
||||
} |
||||
} |
||||
|
@ -0,0 +1,44 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import { CHROME, CHROMIUM, FIREFOX } from './browserLinks'; |
||||
|
||||
/** |
||||
* React component representing plugin installation required page. |
||||
* |
||||
* @class PluginRequiredBrowser |
||||
*/ |
||||
export default class PluginRequiredBrowser extends Component { |
||||
|
||||
/** |
||||
* Renders the component. |
||||
* |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const ns = 'unsupported-desktop-browser'; |
||||
|
||||
return ( |
||||
<div className = { ns }> |
||||
<h2 className = { `${ns}__title` }> |
||||
Your browser requires a plugin for this conversation. |
||||
</h2> |
||||
<p className = { `${ns}__description_small` }> |
||||
Once you install the plugin, it will be possible for you |
||||
to have your conversation here. For best experience, |
||||
however, we strongly recommend that you do that using |
||||
the |
||||
<a |
||||
className = { `${ns}__link` } |
||||
href = { CHROME }>Chrome</a>, |
||||
<a |
||||
className = { `${ns}__link` } |
||||
href = { CHROMIUM }>Chromium</a> or |
||||
<a |
||||
className = { `${ns}__link` } |
||||
href = { FIREFOX }>Firefox</a> browsers. |
||||
</p> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
@ -0,0 +1,37 @@ |
||||
/* @flow */ |
||||
|
||||
/** |
||||
* The URL at which Google Chrome is available for download. |
||||
* |
||||
* @type {string} |
||||
*/ |
||||
export const CHROME = 'http://google.com/chrome'; |
||||
|
||||
/** |
||||
* The URL at which Chromium is available for download. |
||||
* |
||||
* @type {string} |
||||
*/ |
||||
export const CHROMIUM = 'http://www.chromium.org/'; |
||||
|
||||
/** |
||||
* The URL at which Mozilla Firefox is available for download. |
||||
* |
||||
* @type {string} |
||||
*/ |
||||
export const FIREFOX = 'http://www.getfirefox.com/'; |
||||
|
||||
/** |
||||
* The URL at which Microsoft Internet Explorer is available for download. |
||||
* |
||||
* @type {string} |
||||
*/ |
||||
export const IE |
||||
= 'https://www.microsoft.com/en-us/download/internet-explorer.aspx'; |
||||
|
||||
/** |
||||
* The URL at which Safari is available for download. |
||||
* |
||||
* @type {string} |
||||
*/ |
||||
export const SAFARI = 'https://support.apple.com/downloads/safari'; |
Loading…
Reference in new issue