Interface CSS

[benoitdupont]

Hello,

Je suis développeur web et je m'y connais en CSS. Je trouve l'interface de Darktable pas vraiment à mon goût comparée à Lightroom CC et Luminar qui ont un style plus actuel. 

J'aimerai tenter de réécrire une feuille de style depuis 0. Mais comment faire pour connaître tous les éléments CSS que je peux "viser". Il y a un t'il un moyen de voir toutes les nominations des éléments car dans le darktable.css c'est un peu le bordel et pas facile de repartir à 0 en se basant sur ce code.

Quel éditeur je peux utiliser pour visualiser l'interface et le nom des éléments sachant que je suis sur MacOS.


Merci de m'aider car je pense que ce logiciel mériterai une interface un peu plus léchée et plus de publicité


EDIT : Récapitulatif des styles qui ont été proposés.


Source : Lightroom




Source :  Luminar





Source : Lumiroom




Source : Middle-grey

[pascal]

Aucune idée sous MacOS. Sous GNOME je peux lancer darktable avec l'inspecteur activé:

Code :

export GTK_DEBUG=interactive

Cela permet de voir le CSS et tous les éléments de l'interface via un explorateur intégré à GNOME.

Sinon, ta proposition de refaire l'interface est une très bonne nouvelle! Si tu as besoin de cibler des éléments précis tu peux demander ici pour que l'on ajoute des noms aux éléments si possible. Dans la 2.6 (qui va très prochainement sortir) on a fait un effort (Mathieu et moi même) pour éviter tous les codages de couleur en dur dans le code, il en reste peut-être encore...

[benoitdupont]

Aucune idée sous MacOS. Sous GNOME je peux lancer darktable avec l'inspecteur activé:

Code :

export GTK_DEBUG=interactive

Cela permet de voir le CSS et tous les éléments de l'interface via un explorateur intégré à GNOME.

Sinon, ta proposition de refaire l'interface est une très bonne nouvelle! Si tu as besoin de cibler des éléments précis tu peux demander ici pour que l'on ajoute des noms aux éléments si possible. Dans la 2.6 (qui va très prochainement sortir) on a fait un effort (Mathieu et moi même) pour éviter tous les codages de couleur en dur dans le code, il en reste peut-être encore...

Cette commande fonctionne aussi sur MacOS je viens de tester, merci

Je ne promets rien pour le restylage c'est juste une idée que j'ai en tête mais je n'ai pas beaucoup de temps libre donc ne vous attendez pas à quelque chose en retour. 
Par contre si je m'en sors je partagerai ce que j'ai fait de mon côté.

[benoitdupont]

Bon c'est vraiment très très dur de styler précisément des objets.

J'ai travaillé sur la partie globale mais aussi sur la partie darkroom.

J'arrive pas à gérer la taille des textes lorsqu'on ouvre les modules. Tout comme j'aimerai changer la couleur du bandeau d'un module lorsqu'il est ouvert mais impossible de trouver.

Supprimer la bordure épaisse de la partie principale de l'application je n'y arrive pas non plus. Je trouve pas l'élément à viser.

J’arrive pas non plus à rétablir une taille correcte pour les icônes.

Voici un exemple de petits changements que j'ai appliqué sur une soirée.

Code :

@define-color bg_color rgb(59,59, 59);
@define-color plugin_bg_color #252525;
@define-color fg_color #cacaca;
@define-color base_color #ffffff;
@define-color text_color #3C3C3C;
@define-color selected_bg_color #353535;
@define-color selected_fg_color #e2e2e2;
@define-color tooltip_bg_color #000000;
@define-color tooltip_fg_color #ffffff;
@define-color really_dark_bg_color #111;
@define-color darkroom_bg_color #333333;
@define-color darkroom_preview_bg_color shade(@darkroom_bg_color, .5);
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color lighttable_preview_bg_color shade(@lighttable_bg_color, .5);
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(black, .8);

@define-color bauhaus_fg #ccc;
@define-color bauhaus_border #191919;
@define-color bauhaus_bg alpha(@bauhaus_border, 0.2);
@define-color bauhaus_fg_insensitive alpha(@bauhaus_fg, 0.5);


* {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-size: 11px;
}

window {
   background: rgb(59,59, 59);
}

button {
   background: rgb(80, 80, 80);
   border: none;
}


/** supprimer bordures entre les modules droite **/
#iop-plugin-ui  > border  {
   border-color: rgb(59,59, 59);
    background:rgb(59,59, 59);
}



#iop-plugin-ui:selected > widget  {
   background: rgb(43,43,43);
   border-bottom-right-radius:5px;
   border-bottom-left-radius:5px;

}


scrollbar {
   background:none;
   border:none;
}

[nicoauffray]

Bon c'est vraiment très très dur de styler précisément des objets.

J'ai travaillé sur la partie globale mais aussi sur la partie darkroom.

J'arrive pas à gérer la taille des textes lorsqu'on ouvre les modules. Tout comme j'aimerai changer la couleur du bandeau d'un module lorsqu'il est ouvert mais impossible de trouver.

Supprimer la bordure épaisse de la partie principale de l'application je n'y arrive pas non plus. Je trouve pas l'élément à viser.

J’arrive pas non plus à rétablir une taille correcte pour les icônes.

Voici un exemple de petits changements que j'ai appliqué sur une soirée.

La taille des textes, c'est dans le fichier darktablerc (voir l'excellent doc "Les fichiers de configuration" via le menu "Apprendre" du site darktable.fr).

Pour les icônes, c'est lié mais ça peut aussi être lié au fait que ton css perso n'est pas lié au css par défaut. Tu le lies via une 1ère ligne dans ton css perso avec un : @import /chemin du css par défaut. Bien sûr, on ne modifies pas directement le css par défaut (il est écrasé à chaque mise à jour du logiciel). Voir également dans le doc ci-dessus pour savoir où sont tous les fichiers de config.

Pour la bordure épaisse de la partie principale, je ne sais pas ce qui la code mais si tu fais bien attention (et si tu parles bien de celles à gauche et droite uniquement sur la table lumineuse), elle sert à indiquer où tu es dans ta table lumineuse (un "curseur" plus foncé se déplace si tu défiles tes photos sur la table).

Les fils de discussion suivant devraient t'intéresser :
https://darktable.fr/forum/showthread.php?tid=2297
https://darktable.fr/forum/showthread.php?tid=1219

[benoitdupont]

Je pense que je vais abandonner, c'est vachement trop restrictif de bosser avec de tels sélecteurs. À la base l'idée de pouvoir faire varier le look de l'application avec du CSS est chouette mais avant de pouvoir appliquer sa feuille de style il faut contrer les styles appliqués par darktable.css et encore un niveau au dessus par le theme GTK.

* Je n'arrive pas à changer le style des checkbutton et on ne les voit presque pas avec mes modifications.
* J'aimerai également tenter de forcer les intitulés des modules en majuscule mais text-transform n'est pas reconnu. 
* Je voulais modifier l'espacement entre un slider et le texte qui lui correspond mais pas possible de viser le sélecteur qui correspond. L'analyseur GTK me dit juste "widget".

Voici mon style pour celui qui veut tester ce que ça donne. 

Code :

@import 'darktable-original.css';

@define-color bg_color rgb(59,59, 59);
@define-color plugin_bg_color rgb(59,59, 59);
@define-color selected_bg_color rgb(43,43,43);
@define-color darkroom_bg_color rgb(38,38,38);
@define-color darkroom_preview_bg_color @darkroom_bg_color;
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color really_dark_bg_color @darkroom_bg_color;
@define-color fg_color rgb(199,199,199);


* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}


button {
   background: rgb(80, 80, 80);
   border: none;
    border-radius: 5px;
}


#iop-plugin-ui, #lib-plugin-ui  {
    border-color: @bg_color;
    background: @bg_color;
    border-bottom: 2px solid @selected_bg_color;
}


#iop-plugin-ui:selected, #lib-plugin-ui:selected {
    border-color:@bg_color;
    background: @bg_color;
    border-bottom: 2px solid @selected_bg_color;
}

[pascal]

Je vois que tu es en version 2.4.4, la version 2.6 permet de configurer plus d'éléments.

[aurelienpierre]

Je pense que je vais abandonner, c'est vachement trop restrictif de bosser avec de tels sélecteurs. À la base l'idée de pouvoir faire varier le look de l'application avec du CSS est chouette mais avant de pouvoir appliquer sa feuille de style il faut contrer les styles appliqués par darktable.css et encore un niveau au dessus par le theme GTK.

* Je n'arrive pas à changer le style des checkbutton et on ne les voit presque pas avec mes modifications.
* J'aimerai également tenter de forcer les intitulés des modules en majuscule mais text-transform n'est pas reconnu. 
* Je voulais modifier l'espacement entre un slider et le texte qui lui correspond mais pas possible de viser le sélecteur qui correspond. L'analyseur GTK me dit juste "widget".

Voici mon style pour celui qui veut tester ce que ça donne. 

Code :

@import 'darktable-original.css';

@define-color bg_color rgb(59,59, 59);
@define-color plugin_bg_color rgb(59,59, 59);
@define-color selected_bg_color rgb(43,43,43);
@define-color darkroom_bg_color rgb(38,38,38);
@define-color darkroom_preview_bg_color @darkroom_bg_color;
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color really_dark_bg_color @darkroom_bg_color;
@define-color fg_color rgb(199,199,199);


* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}


button {
   background: rgb(80, 80, 80);
   border: none;
    border-radius: 5px;
}


#iop-plugin-ui, #lib-plugin-ui  {
    border-color: @bg_color;
    background: @bg_color;
    border-bottom: 2px solid @selected_bg_color;
}


#iop-plugin-ui:selected, #lib-plugin-ui:selected {
    border-color:@bg_color;
    background: @bg_color;
    border-bottom: 2px solid @selected_bg_color;
}

N'abandonne pas, c'est chouette ce que tu as fait. Essaie avec la 2.6, si ça ne marche pas Pascal, Matthieu et moi on peut essayer d'exposer plus de sélecteurs en jouant direct dans le code. Ça ne se fera pas en 2 jours, mais ça en vaut la peine.

[jpg54]

Ca semble sympa, je vais l'essayer, merci pour le partage. N'abandonne pas surtout.

[nicoauffray]

Je pense que je vais abandonner, c'est vachement trop restrictif de bosser avec de tels sélecteurs. À la base l'idée de pouvoir faire varier le look de l'application avec du CSS est chouette mais avant de pouvoir appliquer sa feuille de style il faut contrer les styles appliqués par darktable.css et encore un niveau au dessus par le theme GTK.

* Je n'arrive pas à changer le style des checkbutton et on ne les voit presque pas avec mes modifications.
* J'aimerai également tenter de forcer les intitulés des modules en majuscule mais text-transform n'est pas reconnu. 
* Je voulais modifier l'espacement entre un slider et le texte qui lui correspond mais pas possible de viser le sélecteur qui correspond. L'analyseur GTK me dit juste "widget".

Beau travail, n'abandonne surtout pas en effet, d'autant que la nouvelle version permet encore plus de modifications CSS. Ton style est superbe, je t'ai repris plusieurs choses.

Ce fil (et même les 2 autres que j'ai cité plus haut) me sembleraient mieux dans la rubrique "Ressources". Avis aux modérateurs et créateurs du fil... En tout cas, ces 3 fils de discussion autour de l'interface via le CSS méritent leur place dans la FAQ. Une mise à jour au moins de ce côté-là à envisager.