/*
    This file is part of darktable,
    copyright (c) 2019 Aurélien Pierre.

    darktable is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    darktable is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with darktable.  If not, see <http://www.gnu.org/licenses/>.
*/

/*** This has been tested with GTK 3.24 on Gnome ***/

/*--------------------------------------
  - Perceptually uniform grey gradient -
  --------------------------------------*/

/* grey_00 = pure black is forbidden for visual assessment */
@define-color grey_00 #000000;
@define-color grey_05 #111111;
@define-color grey_10 #1b1b1b;
@define-color grey_15 #262626;
@define-color grey_20 #303030;
@define-color grey_25 #3b3b3b;
@define-color grey_30 #474747;
@define-color grey_35 #525252;
@define-color grey_40 #5e5e5e;
@define-color grey_45 #6a6a6a;
@define-color grey_50 #777777;
@define-color grey_55 #848484;
@define-color grey_60 #919191;
@define-color grey_65 #9e9e9e;
@define-color grey_70 #ababab;
@define-color grey_75 #b9b9b9;
@define-color grey_80 #c6c6c6;
@define-color grey_85 #d4d4d4;
@define-color grey_90 #e2e2e2;
@define-color grey_95 #f1f1f1;
@define-color grey_100 #ffffff;
/* grey_100 = pure white is forbidden for visual assessment */


/*** General rules :

  * keep just enough contrast in the UI to make text readable, but not
  too much to avoid distractions from the picture,
  * avoid sharp and unnecessary details for the same reason (shadows,
  borders, colors, fancy bits). Use plain shapes and flat design.
  * keep 50 % distance between background and foreground colors for active controls
  * keep 30 % distance between background and foreground colors for labels and info
  * keep 10 % distance between background and foreground colors for insensitive controls
  * events are ± 20 % from the normal color
  * borders and accents are ± 5 % from the background
  * buttons and control follow Google Material Design principles :
    https://material.io/design/
  * create optical margins by aligning content properly, not by using borders.
***/

/*--------------------------------------
  - Define default colors and settings -
  --------------------------------------*/

/* General */
@define-color selected_bg_color @grey_35; /* legacy stuff */
@define-color border_color @grey_10; /* border, when used */
@define-color bg_color @grey_15; /* general background */
@define-color fg_color @grey_70; /* general text */
@define-color base_color @fg_color; /* legacy stuff */
@define-color text_color @grey_05; /* same */
@define-color disabled_fg_color @grey_40; /* disabled controls */

/* Scroll bars (sliders) */
@define-color scroll_bar_inactive @grey_40;
@define-color scroll_bar_active @grey_50;
@define-color scroll_bar_bg @grey_10;

/* Modules box (plugins) */
@define-color plugin_bg_color @grey_20;
@define-color plugin_fg_color @grey_70;
@define-color section_label @grey_60;
@define-color plugin_label_color @grey_65;

/* Modules controls (sliders and comboboxes) */
@define-color bauhaus_bg @grey_15;
@define-color bauhaus_fg @grey_70;
@define-color bauhaus_border shade(@plugin_bg_color, 0.5);
@define-color bauhaus_indicator_border @grey_20;
@define-color bauhaus_fill @grey_40;
@define-color bauhaus_bg_hover @grey_55;
@define-color bauhaus_fg_hover @grey_90;
@define-color bauhaus_fg_selected @grey_80;
@define-color bauhaus_fg_disabled alpha(@bauhaus_fg, 0.4);
@define-color bauhaus_fg_insensitive alpha(@bauhaus_fg, 0.4);

/* GTK Buttons and tabs */
@define-color button_border @grey_30;
@define-color button_bg @grey_25;
@define-color button_fg @grey_65;
@define-color button_checked_bg @grey_45;
@define-color button_checked_fg @grey_85;
@define-color button_hover_bg @grey_55;
@define-color button_hover_fg @grey_15;

/* text fields */
@define-color field_bg @grey_15;
@define-color field_fg @button_fg;
@define-color field_active_bg @grey_25;
@define-color field_active_fg @grey_75;
@define-color field_selected_bg @grey_40;
@define-color field_selected_fg @button_checked_fg;
@define-color field_hover_bg @grey_45;
@define-color field_hover_fg @grey_95;

/* Tooltips and contextual helpers */
@define-color tooltip_bg_color @grey_15;
@define-color tooltip_fg_color @grey_65;
@define-color really_dark_bg_color @grey_05;
@define-color log_fg_color @grey_85;

/* Views */
@define-color darkroom_bg_color @grey_45;
@define-color darkroom_preview_bg_color @grey_35;
@define-color print_bg_color @darkroom_bg_color;
@define-color lighttable_bg_color @darkroom_bg_color;
@define-color lighttable_preview_bg_color @darkroom_preview_bg_color;
@define-color lighttable_bg_font_color @grey_75;

/* Lighttable and film-strip */
@define-color thumbnail_font_color @grey_25;
@define-color thumbnail_bg_color @grey_50;
@define-color thumbnail_star_bg_color @grey_35;
@define-color thumbnail_fg_color @grey_55;
@define-color thumbnail_bg50_color @grey_100;
@define-color thumbnail_selected_bg_color @grey_60;
@define-color thumbnail_hover_bg_color @grey_80;
@define-color thumbnail_hover_fg_color @grey_85;
@define-color filmstrip_bg_color @darkroom_bg_color;
@define-color thumbnail_localcopy_color @grey_75;

/* Brushes */
@define-color brush_cursor alpha(white, .9);
@define-color brush_trace alpha(black, .8);

/* Graphs : histogram, navigation thumbnail and some items on tone curve */
@define-color graph_bg @grey_10;
@define-color graph_border @grey_05;
@define-color graph_fg @grey_75;
@define-color graph_fg_active @grey_95;
@define-color graph_grid @grey_05;
@define-color inset_histogram alpha(@grey_65, 0.50);

/* Reset GTK defaults - Otherwise dt inherits Adwaita default theme dark */
*
{
  background-color: @bg_color;
  background-image: none;
  color: @fg_color;
  font-size: 1em;
  font-family: sans-serif;
  text-shadow:none;
  box-shadow:none;
  padding: 0;
  margin: 0;
  border: 0;
  outline-style:none;
  min-width: 0;
  min-height: 0;
}

/* Be sure now than all others UI widgets doesn't inherit font size already set and have no background color on start */
#lib-plugin-ui,
#iop-plugin-ui,
#lib-modulelist,
#modules-tabs,
#left,
#right,
combobox,
combobox *,
togglebutton,
togglebutton *,
notebook,
notebook *,
notebook tab,
notebook tab *,
table,
table *,
row,
row *,
frame,
frame *,
filechooser,
filechooser *,
filechooserdialog,
filechooserdialog *,
alignment,
entry,
entry *,
textview,
textview *,
dialog,
dialog *,
colorswatch,
colorswatch *,
stack,
stack *,
scrollbar,
scrollbar *,
scale,
scale *,
button,
button *,
treeview,
treeview *,
menu,
menu *,
separator,
eventbox,
eventbox *,
box,
box *
{
  font-size: 1em; /* avoid changing this settings or you will made the UI quite awful (too big or too small) */
  background-color: transparent;
}

/*----------------------
  - General properties -
  ----------------------*/

*:disabled
{
  color: @disabled_fg_color;
}

/* Sets outer borders that could be hide or shown in darktable with 'b' shortcut.
  remember, in gui/gtk.c, outer borders (active areas used to collapse panels)
  are defined to 5 px × DPI. We cheat by setting inner borders/spacing here to 5 px as well. */
#outer-border
{
  background-color: @border_color;
  min-width: 20px;
}
#resize-border
{
  background-color: #ff0000;
}

/* Default gtk buttons */
button,
#add-color-button
{
  padding: 2px;
  border: 1px solid @button_border;
  background-color: @button_bg;
  color: @button_fg;
  font-weight: normal;
  font-family: sans-serif;
  min-height: 1em;
  min-width: 1em;
  padding: 2px;
}

button:disabled,
#add-color-button:disabled
{
  border: 1px solid shade(@button_border, 0.95);
}

/* Default extra margin for icons optical alignment */
#button-canvas
{
  margin: 5px; /* not real pixels, this is used as a percent extra space */
}

/* Set same settings on all those items */
button,
#add-color-button,
#dt-icon,
entry,
textview
{
  border-radius: 3px;
}

/* Default text fields and text boxes */
entry,
textview
{
  border: 0.5px solid @border_color;
  color: @field_fg;
  background-color: @field_bg;
  min-height: 0;
  min-width: 0;
  padding: 0px;
}

entry
{
  margin: 2px 0;
}

entry selection
{
  background-color: @field_selected_bg;
}

/* Checkbox */
checkbutton check
{
  background-color: @bauhaus_bg;
  color: @bauhaus_fg;
  border: 1px solid @border_color;
}

checkbutton check:checked
{
  background-color: @field_selected_bg;
  color: @field_selected_fg;
}

/* Button to open/close the dropdown section, especially header ones */
#control-button,
#control-button:checked
{
  background-color: transparent;
  margin: 0;
  border: 0;
}

/* Separator */
separator
{
  color: @border_color;
  border-style: solid;
  border-left-width: 1px;
  border-color: transparent;
  background-color: transparent;
}

separator:hover
{
  color: @button_border;
}

/* Avoid having too much empty space at top/bottom of sidepanels when scrolled */
undershoot,
undershoot.top,
undershoot.bottom,
undershoot.left,
undershoot.right,
overshoot,
overshoot.top,
overshoot.bottom,
overshoot.left,
overshoot.right
{
  background: transparent;
  border:none;
}

/*------------------------
  - Main header settings -
  ------------------------*/

/* Labels in views */
#header_label,
#darktable_label,
#view_label,
#view_dropdown
{
  background-color: transparent;
  font-size: 1.5em;
  margin:0;
  border:0;
  padding:0;
}

/* Views links in header */
#view_dropdown,
#view_label
{
  background-color: transparent;
  outline-style:none;
  border-radius: 2px;
  padding: 0.4em;
  color: @section_label;
}

#view_label
{
  margin: 0.1em 0;
}

/*------------------------------
  - Header and footer toolbars -
  ------------------------------*/

#header-toolbar,
#footer-toolbar
{
  padding: 0.20em 0.40em;
}

/* Set toolbars buttons in lighttable and darkroom */
#header-toolbar #dt-toggle-button,
#header-toolbar #dt-button,
#footer-toolbar #dt-toggle-button,
#footer-toolbar #dt-button
{
  padding: 0.07em;
  min-height: 2.56em; /* align toolbox button height on comboboxe's one */
  min-width: 2.56em;
  border: 0;
  font-size: .7em;
}

#header-toolbar #button-canvas,
#footer-toolbar #button-canvas
{
  margin: 12px; /* not real pixels, this is used as a percent extra space */
}

#footer-toolbar #lib-label-colors #button-canvas
{
  margin: 16px; /* not real pixels, this is used as a percent extra space */
}

#dt-icon
{
  border-radius: 2px;
}

/* Rating stars on left footer toolbar on lighttable view */
#lib-rating-stars
{
  min-height: 1em;
  min-width: 9em;
  margin-right: 1em;
}

/*---------------------------
  - Side panels and modules -
  ---------------------------*/

/* Frame around modules boxes */
/*** NOTE: bauhaus controls inherit their font properties from there ***/
#lib-plugin-ui,
#iop-plugin-ui
{
  color: @plugin_fg_color;
  background-color: @plugin_bg_color;
}

#iop-plugin-ui-main,
#lib-plugin-ui-main,
#blending-box
{
  padding: 0.75em;
}

/* icon buttons in modules main body */
#iop-plugin-ui-main #dt-button,
#iop-plugin-ui-main #dt-toggle-button,
#iop-plugin-ui-main #keep-active,
#lib-plugin-ui-main #dt-button,
#lib-plugin-ui-main #dt-toggle-button,
#blending-box #dt-button,
#blending-box #dt-toggle-button,
#blending-box #show_mask_button,
#blending-box #keep-active
{
  min-height: 1.3em;
  min-width: 1.3em;
  border: 0;
}

/* exception: non-flat buttons */
#iop-plugin-ui-main #non-flat,
#lib-plugin-ui-main #non-flat
{
  min-height: 1.3em;
  min-width: 1.3em;
  padding: 1px;
}

/* Size of control-buttons an duplicate module ones */
  /* control-buttons are: filter in collect images, filter in header toolbar and arrow in filmic */
#iop-plugin-ui-main #control-button,
#lib-plugin-ui-main #control-button,
#header-toolbar #control-button
{
  min-height: 1em;
  min-width: 0.9em;
  padding: 0.15em;
  margin: 0.15em;
}

#control-button #button-canvas,
.duplicate-ui #button-canvas
{
  margin: 12px; /* not real pixels, this is used as a percent extra space */
}

/* Adjust add button in picker module */
.picker-module button
{
  padding: 0 3px;
}

/* Set history (darkroom) and recent collections (lighttable) modules, that make use of a
   list of GTK buttons, to not look like action buttons */
#recent-collection-button,
#history-button,
#history-button-enabled,
#history-button-always-enabled,
#history-button-default-enabled
{
  background-color: transparent;
  border-color: transparent;
  border: 0;
  font-weight: normal;
}

#history-number
{
  padding-right: 4px;
  font-family: monospace;
}

/* Precise default buttons margins on side panels */
#iop-plugin-ui button,
#lib-plugin-ui button
{
  margin: 2px;
}

/* Buttons in modules header, near the module name */
#module-preset-button,
#module-reset-button,
#module-enable-button,
#module-instance-button,
#module-enable-button,
#module-collapse-button,
#module-always-enabled-button,
#module-always-disabled-button
{
  /* background-color: transparent; this doesn't work */
  min-height: 1.15em;
  min-width: 1.15em;
  padding: 0.06em;
  border: 0;
  margin: 0 1px;
}

#module-header #button-canvas
{
  margin: 12px; /* not real pixels, this is used as a percent extra space */
}

/* Gradient sliders */
.dt_gslider,
.dt_gslider_multivalue
{
  min-height: 1.7em;
  margin: 0;
  border: 0;
  padding: 0.25em 0.6em;
}

/* Entries options in lighttable */
#left #lib-plugin-ui entry /* this will avoid having too much height on entry items in filter collections modules */
{
  margin: 8px 0px;
}

#left #lib-plugin-ui scrolledwindow entry /* this will avoid having too much height on entry items in clone manager without touching other parts of the UI */
{
  padding: 0px;
  margin: 45px 3px;
  min-width: 100px;
}

#right #lib-plugin-ui entry /* this will adjust entry height on right panel */
{
  padding: 1px;
}

/* Set modules name header */
#module-header
{
  padding: 0.5em 0.5em 0.5em 0.5em;
}

/* Labels in modules */
#iop-panel-label,
#lib-panel-label
{
  background-color: @bg_color;
  color: @plugin_label_color;
  border:0;
  padding: 0 2px 2px 0.45em;
  font-weight: normal;
  font-family: sans-serif;
  font-size: 1.1em;
}

.dt_module_focus #iop-panel-label/* set focus mode */
{
  color: shade(@plugin_label_color, 1.2);
}

/* Labels of controls sections in modules */
#section_label
{
  margin: 0 0 8px 0;
  padding: 0 0 5px 0;
  color: @section_label;
  border-bottom: 0.5px solid  @section_label;
  font-weight: 500;
  font-family: sans-serif;
}

#iop-plugin-ui #section_label,
#lib-plugin-ui #section_label
{
  margin: 12px 0 6px 0;
}

#iop-plugin-ui #section_label.section_label_top,
#lib-plugin-ui #section_label.section_label_top
{
  margin: 2px 0 6px 0;
}

/* Special modules: image infos, navigation and search ones */
#image-info
{
  font-size: 1.1em;
  padding: 0.25em;
}

#navigation-module
{
  background-color: @graph_bg;
}

#search-box
{
  margin: 0.25em 0.5em;
}

#search-box label
{
  margin-right: 0.5em;
}

/*------------------
  - Dialog windows -
  ------------------*/

/* Set default settings */
dialog
{
  background-color: @plugin_bg_color;
  color: @plugin_fg_color;
}

dialog decoration  /* allow to resize dialog windows */
{
  margin: 1px;
}

dialog .dialog-vbox
{
  margin: 6px;
}

dialog filechooser
{
  margin-left: -6px; /* remove left margin only on dialog filechooser box */
}

dialog .dialog-vbox scrolledwindow
{
  margin: 4px 0;
  padding: 0;
}

/* Set title headerbar and main buttons */
dialog button
{
  padding: 2px;
  margin: 1px 2px;
}

dialog headerbar
{
  background-color: @border_color;
  margin: 0;
  padding: 0.2em 0.6em;
}

dialog headerbar button
{
  padding: 1px 5px;
}

/* Set specific content */
dialog scrolledwindow
{
  padding: 0 1px 0 8px;
  margin: 0;
}

frame#import_metadata
{
  margin: 6px 6px 0px 6px;
  padding: 0px 4px;
}

frame#import_metadata title *
{
  font-weight: bold;
}

frame#import_metadata label
{
  margin: 4px 3px 4px 2px;
  padding: 0px;
}

frame#import_metadata entry
{
  margin: 2px 3px 2px 2px;
  padding: 0px;
}

frame#import_metadata checkbutton
{
  margin: 0px;
  padding: 0px;
}

/* Set import from camera or card dialog window */
dialog .dialog-vbox notebook stack /* set top margin ; between tabs and text below */
{
  margin-top: 4px;
}

dialog .dialog-vbox notebook stack box box > label  /* set code project name on first tab */
{
  font-size: 0.90em;
  font-weight: bold;
  padding-top: 5px;
}

dialog .dialog-vbox notebook stack box box checkbutton,  /* fix margins on last line on second tab */
dialog .dialog-vbox notebook stack box box entry
{
  margin: 2px 0;
}

dialog .dialog-vbox notebook stack box box checkbutton label  /* fix a margin on last line on second tab */
{
  padding: 2px 6px 2px 0;
  font-size: 1em;                 /*reset to default font size and weight to avoid apply settings set few lines above */
  font-weight: normal;
}

/*----------------------------------------
  - Context menu & tooltips & comboboxes -
  ----------------------------------------*/
/*** Basically everything that pops out/over on UI ***/

combobox,
combobox button
{
  border: 1px solid transparent;
  padding: 1px;
  background-color: transparent;
  border-radius: 4px;
  color: @bauhaus_fg;
  outline-style: none;
  min-height: 1em;
  min-width: 1em;
}

combobox entry
{
  margin: 0 0.5em;
}

combobox *
{
  min-height: 1em;
  min-width: 1em;
}

context-menu,
menu,
menuitem > menu, /* sub-menu */
menuitem arrow,
tooltip,
popover,
combobox window,
dialog combobox window
{
  opacity: 1;  /* this is needed for tooltip on/off feature with Shift+t shortcut */
  background-color: @tooltip_bg_color;
  border-radius: 4px;
  border: 0;
  outline-style: none;
  min-height: 0.4em;
  min-width: 0.4em;
  padding: 0.2em;
}

tooltip
{
  border: 1px solid shade(@tooltip_bg_color, 1.5);
  border-radius: 0;
}

tooltip label
{
  color: @tooltip_fg_color;
}

combobox label
{
  margin: 0 5px 0 0;
}

/* Menus options */
menuitem button,
popover button,
tooltip button
{
  background-color: transparent;
}

menuitem check
{
  border-radius: 2px;
  border: 1px solid shade(@tooltip_bg_color, 4);
  min-width: 10px;
  min-height: 10px;
  margin-right: 5px;
}

/* Header and footer combobox */
#header-toolbar combobox,
#footer-toolbar combobox
{
  margin: 0 0.5em;
}

/*----------------------
  - GTK Notebooks tabs -
  ----------------------*/

notebook tabs,
#modules-tabs,
#blending-tabs
{
  color: @button_fg;
  font-weight: normal;
  font-family: sans-serif;
  border: 0;
  padding: 0;
  margin: 0;
}

#modules-tabs,
#blending-tabs
{
  background-color: @button_border;
}

#modules-tabs #dt-toggle-button
{
  min-height: 2em;
  min-width: 2em;
  margin: 0;
  padding: 0.1em;
  border: 0;
}

#modules-tabs #button-canvas
{
  margin: 12px; /* not real pixels, this is used as a percent extra space */
}

#blending-tabs button
{
  font-size: 0.8em;
  min-height: 1.55em;
  min-width: 1.55em;
  padding: 0.45em;
  margin: 0;
  border: 0;
}

/* Do not apply border-radius to group modules icons and masks icons */
#modules-tabs #dt-toggle-button,
#blending-tabs button
{
  border-radius: 0;
}

/* Set notebook tabs */
notebook tab
{
  border-bottom: 2px solid transparent;
  padding: 3px;
  font-weight: normal;
}

notebook tab label /* disabled tabs */
{
  color: shade(@button_checked_fg, 0.75);
  font-weight: normal;
}

notebook header /* add space between notebook tabs and options below */
{
  margin-bottom: 6px;
}

/*--------------------------------------------------------
  - Bauhaus controls (sliders and comboboxes in modules) -
  --------------------------------------------------------*/

#bauhaus-popup
{
  background-color: @really_dark_bg_color;
  color: @bauhaus_fg;
}

#bauhaus-popup:selected
{
  color: @bauhaus_fg_selected;
}

#bauhaus-combobox,
#bauhaus-slider
{
  min-height: 1em;
  background-color: transparent;
  color: @bauhaus_fg;
}

/*--------------------------
  - GTK sliders and scales -
  --------------------------*/
/*** WARNING : sliders IN modules are bauhaus (from a custom lib in darktable), not standard GTK sliders (see below) ***/

#lib-plugin-ui scrollbar slider,
#iop-plugin-ui scrollbar slider,
scrollbar slider,
dialog scrollbar slider
{
  background-color: @scroll_bar_inactive;
  border: 2px solid transparent;
  margin: 0;
  min-width: 6px;
  min-height: 6px;
}

scale contents trough
{
  background-color: @scroll_bar_bg;
  border-radius: 2px;
  min-width: 0.5em;
  min-height: 0.5em;
}

scale entry
{
  background-color: @field_bg;
}

scale contents trough highlight
{
  min-height: 0;
  min-width: 0;
  background-color: @button_bg;
}

scale contents trough slider
{
  border: 0.5px solid @border_color;
  font-size: 1em;
  min-height: 0.5em;
  min-width: 0.5em;
  background-color: @scroll_bar_inactive;
}

scrollbar,
dialog scrollbar
scrollbar,
#iop-plugin-ui scrollbar,
#lib-plugin-ui scrollbar,
dialog scrollbar
{
  border-color: @scroll_bar_bg;
  background: @scroll_bar_bg;
  border-radius: 5px;
  min-height: 6px;
  min-width: 6px;
  margin: 1px;
}

/*--------------------------
  - Accels window reminder -
  --------------------------*/

.accels_window_cat_title
{
   background-color: transparent;
   font-weight: bold;
   font-size: 1.1em;
   padding: 10px 0px;
}

.accels_window_list label
{
   font-weight: bold;
   font-size: 0.9em;
   padding-top: 1px;
   padding-right: 10px;
}

.accels_window_box treeview
{
   background-color: transparent;
}

.accels_window_stick
{
  min-width: 1.8em;
  min-height : 1.8em;
}

/*---------------------------------------------------------------
  - Preferences dialog window options (and filechooser sidebar) -
  ---------------------------------------------------------------*/

#preferences_notebook *
{
  margin: 0px; /* reset default dialog margin to all items. And needed to have an hover and selected effect on all width of categories in sidebar */
}

#preferences_notebook decoration  /* allow to resize preferences dialog window */
{
  margin: 1px;
}

/* Set preferences margins in main part */
#preferences_box box grid,
#preferences_box scrolledwindow
{
  padding: 10px 15px 5px 15px;
}

#preferences_box stack viewport
{
  padding-right: 5px;
}

/* Edit CSS view on preferences dialog window */
#usercss_box
{
  border: 1px inset @border_color;
  background-color: @bg_color;
  margin: 10px 25px 20px 25px;
  padding: 10px;
}

#usercss_box scrolledwindow
{
  margin: 0;
  padding: 0;
}

/* Set text */
#preferences_notebook scrolledwindow label
{
  min-height: 1.5em;
}

#preferences_notebook scrolledwindow #pref_section > label  /* sub-category title in main content */
{
  font-size: 1.2em;
  font-weight: bold;
}

#preferences_notebook scrolledwindow #pref_section  /* top margin in sub-category title in main content */
{
  margin-top: 1.1em;
}

#preferences_notebook scrolledwindow #pref_section:first-child  /* reset top margin in first sub-category title in main content */
{
  margin-top: 0;
}

/* Just add spacing between label settings and setting beside */
#preferences_notebook stack widget label
{
  margin-right: 25px;
}

/* This will avoid having too much height on entry items in dialog windows; label and button are needed as they are related */
#preferences_notebook stack label,
#preferences_notebook stack entry,
#preferences_notebook stack textview
{
  padding: 2px;
  margin: 1px 0;
}

#preferences_notebook combobox,
#preferences_notebook spinbutton
{
   min-width: 180px;
}

#preferences_notebook button
{
  margin: 0 2px;
  padding: 0 2px;
}

/* Set buttons and search field on presets and shortcuts control buttons */
#preferences_box #shortcut_controls,
#preferences_box #preset_controls
{
  margin: 5px 15px 15px 15px;
}

#preferences_box #shortcut_controls
{
  margin-left: 5px;
}

/*---------------------------------------------------------------
  - Set sidebars settings on preferences window and filechooser -
  ---------------------------------------------------------------*/

/* Set default sidebars settings */
filechooser .sidebar,
#preferences_box .sidebar scrolledwindow
{
  padding: 0px; /* needed to have an hover and selected effect on all width of categories in sidebar */
  font-size: 1.1em;
  background-color: @bg_color;
}

#preferences_box .sidebar row
{
  padding: 5px;
}

/* Set lines states */
filechooser .sidebar-icon,
filechooser .sidebar-label
{
  padding: 4px 6px 4px 10px;
}

filechooser .sidebar-button
{
  margin-right: 4px;
}

filechooser row
{
  margin-top: -4px; /* be sure to not have empty space on top of row for hover and selected effects */
}

filechooser .sidebar row:selected,
filechooser .sidebar row:selected:hover .sidebar-label,
#preferences_box .sidebar row:selected,
#preferences_box .sidebar row:selected:hover label
{
  color: @fg_color;
  background-color: @plugin_bg_color;
}

#preferences_box .sidebar row,
#preferences_box .sidebar row:selected
{
  border-left: 2px solid @plugin_bg_color; /* be sure border is set but not visible if category on sidebar not selected but keep same size and type for selected category ; color needs to be same as sidebar scrolledwindow background-color few lines above */
}

filechooser row:selected .sidebar-icon,  /* set icon instead of border for filechooser dialog window */
filechooser row:hover .sidebar-icon
{
  color: @button_hover_fg;
  background-color: @field_hover_bg;
}

#preferences_box .sidebar row:selected
{
  border-left-color: @field_hover_bg;   /* make the border left visible with choosed color if category on sidebar is selected */
}

filechooser row:hover,
#preferences_box .sidebar :hover  /* be sure border is set but same color as background-color hover effect and for same reason as just above */
{
  border-left-color: @button_hover_bg;
  background-color: @button_hover_bg;
}

#preferences_box .sidebar label
{
  padding: 2px 12px;
}

#preferences_box separator  /* reset border size to avoid having space between row in sidebar */
{
  border: 0px;
}

/*--------------------------------
  - Tree view (lists and tables) -
  --------------------------------*/
/*** Set treeview header on all windows, including preferences and accels window ***/
treeview,
filechooser widget treeview
{
  background-color: @field_bg;
  color: @field_fg;
}

treeview header button,
#preferences_notebook header button,
.accels_window_list header button
{
  background-color: @button_bg;
  color: @button_fg;
  border: 0px;
  border-radius: 0px;
  padding: 0px;
  margin: 0px 0.5px 0px 0px;
}

treeview header label,
#preferences_notebook header button label,
.accels_window_list header button label
{
  font-weight: bold;
  padding: 2px 6px;
  margin: 0px;
}

/*------------
  - Map view -
  ------------*/

/* Set how to display result list on find location module */
#dt-map-location > *
{
margin: 2px;
}

#dt-map-location label
{
padding: 2px;
}

#dt-map-location
{
border-bottom: 1px solid @button_border;
}

#dt-map-location:hover
{
  background-color: @field_hover_bg;
}

#dt-map-location:hover label
{
  color: @field_hover_fg;
}

/*---------------
  - Other stuff -
  ---------------*/
/*** Some tags below inherit from properties above ; so avoid moving that part ***/

/* Progress bar on bottom left side when exporting, importing, etc... */
#background_job_eventbox /* background of export progress bar */
{
  background-color: @plugin_bg_color;
}

#background_job_eventbox label
{
  margin: 1px 4px;
}

#background_job_eventbox #dt-button
{
  border: 0;
}

progressbar *
{
  background-color: @selected_bg_color;
  border-radius: 0;
}

progressbar progress
{
  background-color: @darkroom_bg_color;
  border-radius: 4px;
}

/* Be sure to have minimum width allowed for infos on images infos module if reducing panel width */
#brightbg
{
  min-width: 80px;
  padding-left: 2px;
  padding-bottom: 1px;
}

/* Checkbutton check state */
#lib-plugin-ui checkbutton check,
#iop-plugin-ui checkbutton check,
checkbutton:not(#import_metadata) check
{
  margin: 5px 8px 5px 0;
}

/* Set selected cell */
cell:selected
{
  background-color: shade(@selected_bg_color, 1.2);
}

/* Be sure to align correctly widget for parametric blending options in modules */
#blending-box #section_label
{
  margin: 0 0 8px 0;
}

/* Set specific padding for export module spinbutton */
#export-max-size spinbutton
{
  padding: 0px 5px;
}

/* Set below spacing between history items in darkroom */
/* the label buttons */
#left #history-button,
#left #history-button-enabled,
#left #history-button-always-enabled,
#left #history-button-default-enabled
{
  padding: 1px 2px 2px 2px;
  margin: 0px 1px 1px 1px;
}

/* then the switches */
#left #history-switch,
#left #history-switch-enabled,
#left #history-switch-always-enabled,
#left #history-switch-default-enabled,
#left #history-switch-deprecated
{
  font-size: 0.6em;
  min-width: 1.2em;
  min-height: 1.2em;
  padding: 0.15em;
  margin: 1px 2px 2px 2px; /* align switches with create style icon */
  border: 0;
}

#left #history-switch-deprecated
{
  font-size: 0.5em;
}

/* Set color bar min height in colorzones module */
#iop-bottom-bar
{
    min-height: 1.2em;
}

/* Set messages shown on bottom middle of the UI. For example "loading image..." or "working on..." */
#log-msg,
#toast-msg
{
  color: @log_fg_color;
  font-size: 1em;
  font-weight: bold;
  background-color: rgba(75,75,75,0.6);
  padding: 8px 20px;
  border-radius: 8px;
}

 /* then set infos shown on top of the image on darkroom, like for example opacity in drawn masks */
#toast-msg
{
  padding: 2px 14px 4px 14px;
  border-radius: 0 0 8px 8px;
}

/* Set some specific fonts */
#live-sample-data,
#usercss_box textview
{
  font-family: monospace;
}

/*---------------------
  - Set color pickers -
  ---------------------*/

/* the main color picker button */
#color-picker-button
{
  min-height: 2em;
  min-width: 1.7em;
  border: 0;
}

/* Module in darkroom left panel */
#color-picker-area
{
  min-height: 7em;
  min-width: 7em;
}
.picker-module combobox,
.picker-module combobox button
{
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
}

#live-sample
{
  padding: 2px;
  min-height: 1em;
  min-width: 3em;
}

/* Color picker visibility for levels and rgb levels modules.
   be careful to not change that unless you really now what you do */
#picker-black
{
  color: @grey_00;
  min-height: 1.3em;
  border: 0;
}

#picker-grey
{
  color: @grey_50;
  min-height: 1.3em;
  border: 0;
}

#picker-white
{
  color: @grey_100;
  min-height: 1.3em;
  border: 0;
}

/*------------------------------------------------------------------
  - Pseudo-classes : need to be defined last to not be overwritten -
  ------------------------------------------------------------------*/
/*** All states options are designed below, active, hover, selected, disabled and check states ***/

/* Main states */
button:active,
button:checked,
button:selected,
menuitem:active,
menuitem:selected,
combobox window *:active,
combobox window *:selected,
#history-button:active,
#history-button-enabled:active,
#history-button-always-enabled:active,
#history-button-default-enabled:active,
#recent-collection-button:checked,
#history-button:checked,
#history-button-enabled:checked,
#history-button-always-enabled:checked,
#history-button-default-enabled:checked,
#history-button:selected,
#history-button-enabled:selected,
#history-button-always-enabled:selected,
#history-button-default-enabled:selected,
#iop-plugin-ui button:active,
#lib-plugin-ui button:active,
#recent-collection-button:active,
#recent-collection-button:selected
{
  background-color: @button_checked_bg;
  color: @button_checked_fg;
}

/* History currently selected button */
#history-button:active *,
#history-button-enabled:active *,
#history-button-always-enabled:active *,
#history-button-default-enabled:active *,
#history-button:checked *,
#history-button-enabled:checked *,
#history-button-always-enabled:checked *,
#history-button-default-enabled:checked *,
#history-button:selected *,
#history-button-enabled:selected *,
#history-button-always-enabled:selected *,
#history-button-default-enabled:selected *
{
  color: @button_checked_fg;
}

/* Hover states, some needed background only */
button:hover,
#add-color-button:hover,
menuitem:hover,
menuitem:hover arrow,
combobox window *:hover,
radiobutton:hover label,
#control-button:hover,
#history-button:hover,
#history-button-enabled:hover,
#history-button-always-enabled:hover,
#history-button-default-enabled:hover,
#iop-plugin-ui button:hover,
#lib-plugin-ui button:hover,
#iop-plugin-ui #control-button:hover,
#lib-plugin-ui #control-button:hover,
#recent-collection-button:hover,
#view_label:hover,
#view_dropdown menuitem:hover,
#view_dropdown:hover
{
  background-color: @button_hover_bg;
}

 /* and same for color as other needs only color setting */
button:hover,
button:hover cellview,
button:hover image,
button:hover label,
button:checked cellview,
button:checked image,
button:checked label,
dialog row:hover label,
menuitem:hover *,
menuitem:hover menuitem:hover *,
notebook tab:hover label,
#control-button:hover,
#history-button:hover *,
#history-button-enabled:hover *,
#history-button-always-enabled:hover *,
#history-button-default-enabled:hover *,
#recent-collection-button:hover,
#view_label:hover,button:checked image,
#view_dropdown menuitem:hover,
#view_dropdown .combo:hover *
{
  color: @button_hover_fg;
}

/* Set submenus */
menuitem:hover menuitem *
{
    color: @fg_color;
}

/* Last history needed states */
#history-button-enabled *
{
  color: @plugin_fg_color;
  background-color: transparent;
}

#history-button *
{
  color: shade(@plugin_fg_color, 0.7);
  background-color: transparent;
}

/* Disabled buttons */
button:disabled,
#recent-collection-button:disabled
{
  color: @disabled_fg_color;
  background-color: transparent;
}

/* Deactivated switch buttons, make them less visible */
#history-switch:disabled
{
  color: shade(@plugin_label_color, .7);
  background-color: transparent;
}

/* Deprecated/always-on switch are visible */
#history-switch-deprecated:disabled,
#history-switch-always-enabled:disabled,
#history-switch-enabled:disabled,
#history-switch-default-enabled:disabled
{
  color: @plugin_label_color;
}

/* Treeviews and filechoosers states */
treeview check /* set specific background color about check buttons in treeviews like copy/paste dialog window */
{
  background-color: @field_selected_bg;
}

treeview:not(#lutname) *:hover:not(check),
filechooser .sidebar :hover .sidebar-button,  /* set here specific button hover like eject button in filechooser sidebar */
#import_metadata title:hover,
#import_metadata title:hover *,
radiobutton:hover label  /* set hover effect on popover menu from star icon */
{
  background-color: @field_hover_bg;
  color: @field_hover_fg;
}

treeview *:active,
filechooser *:active
{
  background-color: @field_active_bg;
  color: @field_active_fg;
}

treeview *:selected:not(check),
treeview *:checked:not(check),
filechooser *:selected
{
  background-color: @field_selected_bg;
  color: @field_selected_fg;
}

treeview check:selected
{
  background-color: @button_bg;
  border-color: @plugin_bg_color;
}

treeview check:hover
{
  background-color: @bauhaus_bg_hover;
  color: @field_hover_fg;
  border-color: @selected_bg_color;
}

filechooser checkbutton:checked
{
  background-color: transparent;
}

/* Adjust delete folder dialog window */
treeview#delete-dialog,
treeview#delete-dialog:selected
{
  background-color: shade(@bg_color, 0.9);
  color: @field_active_fg;
  padding-left: 1em;
}

/* Views links states in header */
#view_dropdown *:selected,
#view_label:selected
{
  color: @plugin_fg_color;
}

#view_label:disabled
{
  color: @tooltip_bg_color;
}

#view_dropdown *:disabled
{
  color: @disabled_fg_color;
}

/* Sliders states */
#bauhaus-popup:hover,
#bauhaus-combobox:hover,
#bauhaus-slider:hover
{
  color: @bauhaus_fg_hover;
}

#bauhaus-popup:disabled,
#bauhaus-combobox:disabled,
#bauhaus-slider:disabled
{
  color: @bauhaus_fg_disabled;
}

#bauhaus-popup:disabled
{
  color: @plugin_bg;
}

/* Notebooks states */
notebook tab:hover
{
  border-bottom: 2px solid @button_hover_fg;
  color: @button_hover_fg;
  background-color: @button_hover_bg;
}

notebook tab:hover labelnotebook
{
  color: @button_hover_fg;
}

notebook tab:checked
{
  border-bottom: 2px solid @button_checked_fg;
  color: @button_checked_fg;
}

notebook tab:checked label
{
  color: @button_checked_fg;
}

/* Entries states */
entry:hover
{
  color: @field_hover_fg;
  background-color: @field_hover_bg;
}

entry:active
{
  color: @field_active_fg;
  background-color: @field_active_bg;
}

entry:checked
{
  color: @field_selected_fg;
  background-color: @field_selected_bg;
}

entry:selected,
label selection,
textview text selection
{
  color: @field_selected_fg;
  background-color: @field_selected_bg;
}

/* Scrollbars hover state */
scrollbar.horizontal slider:hover,
scrollbar.vertical slider:hover,
#iop-plugin-ui scrollbar slider:hover,
#lib-plugin-ui scrollbar slider:hover,
dialog scrollbar slider:hover,
scale contents trough slider:hover
{
  background-color: @scroll_bar_active;
}


/*** --- Thumbtable css part ---

Hierachy :

  #thumbtable_filemanager / #thumbtable_filmstrip / #thumbtable_zoom (GtkLayout -- main widget which contains all thumbs)
    #thumb_main                                                      (GtkOverlay -- thumbnail widget)
      #thumb_back                                                    (GtkEventBox -- thumbnail background)
      #thumb_ext                                                     (GtkLabel -- thumbnail extension)
      #thumb_image                                                   (GtkDrawingArea -- thumbnail image)
      #thumb_cursor                                                  (GtkDrawingArea -- top triangle to show active images in filmstrip)
      #thumb_bottom                                                  (GtkEventBox -- background of the bottom infos area)
        #thumb_bottom_label                                          (GtkLabel -- text of the bottom infos area, just with .dt_extended_overlay)
      #thumb_reject                                                  (GtkDarktableThumbnailBtn -- Reject icon)
      #thumb_star                                                    (GtkDarktableThumbnailBtn -- Star icon, 5 occurences of this)
      #thumb_colorlabels                                             (GtkDarktableThumbnailBtn -- colorlabels icon, 1 icon with all labels)
      #thumb_localcopy                                               (GtkDarktableThumbnailBtn -- local copy triangle icon)
      #thumb_altered                                                 (GtkDarktableThumbnailBtn -- altered icon)
      #thumb_group                                                   (GtkDarktableThumbnailBtn -- grouping icon)
      #thumb_audio                                                   (GtkDarktableThumbnailBtn -- audio sidecar icon)

Details :

  #thumbtable_filemanager / #thumbtable_filmstrip / #thumbtable_zoom
    class = .dt_thumbtable          present for all thumbtable types
    class = .dt_thumbtable_reorder  if we are dragging images in custom reordering mode
    Classes to determine how are shown overlays on/under the image :
    class = .dt_overlays_none / .dt_overlays_hover / .dt_overlays_hover_extended / .dt_overlays_always / .dt_overlays_always_extended / .dt_overlays_mixed / .dt_overlays_hover_block
    Classes to determine the category of size of the thumbnails (cat sizes limits are defined in dartablerc key=plugins/lighttable/thumbnail_sizes
    class = .dt_thumbnails_?? where ?? is the cat number
  #thumb_main
    state = :selected  if the thumb is in current selection
    state = :active    if the thumb correspond to one of the images worked on (filmstrip)
    state = :hover     if the mouse hover the widget
    class = .dt_group_left / .dt_group_right / .dt_group_top / .dt_group_bottom  if we need to draw group borders arround thumb
  #thumb_image
    only the borders are drawn - background is ignored
  all icons inside the widget
    class = .dt_thumb_btn
    state = :hover : the mouse is hovering the icon
    if color and background-color are transparent, the icon is not drawn and inactive
  #thumb_reject :
    state = :active   if the image is actually rejected
    state = :hover    the mouse is hover the icon (a circle is added around the cross)
  #thumb_star :
    - color is the color of the star outline.
    - background-color is the inner part of the star
    state = :active : the rating of the image is >=
  #thumb_group :
    state = :active : the image is the group leader
***/


/*----------------------------
  - Thumbtable Main Settings -
  ----------------------------*/

/* Background */
.dt_thumbtable,
.dt_culling,
.dt_preview
{
  background-color: @lighttable_bg_color;
}

#thumb_back
{
  background-color: @thumbnail_bg_color;
  border: 1px solid @lighttable_bg_color;
}

#thumb_main:selected #thumb_back
{
  background-color: shade(@thumbnail_selected_bg_color, 1.05);
}

#thumb_main:hover #thumb_back
{
  background-color: @thumbnail_hover_bg_color;
}

/* Set border color around thumbnails */
.dt_group_left #thumb_back
{
  border-left: 2px solid rgb(255, 187, 0);
}
.dt_group_top #thumb_back
{
  border-top: 2px solid rgb(255, 187, 0);
}
.dt_group_right #thumb_back
{
  border-right: 2px solid rgb(255, 187, 0);
}
.dt_group_bottom #thumb_back
{
  border-bottom: 2px solid rgb(255, 187, 0);
}

.dt_thumbtable_reorder #thumb_main:hover #thumb_back
{
  border-left : 4px solid rgb(255, 187, 0);
}

/* Last active images animation */
@keyframes lastactive
{
  0% {border-color: @lighttable_bg_color; border-width : 2px;}
  50% {border-color: @thumbnail_bg50_color; border-width : 4px;}
  100% {border-color: @lighttable_bg_color; border-width : 2px;}
}

.dt_last_active #thumb_back
{
  animation-name: lastactive;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}

/*----------------------------------------
  - Popover overlays menu from star icon -
  ----------------------------------------*/

#overlays_label  /* set title of the popover menu */
{
  font-weight: bold;
  padding: 4px 0;
  margin: 0 5px 5px 5px;
  border-bottom: 1px inset @button_border;
}

radiobutton radio,
radiobutton label
{
  padding: 0.2em;
}

radiobutton radio
{
  padding: 0.25em;
}

spinbutton>button
{
  margin: 2px 1px;
}

#show-tooltip
{
  margin: 4px 0 0 4px;
  border-top: 1px dashed @button_border;
}

  /*** for following settings line, remember which popover mode name and related line on popover menu
  1) .dt_overlays_none
  2) .dt_overlays_hover
  3) .dt_overlays_hover_extended
  4) .dt_overlays_always
  5) .dt_overlays_always_extended
  6) .dt_overlays_mixed
  7) .dt_overlays_hover_block (also to set culling and preview hover block infos)

  These modes will be ordered on next related lines ***/

/*-----------------
  - Image options -
  -----------------*/

#thumb_image
{
  border: none;
  margin: 25px; /* not real pixels, but per thousand of the thumb size */
}

.dt_thumbnails_2 #thumb_image /* update consistently margins if big thumbnails (less images per row) are shown */
{
  margin: 20px;
}

#thumb_ext /* adjust margin to better align to group, audio... icons and match to near all thumbnails sizes */
{
  margin-top: -1px;
}

/* Set top margin on active image in filmstrip */
#thumb_main:active #thumb_back
{
  border-top: 1.5px solid @border_color;
}
/* Set top cursor on active image in filmstrip */
#thumb_cursor
{
  color: transparent;
}
#thumb_main:active #thumb_cursor
{
  color: @border_color;
}

/*---------------
  - Bottom area -
  ---------------*/

#thumb_bottom
{
  border : 1px solid transparent; /* to not overlay thumb borders */
}

/* Set outside margins in thumbnails about bottom infos area */
.dt_group_left #thumb_bottom
{
  border-left-width: 2px;
}
.dt_group_bottom #thumb_bottom
{
  border-bottom-width: 2px;
}
.dt_group_right #thumb_bottom
{
  border-right-width: 2px;
}

/* Set background on thumbnails hover overlays */
.dt_overlays_hover_extended #thumb_main:hover #thumb_bottom,
.dt_overlays_mixed #thumb_main:hover #thumb_bottom,
.dt_overlays_hover #thumb_main:hover #thumb_bottom
{
  background-image: linear-gradient(rgba(198, 198, 198, 0.7) 0%, rgba(198, 198, 198, 0.7) 90%,rgba(198, 198, 198, 0) 100%);  /* rgb color needs to be set to same color as #thumb_back hover background */
}

/* Set background on block infos in last overlay mode and culling/preview modes shown with mouse hover */
.dt_overlays_hover_block #thumb_image:hover #thumb_bottom
{
  background-image: none;
  background-color: rgba(220, 220, 220, 0.8);
}

/* Set text margins in bottom infos area */
#thumb_bottom_label
{
  color: transparent;
}

/*--------------------
  - Thumbnails infos -
  --------------------*/

/* By default, the extension is hidden */
#thumb_ext
{
  color: transparent;
  background-color: transparent;
}

/* Set default color icons, extension name and text infos on thumbnails and block infos */
.dt_thumb_btn,
.dt_overlays_always_extended #thumb_bottom_label,
.dt_overlays_always #thumb_ext,
.dt_overlays_always_extended #thumb_ext,
.dt_overlays_mixed #thumb_ext
{
  color: shade(@thumbnail_font_color, 1.1);
}

/* Reset color icons to be hidden in following modes, including culling/preview overlays hover block*/
.dt_overlays_none .dt_thumb_btn,
.dt_overlays_none #thumb_main:hover .dt_thumb_btn,
.dt_overlays_hover .dt_thumb_btn,
.dt_overlays_hover_extended .dt_thumb_btn,
.dt_overlays_hover_block #thumb_main .dt_thumb_btn
{
  color: transparent;
  background-color: transparent;
}

/* Set hover and selected color icons, extension name and text infos */
.dt_overlays_always #thumb_main:hover #thumb_ext,
.dt_overlays_always #thumb_main:selected #thumb_ext,
.dt_overlays_always_extended #thumb_main:hover #thumb_ext,
.dt_overlays_always_extended #thumb_main:selected #thumb_ext,
.dt_overlays_mixed #thumb_main:hover #thumb_ext,
.dt_overlays_mixed #thumb_main:selected #thumb_ext,
.dt_overlays_hover #thumb_main:hover .dt_thumb_btn,
.dt_overlays_hover_extended #thumb_main:hover .dt_thumb_btn,
.dt_overlays_hover_extended #thumb_main:hover #thumb_bottom_label,
.dt_overlays_always #thumb_main:hover .dt_thumb_btn,
.dt_overlays_always #thumb_main:selected .dt_thumb_btn,
.dt_overlays_always_extended #thumb_main:hover .dt_thumb_btn,
.dt_overlays_always_extended #thumb_main:selected .dt_thumb_btn,
.dt_overlays_always_extended #thumb_main:hover #thumb_bottom_label,
.dt_overlays_always_extended #thumb_main:selected #thumb_bottom_label,
.dt_overlays_mixed #thumb_main:hover .dt_thumb_btn,
.dt_overlays_mixed #thumb_main:selected .dt_thumb_btn,
.dt_overlays_mixed #thumb_main:hover #thumb_bottom_label,
.dt_overlays_hover_block #thumb_image:hover .dt_thumb_btn,
.dt_overlays_hover_block #thumb_image:hover .dt_thumb_btn:active,
.dt_overlays_hover_block #thumb_image:hover #thumb_audio,
.dt_overlays_hover_block #thumb_image:hover #thumb_altered,
.dt_overlays_hover_block #thumb_image:hover #thumb_bottom_label
{
  color: @thumbnail_font_color;
}

/* Set red reject icon when visible */
.dt_overlays_hover #thumb_main:hover #thumb_reject:active,
.dt_overlays_hover_extended #thumb_main:hover #thumb_reject:active,
.dt_overlays_always #thumb_reject:active,
.dt_overlays_always #thumb_main:hover #thumb_reject:active,
.dt_overlays_always #thumb_main:selected #thumb_reject:active,
.dt_overlays_always_extended #thumb_reject:active,
.dt_overlays_always_extended #thumb_main:hover #thumb_reject:active,
.dt_overlays_always_extended #thumb_main:selected #thumb_reject:active,
.dt_overlays_mixed #thumb_reject:active,
.dt_overlays_mixed #thumb_main:hover #thumb_reject:active,
.dt_overlays_mixed #thumb_main:selected #thumb_reject:active,
.dt_overlays_hover_block #thumb_image:hover #thumb_reject:active
{
  color: red;
}

/* Set stars icon when active */
.dt_overlays_hover #thumb_main:hover #thumb_star:active,
.dt_overlays_hover_extended #thumb_main:hover #thumb_star:active,
.dt_overlays_always #thumb_star:active,
.dt_overlays_always_extended #thumb_star:active,
.dt_overlays_mixed #thumb_star:active,
.dt_overlays_hover_block #thumb_image:hover #thumb_star:active
{
  color: @thumbnail_selected_bg_color;
  background-color: @thumbnail_font_color;
}

/* Set stars icon hover effect */
.dt_overlays_hover #thumb_main:hover #thumb_star:hover,
.dt_overlays_hover_extended #thumb_main:hover #thumb_star:hover,
.dt_overlays_always #thumb_main:hover #thumb_star:hover,
.dt_overlays_always_extended #thumb_main:hover #thumb_star:hover,
.dt_overlays_mixed #thumb_main:hover #thumb_star:hover,
.dt_overlays_hover_block #thumb_main:hover #thumb_star:hover
{
  color: @thumbnail_hover_fg_color;
  background-color: @thumbnail_star_bg_color;
}

/* Set hover group and audio effect */
.dt_overlays_always #thumb_main:hover #thumb_group:hover,
.dt_overlays_always #thumb_main:hover #thumb_audio:hover,
.dt_overlays_always_extended #thumb_main:hover #thumb_group:hover,
.dt_overlays_always_extended #thumb_main:hover #thumb_audio:hover,
.dt_overlays_mixed #thumb_main:hover #thumb_group:hover,
.dt_overlays_mixed #thumb_main:hover #thumb_audio:hover,
.dt_overlays_hover_block #thumb_main:hover #thumb_group:hover,
.dt_overlays_hover_block #thumb_main:hover #thumb_audio:hover
{
  color: @thumbnail_fg_color;
}

/* Set local copy mark */
#thumb_localcopy
{
  border-top : 1px solid @lighttable_bg_color;
  border-right : 1px solid @lighttable_bg_color;
}

.dt_group_right #thumb_localcopy
{
  border-right: 2px solid rgb(255, 187, 0); /* to not overlay thumb borders */
}
.dt_group_top #thumb_localcopy
{
  border-top: 2px solid rgb(255, 187, 0); /* to not overlay thumb borders */
}

#thumb_image:hover #thumb_localcopy,
.dt_overlays_hover_block #thumb_image:hover #thumb_localcopy,
.dt_overlays_always #thumb_localcopy,
.dt_overlays_always_extended #thumb_localcopy,
.dt_overlays_mixed #thumb_localcopy
{
  color: @thumbnail_localcopy_color;
  background-color: @thumbnail_localcopy_color;
}

/*---------------------------------------------------------
  - Hide icons on all lighttable modes and duplicate ones -
  ---------------------------------------------------------*/

.dt_overlays_hover #thumb_main:hover #thumb_group,
.dt_overlays_hover #thumb_main:hover #thumb_altered,
.dt_overlays_hover #thumb_main:hover #thumb_audio,
.dt_overlays_hover_extended #thumb_main:hover #thumb_group,
.dt_overlays_hover_extended #thumb_main:hover #thumb_altered,
.dt_overlays_hover_extended #thumb_main:hover #thumb_audio,
.dt_culling #thumb_ext,
.dt_culling #thumb_main:selected #thumb_ext,
.dt_culling #thumb_main:hover #thumb_ext,
.dt_overlays_always#culling #thumb_altered,
.dt_overlays_always#culling #thumb_audio,
.dt_overlays_always#culling #thumb_group,
.dt_overlays_always_extended#culling #thumb_altered,
.dt_overlays_always_extended#culling #thumb_audio,
.dt_overlays_always_extended#culling #thumb_group,
.dt_preview #thumb_ext,
.dt_preview #thumb_main:selected #thumb_ext,
.dt_preview #thumb_main:hover #thumb_ext,
.dt_overlays_always#preview #thumb_altered,
.dt_overlays_always#preview #thumb_audio,
.dt_overlays_always#preview #thumb_group,
.dt_overlays_always_extended#preview #thumb_altered,
.dt_overlays_always_extended#preview #thumb_audio,
.dt_overlays_always_extended#preview #thumb_group,
.duplicate-ui #thumb_main:hover #thumb_group,
.duplicate-ui #thumb_main:hover #thumb_altered,
.duplicate-ui #thumb_main:hover #thumb_audio,
.duplicate-ui #thumb_altered,
.duplicate-ui #thumb_audio,
.duplicate-ui #thumb_group
{
  color: transparent;
}

.dt_overlays_always#preview #thumb_bottom > *
{
  padding-top: 3px;
}

/* Padding of overlays block hover on thumbnail overlay mode */
.dt_overlays_hover_block #thumb_image:hover #thumb_bottom_label
{
  padding-left: 4px;
  padding-right: 4px;
}

/*-----------------------------
  - Culling and preview modes -
  -----------------------------*/

/* Hide not wanted things on these modes: ext name and thumb_main border */
.dt_culling #thumb_back,
.dt_culling #thumb_main:selected #thumb_back,
.dt_culling #thumb_main:hover #thumb_back,
.dt_culling #thumb_main:active #thumb_back,
.dt_preview #thumb_back,
.dt_preview #thumb_main:selected #thumb_back,
.dt_preview #thumb_main:hover #thumb_back,
.dt_preview #thumb_main:active #thumb_back
{
  background-color: transparent;
  border: none;
}

/* Set image borders */
.dt_preview #thumb_image
{
  margin : 10px;
}
.dt_culling #thumb_main:selected #thumb_image,
.dt_preview #thumb_main:selected #thumb_image
{
  border: 2px solid @plugin_bg_color;
}

.dt_culling #thumb_main:hover #thumb_image,
.dt_preview #thumb_main:hover #thumb_image
{
  border: 2px solid @thumbnail_hover_bg_color;
}

/* Set how bottom infos are rendered on always and always extended overlays modes in culling and preview modes */
.dt_overlays_always#culling #thumb_bottom,
.dt_overlays_always_extended#culling #thumb_bottom,
.dt_overlays_always#preview #thumb_bottom,
.dt_overlays_always_extended#preview #thumb_bottom
{
  border-radius: 3px;
  border-top: 1px solid @lighttable_bg_color;
  background-image: linear-gradient(rgba(171, 171, 171, 0.2) 0%, rgba(171, 171, 171, 0.1) 5%, rgba(171, 171, 171, 0) 100%);
}

.dt_overlays_always#culling #thumb_main:hover #thumb_bottom,
.dt_overlays_always_extended#culling #thumb_main:hover #thumb_bottom,
.dt_overlays_always#preview #thumb_main:hover #thumb_bottom,
.dt_overlays_always_extended#preview #thumb_main:hover #thumb_bottom
{
  background-image: linear-gradient(rgba(191, 191, 191, 0.4) 0%, rgba(191, 191, 191, 0.2) 5%, rgba(171, 171, 171, 0) 100%);
}

/* Set zoom info */
#thumb_zoom_label
{
  color: transparent;
  background-color: transparent;
  border-radius: 4px;
  padding: 1px 6px;
}

/* Set where overlays block infos start on the image */
.dt_overlays_hover_block #thumb_bottom
{
  margin-top: 30px;  /* not real pixels, but per thousand of the image size */
  margin-left: 0px;  /* not real pixels, but per thousand of the image size */
}

/* Set background color of overlays block infos */
.dt_overlays_hover_block #thumb_image:hover #thumb_zoom_label
{
  color: @bauhaus_fg_hover;
  background-color: rgba(20, 20, 20, 0.5);
}
