Interface CSS

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