Borrowing-TrackerFrontend/src/styles.tsx

165 lines
2.9 KiB
TypeScript

export const colors = {
background: "#F2FAF4",
header_color: "#b2dfab",
font_dark: "#2e482e",
font_light: "#0e410d",
button_dark: "#92b88d",
button_light: "#FFFFFF",
button_border: "#b2dfab",
red: "#a44141",
orange: "#c57331",
green: "#80b28a",
gray: "#8F8F8F",
dark_green: "#17561D",
dark_blue: "#19639D",
font_dark_red: "#570404",
dandelion: "#FBB217",
lightgreen: "#D9FFD8",
darkgreen: "#00360C",
lightorange: "#FEFFCD",
lightred: "#ECC4B8",
form_dark: "#000000",
form_title: "#1E1A4D"
};
const styles: { [key: string]: React.CSSProperties } = {
background: {
backgroundColor: colors.background,
position: "fixed",
top: 0,
left: 0,
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
overflowY: "scroll",
},
text_normal: {
color: colors.font_dark,
fontWeight: "500",
},
text_dark_red: {
color: colors.font_dark_red,
fontWeight: "bold",
},
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
},
text_super_dark: {
color: colors.font_dark,
fontWeight: 900,
},
text_light: {
color: colors.font_light,
fontWeight: "bold",
},
text_dark_blue:{
color:colors.dark_blue,
fontWeight:"bold"
},
text_gray: {
color: colors.gray,
},
text_red: {
color: colors.red,
fontWeight: "bold",
},
text_orange: {
color: colors.orange,
fontWeight: "bold",
},
text_green: {
color: colors.green,
fontWeight: "bold",
},
text_dark_green: {
color: colors.dark_green,
fontWeight: "bold",
},
text_XL: {
fontSize: "clamp(2rem, 3rem, 8rem)",
},
text_L: {
fontSize: "clamp(1.5rem, 2rem, 6rem)",
},
text_M: {
fontSize: "clamp(1rem, 1rem, 4rem)",
},
text_S: {
fontSize: "clamp(0.6rem, 0.8rem, 1rem)",
},
text_XS: {
fontSize: "clamp(0.5rem, 0.6rem, 0.8rem)",
},
flex_row: {
display: "flex",
flexDirection: "row",
},
flex_column: {
display: "flex",
flexDirection: "column",
},
input_form: {
color: colors.font_dark,
fontWeight: "bold",
fontSize: "clamp(1vw, 1rem, 2vw)",
background: "none",
borderRadius: 8,
maxWidth: "128px",
minWidth: "100%",
marginTop: 16,
},
popup_center: {
width: "32rem",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
overflowY: "scroll",
},
student_filter_item: {
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
},
bform_label: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
},
bform_label2: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
marginBottom: "10px",
},
};
export default styles;