OK. I have made a flat medium-grey stylesheet in attachment. So far, I
just had problems to set the colors of the background and of some
modules (dropdown menus labels, sliders labels and borders).
We are not to far from being able to skin entirely DT.
*Aurélien PIERRE*
aurelienpierre.com <http://aurelienpierre.com>
------------------------------------------------------------------------
Le 25/10/2016 à 06:17, Tobias Ellinghaus a écrit :
Am Dienstag, 25. Oktober 2016, 06:06:25 CEST schrieb Aurélien PIERRE:
Yes, neutral = 18 % grey / 50 % luminance. So I guess there is no other
mean to change it but to recompile from the source ? Shouldn't the style
be separated from the code ?
Yes, there are many places with hard coded colors. And eventually they should
all be moved to the CSS file. But no one cared enough to do it yet.
Thanks anyways.
*Aurélien PIERRE*
aurelienpierre.com <http://aurelienpierre.com>
Tobias
[...]
PS: Please reply to the list only, I don't need every mail twice.
___________________________________________________________________________
darktable developer mailing list
to unsubscribe send a mail to darktable-dev+unsubscr...@lists.darktable.org
@define-color bg_color #7C7C7C;
@define-color plugin_bg_color #333;
@define-color fg_color #eee;
@define-color base_color #444;
@define-color text_color #eee;
@define-color selected_bg_color #666;
@define-color selected_fg_color #eee;
@define-color tooltip_bg_color #BEBEBE;
@define-color tooltip_fg_color #111;
@define-color really_dark_bg_color #595959;
@define-color dark_bg_color #7F7F7F;
@define-color border_color #595959;
* {
font: Sans, Droid Sans, Roboto Regular 9;
color: @fg_color;
background-color: @bg_color;
border-color: @border_color;
text-shadow:none;
/* margin: 0; */ /* this makes scroll bars super wide. */
padding: 0;
background-image: none;
}
GtkAlignment
{
background-color:transparent;
}
#main_window *:insensitive {
background-color: @bg_color;
color: @fg_color;
}
#iop-plugin-ui GtkBox,
#lib-plugin-ui GtkBox
{
background-color:transparent;
margin:0;
border:0;
padding:0;
color: @fg_color;
}
#iop-plugin-ui GtkEventBox,
#lib-plugin-ui GtkEventBox
{
background-color:transparent;
margin:0;
border:0;
padding:0;
color: @fg_color;
}
#iop-plugin-ui GtkStack
{
background-color:transparent;
margin:0;
border:0;
padding:0;
color: @fg_color;
}
#lib-plugin-ui GtkTreeView,
#lib-plugin-ui GtkComboBoxText *,
#lib-plugin-ui GtkComboBox *,
#lib-plugin-ui GtkComboBox GtkToggleButton *
{
background-color: shade(@selected_bg_color, 0.8); /* 'transparent' doesn't work for those it seems */
color: @fg_color;
}
#lib-plugin-ui GtkComboBox *:hover
{
background-color: shade(@selected_bg_color, 1.1); /* 'transparent' doesn't work for those it seems */
color: @fg_color;
}
/* bright background */
#background_job_eventbox,
#iop-plugin-ui GtkComboBox *
{
padding:0;
border:0;
margin:0;
background-color: shade(@plugin_bg_color, 1.3);
color: @selected_fg_color;
outline-style:none;
}
#iop-plugin-ui *:selected
{
padding:0;
border:0;
margin:0;
background-color: @selected_bg_color;
color: @selected_fg_color;
outline-style:none;
}
#lib-plugin-ui *
{
/* margin: 0; */ /* this makes scroll bars super wide on collections lib */
color: @selected_fg_color;
}
/* lib toggle buttons (e.g recently used collection and history items): */
/* TODO: adjust borders/padding to our liking (match bauhaus..) */
#lib-plugin-ui .button,
.button
{
/* note that the button has no padding, the label inside the button has the padding. */
border-radius: 0;
border-style: none;
box-shadow:none;
outline-width:0;
border-image:none;
padding:0;
margin:0;
border:0;
background-color: shade(@selected_bg_color, 1.3);
background-image: none;
}
#lib-plugin-ui .button:checked,
#iop-plugin-ui .button:checked,
.button:checked
{
border-style:none;
background-image:none;
background-color: shade(@selected_bg_color, 1.5);
}
#lib-plugin-ui .button:hover,
#iop-plugin-ui .button:hover,
.button:hover
{
border-style:none;
background-color: shade(@selected_bg_color, 1.7);
}
#iop-plugin-ui .button,
#iop-plugin-ui GtkButton {
background-color: transparent;
}
#iop-plugin-ui GtkLabel,
#iop-plugin-ui GtkLabel:hover,
#lib-plugin-ui GtkLabel,
#lib-plugin-ui GtkLabel:hover
{
padding: 2px;
background-color: transparent;
color: @selected_fg_color;
}
#iop-plugin-ui GtkLabel:selected,
#lib-plugin-ui GtkLabel:selected
{
background-color: shade(@selected_bg_color, 1.7);
color: @fg_color;
}
#iop-plugin-ui,
#lib-plugin-ui
{
border: 1px solid @border_color;
border-radius: 2px;
margin: 0px;
padding: 1px 4px 1px 4px;
background-color: @selected_bg_color;
color: @selected_fg_color;
}
#iop-plugin-ui:selected,
#lib-plugin-ui:selected
{
border: 1px solid @border_color;
border-radius: 2px;
margin: 0px;
padding: 1px 4px 1px 4px;
color: @selected_fg_color;
background-color: @selected_bg_color;
color: @selected_fg_color;
}
GtkTable {
background-color: @bg_color;
margin:0;
border:0;
padding:0;
}
#header_label,#darktable_label,#view_label {
color: @fg_color;
background-color: @bg_color;
margin:0;
border:0;
padding:0;
}
#view_label:hover {
color: @fg_color;
}
#view_dropdown:selected *,
#view_label:selected {
color: @fg_color;
}
#view_dropdown *
{
color: @fg_color;
margin: 0;
padding: 0;
font-size: 1.1em;
}
#view_dropdown .button *
{
font-size: 1.1em;
}
#view_dropdown *:insensitive
{
color: @fg_color;
}
#panel_label {
color: @fg_color;
background-color: @bg_color;
margin:0;
border:0;
padding:0;
}
#section_label {
padding-right: 0.5em;
border-bottom: 1px solid @fg_color;
}
#lib-modulelist * {
background-color: transparent;
color: @selected_fg_color;
}
GtkFrame > GtkEventBox {
border: 1px solid @border_color;
background-color: shade(@plugin_bg_color, 0.9);
color: @selected_fg_color;
}
GtkFrame > GtkEventBox * {
background-color: transparent;
color: @selected_fg_color;
}
/* weird fix for black event boxes in light table lib modules: */
#lib-plugin-ui GtkEventBox
{
background-color: @selected_bg_color;
color: @selected_fg_color;
}
#lib-plugin-ui .cell
{
background-color:shade(@selected_bg_color, 0.9);
color: @selected_fg_color;
}
#lib-plugin-ui row
{
background-color:@selected_bg_color;
color: @selected_fg_color;
}
#lib-plugin-ui row:selected,
#iop-plugin-ui row:selected
{
background-color:@bg_color;
color: @selected_fg_color;
}
/* due to css rubbish, we need to be more specific than anything else,
* so we give the name of the parent widget: */
#iop-plugin-ui .notebook,
#lib-plugin-ui .notebook,
#iop-plugin-ui .notebook tab,
#lib-plugin-ui .notebook tab {
border:0;
border-radius:0;
border-style:none;
box-shadow:none;
background-image:none;
outline-style:none;
outline-width:0;
border-image:none;
background-color: transparent;
color: @selected_fg_color;
}
#iop-plugin-ui .notebook tab:active,
#lib-plugin-ui .notebook tab:active {
background-color: @bg_color;
color: @selected_fg_color;
}
.scale
{
-GtkRange-slider-width: 11;
-GtkRange-trough-border: -3;
-GtkScale-slider-length: 11;
margin:0px;
}
.scale.trough.highlight
{
background-color:@selected_bg_color;
background-image:none;
}
#recent-collection-ui .button,
#history-ui .button
{
background-color: transparent;
}
.context-menu
{
background-color: @really_dark_bg_color;
}
.context-menu .menuitem *
{
background-color: transparent;
}
#main_window .context-menu .menuitem *:insensitive,
.context-menu .menuitem *:insensitive
{
color: @selected_fg_color;
background-color: transparent;
}
GtkMenuItem *
{
background-color: transparent;
color: @selected_fg_color;
}
GtkMenuItem
{
padding: 2pt;
background-color:@really_dark_bg_color;
}
GtkMenuItem:hover
{
background-color: shade(@selected_bg_color, 1.7);
}
/* sliders */
.slider.horizontal,
.slider.vertical {
border-color: @bg_color;
background-color: shade(@selected_bg_color, 1.2);
}
.slider.horizontal:hover,
.slider.vertical:hover {
border-color: @bg_color;
background-color: shade(@selected_bg_color, 1.5);
}
#iop-plugin-ui .slider.horizontal,
#iop-plugin-ui .slider.vertical,
#lib-plugin-ui .slider.horizontal,
#lib-plugin-ui .slider.vertical {
border-color: @selected_bg_color;
background-color: @text_color;
}
#iop-plugin-ui .slider.horizontal:hover,
#iop-plugin-ui .slider.vertical:hover,
#lib-plugin-ui .slider.horizontal:hover,
#lib-plugin-ui .slider.vertical:hover {
border-color: @selected_bg_color;
background-color: shade(@selected_bg_color, 1.5);
}
/* tooltip */
.tooltip
{
background-color: @really_dark_bg_color;
}
.tooltip *
{
color: @fg_color;
background-color: @really_dark_bg_color;
border-color: @selected_bg_color;
padding: 2px;
}
/* separator */
.separator, .separator:hover {
color: @selected_bg_color;
-GtkWidget-wide-separators: true;
-GtkWidget-separator-width: 2px;
-GtkWidget-separator-height: 2px;
border-style: solid;
border-width: 2px;
border-color: @selected_bg_color;
background-color: @selected_bg_color;
}
/* dialogs */
GtkDialog *
{
border-radius: 0;
border-style: none;
box-shadow:none;
outline-width:0;
border-image:none;
padding:0;
/* margin: 0; */ /* this makes scroll bars super wide. */
border:0;
background-color: @selected_bg_color;
/* background-image: none; */
border-color: @border_color;
color: @selected_fg_color;
}
GtkDialog .button *
{
padding: 5px;
background-color: shade(@bg_color, 1.7);
border-color: @border_color;
}
GtkDialog .button:hover *
{
background-color: shade(@selected_bg_color, 1.7);
border-color: @border_color;
}
GtkDialog .button GtkLabel
{
background-color: transparent;
}
GtkDialog GtkEventBox *
{
background-color: transparent;
color: @selected_fg_color;
}
GtkDialog GtkTreeView *:selected
{
background-color: shade(@selected_bg_color, 1.3);
color: @selected_fg_color;
}
GtkDialog GtkScrolledWindow
{
background-color: transparent;
}
GtkDialog .slider.vertical
{
background-color: shade(@selected_bg_color, 1.7);
}
GtkColorSwatch
{
background-color: transparent;
}
/* preferences notebook */
#preferences_notebook GtkGrid *
{
padding:0;
}
GtkNotebook tab *
{
padding: 2px;
color: @selected_fg_color;
}
GtkNotebook tab:hover
{
background-color: shade(@selected_bg_color, 1.7);
}
GtkNotebook tab:active
{
background-color: shade(@selected_bg_color, 1.3);
}
GtkNotebook GtkMenuItem
{
padding: 2pt;
background-color:@really_dark_bg_color;
color: @selected_fg_color;
}
GtkNotebook GtkMenuItem:hover
{
background-color: shade(@selected_bg_color, 1.7);
color: @selected_fg_color;
}
/* empty space at top/bottom of sidepanels when scrolled */
.undershoot.top,
.undershoot.bottom,
.undershoot.left,
.undershoot.right
{
background: none;
}
GtkAboutDialog
{
background-color: @bg_color;
color: @selected_fg_color;
}
GtkAboutDialog GtkBox,
GtkAboutDialog GtkBox *
{
background-color: @bg_color;
color: @selected_fg_color;
}
GtkAboutDialog GtkHeaderBar
{
padding: 2px;
}
GtkProgressBar *
{
background-color: @text_color;
}
GtkFileChooserDialog GtkEventBox
{
background-color: transparent;
}
GtkFileChooserDialog .sidebar-icon
{
padding: 0px 5px 0px 10px;
}
GtkFileChooserDialog .sidebar-row
{
padding-top: 3px;
}
GtkFileChooserDialog .sidebar-row:hover
{
background-color: shade(@selected_bg_color, 1.7);
}
.cell:selected
{
background-color: shade(@selected_bg_color, 1.3);
color: @selected_fg_color;
}
