Interface CSS

Merci

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

 border-color: #votrecouleur;

à cet endroit

[code]{
font: 10pt Sans;
color: @fg_color;

ICI

}[/code]

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. :rolleyes:

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

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.

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)

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).
[size=x-small]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é…[/size]

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

[/code]

Beau travail !

Excellent boulot qui manquait. Merci d’avoir partager.

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

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

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

Merci @benoitdupont pour la mise à disposition et le partage de tes sources de façon permanente. Désolé pour ce message avec retard, ça fait un moment que je n’ai pas édité tout ce fil. :cool:

Je viens d’essayer le style de @nicoauffray en Windows 10 en remplaçant la ligne d’import par « @import ‹ C:\Program Files\darktable\share\darktable\darktable.css › » Apparemment ça fonctionne sans souci et le style me plait beaucoup.

Merci pour le partage

Bizarre, je viens de faire la même chose avec le .css proposé par DKT. J’ai pas vraiment un résultat acceptable : https://darktable.fr/forum/showthread.php?tid=1219&pid=29445#pid29445
Je vais essayer avec ce .css.

Au temps pour moi, j’ai posté trop vite : en fait j’ai les mêmes soucis que toi, j’ai aussi testé sans la ligne d’import, le résultat est différent mais encore pire. En fait (sans être du tout sur de moi) j’ai l’impression que dans les 2 cas le remplacement des paramètres non spécifiés explicitement dans le fichier du répertoire « user » ne fonctionne pas bien. Désolé pour la confusion.

Je viens d’essayer :

avec :

[code]@import ‹ C:\Program Files\darktable\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]

Et avec :

@import 'c:/progra~1/dar ... css'

Pas fier de moi sur ce coup là … Merci Pascal, ça marche !

Coup classique de l’espace dans le nom de fichier :slight_smile: Bon c’est un bug car avec les guillemets ça aurait dû marcher!
[hr]
A mettre dans la FAQ?

L’erreur était en fait le backslash au lieu du slash entre les répertoires et pas l’espace dans le nom de fichier. En copiant/collant la ligne de code de jpg54 je n’avais pas fait gaffe. Sinon ça fonctionne avec l’espace dans le nom de fichier.

Ah ok, effectivement sinon il faut mettre deux \… les joies de Windows qui a choisi comme séparateur de fichier le caractère d’échappement du C :frowning: