AJR/TechradarDev
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: repositionner les labels de quadrants et la légende pour éviter tout chevauchement

Browse Source 
- Réduction de la largeur des labels à 180px
- Positionnement à 10px des bords (au lieu de 30px) pour être vraiment en dehors des cercles
- Les labels sont maintenant complètement en dehors de la zone des cercles (rayon max 400px)
- Ajustement de la légende avec position fixe en bas à droite
- Ajout de box-shadow pour améliorer la visibilité
- Sélecteurs CSS plus spécifiques pour garantir l'application des styles
This commit is contained in:
syoul
2025-12-03 17:11:28 +01:00
parent 327c23c33f
commit e830bdb69c
1 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
custom.css
View File

@@ -34,73 +34,100 @@ header nav a:hover {
}
/* Ajuster le positionnement des labels de quadrants pour éviter le chevauchement avec les cercles */
/* Les labels doivent être positionnés en dehors de la zone des cercles concentriques */
[class*="Label_label"],
/* Le radar fait 800px, les cercles ont un rayon max de 400px (50% du centre) */
/* Les labels doivent être positionnés à au moins 450px du centre, donc à 50px+ des bords */
div[class*="labels"] > div[class*="label"],
div[class*="Label_label"],
div[class*="label"][class*="position"] {
z-index: 1 !important;
padding: 12px !important;
max-width: 200px !important;
background: rgba(26, 77, 58, 0.9) !important;
max-width: 180px !important;
width: 180px !important;
background: rgba(26, 77, 58, 0.95) !important;
border-radius: 8px !important;
backdrop-filter: blur(4px) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Quadrant 1 (en haut à gauche) - Technologies Différenciantes */
div[class*="labels"] > div[class*="label"][class*="position-1"],
[class*="Label_label"][class*="position-1"],
div[class*="label"][class*="position-1"] {
left: 30px !important;
top: 30px !important;
left: 10px !important;
top: 10px !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
}
/* Quadrant 2 (en haut à droite) - Technologies de Commodité */
div[class*="labels"] > div[class*="label"][class*="position-2"],
[class*="Label_label"][class*="position-2"],
div[class*="label"][class*="position-2"] {
right: 30px !important;
top: 30px !important;
right: 10px !important;
top: 10px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
}
/* Quadrant 3 (en bas à gauche) - Technologies à Risque */
div[class*="labels"] > div[class*="label"][class*="position-3"],
[class*="Label_label"][class*="position-3"],
div[class*="label"][class*="position-3"] {
left: 30px !important;
bottom: 30px !important;
left: 10px !important;
bottom: 10px !important;
right: auto !important;
top: auto !important;
margin: 0 !important;
}
/* Quadrant 4 (en bas à droite) - Technologies Émergentes */
div[class*="labels"] > div[class*="label"][class*="position-4"],
[class*="Label_label"][class*="position-4"],
div[class*="label"][class*="position-4"] {
right: 30px !important;
bottom: 30px !important;
right: 10px !important;
bottom: 10px !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
}
/* Ajuster la légende pour éviter le chevauchement avec les cercles */
[class*="Legend_legend"],
ul[class*="Legend_legend"],
ul[class*="legend"] {
z-index: 1 !important;
padding: 15px 20px !important;
margin-right: 30px !important;
margin-bottom: 30px !important;
background: rgba(26, 77, 58, 0.85) !important;
padding: 12px 16px !important;
background: rgba(26, 77, 58, 0.95) !important;
border-radius: 8px !important;
backdrop-filter: blur(4px) !important;
min-width: 200px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
min-width: 180px !important;
max-width: 200px !important;
}
/* Sur les grands écrans, ajuster la position de la légende */
@media (min-width: 1200px) {
[class*="Legend_legend"],
ul[class*="Legend_legend"],
ul[class*="legend"] {
right: 20px !important;
right: 10px !important;
top: auto !important;
bottom: 50px !important;
bottom: 10px !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
}
}
/* Sur les écrans moyens, centrer la légende en bas */
@media (min-width: 768px) and (max-width: 1199px) {
ul[class*="Legend_legend"],
ul[class*="legend"] {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
bottom: 10px !important;
top: auto !important;
margin: 0 !important;
}
}