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 */ /* 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 */ /* Le radar fait 800px, les cercles ont un rayon max de 400px (50% du centre) */
[class*="Label_label"], /* 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"] { div[class*="label"][class*="position"] {
z-index: 1 !important; z-index: 1 !important;
padding: 12px !important; padding: 12px !important;
max-width: 200px !important; max-width: 180px !important;
background: rgba(26, 77, 58, 0.9) !important; width: 180px !important;
background: rgba(26, 77, 58, 0.95) !important;
border-radius: 8px !important; border-radius: 8px !important;
backdrop-filter: blur(4px) !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 */ /* Quadrant 1 (en haut à gauche) - Technologies Différenciantes */
div[class*="labels"] > div[class*="label"][class*="position-1"],
[class*="Label_label"][class*="position-1"], [class*="Label_label"][class*="position-1"],
div[class*="label"][class*="position-1"] { div[class*="label"][class*="position-1"] {
left: 30px !important; left: 10px !important;
top: 30px !important; top: 10px !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important; margin: 0 !important;
} }
/* Quadrant 2 (en haut à droite) - Technologies de Commodité */ /* Quadrant 2 (en haut à droite) - Technologies de Commodité */
div[class*="labels"] > div[class*="label"][class*="position-2"],
[class*="Label_label"][class*="position-2"], [class*="Label_label"][class*="position-2"],
div[class*="label"][class*="position-2"] { div[class*="label"][class*="position-2"] {
right: 30px !important; right: 10px !important;
top: 30px !important; top: 10px !important;
left: auto !important; left: auto !important;
bottom: auto !important;
margin: 0 !important; margin: 0 !important;
} }
/* Quadrant 3 (en bas à gauche) - Technologies à Risque */ /* Quadrant 3 (en bas à gauche) - Technologies à Risque */
div[class*="labels"] > div[class*="label"][class*="position-3"],
[class*="Label_label"][class*="position-3"], [class*="Label_label"][class*="position-3"],
div[class*="label"][class*="position-3"] { div[class*="label"][class*="position-3"] {
left: 30px !important; left: 10px !important;
bottom: 30px !important; bottom: 10px !important;
right: auto !important;
top: auto !important; top: auto !important;
margin: 0 !important; margin: 0 !important;
} }
/* Quadrant 4 (en bas à droite) - Technologies Émergentes */ /* Quadrant 4 (en bas à droite) - Technologies Émergentes */
div[class*="labels"] > div[class*="label"][class*="position-4"],
[class*="Label_label"][class*="position-4"], [class*="Label_label"][class*="position-4"],
div[class*="label"][class*="position-4"] { div[class*="label"][class*="position-4"] {
right: 30px !important; right: 10px !important;
bottom: 30px !important; bottom: 10px !important;
left: auto !important; left: auto !important;
top: auto !important; top: auto !important;
margin: 0 !important; margin: 0 !important;
} }
/* Ajuster la légende pour éviter le chevauchement avec les cercles */ /* Ajuster la légende pour éviter le chevauchement avec les cercles */
[class*="Legend_legend"], ul[class*="Legend_legend"],
ul[class*="legend"] { ul[class*="legend"] {
z-index: 1 !important; z-index: 1 !important;
padding: 15px 20px !important; padding: 12px 16px !important;
margin-right: 30px !important; background: rgba(26, 77, 58, 0.95) !important;
margin-bottom: 30px !important;
background: rgba(26, 77, 58, 0.85) !important;
border-radius: 8px !important; border-radius: 8px !important;
backdrop-filter: blur(4px) !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 */ /* Sur les grands écrans, ajuster la position de la légende */
@media (min-width: 1200px) { @media (min-width: 1200px) {
[class*="Legend_legend"], ul[class*="Legend_legend"],
ul[class*="legend"] { ul[class*="legend"] {
right: 20px !important; right: 10px !important;
top: auto !important; top: auto !important;
bottom: 50px !important; bottom: 10px !important;
left: auto !important;
transform: none !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;
} }
} }