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

235 lines
5.4 KiB
JavaScript
Raw Normal View History

2022-02-23 13:46:38 +00:00
import { fixAndroidViewClipping } from '../../../base/styles';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
2019-02-05 10:10:15 +00:00
2021-12-17 13:05:12 +00:00
export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
2019-07-12 08:06:49 +00:00
const TITLE_BAR_BUTTON_SIZE = 24;
const HEADER_ACTION_BUTTON_SIZE = 17;
/**
* The styles of the safe area view that contains the title bar.
*/
const titleBarSafeView = {
left: 0,
position: 'absolute',
right: 0,
top: 0
};
/**
* The styles of the feature conference.
*/
2019-07-12 08:06:49 +00:00
export default {
/**
2021-11-04 21:10:43 +00:00
* {@code Conference} Style.
*/
2017-02-16 21:17:05 +00:00
conference: fixAndroidViewClipping({
alignSelf: 'stretch',
backgroundColor: BaseTheme.palette.uiBackground,
flex: 1
}),
displayNameContainer: {
margin: 10
},
headerNavigationButton: {
height: BaseTheme.spacing[6],
marginTop: 20,
width: BaseTheme.spacing[6]
},
headerNavigationText: {
color: BaseTheme.palette.text01,
fontSize: HEADER_ACTION_BUTTON_SIZE
},
headerNavigationTextBold: {
...BaseTheme.typography.labelButton,
color: BaseTheme.palette.text01,
fontSize: HEADER_ACTION_BUTTON_SIZE
},
2019-02-05 10:10:15 +00:00
/**
* View that contains the indicators.
*/
indicatorContainer: {
flex: 1,
flexDirection: 'row'
2019-02-05 10:10:15 +00:00
},
titleBarButtonContainer: {
borderRadius: 3,
height: BaseTheme.spacing[7],
marginTop: BaseTheme.spacing[1],
marginRight: BaseTheme.spacing[1],
zIndex: 1,
width: BaseTheme.spacing[7]
},
inviteButton: {
iconStyle: {
color: BaseTheme.palette.icon01,
padding: 12,
fontSize: TITLE_BAR_BUTTON_SIZE
},
underlayColor: BaseTheme.spacing.underlay01
},
2019-02-05 10:10:15 +00:00
2020-03-20 17:30:46 +00:00
lonelyButton: {
alignItems: 'center',
2022-06-20 21:09:13 +00:00
backgroundColor: BaseTheme.palette.action01,
2020-03-20 17:30:46 +00:00
borderRadius: 24,
flexDirection: 'row',
height: BaseTheme.spacing[6],
2020-03-20 17:30:46 +00:00
justifyContent: 'space-around',
paddingHorizontal: 12
},
lonelyButtonComponents: {
2022-06-20 21:09:13 +00:00
color: BaseTheme.palette.text01,
2020-03-20 17:30:46 +00:00
marginHorizontal: 6
},
lonelyMeetingContainer: {
alignSelf: 'stretch',
alignItems: 'center',
2022-02-23 13:46:38 +00:00
padding: BaseTheme.spacing[3]
2020-03-20 17:30:46 +00:00
},
lonelyMessage: {
2022-06-20 21:09:13 +00:00
color: BaseTheme.palette.text01,
2022-02-23 13:46:38 +00:00
paddingVertical: BaseTheme.spacing[2]
2020-03-20 17:30:46 +00:00
},
pipButtonContainer: {
'&:not(:empty)': {
borderRadius: 3,
height: BaseTheme.spacing[7],
marginTop: BaseTheme.spacing[1],
marginLeft: BaseTheme.spacing[1],
zIndex: 1,
width: BaseTheme.spacing[7]
}
},
pipButton: {
2019-01-30 15:43:57 +00:00
iconStyle: {
color: BaseTheme.palette.icon01,
padding: 12,
fontSize: TITLE_BAR_BUTTON_SIZE
2019-01-30 15:43:57 +00:00
},
underlayColor: BaseTheme.spacing.underlay01
2019-01-30 15:43:57 +00:00
},
titleBarSafeViewColor: {
...titleBarSafeView,
backgroundColor: BaseTheme.palette.uiBackground
},
titleBarSafeViewTransparent: {
...titleBarSafeView
2019-01-30 15:43:57 +00:00
},
titleBarWrapper: {
2019-01-30 15:43:57 +00:00
alignItems: 'center',
flex: 1,
flexDirection: 'row',
height: BaseTheme.spacing[8],
justifyContent: 'center'
2019-01-30 15:43:57 +00:00
},
alwaysOnTitleBar: {
paddingRight: 0,
borderRadius: 6,
backgroundColor: 'rgba(0, 0, 0, .5)',
marginLeft: BaseTheme.spacing[2],
flexDirection: 'row',
alignSelf: 'flex-start',
alignItems: 'center',
justifyContent: 'center',
marginTop: BaseTheme.spacing[2],
'&:not(:empty)': {
padding: 4
}
},
expandedLabelWrapper: {
zIndex: 1
},
2020-01-13 17:12:25 +00:00
roomTimer: {
color: BaseTheme.palette.text01,
...BaseTheme.typography.bodyShortBold,
paddingHorizontal: 8,
paddingVertical: 6,
textAlign: 'center'
},
roomTimerView: {
backgroundColor: BaseTheme.palette.action02,
borderRadius: 3,
justifyContent: 'center',
minWidth: 50
2020-01-13 17:12:25 +00:00
},
2019-01-30 15:43:57 +00:00
roomName: {
color: BaseTheme.palette.text01,
...BaseTheme.typography.bodyShortBold,
paddingVertical: 6
2019-01-30 15:43:57 +00:00
},
roomNameView: {
backgroundColor: 'rgba(0,0,0,0.6)',
borderBottomLeftRadius: 3,
borderTopLeftRadius: 3,
flexShrink: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
roomNameWrapper: {
flexDirection: 'row',
marginRight: 10,
marginLeft: 8,
flexShrink: 1,
flexGrow: 1
},
/**
* 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: {
2019-07-12 08:06:49 +00:00
bottom: 0,
flexDirection: 'column',
justifyContent: 'flex-end',
left: 0,
position: 'absolute',
right: 0,
top: 0
2020-05-18 12:07:09 +00:00
},
insecureRoomNameLabel: {
backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR
},
raisedHandsCountLabel: {
backgroundColor: BaseTheme.palette.warning02,
flexDirection: 'row',
alignItems: 'center',
marginLeft: BaseTheme.spacing[0],
marginBottom: BaseTheme.spacing[0],
marginRight: BaseTheme.spacing[1]
},
raisedHandsCountLabelText: {
color: BaseTheme.palette.uiBackground,
paddingLeft: BaseTheme.spacing[2]
}
2019-07-12 08:06:49 +00:00
};