Files
bestpc_mobile/src/styles/globalStyles.ts
2025-08-04 10:17:58 +07:00

395 lines
8.5 KiB
TypeScript

// src/styles/globalStyles.ts
import { StyleSheet, Dimensions } from 'react-native';
var winWidth = Dimensions.get("window").width;
const itemWidth = (winWidth - 40) / 4;
export const globalStyles = StyleSheet.create({
boxProductReviewTop: {
backgroundColor: '#fff',
paddingLeft: 10,
paddingRight: 10,
marginTop: 25,
},
textBoxProductReviewTop: {
fontSize: 20,
fontWeight: 'bold',
color: '#0d0d9c',
marginBottom: 8,
textTransform: 'uppercase',
textAlign: 'center',
},
noteTextReviewTop: {
marginBottom: 8,
textAlign: 'center',
fontSize: 12,
color: "#000"
},
listTab: {
flexDirection: 'row',
},
tabItem: {
padding: 10,
width: 100,
marginRight: 10,
textAlign: 'center',
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: '#ececec',
borderRadius: 4,
},
textTabItem: {
fontSize: 15,
},
activeItem: {
backgroundColor: '#462f91',
},
activeText: {
color: '#fff'
},
listProduct: {
marginTop: 10,
marginBottom: 10,
flexDirection: 'row',
flexWrap: 'wrap',
gap: 10,
},
moreAll: {
width: 110,
height: 30,
borderColor: '#FF7A00',
borderWidth: 1,
borderRadius: 20,
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
lineHeight: 28,
marginLeft: 'auto',
marginRight: 'auto',
color: '#FF7A00',
fontWeight: 'bold',
},
boxCategoryHome: {
marginTop: 25,
},
textBoxCategoryHome: {
fontSize: 20,
fontWeight: "bold",
color: "#0d0d9c",
marginBottom: 8,
textTransform: "uppercase",
textAlign: "center",
},
listCategoryBox: {
marginTop: 10,
padding: 10,
height: 300
},
categoryItem: {
width: winWidth / 4 - 15,
marginBottom: 25,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
boxImageCategory: {
width: 70,
height: 70,
borderRadius: "50%",
overflow: 'hidden',
backgroundColor: '#f4f0ff',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
iconCategory: {
width: 45,
height: 45,
objectFit: 'contain',
},
categoryName: {
fontSize: 15,
fontWeight: '500',
marginTop: 5,
textAlign: 'center',
height: 40
},
dotWrapper: {
position: 'absolute',
bottom: 10,
left: 0,
right: 0,
flexDirection: 'row',
justifyContent: 'center',
},
dot: {
backgroundColor: 'rgba(0,0,0,.2)',
width: 8,
height: 8,
borderRadius: 4,
margin: 3,
},
activeDot: {
backgroundColor: '#f9ef06',
},
BoxBusiness: {
marginTop: 25,
},
textBoxBusiness: {
fontSize: 20,
fontWeight: "bold",
color: "#0d0d9c",
marginBottom: 8,
textTransform: "uppercase",
textAlign: "center",
},
sliderBusinesses: {
marginTop: 20,
width: winWidth - 10,
marginBottom: 10
},
logoItem: {
width: itemWidth - 3,
height: 40,
borderRadius: 8,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
shadowColor: '#727272',
shadowOffset: { width: 1, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
},
logoImage: {
width: 80,
height: 30,
resizeMode: 'contain',
},
BoxProductSaveHome: {
marginTop: 20,
width: winWidth,
paddingLeft: 10,
paddingRight: 10
},
textBoxProductSaveHome: {
fontSize: 20,
fontWeight: "bold",
color: "#0d0d9c",
marginBottom: 8,
textTransform: "uppercase",
textAlign: "center",
},
BoxArticleBranch: {
width: winWidth,
marginTop: 25
},
textBoxArticleBranche: {
fontSize: 20,
fontWeight: "bold",
color: "#111189ff",
marginBottom: 8,
textTransform: "uppercase",
textAlign: "center",
},
boxFlex: {
alignItems: "center",
flexDirection: 'row',
justifyContent: 'center',
margin: 'auto',
},
boxListArticle: {
marginTop: 5,
paddingLeft: 10,
paddingRight: 10,
},
flex: {
alignItems: "center",
flexDirection: 'row',
},
itemArtTime: {
alignItems: "center",
flexDirection: 'row',
},
itemArticle: {
flexDirection: 'row',
marginBottom: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderColor: '#efefef'
},
itemArticleImg: {
width: 90,
height: 90,
marginRight: 10,
},
imgArticle: {
width: '100%',
height: "100%",
objectFit: 'cover',
},
infoArticle: {
width: winWidth - 120
},
itemArtName: {
fontSize: 15,
fontWeight: 700,
marginBottom: 3,
},
itemArtSummary: {
fontSize: 13,
color: '#161616',
},
itemArtDate: {
fontSize: 13,
marginLeft: 3
},
itemArtSource: {
fontSize: 12,
marginLeft: 3
},
btnMore: {
margin: 'auto',
width: 90,
height: 28,
lineHeight: 28,
textAlign: 'center',
borderWidth: 1,
borderColor: '#ff7a00',
borderRadius: 4,
color: '#ff7a00',
fontSize: 13,
fontWeight: 700
},
itemArtlocal: {
flexDirection: 'row',
alignItems: "center"
},
textArtlocal: {
marginLeft: 3,
fontSize: 13,
paddingBottom: 2
},
itemArtUploadtime: {
flexDirection: 'row',
alignItems: "center",
marginBottom: 3
},
itemArtUser: {
flexDirection: 'row',
alignItems: "center",
},
imgAvatar: {
width: 20,
height: 20,
objectFit: 'contain',
marginRight: 3
},
itemArtNameUser: {
fontWeight: "bold",
},
itemArtPrice: {
fontSize: 18,
fontWeight: 'bold',
color: '#d80a00',
},
BoxBannerSaleHome: {
margin: 10,
marginTop: 30,
},
imgBannerSale: {
width: '100%',
height: '100%',
resizeMode: 'cover',
borderRadius: 12
},
itemBannerSale: {
width: winWidth - 80,
height: 180,
resizeMode: 'cover',
marginRight: 10
},
BoxPromotionHome: {
marginTop: 20
},
touchArea: {
width: winWidth,
height: 200,
position: 'relative',
overflow: 'hidden',
borderRadius: 12
},
imageYoutobe: {
width: winWidth - 20,
height: 200,
objectFit: 'cover',
overflow: 'hidden',
borderRadius: 12
},
boxVideo: {
width: winWidth - 20,
height: 200,
},
containerVideo: {
paddingLeft: 10,
paddingRight: 10
},
iconPlay: {
position: 'absolute',
left: winWidth / 2 - 20,
top: 90,
zIndex: 10,
},
infoVideo: {
position: 'absolute',
bottom: 0,
padding: 12,
zIndex: 10,
borderBottomLeftRadius: 16,
borderBottomRightRadius: 16,
},
listEvenBanner: {
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: 10,
paddingLeft: 10,
paddingRight: 10,
marginRight: -10
},
itemEven: {
width: winWidth / 2 - 20,
height: 100,
marginRight: 10,
marginBottom: 10
},
overlay: {
position: 'absolute',
bottom: 0,
height: '100%',
width: winWidth - 20,
backgroundColor: 'rgba(0,0,0,0.4)',
zIndex: 1,
borderRadius: 20
},
imgEven: {
width: '100%',
height: 100,
objectFit: 'cover',
borderRadius: 8
},
breadcrumb: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 10,
},
breadcrumbItem: {
flexDirection: "row",
alignItems: "center",
marginRight: 6,
},
breadcrumbText: {
marginLeft: 4,
color: "#637381",
fontSize: 14,
},
});