Interface CSS

[aurelienpierre]

Je t'ai piqué ton design plat :

Code :

@import '/opt/darktable/share/darktable/darktable.css';

/** color palette **/
@define-color grey_darkest rgb(58, 58, 58);
@define-color grey_darker rgb(78, 78, 78);
@define-color grey_dark rgb(98, 98, 98);
@define-color grey_middle rgb(118, 118, 118);
@define-color grey_light rgb(138, 138, 138);
@define-color grey_lighter rgb(148, 148, 148);
@define-color grey_lightest rgb(248, 248, 248);

@define-color bg_color @grey_middle;
@define-color plugin_bg_color @grey_middle;
@define-color fg_color @grey_lightest;
@define-color base_color @grey_lightest;
@define-color text_color @grey_lightest;

@define-color selected_bg_color @grey_dark;
@define-color selected_fg_color @grey_dark;
@define-color tooltip_bg_color @grey_darker;
@define-color tooltip_fg_color @grey_lightest;
@define-color really_dark_bg_color @grey_darker;

@define-color darkroom_bg_color @grey_middle;
@define-color darkroom_preview_bg_color @grey_middle;
@define-color lighttable_bg_color @grey_middle;
@define-color lighttable_preview_bg_color @grey_middle;
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(black, .8);

@define-color bauhaus_fg @grey_lighter;
@define-color bauhaus_border @grey_middle;
@define-color bauhaus_bg @grey_dark;
@define-color bauhaus_fg_insensitive @grey_dark;

* {
   font-family: "Roboto Light", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   box-shadow:none;
   font-size: 9pt;
   border: none;
   box-shadow: none;
}


button {
  background: @grey_dark;
  border: none;
  border-radius: 1pt;
  padding: 0pt 2pt;
}


#iop-plugin-ui, #lib-plugin-ui  {
   border-color: @grey;
   background: @grey;
   border: 0pt;
   box-shadow: none;
   padding: 1pt 0;
   border-bottom: 1pt solid @grey_dark;
}


#iop-plugin-ui:selected, #lib-plugin-ui:selected {
   border-color:@grey;
   background: @grey;
   border: 0pt;
   box-shadow: none;
   padding: 1pt 0;
   border-bottom: 1pt solid @grey_dark;
}

#lib-plugin-ui * button,
button
{
 background-color: @grey_dark;
}

#iop-plugin-ui entry selection,
#lib-plugin-ui entry selection,
entry selection {
 background-color: @grey_darker;
}

#section_label
{
 border-bottom: 0.3pt solid @grey_lightest;
}

[benoitdupont]

J’ai hésité à faire toutes gris clair mais l’inteface ne me plaisait pas.

Tant mieux pour toi si ça te va

[aurelienpierre]

C'est moins sexy, mais je vois immédiatement que le ciel est sous-ex.

[benoitdupont]

J'avoue que niveau pratique pour le développement photo avoir un gris middle sur toute l'interface c'est ce qu'il y a de mieux.

---

Du coups j'ai refait l'autre style aussi. Juste le bouton en haut à droite à côté de darkroom que je n'arrive pas à rendre visible.

Source

[jpg54]

J'ai fait un lien dans la faq pour ce fil. Je viens de m'apercevoir que les liens vers certains de tes .css sont devenu obsolète. Il faudrait peut-être les mettre en lien permanent ?

[jpg54]

Le lien sur la Faq sans pouvoir avoir les sources ne sert pas à grand chose !
Quelqu'un aurait sauvé les différents scripts proposés sur ce fil pour que je puisse les mettre sur un téléchargement permanent ?

[jpg54]

C'est bon, @senpai me les a fourni, merci. Je les mettrais en téléchargement permanent à moins que l'auteur soit contre ?

[benoitdupont]

Désolé j'étais absent. J'éditerai mon premier post en faisant un résumé ainsi que les sources des scripts demain ou mardi.

[jpg54]

Ok, je les ai eu par @senpai, maintenant si tu veux mettre les sources dans ce fil de façon permanente, je peux te laisser faire ou je peux rééditer tes posts avec les adresses que tu me donnes ?
Pas besoin de t'excuser, c'est compréhensible en cette période de fêtes.

[DKT]

Je viens de regarder tout ça et moi si par exemple je prends le dernier code source de Benoitdupont je n'ai pas du tout la même apparence.
Voici ce que ça donne





et peut être qu'en écrivant ce à quoi correspondent les lignes pourrait être intéressant. J'essaie de m'y mettre.

Code :

/*curseur - pointe de flèche*/
   @define-color bauhaus_fg @grey_lightest;
/*curseur - filet des glissières*/
   @define-color bauhaus_border @grey_dark;
/*curseur - fond des glissières*/
   @define-color bauhaus_bg @grey_dark;