Interface CSS

[senpai]

Merci

[DKT]

Voilà, j'ai fait 4 sytles d'apparence.
ça peut être retravailler dans quelques détails mais tout n'est pas accessible pour modifier le css de base.

Peut être en ai je raté...



Pour ce qui est de la personnalisation de la ligne de curseur qui se trouve dans la partie basse de la table lumineuse, on peut y arriver en bricolant de la sorte , à condition que les autres filets soient gérer autrement, ce que j'ai fait:

Ajourter cette ligne

Code :

border-color: #votrecouleur;

à cet endroit

Code :

{
 font: 10pt Sans;
 color: @fg_color;

ICI

}

Pour le reste j'ai modifié la couleur de la trace du pinceau, qui d'origine est noire transparente, pour la mettre en jaune. Ce me semble plus naturel, puisque c'est celle du masque que l'on créé.

J'ai aussi autant que j'ai pu, notifié chaque ligne de code ou presque pour que ce soit plus clair.

Voilà, je vous livre ça dans l'immédiat peut être que d'ici la 2.8 je re-modifierais encore les codes pour simplifer en laissant que les lignes modifiées/modifiables.

Tout les espaces de travail de la chambre noire et de la table lumineuse sont en gris moyen LAB.

En cliquant sur chaque image vous pourrez télécharger les css.

Après Chacun son mauvais goût.


Une première version que j'avais tenté en partant de Lightroom





une version typée Lightroom, plus proche, mais darktable n'étant pas conçu comme LR il y a donc  des limites.


 



Une version allant vers Capture One et à la fois aux couleurs de mon club photo





et une pour ceux qui veulent tout en gris moyen... là j'ai travailler en utilisant le gris moyen de LAB et celui de TSL

[nicoauffray]

Beau travail. C'est avec ces images à la suite je trouve que l'on peut voir que le gris moyen est certes moins sexy mais surtout moins flatteur à l'oeil. Mais aussi plus juste quand à l'impression visuelle des photos et leur exposition.

[Roger]

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;

J'aime beaucoup également (HS puis j'aimerai bien prendre un héron comme ça à 166mm plus souvent, affut?)

J’aime bien la dernière de DKT aussi même si je trouve les écritures un poil moins lisibles (mais j'ai pas de bon yeux  non plus)

[DKT]

Voilà, mon dernier post, je ne ferais que suivre le forum et le blog sans écrire. Certains seront rassurés et je jure que ce n'est ni moi ni une de mes connaissances qui a lancé ce sujet.

Merci @ jpverrue, @pixtolero, @andy costanza, @jpg54, @Pascal, @Aurélien, et que les autres que je ne cite pas me pardonnent. Je vous remercie du boulot que vous faites même si j'ai parfois des avis qui vous contrarient.

Mais comme je tiens mes promesses, voici un thème "gris moyen" avec le css classé du mieux que j'ai pu. Tout ce qui peut être parametrable du css, l'est dans ce code ci-joint.
J'ai aussi bien anoté, je pense les lignes de css, comme ça il est facile pour chacun de jouer les coloristes.
La table lumineuse est de couleur très claire pour que ça ressemble à une vraie, la page selectionnée est mise en valeur plus grosse.
Il y a une ligne qui selectionne "my_color" qui modifiera tout une partie de petits détails à votre convenance. (attention de ne pas rentrer dans le kitche)
lorsque vous passer la "brosse" dans masque dessiné, la trace est jaune, pour être plus proche de la couleur d'affichage des masques.
et j'en passe...


Forcement il y a des limites :
Il y a des choses, qui ne collent pas partout et il faut avoir accès au code en dur pour les modifier, comme le texte qui se trouve dans le header qui n'a pas les mêmes correspondances pour le css que le reste du texte ou des titres, c'est génant car la gestion de ces textes est la même que quelques flêches ou petits boutons...
Je n'ai pas trouver non plus, le moyen de laissser plus d'espace entre le texte et les glissières dans les modules de la chambre noire (trop serrés).
Biensûr ces "critiques" s'auto-détruiront dans les 5 secondes après que vous les ayez lu, votre mission si vous l'accepté...

Ce codes fourni est basé, sur un gris moyen LAB

Voici l'aspect de la table lumineuse



Voici l'aspect de la chambre noire




et voici une petite variante légère avec une pointe de couleur ( pas fournie dans le code)



Il y a quelques traductions en anglais que je n'ai pas faites, désolé....


Voici ce code

Code :

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

/**___________________________________________
GENERAL COLORS - COULEURS GÉNÉRALES
___________________________________________**/

/* My personal color- ma couleur perso*/
@define-color my_color #4e4e4e;

/* global background - fond global*/
@define-color bg_color #777; /*TSL 50%*/

/* couleur des barres de séparation de modules...........................................................................................................;*/
@define-color plugin_bg_color blue;

/*Windows selected in the boxes - fenetres de selections dans les box et une partie des survols de la souris*/
@define-color selected_bg_color #777;


/* Couleur des menu déroulant et des fenêtres d'information*/
@define-color really_dark_bg_color shade(@fg_color, 0.6);

/*cellules dans les menus déroulants*/
#lib-plugin-ui menuitem *,
#iop-plugin-ui menuitem *,
menuitem *
{
 background-color: shade(@fg_color, .6);
}

/* scrollbar color - couleur des ascenceurs*/
@define-color asc_color alpha(white, .3);

/* color buttons hover - couleur boutons au survol*/
@define-color selected_bt_color #5f5f5f;


/*Couleur des petits boutons et du texte dans le bandeau*/

* {
 color: shade(@bg_color, .5);
}


/**___________________________________________
SPECIFIC TO THE LIGHTTABLE - SPÉCIFIQUE À LA TABLE LUMINEUSE
___________________________________________**/


/*background of work aeras in lighttable - fond de la zone de travail dans la table lumineuse*/
@define-color lighttable_bg_color #d5d5d5;
@define-color lighttable_preview_bg_color shade(@lighttable_bg_color, .5);

/*Color of the footer cursor and other nets as in preferences - Couleur du curseur bas de page et d'autres filets comme dans les préférences*/
* {  border-color: alpha(@my_color, .7);
}
/**___________________________________________
SPECIFIC TO THE DARKROOM - SPÉCIFIQUE À LA CHAMBRE NOIRE
___________________________________________**/

/* background of work areas in darkroom - fond de la zone de travail dans la chambre noire*/
@define-color darkroom_bg_color #777; /*TSL 50%*/
@define-color darkroom_preview_bg_color shade(@darkroom_bg_color, .5);

/* couleurs des curseurs de modules dans la chambre noire*/
@define-color bauhaus_fg @my_color;
@define-color bauhaus_border alpha(@my_color, .7);
@define-color bauhaus_bg @bg_color;


/*Pipette color - couleur des pipettes*/
@define-color bauhaus_fg_insensitive @my_color;


/*Color of the brush tool * couleur de la brosse - masque */
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(Yellow, .7);

/**___________________________________________
TEXT - TEXTES
___________________________________________**/

/*Text size - Taille générale des caractères*/
* {
   font:medium Sans;
}

/*CColor General text - Couleur Texte général*/
@define-color fg_color #d0d0d0;

alignment
{
 background-color:transparent;
}


/* certains texte de modules lorsque l'action est desactivée*/
#main_window *:disabled {
 color: shade(@fg_color, .6);
}

/* titres des modules*/
#panel_label
{
 color: alpha(@my_color, 1.2);
 background-color: @bg_color;
 margin:0;
 border:0;
 padding:0;
}

#header_label,#darktable_label,#view_label,#view_dropdown *
/*titres des pages non validés - table lumineuse - chambre noire - etc.*/
{
 color: shade(@bg_color, .6);
 margin:0;
 border:0;
 padding:0;
}


#view_dropdown *:disabled
{

 color: shade(@bg_color, .6);
}

/*titres des pages validés - table lumineuse - chambre noire - etc.*/
#view_dropdown *:selected,
#view_label:selected {
font-size: 1.7em;
 color: shade(@fg_color, 0.9);
}

/**___________________________________________
BUTTON - BOUTONS
___________________________________________**/

/* General buttons  - Boutons généraux*/
#lib-plugin-ui * button,
button
{
 
 outline-width:0;
 border-image:none;
border-radius: 2pt ;
 padding:2pt;
 margin:0;
 border-bottom:1px solid shade(@bg_color, .8);
 border-left:1px solid shade(@bg_color, 1.2);
 background-color: @bg_color;
 min-height: 10pt;
 min-width: 10pt;
}

/* Couleur des bouttons au survol*/
#lib-plugin-ui * button:hover,
#iop-plugin-ui * button:hover,
button:hover
{
 background-color: shade(@bg_color, .9);
}

/* boutton selectionné*/
#lib-plugin-ui * button:checked,
#iop-plugin-ui * button:checked,
button:checked
{
 background-color: shade(@selected_bg_color, 1.2);
}

/**___________________________________________
BOXES and MODULES - BOX et MODULES
___________________________________________**/
/* frame around plugin boxes */
/* couleur des box des modules*/

#iop-plugin-ui,
#iop-plugin-ui:selected,
#lib-plugin-ui
{
 border: 0;
 box-shadow: inset 0 0 3pt #3c3c3c;
 border-radius: 3pt ;
 margin: 2pt;
 padding: 2pt 1pt 2pt 1pt;
 background-color: shade(@bg_color, .9);
}


/* trait de séparation "option de fusion" */
#section_label
{
 padding-right: 0.5em;
 border-bottom: 1pt solid @my_color;
}


/*cellules d'entrées de texte*/
#iop-plugin-ui entry,
#lib-plugin-ui entry,
entry {
 border-radius: 3px;
 padding-left: 3px;
 border-style: none;
 border-image:none;
 color:@fg_color;
 box-shadow: none;
 background-image:none;
 outline-style:none;
 text-shadow:none;
 background-color:shade(@selected_bg_color, .8);
 min-height: 0;
 min-width: 0;
}

#iop-plugin-ui entry selection,
#lib-plugin-ui entry selection,
entry selection {
 background-color:shade(#ccc, 1.7);
 min-height: 0;
 min-width: 0;
}
/* weird fix for black event boxes in light table lib modules: */
#lib-plugin-ui eventbox
{
 background-color:@selected_bg_color;
}
#lib-plugin-ui cell
{
 background-color:shade(@selected_bg_color, 0.8);
}
#lib-plugin-ui row
{
 background-color:@selected_bg_color;
}
#lib-plugin-ui row:selected,
#iop-plugin-ui row:selected
{
 background-color:@bg_color;
}



/*ascenceurs*/

#lib-plugin-ui scrollbar slider,
#iop-plugin-ui scrollbar slider,
scrollbar slider
{
   border-color: transparent;
   background-color: @asc_color;
}



#lib-plugin-ui menuitem:hover,
#iop-plugin-ui menuitem:hover,
menuitem:hover
{
 background-color: shade(@selected_bg_color, 1.7);
}

/* sliders */


#iop-plugin-ui scrollbar.horizontal,
#iop-plugin-ui scrollbar.vertical,
#lib-plugin-ui scrollbar.horizontal,
#lib-plugin-ui scrollbar.vertical {
   border-color: @selected_bg_color;
   background-color: @asc_color;
}



/* tooltip */

tooltip
{
 background-color: @really_dark_bg_color;
}
tooltip *
{
 color: @fg_color;
 background-color: @really_dark_bg_color;
 border-color: @selected_bg_color;
 padding: 2pt;
}

[jpverrue]

Beau travail !

[jpg54]

Excellent boulot qui manquait. Merci d'avoir partager.

[rawfiner]

Ouah beau boulot ! Merci 
Ça va être bien utile !

[mimi85]

Même si je garde mes réglages (voir plus haut dans le fil) c'est bon de savoir ce que l'on fait plutôt que d'y aller à taton comme je l'ai fait.
Merci du travail

[nicoauffray]

Bravo DKT pour ce travail et merci. C'est un travail que j'avais commencé mais pas encore terminé. Ça manquait en effet !