Interface CSS

[benoitdupont]

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;
}

[senpai]

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

[benoitdupont]

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

Source Lightroom

Source Luminar

[dlink]

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

[nicoauffray]

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

Source Lightroom

Source Luminar

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

---

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;
}

[benoitdupont]

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

[senpai]

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

[benoitdupont]

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

Source

[senpai]

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

[jpg54]

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