168 lines
4.5 KiB
JavaScript
168 lines
4.5 KiB
JavaScript
import { StyleSheet } from 'react-native';
|
|
|
|
export function createStyles() {
|
|
return StyleSheet.create({
|
|
root: { flex: 1 },
|
|
scroll: {
|
|
flexGrow: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
paddingVertical: 48,
|
|
},
|
|
title: {
|
|
fontSize: 44,
|
|
fontWeight: '900',
|
|
marginBottom: 20,
|
|
letterSpacing: 1,
|
|
},
|
|
logo: {
|
|
width: 100,
|
|
height: 100,
|
|
marginBottom: 20,
|
|
borderRadius: 22,
|
|
},
|
|
topRow: {
|
|
width: '100%',
|
|
maxWidth: 640,
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
marginBottom: 20,
|
|
},
|
|
backMenuBtn: {
|
|
paddingHorizontal: 18,
|
|
paddingVertical: 10,
|
|
borderRadius: 14,
|
|
borderWidth: 1.5,
|
|
},
|
|
toggleRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 10,
|
|
justifyContent: 'center',
|
|
},
|
|
toggleBtn: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
borderWidth: 1.5,
|
|
},
|
|
toggleText: { fontSize: 14, fontWeight: '600' },
|
|
modeSelectLabel: {
|
|
fontSize: 12,
|
|
letterSpacing: 2,
|
|
textTransform: 'uppercase',
|
|
marginBottom: 20,
|
|
},
|
|
modeCard: {
|
|
width: '100%',
|
|
maxWidth: 440,
|
|
borderRadius: 22,
|
|
padding: 28,
|
|
borderWidth: 2,
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 6 },
|
|
shadowOpacity: 0.18,
|
|
shadowRadius: 14,
|
|
elevation: 7,
|
|
},
|
|
modeTitle: {
|
|
fontSize: 26,
|
|
fontWeight: '800',
|
|
marginBottom: 8,
|
|
letterSpacing: 0.5,
|
|
},
|
|
modeDesc: {
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
lineHeight: 22,
|
|
},
|
|
card: {
|
|
width: '100%',
|
|
maxWidth: 440,
|
|
borderRadius: 22,
|
|
padding: 28,
|
|
borderWidth: 1.5,
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 6 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 16,
|
|
elevation: 8,
|
|
},
|
|
inputLabel: {
|
|
fontSize: 12,
|
|
letterSpacing: 1,
|
|
textTransform: 'uppercase',
|
|
marginBottom: 10,
|
|
},
|
|
inputRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
marginBottom: 16,
|
|
},
|
|
timerInputGroup: { alignItems: 'center', gap: 4 },
|
|
inputUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
|
|
timeInput: {
|
|
width: 72,
|
|
height: 58,
|
|
borderRadius: 12,
|
|
borderWidth: 2,
|
|
textAlign: 'center',
|
|
fontSize: 28,
|
|
fontWeight: '800',
|
|
},
|
|
colon: { fontSize: 34, fontWeight: '900' },
|
|
btnRow: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
marginTop: 20,
|
|
alignItems: 'center',
|
|
},
|
|
setBtn: {
|
|
paddingHorizontal: 32,
|
|
paddingVertical: 14,
|
|
borderRadius: 14,
|
|
},
|
|
setBtnText: { color: '#fff', fontSize: 16, fontWeight: '700', letterSpacing: 0.5 },
|
|
resetBtn: {
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 13,
|
|
borderRadius: 14,
|
|
borderWidth: 1.5,
|
|
},
|
|
resetBtnText: { fontSize: 15, fontWeight: '600' },
|
|
overContainer: { alignItems: 'center', paddingVertical: 12, gap: 10 },
|
|
overText: { fontSize: 52, fontWeight: '900', letterSpacing: 2 },
|
|
overSub: { fontSize: 15 },
|
|
countdownContainer: { alignItems: 'center', gap: 12 },
|
|
countdownLabel: { fontSize: 13, letterSpacing: 0.5, textTransform: 'uppercase' },
|
|
countdownRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 6, justifyContent: 'center' },
|
|
timeBlock: { alignItems: 'center', gap: 4 },
|
|
countdownNum: { fontSize: 58, fontWeight: '800', lineHeight: 66 },
|
|
countdownUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
|
|
sep: { fontSize: 50, fontWeight: '800', marginTop: 4 },
|
|
placeholder: { fontSize: 15, textAlign: 'center', paddingVertical: 24, lineHeight: 24 },
|
|
clock: { marginTop: 24, fontSize: 13, letterSpacing: 1.5 },
|
|
focusRoot: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10 },
|
|
focusCountdown: { alignItems: 'center', gap: 16, width: '100%' },
|
|
focusLabel: { fontSize: 16, letterSpacing: 0.5, textTransform: 'uppercase' },
|
|
focusNum: { fontSize: 72, fontWeight: '800', lineHeight: 80 },
|
|
focusSep: { fontSize: 56, fontWeight: '800', marginTop: 8 },
|
|
focusOverText: { fontSize: 72 },
|
|
focusExitBtn: {
|
|
position: 'absolute',
|
|
bottom: 40,
|
|
right: 32,
|
|
paddingHorizontal: 18,
|
|
paddingVertical: 10,
|
|
borderRadius: 20,
|
|
borderWidth: 1.5,
|
|
},
|
|
focusExitText: { fontSize: 14, fontWeight: '600' },
|
|
});
|
|
}
|