SchoolTask/jpe-controle
1
0
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor styles for consistency and maintainability; replace hardcoded values with CSS variables

Browse source
This commit is contained in:
kelen-dev 2025-06-03 15:52:06 +02:00
parent 79e65186dc
commit b1d43fba9e
2 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
FencerJudgeFront/src/app/components/home/home.component.css
View file

@ -270,7 +270,7 @@
rgba(255, 215, 0, 0.1) 100%); rgba(255, 215, 0, 0.1) 100%);
border: 2px solid; border: 2px solid;
border-image: linear-gradient(45deg, #dc2626, var(--primary-color), #dc2626) 1; border-image: linear-gradient(45deg, #dc2626, var(--primary-color), #dc2626) 1;
border-radius: 12px; border-radius: var(--border-radius);
padding: 20px; padding: 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -393,7 +393,7 @@
rgba(26, 26, 46, 0.9) 50%, rgba(26, 26, 46, 0.9) 50%,
rgba(0, 0, 0, 0.8) 100%); rgba(0, 0, 0, 0.8) 100%);
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);
border-radius: 8px; border-radius: var(--border-radius);
position: relative; position: relative;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
@ -507,7 +507,7 @@
.stat-value { .stat-value {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
} }
@ -618,7 +618,7 @@
position: relative; position: relative;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
border-radius: 12px; border-radius: var(--border-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
width: 400px; width: 400px;
height: 500px; height: 500px;
@ -643,7 +643,7 @@
inset 0 1px 0 rgba(255, 255, 255, 0.1); inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: translateY(-2px); transform: translateY(-2px);
/* Léger lift au hover */ /* Léger lift au hover */
border: 2px solid rgba(212, 175, 55, 0.6); border: 2px solid var(--primary-color);
background: var(--card-gradient) !important; background: var(--card-gradient) !important;
} }
@ -655,10 +655,10 @@
background-image: inherit; background-image: inherit;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
filter: blur(10px) brightness(1.1) contrast(1.1); filter: var(--blur-effect);
opacity: .6; opacity: .6;
z-index: 1; z-index: 1;
transition: all .6s cubic-bezier(0.4, 0, 0.2, 1); transition: var(--transition-smooth);
/* Courbe plus fluide */ /* Courbe plus fluide */
} }
@ -666,7 +666,7 @@
.diplomes-card:hover:before { .diplomes-card:hover:before {
transform: scale(1.2); transform: scale(1.2);
/* Zoom uniquement sur l'image */ /* Zoom uniquement sur l'image */
filter: blur(8px) brightness(1.3); filter: var(--blur-hover);
/* Moins de blur + plus lumineux au hover */ /* Moins de blur + plus lumineux au hover */
opacity: .8; opacity: .8;
/* Plus visible au hover */ /* Plus visible au hover */
@ -696,7 +696,7 @@
} }
.weapon-card p { .weapon-card p {
color: #ffffff; color: white;
font-size: 0.95em; font-size: 0.95em;
} }

19
FencerJudgeFront/src/styles.css
View file

@ -12,5 +12,22 @@
rgba(64, 64, 64, 0.95) 0%, rgba(64, 64, 64, 0.95) 0%,
rgba(32, 32, 32, 0.98) 50%, rgba(32, 32, 32, 0.98) 50%,
rgba(16, 16, 16, 0.95) 100%); rgba(16, 16, 16, 0.95) 100%);
--h-f-bg: #2c2c2c; --h-f-bg: #2c2c2c;
}
/* Filters */
:root {
--blur-effect: blur(10px) brightness(1.1) contrast(1.1);
--blur-hover: blur(8px) brightness(1.3);
}
/* Transitions */
:root {
--transition-smooth: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
--transition-quick: all 0.3s ease;
}
/* Borders */
:root {
--border-radius: 12px;
} }