Interface CSS

Accueil et communauté Actualités
21

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

22

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

Tant mieux pour toi si ça te va :slight_smile:

23

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

24

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.
[hr]
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

25

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 ?

26

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 ?

27

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

28

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

29

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.

30

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.

/*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;

31

En général, quand les icônes prennent une telle taille, c’est le chemin du CSS complet (celui par défaut dans le dossier de darktable) qui est mauvais ou absent (c’est le cas de la source de benoit).

Il doit y avoir au tout début de ton CSS personnalisé la ligne suivante (attention, assures-toi bien que le chemin indiqué correspond bien, sinon il te faut savoir où est installé darktable pour mettre le bon chemin) :

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

Pour que ce soit plus clair, ton fichier CSS personnalisé doit commencer par cette ligne pour charger toutes les lignes correspondant à l’affichage par défaut afin de s’assurer que tout s’affiche correctement. En dessous tu ajoutes les lignes CSS que tu changes et qui remplaceront donc les lignes correspondant du fichier par défaut, donnant alors l’affichage personnalisé voulu.

32

Je mets mon css, comme pour la 2.4 dans .config/darktable/ et je viens de regarder le css que j’avais avec la 2.4 il n’y a pas de ligne de ce genre.

Je viens de coller cette ligne au dessus du code pris sur la source de benoitdupont

@import '/home/dkt/.config/darktable/darktable.css';

Mais ça ne change rien. J’ai toujours les gros icônes.
[hr]
Par contre ce qui est étonnant c’est que lorsque je copie ton code pris page 2 - #15,
ça modifie bien correctement je pense l’aspect de darktable. Mais le plus étonnant c’est que la fameuse ligne est

[color=#9933ff] @import ‹ /usr/share/darktable/darktable.css ›;[/color]

[color=#9933ff][color=#333333]alors que mon fichier est placé à l’adresse[/color][/color]
[color=#9933ff]home/dkt/.config/darktable/[color=#9933ff]darktable.css’;[/color][/color]
:huh:

33

C’est là que tu ne comprends pas la différence. Si tu visualises le fichier /usr/share/darktable/darktable.css, tu constateras qu’il est plus complet. Il ne faut surtout pas le modifier (il est remplacé à chaque mise à jour puisque fait partie du paquet complet du logiciel.

Le CSS dans ton home… est lui ta version personnalisée. Tu dois vraiment mettre, dans ton CSS situé dans le dossier /home…, le fichier darktable du logiciel en première ligne (donc le chemin /usr…) et en dessous tes paramètres personnalisés.

La ligne @import sert à appeler un fichier externe au fichier dans lequel tu ajoutes cette ligne. Et il est important d’appeler le fichier CSS originel du logiciel pour s’assurer d’avoir l’interface qui s’affiche correctement, avant d’ajouter les éléments personnalisés en dessous. Je me répète sûrement un peu ici mais j’espère que ça en deviendra plus clair pour toi. En gros, cette première ligne n’est pas là pour signaler l’adresse de son fichier CSS mais celle du CSS complet par défaut. Et le CSS complet par défaut est dans /usr/share/darktable… sur ton système.

34

En m’inspirant de différents fils sur le sujet, et par tâtonnement, voici mon interface avec contraste sur les textes, fond gris derrière les images.

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

@define-color bg_color #666666;
@define-color plugin_bg_color #535353;
@define-color fg_color #eee;
@define-color base_color #444;
@define-color text_color #eee;
@define-color selected_bg_color #404040;
@define-color selected_fg_color #aabbcc;
@define-color tooltip_bg_color #BEBEBE;
@define-color tooltip_fg_color #111;
@define-color really_dark_bg_color #9F9F9F;

@define-color darkroom_bg_color #777777;
@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 dark_bg_color #353535;[/code]

35

Merci Nicoauffray pour cette précision … Je comprends mieux.

Bon, je n’étais sûrement pas net pour avoir raconté des co… hier sur le gris moyen.

Alors ce matin , mieux réveillé (hum) au boulot je me suis pris d’une idée de contrôle vite faite entre le gris moyen de Photoshop et le gris moyen de Lightroom. (ceux qu’on a dans les préférences pour l’apparence des fenêtres)

et voilà les choses étonnantes :

Pour LR

pour PSD

36

Quelqu’un sait il comment modifier le curseur à droite du menu déroulant « Navigateur de fichier / table lumineuse zoom »?

c’est le seul truc que je n’ai pas trouvé, alors que ça fait 2 heures que je trifouille le css pour le trouver.. mais je fais choux blanc.

37

Pas mieux, j’avais cherché un moment de même que pour l’affichage du menu à côté de « chambre noire » (benoit aussi) et sans succès. Je ne sais effectivement pas quel balise. Il se peut que ce soit une des rares parties désormais encore codée en dur. Mais ça, seuls les développeurs devraient pouvoir y répondre.

Pour le gris moyen, plusieurs choses selon moi :

  • entre les 2 logiciels que tu montres, le gris affiché peut varier si le profil couleur (profil ICC) n’est pas le même pour l’affichage.
  • selon les sources et sites, en RGD, le gris moyen est noté entre 117 et 128. Mais les plus sérieux me semble être autour de 117 à 120.
38

Non, le profil icc entré dans PSD ou LR n’influe pas sur l’interface mais seulement sur la photo. L’interface elle se gere avec le profil de l’ordi.

Le gris moyen en fait n’a pas de valeur définie.
Si on prend un gris moyen basé donc 50% sur le L de LAB on a un RGB à 119.
Si on prends un gris moyen à 50% sur le L de TSL on à un RGB à 128.

Hors là, dans mon exemple on peut constater que entre LR et PSD on une différence énorme quand bien même tu aurais un profil icc qui ferait bouger les choses.

Pour le curseur je crois que j’y suis déja arrivé mais je ne sais plus comment… mais je l’aurais., je l’aurais :rolleyes:

39

Salut mimi85,
Belle interface, c’est possible de préciser c’est pour quel version ? 2.6 ?
Merci

40

senpai a écrit:

Version 2.6 sous Ubuntu 18.04. Écran calibré avec Spider 5 pro.

Pour ceux que ça intéresse, voici un lien qui permet de choisir précisément ses couleurs est d’avoir directement la traduction HEXA ou RGB ou décimal:

http://www.proftnj.com/RGB3.htm