Interface CSS

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é :slight_smile:

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

Source : Lightroom

Source : Luminar

Source : Lumiroom

Source : Middle-grey

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

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 :slight_smile:

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é.

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;
}[/code]

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

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;
}
[/code]

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

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.

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

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.

Je viens d’adapter mon code avec les nouvelles variables de la version 2.6

[code]@import ‹ darktable-original.css ›;

/** color palette **/
@define-color grey rgb(59,59, 59);
@define-color grey_dark rgb(48,48,48);
@define-color grey_darkest rgb(38,38,38);
@define-color grey_light rgb(138,138,138);
@define-color grey_lighter rgb(80,80,80);
@define-color grey_lightest rgb(200,200,200);

@define-color bg_color @grey;
@define-color plugin_bg_color @grey;
@define-color fg_color @grey_lightest;
@define-color base_color #ffffff;
@define-color text_color @grey_lightest;
@define-color selected_bg_color @grey_darkest;
@define-color selected_fg_color #e2e2e2;
@define-color tooltip_bg_color #000000;
@define-color tooltip_fg_color #ffffff;
@define-color really_dark_bg_color @grey_darkest;
@define-color darkroom_bg_color @grey_darkest;
@define-color darkroom_preview_bg_color @grey_darkest;
@define-color lighttable_bg_color @grey_darkest;
@define-color lighttable_preview_bg_color @grey_darkest;
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(black, .8);

@define-color bauhaus_fg @grey_lightest;
@define-color bauhaus_border @grey_dark;
@define-color bauhaus_bg @grey_light;
@define-color bauhaus_fg_insensitive @grey_light;

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

button {
background: @grey_lighter;
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;
}
[/code]

merci pour le partage, j’attend la mise à jour et je testerai

J’ai fait un peu évoluer mon style Lightroom CC et j’ai créé un autre style qui se rapproche de Luminar. Je ne sais pas lequel je préfère :confused:

Source Lightroom

Source Luminar

Perso je préfère celui du haut pour le mailleur contraste des titres de module et du texte en général !

Très beau travail. Je préfère aussi le premier pour les mêmes raisons. J’ajouterais aussi que je reste convaincu qu’un gris un peu plus clair autour de l’image est préférable. Pas un gris trop clair mais un gris moyen. Voir les fils de discussion que j’ai posté plus haut, les questions de contraste et de risque de fausser la vision de l’exposition de l’image. Les fonds sombres mettent plus en valeur l’image mais surtout pas ce que c’est plus flatteur (et marketing).
[hr]
Merci encore, j’ai fait évoluer mon CSS en reprenant les éléments de ton CSS qui me plaisaient. Voici ce que ça donne de mon côté :

[code]@import ‹ /usr/share/darktable/darktable.css ›;

/* Couleur de fond général*/
@define-color bg_color #454545;
/* Couleur des filets de séparation de modules*/
@define-color plugin_bg_color #fff;
@define-color plugin_bg_color2 #111;
/* Couleur des titres des modules*/
@define-color fg_color #D2D2D2;
/* ???/
@define-color base_color #ffffff;
/
Couleur de fond des barres de défilement /
@define-color text_color #3C3C3C;
/
Couleur de fond des options de modules*/
@define-color selected_bg_color #606060;
/* Couleur de certains textes dans les modules*/
@define-color selected_fg_color #f0f0f0;
@define-color tooltip_bg_color #BEBEBE;
@define-color tooltip_fg_color #111111;
/* Couleur du filet du cadre central*/
@define-color really_dark_bg_color #595959;
/* Couleur de fond du cadre central*/
@define-color darkroom_bg_color #696969;
@define-color darkroom_preview_bg_color shade(@darkroom_bg_color, .8);
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color lighttable_preview_bg_color shade(@lighttable_bg_color, .8);
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(black, .8);

@define-color bauhaus_fg @fg_color;
@define-color bauhaus_border #797979;
@define-color bauhaus_bg #E2E2E2;
@define-color bauhaus_fg_insensitive #E2E2E2;

progressbar *
{
background-color: @selected_bg_color;
}

  • {
    font: 8pt Sans;
    font-family: system-ui, BlinkMacSystemFont, « Segoe UI », « Roboto », « Oxygen », « Ubuntu », « Cantarell », « Fira Sans », « Droid Sans », « Helvetica Neue », sans-serif;
    color: @fg_color;
    background-color: @bg_color;
    border-color: #7F7F7F;
    text-shadow:none;
    /* margin: 0; / / this makes scroll bars super wide. */
    padding: 0;
    background-image: none;
    }

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

/* Séparateur de modules */
#iop-plugin-ui,#iop-plugin-ui:selected,
#lib-plugin-ui
{
border: 1pt solid #353535;
box-shadow: inset 0 0 1pt #3a3a3a;
border-radius: 5px;
margin: 0pt;
padding: 1pt 4pt 1pt 4pt;
color: @selected_fg_color;
background-color: @darkroom_bg_color;
}[/code]

J’ai adapté les deux en utilisant un gris 50% pour la zone de l’image. Et j’ai amélioré le contraste des textes sur la version « luminar ».

Source Lightroom

Source Luminar

Le fond haut avec le style des modules du bas (mixe)

Genre ça ? Le gris de la zone photo est un middle grey d’après Wikipedia

J’ai essayé de faire l’interface complètement en middle grey mais ça rendait beaucoup trop clair et moche :confused:

Source

merci, beau boulot,
cela me va, après tout chacun ces goûts :slight_smile:

Merci de partager ton boulot. Je vais ajouter un lien à la faq.