Design & couleur

[darcosion]

edit : liste des images d'exemple pour se simplifier la vie :

[darcosion]

Après une heure de scroll, j'ai retrouvé l'image de base :

ref : https://www.pushing-pixels.org/wp-content/uploads/2017/09/[email protected]

Il reste plus qu'à en extraire des couleurs de wigdet, background, effects & bordures :)

[darcosion]

En fouillant le CSS, je suis tombé sur ça qu'on a codé :

:root {
    --background-color-black: #010b0d;
    --background-gradiance1 : #050c12;
    --background-gradiance2 : #0d1718;
    --widget-blue1 : #3e908e;
    --widget-blue2 : #2b6b6a;
    --widget-blue3 : #4b948c;
    --widget-red1 : #5c202a;
    --widget-red2 : #371921;
    --text1 : #a5b0a9;
    --text2 : #abd6db;
  };

A priori, on a construit une palette de base, mais elle va devoir être amélioré.
edit : je viens de m'en servir, elle est loin d'être bonne, on doit l'améliorer absolument, voir revoir complètement son ensemble de couleur. Je suis même pas certains qu'elle correspond à l'attendu.

[darcosion]

L'interview d'où viens l'image de batman arkham asylum : https://www.pushing-pixels.org/2017/09/05/looking-beyond-the-edge-interview-with-khairul-keko-ahmed.html

[darcosion]

3 nuances de gris ajoutés dans cette issue : 3bc03c5

[darcosion]

Il y a beaucoup d'effets de style sur ce site dont on pourrais s'inspirer btw : https://portal.thenifty.com/

[darcosion]

Avec un peu de recherche, j'ai finit pas trouver un graphiste qui a travaillé de fou sur arkham, il a laissé sur son site des travaux d'exemple : https://www.nomadsolitude.com/#/batman-arkham-knight-screen-graphics/
absolument magnifique

[darcosion]

Cette couleur a été ajouté à la palette pour le texte en tout petit :

  --micro-text : #11998e; /* var(--micro-text) */

[darcosion]

J'ai finalement trouvé comment intégrer des couleurs CSS en variable avec de l'opacité :

--rgb-background-color-black: 1, 11, 13,; /* var(--rgb-background-color-black) */
background-color: rgba(var(--rgb-background-color-black), 0.8);

Voir 8198c9f

[darcosion]

J'ai trouvé comment charger dynamiquement les variables CSS, c'est assez sale par contre : 9ac7eed

Dans l'idée, il faut un chargement de contexte direct dans le scope :

Echosounder/static/main.js

Lines 463 to 465 in 9ac7eed

	// contexte couleurs
	$scope.rootColor = getComputedStyle(document.documentElement);
	console.log($scope.rootColor);

C'est pas très propre, mais j'ai pas mieux.

Ensuite, un appel de la sorte :

Echosounder/static/main.js

Line 1075 in 9ac7eed

'color' : $scope.rootColor.getPropertyValue('--text2'),