jiti-meet/react/features/conference/components/native/styles.js

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
}
});