138 lines
2.9 KiB
JavaScript
138 lines
2.9 KiB
JavaScript
import {
|
|
BoxModel,
|
|
ColorPalette,
|
|
createStyleSheet,
|
|
fixAndroidViewClipping
|
|
} from '../../../base/styles';
|
|
|
|
import { FILMSTRIP_SIZE } from '../../../filmstrip';
|
|
|
|
export const NAVBAR_GRADIENT_COLORS = [ 'black', '#00000000' ];
|
|
|
|
/**
|
|
* The styles of the feature conference.
|
|
*/
|
|
export default createStyleSheet({
|
|
/**
|
|
* {@code Conference} style.
|
|
*/
|
|
conference: fixAndroidViewClipping({
|
|
alignSelf: 'stretch',
|
|
backgroundColor: ColorPalette.appBackground,
|
|
flex: 1
|
|
}),
|
|
|
|
displayNameBackdrop: {
|
|
alignSelf: 'center',
|
|
backgroundColor: 'rgba(28, 32, 37, 0.6)',
|
|
borderRadius: 4,
|
|
margin: 16,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 4
|
|
},
|
|
|
|
displayNameText: {
|
|
color: ColorPalette.white,
|
|
fontSize: 14
|
|
},
|
|
|
|
gradient: {
|
|
flex: 1
|
|
},
|
|
|
|
gradientStretch: {
|
|
height: 116
|
|
},
|
|
|
|
/**
|
|
* View that contains the indicators.
|
|
*/
|
|
indicatorContainer: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
margin: BoxModel.margin
|
|
},
|
|
|
|
/**
|
|
* Indicator container for wide aspect ratio.
|
|
*/
|
|
indicatorContainerWide: {
|
|
marginRight: FILMSTRIP_SIZE + BoxModel.margin
|
|
},
|
|
|
|
labelWrapper: {
|
|
flexDirection: 'column',
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
},
|
|
|
|
navBarButton: {
|
|
iconStyle: {
|
|
color: ColorPalette.white,
|
|
fontSize: 24
|
|
},
|
|
|
|
underlayColor: 'transparent'
|
|
},
|
|
|
|
navBarContainer: {
|
|
flexDirection: 'column',
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
},
|
|
|
|
navBarSafeView: {
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
},
|
|
|
|
navBarWrapper: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
height: 44,
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 14
|
|
},
|
|
|
|
roomName: {
|
|
color: ColorPalette.white,
|
|
fontSize: 17,
|
|
fontWeight: '400'
|
|
},
|
|
|
|
roomNameWrapper: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
left: 0,
|
|
paddingHorizontal: 48,
|
|
position: 'absolute',
|
|
right: 0
|
|
},
|
|
|
|
/**
|
|
* The style of the {@link View} which expands over the whole
|
|
* {@link Conference} area and splits it between the {@link Filmstrip} and
|
|
* the {@link Toolbox}.
|
|
*/
|
|
toolboxAndFilmstripContainer: {
|
|
bottom: BoxModel.margin,
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-end',
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
|
|
// Both on Android and iOS there is the status bar which may be visible.
|
|
// On iPhone X there is the notch. In the two cases BoxModel.margin is
|
|
// not enough.
|
|
top: BoxModel.margin * 3
|
|
}
|
|
});
|