Spaces:
Running
Running
File size: 1,726 Bytes
3299552 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import { css } from '@emotion/react';
export const spiritualCard = css`
position: relative;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
`;
export const quoteStyle = (theme) => css`
padding: 1.5rem;
border-left: 4px solid ${theme.palette.spiritual.quoteBorder};
background-color: ${theme.palette.background.paper};
font-family: 'Amiri', serif;
font-size: 1.2rem;
line-height: 2rem;
margin: 1.5rem 0;
border-radius: 0 8px 8px 0;
`;
export const arabicTextStyle = css`
font-family: 'Traditional Arabic', 'Amiri', serif;
font-size: 1.5rem;
line-height: 2.5rem;
direction: rtl;
text-align: right;
`;
export const fadeInAnimation = css`
animation: fadeIn 0.8s ease forwards;
`;
export const prayerMatStyle = (theme) => css`
background: linear-gradient(145deg, ${theme.palette.spiritual.light} 0%, ${theme.palette.spiritual.dark} 100%);
padding: 2rem;
border-radius: 0 0 20px 20px;
position: relative;
&:before {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: ${theme.palette.spiritual.accent};
border-radius: 3px;
}
`;
export const illuminationEffect = css`
position: relative;
&:after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
&:hover:after {
opacity: 1;
}
`; |