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

fix: augmenter les marges des quadrants et repositionner la légende

Browse Source 
- Augmentation des marges des 4 quadrants à 20px des bords
- Repositionnement du quadrant 4 à 120px du bas pour laisser de la place à la légende
- Repositionnement de la légende en bas à droite à 20px des bords
- La légende ne chevauche plus le quadrant 4
This commit is contained in:
syoul
2025-12-03 17:16:09 +01:00
parent e830bdb69c
commit 083c82eb1e
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
custom.css
View File

@@ -53,8 +53,8 @@ div[class*="label"][class*="position"] {
div[class*="labels"] > div[class*="label"][class*="position-1"], 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: 10px !important; left: 20px !important;
top: 10px !important; top: 20px !important;
right: auto !important; right: auto !important;
bottom: auto !important; bottom: auto !important;
margin: 0 !important; margin: 0 !important;
@@ -64,8 +64,8 @@ div[class*="label"][class*="position-1"] {
div[class*="labels"] > div[class*="label"][class*="position-2"], 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: 10px !important; right: 20px !important;
top: 10px !important; top: 20px !important;
left: auto !important; left: auto !important;
bottom: auto !important; bottom: auto !important;
margin: 0 !important; margin: 0 !important;
@@ -75,25 +75,26 @@ div[class*="label"][class*="position-2"] {
div[class*="labels"] > div[class*="label"][class*="position-3"], 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: 10px !important; left: 20px !important;
bottom: 10px !important; bottom: 20px !important;
right: auto !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 */
/* Positionné plus haut pour laisser de la place à la légende en bas */
div[class*="labels"] > div[class*="label"][class*="position-4"], 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: 10px !important; right: 20px !important;
bottom: 10px !important; bottom: 120px !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 et le quadrant 4 */
ul[class*="Legend_legend"], ul[class*="Legend_legend"],
ul[class*="legend"] { ul[class*="legend"] {
z-index: 1 !important; z-index: 1 !important;
@@ -106,13 +107,13 @@ ul[class*="legend"] {
max-width: 200px !important; max-width: 200px !important;
} }
/* Sur les grands écrans, ajuster la position de la légende */ /* Sur les grands écrans, positionner la légende en bas à droite, en dessous du quadrant 4 */
@media (min-width: 1200px) { @media (min-width: 1200px) {
ul[class*="Legend_legend"], ul[class*="Legend_legend"],
ul[class*="legend"] { ul[class*="legend"] {
right: 10px !important; right: 20px !important;
top: auto !important; top: auto !important;
bottom: 10px !important; bottom: 20px !important;
left: auto !important; left: auto !important;
transform: none !important; transform: none !important;
margin: 0 !important; margin: 0 !important;
@@ -126,7 +127,7 @@ ul[class*="legend"] {
left: 50% !important; left: 50% !important;
right: auto !important; right: auto !important;
transform: translateX(-50%) !important; transform: translateX(-50%) !important;
bottom: 10px !important; bottom: 20px !important;
top: auto !important; top: auto !important;
margin: 0 !important; margin: 0 !important;
} }