Part CSS à ajouter Trek Detail

GeotrekCE / Geotrek-rando-widget

Web components to display Geotrek content on any website

https://geotrek-rando-widget.readthedocs.io

MIT License

6 stars 1 forks source link

Part CSS à ajouter Trek Detail #140

Closed gbvt closed 2 months ago

gbvt commented 3 months ago

Certaines parts HTML / CSS ne sont pas accessibles, il faudrait les ajouter pour avoir avoir une charte graphique harmonisée. A ce jour j'ai noté :

sur le widget Trek Detail : les boutons de téléchargement GPX, PDF... Ce sont des balises a dans la part "links-container"
sur le widget Trek Detail : la couleur des numéros sur la Description. Ce sont des balises ol li ::before dans la part "description"

L'idéal serait de pouvoir rendre les boutons carrés (radius) à même titre que le bouton "Rendre disponible hors ligne" Et avoir la même couleur pour les numéros que la ligne en 2nd plan (ex : --color-primary-app)

gbvt commented 2 months ago

Petite note : le border-radius peut être géré via la variable globale CSS --border-radius, ce qui est une excellente chose pour avoir une homogénéité dans tout le site ! Nous l'avons géré comme ca, plutôt que chercher la part qui n'existe pas encore.

Toutefois, la couleur des chiffres du "pas à pas" ne semble pas contrôlée par une variable CSS, mais une valeur en dur : rgb(240, 65, 65) Ce serait plus simple à avoir une variable de couleur, comme tout le reste des éléments du widget.

bastyen commented 2 months ago

Je vais créer les parts concernées.

Concernant la couleur des chiffres du "pas à pas", je pense ajouter une variable globale CSS spécifique.

bastyen commented 2 months ago

Lors de la prochaine release, trois nouvelles parts seront disponibles download-kml-button, download-gpx-button et download-pdf-button.

Ainsi que deux nouvelles variables globales CSS --description-step-color et --description-step-background-color.

gbvt commented 1 month ago

Merci du dev, très pratique ! Par contre, il me semble que les noms des variables ont changé depuis ta dernière réponse. J'ai noté : --reference-point-background-color (couleur du cercle) --reference-point-color (couleur du texte)

Ca fonctionne bien !

bastyen commented 1 month ago

Effectivement, dorénavant, les deux nouvelles variables sont bien --reference-point-color et --reference-point-background-color au lieu de --description-step-color et --description-step-background-color.