pogdark-app/assets/styles.ts

96 lines
2.8 KiB
TypeScript

import {StyleSheet} from "react-native";
const styles = StyleSheet.create({
//StatusPage
container: { flex: 1, alignItems: "stretch" },
listContainer: {
flex: 1,
width: "100%",
backgroundColor: 'transparent',
flexDirection: "row",
justifyContent: "space-between",
//alignItems: "flex-start", // Aligns subheaders properly
paddingHorizontal: 10, // Adds some spacing
},
listSubheader: {
fontFamily: "Medium",
fontSize: 18, // Larger text
textAlign: "center", // Center the text
fontWeight: "bold", // Make it more distinct
marginBottom: 10, // Add spacing below
zIndex: 0,
},
//listWrapper: { flex: 1, padding: 5 },
listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1},
buttonContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignSelf: "stretch",
verticalAlign: "bottom",
paddingHorizontal: 10,
paddingBottom: 20,
marginHorizontal: 5,
},
actionButton: {
flex: 1,
marginHorizontal: 5,
},
card: {
marginVertical: 5,
elevation: 4, // Android shadow
shadowColor: "#000", // iOS shadow
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 4,
borderRadius: 10,
},
imageBackground: {
position: "absolute", // Allows child elements to layer on top
width: "100%", // Ensure full coverage of the column
height: "100%", // Fully stretches to column height
resizeMode: "cover", // Ensures it fits well
opacity: 0.2, // Fades the image
zIndex: -1,
},
//profile screen
themeContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignSelf: 'center',
//alignItems: 'center',
marginTop: 10,
},
themeButton: {
width: 50,
height: 50,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'flex-start',
overflow: 'hidden',
borderWidth: 1,
borderColor: 'black',
},
halfCircle: {
width: '50%',
height: '100%',
position: 'absolute',
bottom: 0,
},
//Nav
logoContainer: { flex: 1, alignItems: "center" },
logo: { width: 140, height: 70 },
topBar: { },
bottomBar: { height: 38 },
//index
indexImageBackground: {
position: "absolute", // Allows child elements to layer on top
width: "100%", // Ensure full coverage of the column
height: "100%", // Fully stretches to column height
resizeMode: "cover", // Ensures it fits well
opacity: 0.3, // Fades the image
},
indexContainer: { flex: 1, alignItems: "stretch" },
});
export default styles;